@abgov/web-components 1.0.0-alpha.107 → 1.0.0-alpha.109

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/web-components",
-  "version": "1.0.0-alpha.107",
+  "version": "1.0.0-alpha.109",
   "description": "Government of Alberta - UI Web components",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/web-components.es.js

@@ -2904,7 +2904,7 @@ function create_if_block_1$8(ctx) {
 	};
 }
 
-// (42:2) {#if _deletable}
+// (44:2) {#if _deletable}
 function create_if_block$e(ctx) {
 	let goa_icon;
 	let goa_icon_fillcolor_value;
@@ -2918,27 +2918,27 @@ function create_if_block$e(ctx) {
 			set_custom_element_data(goa_icon, "theme", "filled");
 			set_custom_element_data(goa_icon, "type", "close-circle");
 
-			set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value = /*_error*/ ctx[4]
+			set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value = /*_error*/ ctx[5]
 			? "var(--goa-color-status-emergency)"
-			: /*_hovering*/ ctx[3]
+			: /*_hovering*/ ctx[4]
 				? "var(--goa-color-interactive--hover)"
 				: "var(--color-gray-600)");
 
-			set_custom_element_data(goa_icon, "opacity", goa_icon_opacity_value = /*_error*/ ctx[4] ? /*_hovering*/ ctx[3] ? 1 : 0.5 : 1);
+			set_custom_element_data(goa_icon, "opacity", goa_icon_opacity_value = /*_error*/ ctx[5] ? /*_hovering*/ ctx[4] ? 1 : 0.5 : 1);
 		},
 		m(target, anchor) {
 			insert(target, goa_icon, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*_error, _hovering*/ 24 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value = /*_error*/ ctx[4]
+			if (dirty & /*_error, _hovering*/ 48 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value = /*_error*/ ctx[5]
 			? "var(--goa-color-status-emergency)"
-			: /*_hovering*/ ctx[3]
+			: /*_hovering*/ ctx[4]
 				? "var(--goa-color-interactive--hover)"
 				: "var(--color-gray-600)")) {
 				set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value);
 			}
 
-			if (dirty & /*_error, _hovering*/ 24 && goa_icon_opacity_value !== (goa_icon_opacity_value = /*_error*/ ctx[4] ? /*_hovering*/ ctx[3] ? 1 : 0.5 : 1)) {
+			if (dirty & /*_error, _hovering*/ 48 && goa_icon_opacity_value !== (goa_icon_opacity_value = /*_error*/ ctx[5] ? /*_hovering*/ ctx[4] ? 1 : 0.5 : 1)) {
 				set_custom_element_data(goa_icon, "opacity", goa_icon_opacity_value);
 			}
 		},
