@onsvisual/svelte-components 0.0.22 → 0.0.24

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/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" | "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" | "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";
+    id?: string;
+    cls?: string;
     width?: "narrow" | "medium" | "wide" | "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";
+        id?: string;
+        cls?: string;
         width?: "narrow" | "medium" | "wide" | "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";
     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";
         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";
     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";
         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/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,6 +3,8 @@
 /** @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";
     marginTop?: boolean;
@@ -10,7 +12,6 @@ export default class Section extends SvelteComponentTyped<{
     themeOverrides?: any;
     title?: string;
     hideTitle?: boolean;
-    id?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -24,6 +25,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         theme?: "light" | "dark" | "lightblue";
+        id?: string;
+        cls?: string;
         background?: string;
         width?: "narrow" | "medium" | "wide" | "full";
         marginTop?: boolean;
@@ -31,7 +34,6 @@ declare const __propDef: {
         themeOverrides?: object;
         title?: string;
         hideTitle?: boolean;
-        id?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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,6 +3,8 @@
 /** @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";
     height?: "full" | "auto" | "tall";
@@ -22,6 +24,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         theme?: "light" | "dark" | "lightblue";
+        id?: string;
+        cls?: string;
         background?: string;
         width?: "narrow" | "medium" | "wide" | "full";
         height?: "auto" | "tall" | "full";

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/index.js

@@ -10,6 +10,8 @@ export { default as AnalyticsBanner } from "./layout/AnalyticsBanner/AnalyticsBa
 export { analyticsEvent } from "./layout/AnalyticsBanner/AnalyticsBanner.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/layout/Cards/Card.svelte

@@ -0,0 +1,85 @@
+<script>
+  import { getContext } from "svelte";
+  import { slugify } from "../../js/utils";
+
+  export let title = "Card title";
+  export let id = slugify(title);
+  export let hideTitle = false;
+  export let image = "";
+  export let imageAlt = "";
+  export let href = "";
+
+  export let colspan = 1; // 1, 2 or 3
+  export let noBackground = getContext("noBackground") || false;
+  export let grow = false;
+
+  const cols = getContext("cols");
+</script>
+
+<div
+  class="{!noBackground ? 'tile tile__content' : ''}"
+  style:grid-column="span {grow && $cols < 3
+    ? $cols
+    : colspan == 1
+    ? 1
+    : colspan > $cols
+    ? $cols
+    : colspan}"
+  style:grid-column-end="{grow ? $cols + 1 : null}"
+>
+  <div id="{id}" class="ons-card" aria-describedBy="{id}_text">
+    {#if href && title && !hideTitle}
+      <a href="{href}" class="ons-card__link ons-u-db">
+        {#if image}
+          <img
+            class="ons-card__image ons-u-mb-s"
+            style:width="100%"
+            src="{image}"
+            alt="{imageAlt}"
+            loading="lazy"
+          />
+        {/if}
+        <h3
+          class="ons-card__title ons-u-fs-m"
+          style:padding="{!noBackground && !image ? "12px 16px 0" : !noBackground ? "0 16px" : ""}"
+        >
+          {title}
+        </h3>
+      </a>
+    {:else if title && !hideTitle}
+      <h3
+        class="ons-card__title ons-u-fs-m"
+        style:padding="{!noBackground ? "8px 16px 0" : ""}"
+        style:margin-bottom="5px"
+      >
+        {title}
+      </h3>
+    {/if}
+    <div id="{id}_text" class:tile__body="{!noBackground}">
+      <slot />
+    </div>
+  </div>
+</div>
+
+<style>
+  .tile {
+    position: relative;
+    z-index: 0;
+    overflow: hidden;
+    box-shadow: 0 2px var(--muted, #4140424d);
+  }
+  .tile::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    background-color: var(--hinted, hsl(240, 5%, 96%));
+    filter: contrast(calc(1 / 4)) brightness(1.6);
+  }
+  .tile__body {
+    padding: 0 16px 16px;
+  }
+  .ons-card__image {
+    margin-bottom: 12px !important;
+  }</style>

package/dist/layout/Cards/Cards.svelte

@@ -0,0 +1,95 @@
+<script>
+  import { setContext } from "svelte";
+  import Grid from "../Grid/Grid.svelte";
+
+  /**
+   * (Optional) Sets the unique ID of the section
+   * @type {string}
+   */
+  export let id = null;
+  /**
+   * (Optional) Sets a css class for the component
+   * @type {string}
+   */
+  export let cls = "ons-cards";
+  /**
+   * Sets the width of the section
+   * @type {"narrow"|"medium"|"wide"|"full"}
+   */
+  export let width = "medium";
+  /**
+   * Sets the title of the section
+   * @type {string}
+   */
+  export let title = "";
+  /**
+   * Allows the h2 title tag for the section to be visually hidden
+   * @type {boolean}
+   */
+  export let hideTitle = 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;
+  /**
+   * Optional margin above section
+   * @type {boolean}
+   */
+  export let marginTop = false;
+  /**
+   * Optional margin below section
+   * @type {boolean}
+   */
+  export let marginBottom = true;
+  /**
+   * Sets the width of the section
+   * @type {"narrow"|"medium"|"wide"|"full"}
+   */
+  export let colwidth = "medium"; // narrow | medium | wide | full
+  /**
+   * Set the minimum height of a grid row (can be a number in pixels, or a valid CSS height, like "100vh")
+   * @type {number|string}
+   */
+  export let height = 200; // pixel height or "full" for 100vh
+  /**
+   * Removes the backgroup on the cards
+   * @type {boolean}
+   */
+  export let noBackground = false;
+  /**
+   * Set the gap between cards, in pixels
+   * @type {number}
+   */
+  export let gap = noBackground ? 36 : 16;
+
+  setContext("noBackground", noBackground);
+</script>
+
+<Grid
+  id="{id}"
+  cls="{cls}"
+  width="{width}"
+  height="{height}"
+  title="{title}"
+  hideTitle="{hideTitle}"
+  theme="{theme}"
+  themeOverrides="{themeOverrides}"
+  marginTop="{marginTop}"
+  marginBottom="{marginBottom}"
+  colwidth="{colwidth}"
+  gap="{gap}"
+>
+  <slot />
+</Grid>
+
+<style>
+  :global(.ons-cards h2.section-title) {
+    font-weight: normal;
+    margin-bottom: 12px;
+  }</style>

