@abgov/react-components 4.0.0-alpha.70 → 4.0.0-alpha.71

package/lib/modal/modal.d.ts

@@ -1,4 +1,5 @@
 import React, { FC } from 'react';
+export declare type ModalTransition = "fast" | "slow" | "none";
 interface WCProps {
     ref: React.RefObject<HTMLElement>;
     heading?: string;
@@ -6,7 +7,7 @@ interface WCProps {
     width?: string;
     closable?: boolean;
     scrollable?: boolean;
-    transition?: "fast" | "slow" | "none";
+    transition?: ModalTransition;
 }
 declare global {
     namespace JSX {
@@ -20,7 +21,7 @@ interface Props {
     width?: string;
     actions?: React.ReactElement;
     onClose?: () => void;
-    transition?: "fast" | "slow" | "none";
+    transition?: ModalTransition;
     children?: React.ReactNode;
     open?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "4.0.0-alpha.70",
+  "version": "4.0.0-alpha.71",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/react-components.esm.js

@@ -126,6 +126,7 @@ function append_empty_stylesheet(node) {
 
 function append_stylesheet(node, style) {
   append(node.head || node, style);
+  return style.sheet;
 }
 
 function insert(target, node, anchor) {
@@ -289,13 +290,10 @@ function clear_rules() {
     if (active) return;
     managed_styles.forEach(info => {
       const {
-        stylesheet
-      } = info;
-      let i = stylesheet.cssRules.length;
+        ownerNode
+      } = info.stylesheet; // there is no ownerNode if it runs on jsdom.
 
-      while (i--) stylesheet.deleteRule(i);
-
-      info.rules = {};
+      if (ownerNode) detach(ownerNode);
     });
     managed_styles.clear();
   });
@@ -311,10 +309,29 @@ function get_current_component() {
   if (!current_component) throw new Error('Function called outside component initialization');
   return current_component;
 }
+/**
+ * The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM.
+ * It must be called during the component's initialisation (but doesn't need to live *inside* the component;
+ * it can be called from an external module).
+ *
+ * `onMount` does not run inside a [server-side component](/docs#run-time-server-side-component-api).
+ *
+ * https://svelte.dev/docs#run-time-svelte-onmount
+ */
+
 
 function onMount(fn) {
   get_current_component().$$.on_mount.push(fn);
 }
+/**
+ * Schedules a callback to run immediately before the component is unmounted.
+ *
+ * Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the
+ * only one that runs inside a server-side component.
+ *
+ * https://svelte.dev/docs#run-time-svelte-ondestroy
+ */
+
 
 function onDestroy(fn) {
   get_current_component().$$.on_destroy.push(fn);
@@ -837,8 +854,6 @@ function create_component(block) {
 function mount_component(component, target, anchor, customElement) {
   const {
     fragment,
-    on_mount,
-    on_destroy,
     after_update
   } = component.$$;
   fragment && fragment.m(target, anchor);
@@ -846,10 +861,12 @@ function mount_component(component, target, anchor, customElement) {
   if (!customElement) {
     // onMount happens before the initial afterUpdate
     add_render_callback(() => {
-      const new_on_destroy = on_mount.map(run).filter(is_function);
+      const new_on_destroy = component.$$.on_mount.map(run).filter(is_function); // if the component was destroyed immediately
+      // it will update the `$$.on_destroy` reference to `null`.
+      // the destructured on_destroy may still reference to the old array
 
-      if (on_destroy) {
-        on_destroy.push(...new_on_destroy);
+      if (component.$$.on_destroy) {
+        component.$$.on_destroy.push(...new_on_destroy);
       } else {
         // Edge case - component was destroyed immediately,
         // most likely as a result of a binding initialising
@@ -891,7 +908,7 @@ function init(component, options, instance, create_fragment, not_equal, props, a
   set_current_component(component);
   const $$ = component.$$ = {
     fragment: null,
-    ctx: null,
+    ctx: [],
     // state
     props,
     update: noop,
@@ -985,6 +1002,10 @@ if (typeof HTMLElement === 'function') {
 
     $on(type, callback) {
       // TODO should this delegate to addEventListener?
+      if (!is_function(callback)) {
+        return noop;
+      }
+
       const callbacks = this.$$.callbacks[type] || (this.$$.callbacks[type] = []);
       callbacks.push(callback);
       return () => {
@@ -1003,7 +1024,7 @@ if (typeof HTMLElement === 'function') {
 
   };
 }
-/* libs/web-components/src/components/app-header/AppHeader.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/app-header/AppHeader.svelte generated by Svelte v3.51.0 */
 
 
 function create_else_block$4(ctx) {
@@ -1332,7 +1353,7 @@ function toBoolean(value) {
 function fromBoolean(value) {
   return value ? "true" : "false";
 }
-/* libs/web-components/src/components/badge/Badge.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/badge/Badge.svelte generated by Svelte v3.51.0 */
 
 
 function create_else_block$3(ctx) {
@@ -1667,7 +1688,7 @@ class Badge extends SvelteElement {
 }
 
 customElements.define("goa-badge", Badge);
-/* libs/web-components/src/components/button-group/ButtonGroup.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/button-group/ButtonGroup.svelte generated by Svelte v3.51.0 */
 
 function create_fragment$D(ctx) {
   let div;
@@ -1737,7 +1758,7 @@ function instance$y($$self, $$props, $$invalidate) {
 class ButtonGroup extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}div{display:flex;flex-direction:row;justify-content:var(--alignment);flex-wrap:wrap;gap:var(--gap-size)}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}div{display:flex;flex-direction:row;justify-content:var(--alignment);flex-wrap:wrap;gap:var(--gap-size);padding:3px 0}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -1788,7 +1809,7 @@ class ButtonGroup extends SvelteElement {
 }
 
 customElements.define("goa-button-group", ButtonGroup);
-/* libs/web-components/src/components/button/Button.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/button/Button.svelte generated by Svelte v3.51.0 */
 
 function create_else_block$2(ctx) {
   let t0;
@@ -2316,7 +2337,7 @@ class Button extends SvelteElement {
 }
 
 customElements.define("goa-button", Button);
-/* libs/web-components/src/components/callout/Callout.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/callout/Callout.svelte generated by Svelte v3.51.0 */
 
 function create_if_block$g(ctx) {
   let h3;
@@ -2555,7 +2576,7 @@ class Callout extends SvelteElement {
 }
 
 customElements.define("goa-callout", Callout);
-/* libs/web-components/src/components/card-actions/CardActions.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/card-actions/CardActions.svelte generated by Svelte v3.51.0 */
 
 function create_fragment$A(ctx) {
   let goa_card_content;
@@ -2600,7 +2621,7 @@ class CardActions extends SvelteElement {
 }
 
 customElements.define("goa-card-actions", CardActions);
-/* libs/web-components/src/components/card-content/CardContent.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/card-content/CardContent.svelte generated by Svelte v3.51.0 */
 
 function create_fragment$z(ctx) {
   let div;
@@ -2647,7 +2668,7 @@ class CardContent extends SvelteElement {
 }
 
 customElements.define("goa-card-content", CardContent);
-/* libs/web-components/src/components/card-group/CardGroup.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/card-group/CardGroup.svelte generated by Svelte v3.51.0 */
 
 function create_fragment$y(ctx) {
   let div;
@@ -2694,7 +2715,7 @@ class CardGroup extends SvelteElement {
 }
 
 customElements.define("goa-card-group", CardGroup);
-/* libs/web-components/src/components/card-image/CardImage.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/card-image/CardImage.svelte generated by Svelte v3.51.0 */
 
 function create_fragment$x(ctx) {
   let div;
@@ -2815,7 +2836,7 @@ class CardImage extends SvelteElement {
 }
 
 customElements.define("goa-card-image", CardImage);
-/* libs/web-components/src/components/card/Card.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/card/Card.svelte generated by Svelte v3.51.0 */
 
 function create_fragment$w(ctx) {
   let div;
@@ -2963,7 +2984,7 @@ class Card extends SvelteElement {
 }
 
 customElements.define("goa-card", Card);
-/* libs/web-components/src/components/checkbox/Checkbox.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/checkbox/Checkbox.svelte generated by Svelte v3.51.0 */
 
 function create_if_block_1$9(ctx) {
   let svg;
@@ -3423,7 +3444,7 @@ class Checkbox extends SvelteElement {
 }
 
 customElements.define("goa-checkbox", Checkbox);
-/* libs/web-components/src/components/chip/Chip.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/chip/Chip.svelte generated by Svelte v3.51.0 */
 
 function create_if_block_1$8(ctx) {
   let goa_icon;
@@ -3938,7 +3959,7 @@ function noscroll(_node, opts) {
 
   };
 }
-/* libs/web-components/src/components/circular-progress/CircularProgress.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/circular-progress/CircularProgress.svelte generated by Svelte v3.51.0 */
 
 
 function create_if_block$d(ctx) {
@@ -4207,7 +4228,7 @@ function create_if_block_1$7(ctx) {
         if_block = null;
       }
 
-      if (dirty &
+      if (!current || dirty &
       /*fullscreen*/
       8) {
         toggle_class(div, "fullscreen",
@@ -4512,7 +4533,7 @@ class CircularProgress extends SvelteElement {
 }
 
 customElements.define("goa-circular-progress", CircularProgress);
-/* libs/web-components/src/components/container/Container.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/container/Container.svelte generated by Svelte v3.51.0 */
 
 function create_fragment$s(ctx) {
   let div3;
@@ -4791,7 +4812,7 @@ function deleteContext(name) {
 }
 
 const BIND$1 = "bind";
-/* libs/web-components/src/components/dropdown/Dropdown.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/dropdown/Dropdown.svelte generated by Svelte v3.51.0 */
 
 function get_each_context$4(ctx, list, i) {
   const child_ctx = ctx.slice();
@@ -5766,7 +5787,7 @@ class Dropdown extends SvelteElement {
 }
 
 customElements.define("goa-dropdown", Dropdown);
-/* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.51.0 */
 
 function create_fragment$q(ctx) {
   return {
@@ -5888,7 +5909,7 @@ class DropdownItem extends SvelteElement {
 }
 
 customElements.define("goa-dropdown-item", DropdownItem);
-/* libs/web-components/src/components/flex-column/FlexColumn.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/flex-column/FlexColumn.svelte generated by Svelte v3.51.0 */
 
 function create_fragment$p(ctx) {
   let div;
@@ -5993,7 +6014,7 @@ class FlexColumn extends SvelteElement {
 }
 
 customElements.define("goa-flex-col", FlexColumn);
-/* libs/web-components/src/components/flex-row/FlexRow.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/flex-row/FlexRow.svelte generated by Svelte v3.51.0 */
 
 function create_fragment$o(ctx) {
   let div;
@@ -6098,7 +6119,7 @@ class FlexRow extends SvelteElement {
 }
 
 customElements.define("goa-flex-row", FlexRow);
-/* libs/web-components/src/components/focus-trap/FocusTrap.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/focus-trap/FocusTrap.svelte generated by Svelte v3.51.0 */
 
 function create_fragment$n(ctx) {
   let div;
@@ -6109,6 +6130,7 @@ function create_fragment$n(ctx) {
   
   <span tabindex="0"></span>`;
       this.c = noop;
+      attr(div, "id", "root");
     },
 
     m(target, anchor) {
@@ -6318,6 +6340,7 @@ function instance$l($$self, $$props, $$invalidate) {
 class FocusTrap extends SvelteElement {
   constructor(options) {
     super();
+    this.shadowRoot.innerHTML = `<style>#root{display:inline}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -6356,7 +6379,7 @@ class FocusTrap extends SvelteElement {
 }
 
 customElements.define("goa-focus-trap", FocusTrap);
-/* libs/web-components/src/components/footer-meta-section/FooterMetaSection.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/footer-meta-section/FooterMetaSection.svelte generated by Svelte v3.51.0 */
 
 function get_each_context$3(ctx, list, i) {
   const child_ctx = ctx.slice();
@@ -6547,7 +6570,7 @@ class FooterMetaSection extends SvelteElement {
 }
 
 customElements.define("goa-app-footer-meta-section", FooterMetaSection);
-/* libs/web-components/src/components/footer-nav-section/FooterNavSection.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/footer-nav-section/FooterNavSection.svelte generated by Svelte v3.51.0 */
 
 function get_each_context$2(ctx, list, i) {
   const child_ctx = ctx.slice();
@@ -6895,7 +6918,7 @@ class FooterNavSection extends SvelteElement {
 }
 
 customElements.define("goa-app-footer-nav-section", FooterNavSection);
-/* libs/web-components/src/components/footer/Footer.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/footer/Footer.svelte generated by Svelte v3.51.0 */
 
 function create_if_block$a(ctx) {
   let goa_divider;
@@ -7129,7 +7152,7 @@ class Footer extends SvelteElement {
 }
 
 customElements.define("goa-app-footer", Footer);
-/* libs/web-components/src/components/form-item/FormItem.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/form-item/FormItem.svelte generated by Svelte v3.51.0 */
 
 function create_if_block_2$5(ctx) {
   let div;
@@ -7484,7 +7507,7 @@ class FormItem extends SvelteElement {
 }
 
 customElements.define("goa-form-item", FormItem);
-/* libs/web-components/src/components/hero-banner/HeroBanner.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/hero-banner/HeroBanner.svelte generated by Svelte v3.51.0 */
 
 function create_fragment$i(ctx) {
   let div1;
@@ -7630,7 +7653,7 @@ class HeroBanner extends SvelteElement {
 }
 
 customElements.define("goa-hero-banner", HeroBanner);
-/* libs/web-components/src/components/icon-button/IconButton.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/icon-button/IconButton.svelte generated by Svelte v3.51.0 */
 
 function create_fragment$h(ctx) {
   let button;
@@ -7990,7 +8013,7 @@ class IconButton extends SvelteElement {
 }
 
 customElements.define("goa-icon-button", IconButton);
-/* libs/web-components/src/components/icon/Icon.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/icon/Icon.svelte generated by Svelte v3.51.0 */
 
 function create_if_block$8(ctx) {
   let ion_icon;
@@ -8342,7 +8365,7 @@ class Icon extends SvelteElement {
 }
 
 customElements.define("goa-icon", Icon);
-/* libs/web-components/src/components/input/Input.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/input/Input.svelte generated by Svelte v3.51.0 */
 
 function create_if_block_7(ctx) {
   let div;
@@ -9597,7 +9620,7 @@ class Input extends SvelteElement {
 }
 
 customElements.define("goa-input", Input);
-/* libs/web-components/src/components/microsite-header/MicrositeHeader.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/microsite-header/MicrositeHeader.svelte generated by Svelte v3.51.0 */
 
 function create_if_block_3$1(ctx) {
   let div0;
@@ -9989,7 +10012,7 @@ class MicrositeHeader extends SvelteElement {
 }
 
 customElements.define("goa-microsite-header", MicrositeHeader);
-/* libs/web-components/src/components/modal/Modal.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/modal/Modal.svelte generated by Svelte v3.51.0 */
 
 function create_if_block$5(ctx) {
   let goa_focus_trap;
@@ -10225,7 +10248,7 @@ function create_if_block$5(ctx) {
     }
 
   };
-} // (55:8) {#if heading}
+} // (54:8) {#if heading}
 
 
 function create_if_block_3(ctx) {
@@ -10259,7 +10282,7 @@ function create_if_block_3(ctx) {
     }
 
   };
-} // (58:8) {#if isClosable}
+} // (57:8) {#if isClosable}
 
 
 function create_if_block_2$2(ctx) {
@@ -10297,7 +10320,7 @@ function create_if_block_2$2(ctx) {
     }
 
   };
-} // (72:10) {:else}
+} // (71:10) {:else}
 
 
 function create_else_block$1(ctx) {
@@ -10318,7 +10341,7 @@ function create_else_block$1(ctx) {
     }
 
   };
-} // (68:10) {#if isScrollable}
+} // (67:10) {#if isScrollable}
 
 
 function create_if_block_1$3(ctx) {
@@ -10585,7 +10608,7 @@ class Modal extends SvelteElement {
 }
 
 customElements.define("goa-modal", Modal);
-/* libs/web-components/src/components/notification/Notification.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/notification/Notification.svelte generated by Svelte v3.51.0 */
 
 function create_if_block$4(ctx) {
   let div3;
@@ -10826,7 +10849,7 @@ const dimensionRegex = /^[1-9]+[0-9]*(px|em|rem|ch|vh|vw|%)$/;
 function isValidDimension(value) {
   return dimensionRegex.test(value);
 }
-/* libs/web-components/src/components/page-block/PageBlock.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/page-block/PageBlock.svelte generated by Svelte v3.51.0 */
 
 
 function create_fragment$b(ctx) {
@@ -10957,7 +10980,7 @@ class PageBlock extends SvelteElement {
 
 customElements.define("goa-page-block", PageBlock);
 const BIND = "bind";
-/* libs/web-components/src/components/radio-group/RadioGroup.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/radio-group/RadioGroup.svelte generated by Svelte v3.51.0 */
 
 function get_each_context$1(ctx, list, i) {
   const child_ctx = ctx.slice();
@@ -11436,7 +11459,7 @@ class RadioGroup extends SvelteElement {
 }
 
 customElements.define("goa-radio-group", RadioGroup);
-/* libs/web-components/src/components/radio-group/RadioItem.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/radio-group/RadioItem.svelte generated by Svelte v3.51.0 */
 
 function create_fragment$9(ctx) {
   return {
@@ -11565,7 +11588,7 @@ class RadioItem extends SvelteElement {
 }
 
 customElements.define("goa-radio-item", RadioItem);
-/* libs/web-components/src/components/scrollable/Scrollable.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/scrollable/Scrollable.svelte generated by Svelte v3.51.0 */
 
 function create_fragment$8(ctx) {
   let div;
@@ -11737,7 +11760,7 @@ class Scrollable extends SvelteElement {
 }
 
 customElements.define("goa-scrollable", Scrollable);
-/* libs/web-components/src/components/skeleton/Skeleton.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/skeleton/Skeleton.svelte generated by Svelte v3.51.0 */
 
 function get_each_context(ctx, list, i) {
   const child_ctx = ctx.slice();
@@ -12497,7 +12520,7 @@ function tweened(value, defaults = {}) {
     subscribe: store.subscribe
   };
 }
-/* libs/web-components/src/components/spinner/Spinner.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/spinner/Spinner.svelte generated by Svelte v3.51.0 */
 
 
 function create_if_block$2(ctx) {
@@ -12936,7 +12959,7 @@ class Spinner extends SvelteElement {
 }
 
 customElements.define("goa-spinner", Spinner);
-/* libs/web-components/src/components/text-area/TextArea.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/text-area/TextArea.svelte generated by Svelte v3.51.0 */
 
 function create_if_block$1(ctx) {
   let if_block_anchor;
@@ -13544,7 +13567,7 @@ class TextArea extends SvelteElement {
 }
 
 customElements.define("goa-textarea", TextArea);
-/* libs/web-components/src/layouts/one-column-layout/OneColumnLayout.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/layouts/one-column-layout/OneColumnLayout.svelte generated by Svelte v3.51.0 */
 
 function create_fragment$4(ctx) {
   let div;
@@ -13595,7 +13618,7 @@ class OneColumnLayout extends SvelteElement {
 }
 
 customElements.define("goa-one-column-layout", OneColumnLayout);
-/* libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte generated by Svelte v3.51.0 */
 
 function create_fragment$3(ctx) {
   let div;
@@ -13737,7 +13760,7 @@ class TwoColumnLayout extends SvelteElement {
 }
 
 customElements.define("goa-two-column-layout", TwoColumnLayout);
-/* libs/web-components/src/layouts/FullScreenNavbarLayout.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/layouts/FullScreenNavbarLayout.svelte generated by Svelte v3.51.0 */
 
 function create_fragment$2(ctx) {
   let div;
@@ -13795,7 +13818,7 @@ class FullScreenNavbarLayout extends SvelteElement {
 }
 
 customElements.define("goa-layout-full-nav", FullScreenNavbarLayout);
-/* libs/web-components/src/components/container/ContainerWrapper.test.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/container/ContainerWrapper.test.svelte generated by Svelte v3.51.0 */
 
 function create_if_block_1(ctx) {
   let div;
@@ -14087,7 +14110,7 @@ class ContainerWrapper_test extends SvelteElement {
 }
 
 customElements.define("test-container", ContainerWrapper_test);
-/* libs/web-components/src/components/divider/Divider.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/components/divider/Divider.svelte generated by Svelte v3.51.0 */
 
 function create_fragment(ctx) {
   let hr;

package/react-components.umd.js

@@ -167,6 +167,7 @@
 
 	function append_stylesheet(node, style) {
 	  append(node.head || node, style);
+	  return style.sheet;
 	}
 
 	function insert(target, node, anchor) {
@@ -330,13 +331,10 @@
 	    if (active) return;
 	    managed_styles.forEach(info => {
 	      const {
-	        stylesheet
-	      } = info;
-	      let i = stylesheet.cssRules.length;
+	        ownerNode
+	      } = info.stylesheet; // there is no ownerNode if it runs on jsdom.
 
-	      while (i--) stylesheet.deleteRule(i);
-
-	      info.rules = {};
+	      if (ownerNode) detach(ownerNode);
 	    });
 	    managed_styles.clear();
 	  });
@@ -352,10 +350,29 @@
 	  if (!current_component) throw new Error('Function called outside component initialization');
 	  return current_component;
 	}
+	/**
+	 * The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM.
+	 * It must be called during the component's initialisation (but doesn't need to live *inside* the component;
+	 * it can be called from an external module).
+	 *
+	 * `onMount` does not run inside a [server-side component](/docs#run-time-server-side-component-api).
+	 *
+	 * https://svelte.dev/docs#run-time-svelte-onmount
+	 */
+
 
 	function onMount(fn) {
 	  get_current_component().$$.on_mount.push(fn);
 	}
+	/**
+	 * Schedules a callback to run immediately before the component is unmounted.
+	 *
+	 * Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the
+	 * only one that runs inside a server-side component.
+	 *
+	 * https://svelte.dev/docs#run-time-svelte-ondestroy
+	 */
+
 
 	function onDestroy(fn) {
 	  get_current_component().$$.on_destroy.push(fn);
@@ -878,8 +895,6 @@
 	function mount_component(component, target, anchor, customElement) {
 	  const {
 	    fragment,
-	    on_mount,
-	    on_destroy,
 	    after_update
 	  } = component.$$;
 	  fragment && fragment.m(target, anchor);
@@ -887,10 +902,12 @@
 	  if (!customElement) {
 	    // onMount happens before the initial afterUpdate
 	    add_render_callback(() => {
-	      const new_on_destroy = on_mount.map(run).filter(is_function);
+	      const new_on_destroy = component.$$.on_mount.map(run).filter(is_function); // if the component was destroyed immediately
+	      // it will update the `$$.on_destroy` reference to `null`.
+	      // the destructured on_destroy may still reference to the old array
 
-	      if (on_destroy) {
-	        on_destroy.push(...new_on_destroy);
+	      if (component.$$.on_destroy) {
+	        component.$$.on_destroy.push(...new_on_destroy);
 	      } else {
 	        // Edge case - component was destroyed immediately,
 	        // most likely as a result of a binding initialising
@@ -932,7 +949,7 @@
 	  set_current_component(component);
 	  const $$ = component.$$ = {
 	    fragment: null,
-	    ctx: null,
+	    ctx: [],
 	    // state
 	    props,
 	    update: noop,
@@ -1026,6 +1043,10 @@
 
 	    $on(type, callback) {
 	      // TODO should this delegate to addEventListener?
+	      if (!is_function(callback)) {
+	        return noop;
+	      }
+
 	      const callbacks = this.$$.callbacks[type] || (this.$$.callbacks[type] = []);
 	      callbacks.push(callback);
 	      return () => {
@@ -1044,7 +1065,7 @@
 
 	  };
 	}
-	/* libs/web-components/src/components/app-header/AppHeader.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/app-header/AppHeader.svelte generated by Svelte v3.51.0 */
 
 
 	function create_else_block$4(ctx) {
@@ -1373,7 +1394,7 @@
 	function fromBoolean(value) {
 	  return value ? "true" : "false";
 	}
-	/* libs/web-components/src/components/badge/Badge.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/badge/Badge.svelte generated by Svelte v3.51.0 */
 
 
 	function create_else_block$3(ctx) {
@@ -1708,7 +1729,7 @@
 	}
 
 	customElements.define("goa-badge", Badge);
-	/* libs/web-components/src/components/button-group/ButtonGroup.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/button-group/ButtonGroup.svelte generated by Svelte v3.51.0 */
 
 	function create_fragment$D(ctx) {
 	  let div;
@@ -1778,7 +1799,7 @@
 	class ButtonGroup extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}div{display:flex;flex-direction:row;justify-content:var(--alignment);flex-wrap:wrap;gap:var(--gap-size)}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}div{display:flex;flex-direction:row;justify-content:var(--alignment);flex-wrap:wrap;gap:var(--gap-size);padding:3px 0}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -1829,7 +1850,7 @@
 	}
 
 	customElements.define("goa-button-group", ButtonGroup);
-	/* libs/web-components/src/components/button/Button.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/button/Button.svelte generated by Svelte v3.51.0 */
 
 	function create_else_block$2(ctx) {
 	  let t0;
@@ -2357,7 +2378,7 @@
 	}
 
 	customElements.define("goa-button", Button);
-	/* libs/web-components/src/components/callout/Callout.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/callout/Callout.svelte generated by Svelte v3.51.0 */
 
 	function create_if_block$g(ctx) {
 	  let h3;
@@ -2596,7 +2617,7 @@
 	}
 
 	customElements.define("goa-callout", Callout);
-	/* libs/web-components/src/components/card-actions/CardActions.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/card-actions/CardActions.svelte generated by Svelte v3.51.0 */
 
 	function create_fragment$A(ctx) {
 	  let goa_card_content;
@@ -2641,7 +2662,7 @@
 	}
 
 	customElements.define("goa-card-actions", CardActions);
-	/* libs/web-components/src/components/card-content/CardContent.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/card-content/CardContent.svelte generated by Svelte v3.51.0 */
 
 	function create_fragment$z(ctx) {
 	  let div;
@@ -2688,7 +2709,7 @@
 	}
 
 	customElements.define("goa-card-content", CardContent);
-	/* libs/web-components/src/components/card-group/CardGroup.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/card-group/CardGroup.svelte generated by Svelte v3.51.0 */
 
 	function create_fragment$y(ctx) {
 	  let div;
@@ -2735,7 +2756,7 @@
 	}
 
 	customElements.define("goa-card-group", CardGroup);
-	/* libs/web-components/src/components/card-image/CardImage.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/card-image/CardImage.svelte generated by Svelte v3.51.0 */
 
 	function create_fragment$x(ctx) {
 	  let div;
@@ -2856,7 +2877,7 @@
 	}
 
 	customElements.define("goa-card-image", CardImage);
-	/* libs/web-components/src/components/card/Card.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/card/Card.svelte generated by Svelte v3.51.0 */
 
 	function create_fragment$w(ctx) {
 	  let div;
@@ -3004,7 +3025,7 @@
 	}
 
 	customElements.define("goa-card", Card);
-	/* libs/web-components/src/components/checkbox/Checkbox.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/checkbox/Checkbox.svelte generated by Svelte v3.51.0 */
 
 	function create_if_block_1$9(ctx) {
 	  let svg;
@@ -3464,7 +3485,7 @@
 	}
 
 	customElements.define("goa-checkbox", Checkbox);
-	/* libs/web-components/src/components/chip/Chip.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/chip/Chip.svelte generated by Svelte v3.51.0 */
 
 	function create_if_block_1$8(ctx) {
 	  let goa_icon;
@@ -3979,7 +4000,7 @@
 
 	  };
 	}
-	/* libs/web-components/src/components/circular-progress/CircularProgress.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/circular-progress/CircularProgress.svelte generated by Svelte v3.51.0 */
 
 
 	function create_if_block$d(ctx) {
@@ -4248,7 +4269,7 @@
 	        if_block = null;
 	      }
 
-	      if (dirty &
+	      if (!current || dirty &
 	      /*fullscreen*/
 	      8) {
 	        toggle_class(div, "fullscreen",
@@ -4554,7 +4575,7 @@
 	}
 
 	customElements.define("goa-circular-progress", CircularProgress);
-	/* libs/web-components/src/components/container/Container.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/container/Container.svelte generated by Svelte v3.51.0 */
 
 	function create_fragment$s(ctx) {
 	  let div3;
@@ -4833,7 +4854,7 @@
 	}
 
 	const BIND$1 = "bind";
-	/* libs/web-components/src/components/dropdown/Dropdown.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/dropdown/Dropdown.svelte generated by Svelte v3.51.0 */
 
 	function get_each_context$4(ctx, list, i) {
 	  const child_ctx = ctx.slice();
@@ -5811,7 +5832,7 @@
 	}
 
 	customElements.define("goa-dropdown", Dropdown);
-	/* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.51.0 */
 
 	function create_fragment$q(ctx) {
 	  return {
@@ -5933,7 +5954,7 @@
 	}
 
 	customElements.define("goa-dropdown-item", DropdownItem);
-	/* libs/web-components/src/components/flex-column/FlexColumn.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/flex-column/FlexColumn.svelte generated by Svelte v3.51.0 */
 
 	function create_fragment$p(ctx) {
 	  let div;
@@ -6038,7 +6059,7 @@
 	}
 
 	customElements.define("goa-flex-col", FlexColumn);
-	/* libs/web-components/src/components/flex-row/FlexRow.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/flex-row/FlexRow.svelte generated by Svelte v3.51.0 */
 
 	function create_fragment$o(ctx) {
 	  let div;
@@ -6143,7 +6164,7 @@
 	}
 
 	customElements.define("goa-flex-row", FlexRow);
-	/* libs/web-components/src/components/focus-trap/FocusTrap.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/focus-trap/FocusTrap.svelte generated by Svelte v3.51.0 */
 
 	function create_fragment$n(ctx) {
 	  let div;
@@ -6154,6 +6175,7 @@
   
   <span tabindex="0"></span>`;
 	      this.c = noop;
+	      attr(div, "id", "root");
 	    },
 
 	    m(target, anchor) {
@@ -6363,6 +6385,7 @@
 	class FocusTrap extends SvelteElement {
 	  constructor(options) {
 	    super();
+	    this.shadowRoot.innerHTML = `<style>#root{display:inline}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -6401,7 +6424,7 @@
 	}
 
 	customElements.define("goa-focus-trap", FocusTrap);
-	/* libs/web-components/src/components/footer-meta-section/FooterMetaSection.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/footer-meta-section/FooterMetaSection.svelte generated by Svelte v3.51.0 */
 
 	function get_each_context$3(ctx, list, i) {
 	  const child_ctx = ctx.slice();
@@ -6592,7 +6615,7 @@
 	}
 
 	customElements.define("goa-app-footer-meta-section", FooterMetaSection);
-	/* libs/web-components/src/components/footer-nav-section/FooterNavSection.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/footer-nav-section/FooterNavSection.svelte generated by Svelte v3.51.0 */
 
 	function get_each_context$2(ctx, list, i) {
 	  const child_ctx = ctx.slice();
@@ -6941,7 +6964,7 @@
 	}
 
 	customElements.define("goa-app-footer-nav-section", FooterNavSection);
-	/* libs/web-components/src/components/footer/Footer.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/footer/Footer.svelte generated by Svelte v3.51.0 */
 
 	function create_if_block$a(ctx) {
 	  let goa_divider;
@@ -7176,7 +7199,7 @@
 	}
 
 	customElements.define("goa-app-footer", Footer);
-	/* libs/web-components/src/components/form-item/FormItem.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/form-item/FormItem.svelte generated by Svelte v3.51.0 */
 
 	function create_if_block_2$5(ctx) {
 	  let div;
@@ -7531,7 +7554,7 @@
 	}
 
 	customElements.define("goa-form-item", FormItem);
-	/* libs/web-components/src/components/hero-banner/HeroBanner.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/hero-banner/HeroBanner.svelte generated by Svelte v3.51.0 */
 
 	function create_fragment$i(ctx) {
 	  let div1;
@@ -7677,7 +7700,7 @@
 	}
 
 	customElements.define("goa-hero-banner", HeroBanner);
-	/* libs/web-components/src/components/icon-button/IconButton.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/icon-button/IconButton.svelte generated by Svelte v3.51.0 */
 
 	function create_fragment$h(ctx) {
 	  let button;
@@ -8037,7 +8060,7 @@
 	}
 
 	customElements.define("goa-icon-button", IconButton);
-	/* libs/web-components/src/components/icon/Icon.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/icon/Icon.svelte generated by Svelte v3.51.0 */
 
 	function create_if_block$8(ctx) {
 	  let ion_icon;
@@ -8389,7 +8412,7 @@
 	}
 
 	customElements.define("goa-icon", Icon);
-	/* libs/web-components/src/components/input/Input.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/input/Input.svelte generated by Svelte v3.51.0 */
 
 	function create_if_block_7(ctx) {
 	  let div;
@@ -9644,7 +9667,7 @@
 	}
 
 	customElements.define("goa-input", Input);
-	/* libs/web-components/src/components/microsite-header/MicrositeHeader.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/microsite-header/MicrositeHeader.svelte generated by Svelte v3.51.0 */
 
 	function create_if_block_3$1(ctx) {
 	  let div0;
@@ -10036,7 +10059,7 @@
 	}
 
 	customElements.define("goa-microsite-header", MicrositeHeader);
-	/* libs/web-components/src/components/modal/Modal.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/modal/Modal.svelte generated by Svelte v3.51.0 */
 
 	function create_if_block$5(ctx) {
 	  let goa_focus_trap;
@@ -10272,7 +10295,7 @@
 	    }
 
 	  };
-	} // (55:8) {#if heading}
+	} // (54:8) {#if heading}
 
 
 	function create_if_block_3(ctx) {
@@ -10306,7 +10329,7 @@
 	    }
 
 	  };
-	} // (58:8) {#if isClosable}
+	} // (57:8) {#if isClosable}
 
 
 	function create_if_block_2$2(ctx) {
@@ -10344,7 +10367,7 @@
 	    }
 
 	  };
-	} // (72:10) {:else}
+	} // (71:10) {:else}
 
 
 	function create_else_block$1(ctx) {
@@ -10365,7 +10388,7 @@
 	    }
 
 	  };
-	} // (68:10) {#if isScrollable}
+	} // (67:10) {#if isScrollable}
 
 
 	function create_if_block_1$3(ctx) {
@@ -10632,7 +10655,7 @@
 	}
 
 	customElements.define("goa-modal", Modal);
-	/* libs/web-components/src/components/notification/Notification.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/notification/Notification.svelte generated by Svelte v3.51.0 */
 
 	function create_if_block$4(ctx) {
 	  let div3;
@@ -10873,7 +10896,7 @@
 	function isValidDimension(value) {
 	  return dimensionRegex.test(value);
 	}
-	/* libs/web-components/src/components/page-block/PageBlock.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/page-block/PageBlock.svelte generated by Svelte v3.51.0 */
 
 
 	function create_fragment$b(ctx) {
@@ -11004,7 +11027,7 @@
 
 	customElements.define("goa-page-block", PageBlock);
 	const BIND = "bind";
-	/* libs/web-components/src/components/radio-group/RadioGroup.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/radio-group/RadioGroup.svelte generated by Svelte v3.51.0 */
 
 	function get_each_context$1(ctx, list, i) {
 	  const child_ctx = ctx.slice();
@@ -11485,7 +11508,7 @@
 	}
 
 	customElements.define("goa-radio-group", RadioGroup);
-	/* libs/web-components/src/components/radio-group/RadioItem.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/radio-group/RadioItem.svelte generated by Svelte v3.51.0 */
 
 	function create_fragment$9(ctx) {
 	  return {
@@ -11614,7 +11637,7 @@
 	}
 
 	customElements.define("goa-radio-item", RadioItem);
-	/* libs/web-components/src/components/scrollable/Scrollable.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/scrollable/Scrollable.svelte generated by Svelte v3.51.0 */
 
 	function create_fragment$8(ctx) {
 	  let div;
@@ -11786,7 +11809,7 @@
 	}
 
 	customElements.define("goa-scrollable", Scrollable);
-	/* libs/web-components/src/components/skeleton/Skeleton.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/skeleton/Skeleton.svelte generated by Svelte v3.51.0 */
 
 	function get_each_context(ctx, list, i) {
 	  const child_ctx = ctx.slice();
@@ -12546,7 +12569,7 @@
 	    subscribe: store.subscribe
 	  };
 	}
-	/* libs/web-components/src/components/spinner/Spinner.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/spinner/Spinner.svelte generated by Svelte v3.51.0 */
 
 
 	function create_if_block$2(ctx) {
@@ -12985,7 +13008,7 @@
 	}
 
 	customElements.define("goa-spinner", Spinner);
-	/* libs/web-components/src/components/text-area/TextArea.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/text-area/TextArea.svelte generated by Svelte v3.51.0 */
 
 	function create_if_block$1(ctx) {
 	  let if_block_anchor;
@@ -13593,7 +13616,7 @@
 	}
 
 	customElements.define("goa-textarea", TextArea);
-	/* libs/web-components/src/layouts/one-column-layout/OneColumnLayout.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/layouts/one-column-layout/OneColumnLayout.svelte generated by Svelte v3.51.0 */
 
 	function create_fragment$4(ctx) {
 	  let div;
@@ -13644,7 +13667,7 @@
 	}
 
 	customElements.define("goa-one-column-layout", OneColumnLayout);
-	/* libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte generated by Svelte v3.51.0 */
 
 	function create_fragment$3(ctx) {
 	  let div;
@@ -13786,7 +13809,7 @@
 	}
 
 	customElements.define("goa-two-column-layout", TwoColumnLayout);
-	/* libs/web-components/src/layouts/FullScreenNavbarLayout.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/layouts/FullScreenNavbarLayout.svelte generated by Svelte v3.51.0 */
 
 	function create_fragment$2(ctx) {
 	  let div;
@@ -13844,7 +13867,7 @@
 	}
 
 	customElements.define("goa-layout-full-nav", FullScreenNavbarLayout);
-	/* libs/web-components/src/components/container/ContainerWrapper.test.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/container/ContainerWrapper.test.svelte generated by Svelte v3.51.0 */
 
 	function create_if_block_1(ctx) {
 	  let div;
@@ -14136,7 +14159,7 @@
 	}
 
 	customElements.define("test-container", ContainerWrapper_test);
-	/* libs/web-components/src/components/divider/Divider.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/components/divider/Divider.svelte generated by Svelte v3.51.0 */
 
 	function create_fragment(ctx) {
 	  let hr;