@@ -2957,7 +2957,7 @@ function create_fragment$u(ctx) {
 	let mounted;
 	let dispose;
 	let if_block0 = /*leadingicon*/ ctx[0] && create_if_block_1$8(ctx);
-	let if_block1 = /*_deletable*/ ctx[5] && create_if_block$e(ctx);
+	let if_block1 = /*_deletable*/ ctx[6] && create_if_block$e(ctx);
 
 	return {
 		c() {
@@ -2973,8 +2973,9 @@ function create_fragment$u(ctx) {
 			attr(div1, "data-testid", "chip");
 			attr(div1, "class", "chip");
 			attr(div1, "tabindex", "0");
-			toggle_class(div1, "deletable", /*_deletable*/ ctx[5]);
-			toggle_class(div1, "error", /*_error*/ ctx[4]);
+			toggle_class(div1, "deletable", /*_deletable*/ ctx[6]);
+			toggle_class(div1, "error", /*_error*/ ctx[5]);
+			toggle_class(div1, "variant", /*variant*/ ctx[2]);
 		},
 		m(target, anchor) {
 			insert(target, div1, anchor);
@@ -2984,15 +2985,15 @@ function create_fragment$u(ctx) {
 			append(div0, t1);
 			append(div1, t2);
 			if (if_block1) if_block1.m(div1, null);
-			/*div1_binding*/ ctx[9](div1);
+			/*div1_binding*/ ctx[10](div1);
 
 			if (!mounted) {
 				dispose = [
-					listen(div1, "click", /*click_handler*/ ctx[10]),
-					listen(div1, "mouseover", /*mouseover_handler*/ ctx[11]),
-					listen(div1, "mouseout", /*mouseout_handler*/ ctx[12]),
-					listen(div1, "focus", /*focus_handler*/ ctx[13]),
-					listen(div1, "blur", /*blur_handler*/ ctx[14])
+					listen(div1, "click", /*click_handler*/ ctx[11]),
+					listen(div1, "mouseover", /*mouseover_handler*/ ctx[12]),
+					listen(div1, "mouseout", /*mouseout_handler*/ ctx[13]),
+					listen(div1, "focus", /*focus_handler*/ ctx[14]),
+					listen(div1, "blur", /*blur_handler*/ ctx[15])
 				];
 
 				mounted = true;
@@ -3014,7 +3015,7 @@ function create_fragment$u(ctx) {
 
 			if (dirty & /*content*/ 2) set_data(t1, /*content*/ ctx[1]);
 
-			if (/*_deletable*/ ctx[5]) {
+			if (/*_deletable*/ ctx[6]) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
@@ -3027,12 +3028,16 @@ function create_fragment$u(ctx) {
 				if_block1 = null;
 			}
 
-			if (dirty & /*_deletable*/ 32) {
-				toggle_class(div1, "deletable", /*_deletable*/ ctx[5]);
+			if (dirty & /*_deletable*/ 64) {
+				toggle_class(div1, "deletable", /*_deletable*/ ctx[6]);
 			}
 
-			if (dirty & /*_error*/ 16) {
-				toggle_class(div1, "error", /*_error*/ ctx[4]);
+			if (dirty & /*_error*/ 32) {
+				toggle_class(div1, "error", /*_error*/ ctx[5]);
+			}
+
+			if (dirty & /*variant*/ 4) {
+				toggle_class(div1, "variant", /*variant*/ ctx[2]);
 			}
 		},
 		i: noop,
@@ -3041,7 +3046,7 @@ function create_fragment$u(ctx) {
 			if (detaching) detach(div1);
 			if (if_block0) if_block0.d();
 			if (if_block1) if_block1.d();
-			/*div1_binding*/ ctx[9](null);
+			/*div1_binding*/ ctx[10](null);
 			mounted = false;
 			run_all(dispose);
 		}
@@ -3053,6 +3058,7 @@ function instance$s($$self, $$props, $$invalidate) {
 	let { error = "false" } = $$props;
 	let { deletable = "false" } = $$props;
 	let { content } = $$props;
+	let { variant } = $$props;
 	let el;
 	let _hovering = false;
 
@@ -3069,36 +3075,38 @@ function instance$s($$self, $$props, $$invalidate) {
 	function div1_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			el = $$value;
-			$$invalidate(2, el);
+			$$invalidate(3, el);
 		});
 	}
 
 	const click_handler = e => _deletable && onDelete(e);
-	const mouseover_handler = () => $$invalidate(3, _hovering = true);
-	const mouseout_handler = () => $$invalidate(3, _hovering = false);
-	const focus_handler = () => $$invalidate(3, _hovering = false);
-	const blur_handler = () => $$invalidate(3, _hovering = false);
+	const mouseover_handler = () => $$invalidate(4, _hovering = true);
+	const mouseout_handler = () => $$invalidate(4, _hovering = false);
+	const focus_handler = () => $$invalidate(4, _hovering = false);
+	const blur_handler = () => $$invalidate(4, _hovering = false);
 
 	$$self.$$set = $$props => {
 		if ('leadingicon' in $$props) $$invalidate(0, leadingicon = $$props.leadingicon);
-		if ('error' in $$props) $$invalidate(7, error = $$props.error);
-		if ('deletable' in $$props) $$invalidate(8, deletable = $$props.deletable);
+		if ('error' in $$props) $$invalidate(8, error = $$props.error);
+		if ('deletable' in $$props) $$invalidate(9, deletable = $$props.deletable);
 		if ('content' in $$props) $$invalidate(1, content = $$props.content);
+		if ('variant' in $$props) $$invalidate(2, variant = $$props.variant);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*error*/ 128) {
-			$$invalidate(4, _error = toBoolean(error));
+		if ($$self.$$.dirty & /*error*/ 256) {
+			$$invalidate(5, _error = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty & /*deletable*/ 256) {
-			$$invalidate(5, _deletable = toBoolean(deletable));
+		if ($$self.$$.dirty & /*deletable*/ 512) {
+			$$invalidate(6, _deletable = toBoolean(deletable));
 		}
 	};
 
 	return [
 		leadingicon,
 		content,
+		variant,
 		el,
 		_hovering,
 		_error,
@@ -3132,9 +3140,10 @@ class Chip extends SvelteElement {
 			safe_not_equal,
 			{
 				leadingicon: 0,
-				error: 7,
-				deletable: 8,
-				content: 1
+				error: 8,
+				deletable: 9,
+				content: 1,
+				variant: 2
 			},
 			null
 		);
@@ -3152,7 +3161,7 @@ class Chip extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["leadingicon", "error", "deletable", "content"];
+		return ["leadingicon", "error", "deletable", "content", "variant"];
 	}
 
 	get leadingicon() {
@@ -3165,7 +3174,7 @@ class Chip extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[7];
+		return this.$$.ctx[8];
 	}
 
 	set error(error) {
@@ -3174,7 +3183,7 @@ class Chip extends SvelteElement {
 	}
 
 	get deletable() {
-		return this.$$.ctx[8];
+		return this.$$.ctx[9];
 	}
 
 	set deletable(deletable) {
@@ -3190,6 +3199,15 @@ class Chip extends SvelteElement {
 		this.$$set({ content });
 		flush();
 	}
+
+	get variant() {
+		return this.$$.ctx[2];
+	}
+
+	set variant(variant) {
+		this.$$set({ variant });
+		flush();
+	}
 }
 
 customElements.define("goa-chip", Chip);
@@ -3782,16 +3800,15 @@ function create_fragment$s(ctx) {
 			this.c = noop;
 			attr(div0, "class", "title");
 			attr(div1, "class", "actions");
-			attr(header, "class", header_class_value = "heading--" + /*headingsize*/ ctx[1]);
+			attr(header, "class", header_class_value = "heading--" + /*accent*/ ctx[1]);
 			attr(div2, "class", "content");
 
 			attr(div3, "class", div3_class_value = `
     goa-container
     goa-container--${/*type*/ ctx[0]}
     padding--${/*padding*/ ctx[2]}
+    accent--${/*accent*/ ctx[1]}
   `);
-
-			toggle_class(div3, "colored", /*_colored*/ ctx[3]);
 		},
 		m(target, anchor) {
 			insert(target, div3, anchor);
@@ -3803,21 +3820,18 @@ function create_fragment$s(ctx) {
 			append(div3, div2);
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*headingsize*/ 2 && header_class_value !== (header_class_value = "heading--" + /*headingsize*/ ctx[1])) {
+			if (dirty & /*accent*/ 2 && header_class_value !== (header_class_value = "heading--" + /*accent*/ ctx[1])) {
 				attr(header, "class", header_class_value);
 			}
 
-			if (dirty & /*type, padding*/ 5 && div3_class_value !== (div3_class_value = `
+			if (dirty & /*type, padding, accent*/ 7 && div3_class_value !== (div3_class_value = `
     goa-container
     goa-container--${/*type*/ ctx[0]}
     padding--${/*padding*/ ctx[2]}
+    accent--${/*accent*/ ctx[1]}
   `)) {
 				attr(div3, "class", div3_class_value);
 			}
-
-			if (dirty & /*type, padding, _colored*/ 13) {
-				toggle_class(div3, "colored", /*_colored*/ ctx[3]);
-			}
 		},
 		i: noop,
 		o: noop,
@@ -3828,32 +3842,23 @@ function create_fragment$s(ctx) {
 }
 
 function instance$q($$self, $$props, $$invalidate) {
-	let _colored;
-	let { type = 'non-interactive' } = $$props;
-	let { colored = "false" } = $$props;
-	let { headingsize = 'large' } = $$props;
+	let { type = 'interactive' } = $$props;
+	let { accent = 'filled' } = $$props;
 	let { padding = "relaxed" } = $$props;
 
 	$$self.$$set = $$props => {
 		if ('type' in $$props) $$invalidate(0, type = $$props.type);
-		if ('colored' in $$props) $$invalidate(4, colored = $$props.colored);
-		if ('headingsize' in $$props) $$invalidate(1, headingsize = $$props.headingsize);
+		if ('accent' in $$props) $$invalidate(1, accent = $$props.accent);
 		if ('padding' in $$props) $$invalidate(2, padding = $$props.padding);
 	};
 
-	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*colored*/ 16) {
-			$$invalidate(3, _colored = toBoolean(colored));
-		}
-	};
-
-	return [type, headingsize, padding, _colored, colored];
+	return [type, accent, padding];
 }
 
 class Container extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--non-interactive.colored .content{border-color:var(--color-gray-200);background-color:var(--color-gray-100)}.goa-container--important.colored .content{border-color:var(--goa-color-status-warning);background-color:var(--goa-color-status-warning-50)}.goa-container--error.colored .content{border-color:var(--goa-color-status-emergency);background-color:var(--goa-color-status-emergency-50)}.goa-container--success.colored .content{border-color:var(--goa-color-status-success);background-color:var(--goa-color-status-success-50)}.goa-container--info.colored .content{border-color:var(--goa-color-status-info);background-color:var(--goa-color-status-info-50)}.title,.actions{padding:0.5rem 0}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--interactive header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--important header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--large{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--large .title{line-height:2rem}.heading--small{height:0.5rem}.heading--none{display:none}.heading--none~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--small .title,.heading--small .actions{display:none}.actions{display:flex;align-items:center}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--non-interactive.accent--filled .content{border-color:var(--color-gray-200);background-color:var(--color-gray-100)}.goa-container--important.accent--filled .content{border-color:var(--goa-color-status-warning);background-color:var(--goa-color-status-warning-50)}.goa-container--error.accent--filled .content{border-color:var(--goa-color-status-emergency);background-color:var(--goa-color-status-emergency-50)}.goa-container--success.accent--filled .content{border-color:var(--goa-color-status-success);background-color:var(--goa-color-status-success-50)}.goa-container--info.accent--filled .content{border-color:var(--goa-color-status-info);background-color:var(--goa-color-status-info-50)}.title,.actions{padding:0.5rem 0}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--interactive header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--important header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--thick{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--thick .title{line-height:2rem}.heading--thin{height:0.5rem}.heading--filled{display:none}.heading--filled~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--thin .title,.heading--thin .actions{display:none}.actions{display:flex;align-items:center}</style>`;
 
 		init(
 			this,
@@ -3865,12 +3870,7 @@ class Container extends SvelteElement {
 			instance$q,
 			create_fragment$s,
 			safe_not_equal,
-			{
-				type: 0,
-				colored: 4,
-				headingsize: 1,
-				padding: 2
-			},
+			{ type: 0, accent: 1, padding: 2 },
 			null
 		);
 
@@ -3887,7 +3887,7 @@ class Container extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["type", "colored", "headingsize", "padding"];
+		return ["type", "accent", "padding"];
 	}
 
 	get type() {
@@ -3899,21 +3899,12 @@ class Container extends SvelteElement {
 		flush();
 	}
 
-	get colored() {
-		return this.$$.ctx[4];
-	}
-
-	set colored(colored) {
-		this.$$set({ colored });
-		flush();
-	}
-
-	get headingsize() {
+	get accent() {
 		return this.$$.ctx[1];
 	}
 
-	set headingsize(headingsize) {
-		this.$$set({ headingsize });
+	set accent(accent) {
+		this.$$set({ accent });
 		flush();
 	}
 
@@ -4334,7 +4325,7 @@ function create_fragment$r(ctx) {
 	};
 }
 
-const MAX_HEIGHT = "300px";
+const MAX_HEIGHT = "276px";
 
 function instance$p($$self, $$props, $$invalidate) {
 	let _disabled;
@@ -11226,10 +11217,69 @@ class TextArea extends SvelteElement {
 
 customElements.define("goa-textarea", TextArea);
 
-/* libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/layouts/one-column-layout/OneColumnLayout.svelte generated by Svelte v3.49.0 */
 
 function create_fragment$4(ctx) {
 	let div;
+
+	return {
+		c() {
+			div = element("div");
+
+			div.innerHTML = `<section class="header"><slot name="header"></slot></section> 
+
+  <main><slot></slot></main> 
+
+  <section class="footer"><slot name="footer"></slot></section>`;
+
+			this.c = noop;
+			attr(div, "class", "page");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+class OneColumnLayout extends SvelteElement {
+	constructor(options) {
+		super();
+		this.shadowRoot.innerHTML = `<style>.page{height:100vh;display:flex;flex-direction:column}.header,.footer{flex:0 0 auto}main{flex:1 1 auto}</style>`;
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			null,
+			create_fragment$4,
+			safe_not_equal,
+			{},
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+		}
+	}
+}
+
+customElements.define("goa-one-column-layout", OneColumnLayout);
+
+/* libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte generated by Svelte v3.49.0 */
+
+function create_fragment$3(ctx) {
+	let div;
 	let header;
 	let t0;
 	let section;
@@ -11312,7 +11362,7 @@ class TwoColumnLayout extends SvelteElement {
 				customElement: true
 			},
 			instance$2,
-			create_fragment$4,
+			create_fragment$3,
 			safe_not_equal,
 			{ navcolumnwidth: 0, maxcontentwidth: 1 },
 			null
@@ -11357,7 +11407,7 @@ customElements.define("goa-two-column-layout", TwoColumnLayout);
 
 /* libs/web-components/src/layouts/FullScreenNavbarLayout.svelte generated by Svelte v3.49.0 */
 
-function create_fragment$3(ctx) {
+function create_fragment$2(ctx) {
 	let div;
 
 	return {
@@ -11406,7 +11456,7 @@ class FullScreenNavbarLayout extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$3,
+			create_fragment$2,
 			safe_not_equal,
 			{},
 			null
@@ -11470,7 +11520,7 @@ function create_if_block(ctx) {
 	};
 }
 
-function create_fragment$2(ctx) {
+function create_fragment$1(ctx) {
 	let goa_container;
 	let t0;
 	let t1;
@@ -11490,7 +11540,7 @@ function create_fragment$2(ctx) {
 			attr(div, "class", "content");
 			attr(div, "slot", "");
 			set_custom_element_data(goa_container, "type", /*type*/ ctx[3]);
-			set_custom_element_data(goa_container, "headingsize", /*headingsize*/ ctx[4]);
+			set_custom_element_data(goa_container, "accent", /*accent*/ ctx[4]);
 		},
 		m(target, anchor) {
 			insert(target, goa_container, anchor);
@@ -11533,8 +11583,8 @@ function create_fragment$2(ctx) {
 				set_custom_element_data(goa_container, "type", /*type*/ ctx[3]);
 			}
 
-			if (dirty & /*headingsize*/ 16) {
-				set_custom_element_data(goa_container, "headingsize", /*headingsize*/ ctx[4]);
+			if (dirty & /*accent*/ 16) {
+				set_custom_element_data(goa_container, "accent", /*accent*/ ctx[4]);
 			}
 		},
 		i: noop,
@@ -11552,17 +11602,17 @@ function instance$1($$self, $$props, $$invalidate) {
 	let { actions = "" } = $$props;
 	let { content } = $$props;
 	let { type = "default" } = $$props;
-	let { headingsize = "large" } = $$props;
+	let { accent = "thick" } = $$props;
 
 	$$self.$$set = $$props => {
 		if ('title' in $$props) $$invalidate(0, title = $$props.title);
 		if ('actions' in $$props) $$invalidate(1, actions = $$props.actions);
 		if ('content' in $$props) $$invalidate(2, content = $$props.content);
 		if ('type' in $$props) $$invalidate(3, type = $$props.type);
-		if ('headingsize' in $$props) $$invalidate(4, headingsize = $$props.headingsize);
+		if ('accent' in $$props) $$invalidate(4, accent = $$props.accent);
 	};
 
-	return [title, actions, content, type, headingsize];
+	return [title, actions, content, type, accent];
 }
 
 class ContainerWrapper_test extends SvelteElement {
@@ -11577,14 +11627,14 @@ class ContainerWrapper_test extends SvelteElement {
 				customElement: true
 			},
 			instance$1,
-			create_fragment$2,
+			create_fragment$1,
 			safe_not_equal,
 			{
 				title: 0,
 				actions: 1,
 				content: 2,
 				type: 3,
-				headingsize: 4
+				accent: 4
 			},
 			null
 		);
@@ -11602,7 +11652,7 @@ class ContainerWrapper_test extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["title", "actions", "content", "type", "headingsize"];
+		return ["title", "actions", "content", "type", "accent"];
 	}
 
 	get title() {
@@ -11641,12 +11691,12 @@ class ContainerWrapper_test extends SvelteElement {
 		flush();
 	}
 
-	get headingsize() {
+	get accent() {
 		return this.$$.ctx[4];
 	}
 
-	set headingsize(headingsize) {
-		this.$$set({ headingsize });
+	set accent(accent) {
+		this.$$set({ accent });
 		flush();
 	}
 }
@@ -11655,7 +11705,7 @@ customElements.define("test-container", ContainerWrapper_test);
 
 /* libs/web-components/src/components/divider/Divider.svelte generated by Svelte v3.49.0 */
 
-function create_fragment$1(ctx) {
+function create_fragment(ctx) {
 	let hr;
 
 	return {
@@ -11725,7 +11775,7 @@ class Divider extends SvelteElement {
 				customElement: true
 			},
 			instance,
-			create_fragment$1,
+			create_fragment,
 			safe_not_equal,
 			{ spacing: 1 },
 			null
@@ -11758,62 +11808,3 @@ class Divider extends SvelteElement {
 }
 
 customElements.define("goa-divider", Divider);
-
-/* libs/web-components/src/components/page/Page.svelte generated by Svelte v3.49.0 */
-
-function create_fragment(ctx) {
-	let div;
-
-	return {
-		c() {
-			div = element("div");
-
-			div.innerHTML = `<section class="header"><slot name="header"></slot></section> 
-
-  <main><slot></slot></main> 
-
-  <section class="footer"><slot name="footer"></slot></section>`;
-
-			this.c = noop;
-			attr(div, "class", "page");
-		},
-		m(target, anchor) {
-			insert(target, div, anchor);
-		},
-		p: noop,
-		i: noop,
-		o: noop,
-		d(detaching) {
-			if (detaching) detach(div);
-		}
-	};
-}
-
-class Page extends SvelteElement {
-	constructor(options) {
-		super();
-		this.shadowRoot.innerHTML = `<style>.page{height:100vh;display:flex;flex-direction:column}.header,.footer{flex:0 0 auto}main{flex:1 1 auto}</style>`;
-
-		init(
-			this,
-			{
-				target: this.shadowRoot,
-				props: attribute_to_object(this.attributes),
-				customElement: true
-			},
-			null,
-			create_fragment,
-			safe_not_equal,
-			{},
-			null
-		);
-
-		if (options) {
-			if (options.target) {
-				insert(options.target, this, options.anchor);
-			}
-		}
-	}
-}
-
-customElements.define("goa-page", Page);