package/dist/layout/Grid/Grid.svelte

@@ -6,11 +6,26 @@
    * @type {string}
    */
   export let id = null;
+  /**
+   * (Optional) Sets a css class for the component
+   * @type {string}
+   */
+  export let cls = null;
   /**
    * Sets the width of the section
    * @type {"narrow"|"medium"|"wide"|"full"}
    */
   export let width = "medium";
+  /**
+   * Sets the title of the section
+   * @type {string}
+   */
+  export let title = "";
+  /**
+   * Allows the h2 title tag for the section to be visually hidden
+   * @type {boolean}
+   */
+  export let hideTitle = false;
   /**
    * Sets a predefined theme
    * @type {"light"|"dark"|"lightblue"}
@@ -57,8 +72,10 @@
   let gridGap = !Number.isNaN(gap) ? gap + "px" : gap;
 </script>
 
-<figure id="{id}" aria-label="{caption}">
+<figure aria-label="{caption}">
   <Container
+    id="{id}"
+    cls="{cls}"
     theme="{theme}"
     themeOverrides="{themeOverrides}"
     width="{width}"
@@ -66,6 +83,9 @@
     marginTop="{marginTop}"
     marginBottom="{!caption ? marginBottom : false}"
   >
+    {#if title}
+      <h2 class="section-title" class:ons-u-vh="{hideTitle}">{title}</h2>
+    {/if}
     <div class="grid {gridClass}" style:grid-gap="{gridGap}" style:min-height="{rowHeight}">
       <slot />
     </div>
@@ -73,6 +93,7 @@
   {#if caption}
     <figcaption>
       <Container
+        cls="{cls}"
         theme="{theme}"
         themeOverrides="{themeOverrides}"
         width="narrow"
@@ -98,10 +119,10 @@
     margin: 0;
   }
   .grid-narrow {
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
   }
   .grid-medium {
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
+    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)) !important;
   }
   .grid-wide {
     grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)) !important;

package/dist/layout/Hero/Hero.svelte

@@ -7,6 +7,11 @@
    * @type {string}
    */
   export let id = null;
+  /**
+   * (Optional) Sets a css class for the section
+   * @type {string}
+   */
+  export let cls = null;
   /**
    * Sets the width of the section
    * @type {"narrow"|"medium"|"wide"|"full"}
@@ -50,13 +55,15 @@
 </script>
 
 <Container
+  id="{id}"
+  cls="{cls}"
   theme="{theme}"
   themeOverrides="{themeOverrides}"
   width="{width}"
   background="{background}"
   height="{height}"
 >
-  <div id="{id}" class="ons-hero__details ons-grid__col ons-col-8@m ons-col-10@s@m">
+  <div class="ons-hero__details ons-grid__col ons-col-8@m ons-col-10@s@m">
     {#if title}
       <header>
         <h1 class="ons-hero__title ons-u-fs-xxxl">{title}</h1>

package/dist/layout/Section/Section.svelte

@@ -7,6 +7,11 @@
    * @type {string}
    */
   export let id = null;
+  /**
+   * (Optional) Sets a css class for the section
+   * @type {string}
+   */
+  export let cls = null;
   /**
    * Sets the width of the container
    * @type {"narrow"|"medium"|"wide"|"full"}
@@ -50,6 +55,8 @@
 </script>
 
 <Container
+  id="{id ? id : slugify(title)}"
+  cls="{cls}"
   theme="{theme}"
   themeOverrides="{themeOverrides}"
   width="{width}"
@@ -57,7 +64,7 @@
   marginBottom="{marginBottom}"
   background="{background}"
 >
-  <section id="{id ? id : slugify(title)}" aria-label="{title}" class="ons-feature__section">
+  <section aria-label="{title}" class="ons-feature__section">
     {#if title}
       <h2 class="section-title" class:ons-u-vh="{hideTitle}">{title}</h2>
     {/if}

package/dist/wrappers/Container/Container.svelte

@@ -1,6 +1,16 @@
 <script>
   import Theme from "../Theme/Theme.svelte";
 
+  /**
+   * (Optional) Sets the unique ID of the container
+   * @type {string}
+   */
+  export let id = null;
+  /**
+   * (Optional) Sets a css class for the container
+   * @type {string}
+   */
+  export let cls = null;
   /**
    * Sets the width of the container
    * @type {"narrow"|"medium"|"wide"|"full"}
@@ -36,12 +46,22 @@
    * @type {string}
    */
   export let background = null;
+
+  $: _id = id && !(theme || background) ? id : null;
+  $: _cls = cls && !(theme || background) ? cls : "";
 </script>
 
 {#if width === "narrow"}
-  <Theme theme="{theme}" background="{background}" overrides="{themeOverrides}">
+  <Theme
+    id="{id}"
+    cls="{cls}"
+    theme="{theme}"
+    background="{background}"
+    overrides="{themeOverrides}"
+  >
     <div
-      class="ons-page__container ons-container"
+      id="{_id}"
+      class="ons-page__container ons-container {_cls}"
       class:ons-page__container--tall-height="{height === 'tall'}"
       class:ons-page__container--full-height="{height === 'full'}"
     >
@@ -53,9 +73,16 @@
     </div>
   </Theme>
 {:else}
-  <Theme theme="{theme}" background="{background}" overrides="{themeOverrides}">
+  <Theme
+    id="{id}"
+    cls="{cls}"
+    theme="{theme}"
+    background="{background}"
+    overrides="{themeOverrides}"
+  >
     <div
-      class="ons-page__container ons-container"
+      id="{_id}"
+      class="ons-page__container ons-container {_cls}"
       class:ons-page__container--wide="{width === 'wide'}"
       class:ons-page__container--full="{width === 'full'}"
       class:ons-page__container--tall-height="{height === 'tall'}"

package/dist/wrappers/Embed/Embed.svelte

@@ -9,7 +9,14 @@
   export let pymChild = null;
 
   onMount(() => {
-    pymChild = new pym.Child({ polling: 1000 });
+    pymChild = new pym.Child();
+
+    setInterval(() => {
+      pymChild.sendMessage(
+        "height",
+        Math.max(document.body.scrollHeight, document.body.offsetHeight)
+      );
+    }, 1000);
   });
 </script>
 

package/dist/wrappers/Theme/Theme.svelte

@@ -1,8 +1,17 @@
 <script>
   import { setContext, getContext } from "svelte";
-  import { writable } from "svelte/store";
   import themes from "./themes.js";
 
+  /**
+   * (Optional) Sets the unique ID of the container
+   * @type {string}
+   */
+  export let id = null;
+  /**
+   * (Optional) Sets a css class for the container
+   * @type {string}
+   */
+  export let cls = null;
   /**
    * Sets the body background to match this theme (only use this at the top level)
    * @type {boolean}
@@ -54,7 +63,7 @@
 </svelte:head>
 
 {#if style}
-  <div class="theme-wrapper" style="{style}">
+  <div id="{id}" class="{cls ? `theme-wrapper ${cls}` : 'theme-wrapper'}" style="{style}">
     <slot />
   </div>
 {:else}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",
@@ -143,6 +143,8 @@
     "./layout/AnalyticsBanner/AnalyticsBanner.svelte": "./dist/layout/AnalyticsBanner/AnalyticsBanner.svelte",
     "./layout/Backlink/Backlink.svelte": "./dist/layout/Backlink/Backlink.svelte",
     "./layout/Breadcrumb/Breadcrumb.svelte": "./dist/layout/Breadcrumb/Breadcrumb.svelte",
+    "./layout/Cards/Card.svelte": "./dist/layout/Cards/Card.svelte",
+    "./layout/Cards/Cards.svelte": "./dist/layout/Cards/Cards.svelte",
     "./layout/Contents/Contents.svelte": "./dist/layout/Contents/Contents.svelte",
     "./layout/ErrorPage/ErrorPage.svelte": "./dist/layout/ErrorPage/ErrorPage.svelte",
     "./layout/Footer/Footer.svelte": "./dist/layout/Footer/Footer.svelte",