@abgov/web-components 1.15.0-alpha.5 → 1.15.0-alpha.6

package/package.json

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

package/web-components.es.js

@@ -1154,10 +1154,11 @@ function create_fragment$Z(ctx) {
 			attr(span0, "data-testid", span0_data_testid_value = `${/*testid*/ ctx[3]}-heading`);
 			attr(span1, "class", "secondary-text");
 			attr(div0, "class", "heading-content");
+			toggle_class(div0, "heading-content-top", /*_headingContentSlotChildren*/ ctx[10].length);
 			attr(div1, "class", "title");
 			attr(summary, "class", summary_class_value = `container-${/*headingsize*/ ctx[2]}`);
 			attr(div2, "class", "content");
-			details.open = /*isOpen*/ ctx[9];
+			details.open = /*isOpen*/ ctx[11];
 			attr(div3, "style", div3_style_value = calculateMargin(/*mt*/ ctx[4], /*mr*/ ctx[5], /*mb*/ ctx[6], /*ml*/ ctx[7]));
 
 			attr(div3, "class", `
@@ -1180,15 +1181,16 @@ function create_fragment$Z(ctx) {
 			append(span1, t3);
 			append(div1, t4);
 			append(div1, div0);
+			/*div1_binding*/ ctx[13](div1);
 			append(details, t5);
 			append(details, div2);
 
 			if (!mounted) {
 				dispose = [
-					listen(summary, "mouseover", /*mouseover_handler*/ ctx[11]),
-					listen(summary, "mouseout", /*mouseout_handler*/ ctx[12]),
-					listen(summary, "focus", /*focus_handler*/ ctx[13]),
-					listen(summary, "blur", /*blur_handler*/ ctx[14])
+					listen(summary, "mouseover", /*mouseover_handler*/ ctx[14]),
+					listen(summary, "mouseout", /*mouseout_handler*/ ctx[15]),
+					listen(summary, "focus", /*focus_handler*/ ctx[16]),
+					listen(summary, "blur", /*blur_handler*/ ctx[17])
 				];
 
 				mounted = true;
@@ -1213,12 +1215,16 @@ function create_fragment$Z(ctx) {
 
 			if (dirty & /*secondarytext*/ 2) set_data(t3, /*secondarytext*/ ctx[1]);
 
+			if (dirty & /*_headingContentSlotChildren*/ 1024) {
+				toggle_class(div0, "heading-content-top", /*_headingContentSlotChildren*/ ctx[10].length);
+			}
+
 			if (dirty & /*headingsize*/ 4 && summary_class_value !== (summary_class_value = `container-${/*headingsize*/ ctx[2]}`)) {
 				attr(summary, "class", summary_class_value);
 			}
 
-			if (dirty & /*isOpen*/ 512) {
-				details.open = /*isOpen*/ ctx[9];
+			if (dirty & /*isOpen*/ 2048) {
+				details.open = /*isOpen*/ ctx[11];
 			}
 
 			if (dirty & /*mt, mr, mb, ml*/ 240 && div3_style_value !== (div3_style_value = calculateMargin(/*mt*/ ctx[4], /*mr*/ ctx[5], /*mb*/ ctx[6], /*ml*/ ctx[7]))) {
@@ -1233,6 +1239,7 @@ function create_fragment$Z(ctx) {
 		o: noop,
 		d(detaching) {
 			if (detaching) detach(div3);
+			/*div1_binding*/ ctx[13](null);
 			mounted = false;
 			run_all(dispose);
 		}
@@ -1252,19 +1259,43 @@ function instance$T($$self, $$props, $$invalidate) {
 	let { mb = "xs" } = $$props;
 	let { ml = null } = $$props;
 	let _hovering = false;
+	let _titleEl = null;
+	let _headingContentSlotChildren = [];
 
 	onMount(() => {
 		validateRequired("GoAAccordion", { heading });
 		validateHeadingSize(headingsize);
+		$$invalidate(10, _headingContentSlotChildren = getChildren());
 	});
 
+	function getChildren() {
+		if (_titleEl) {
+			const slot = _titleEl.querySelector("slot");
+
+			if (slot) {
+				return [...slot.assignedElements()];
+			} else {
+				return [..._titleEl.children]; // unit tests
+			}
+		}
+
+		return [];
+	}
+
+	function div1_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			_titleEl = $$value;
+			$$invalidate(9, _titleEl);
+		});
+	}
+
 	const mouseover_handler = () => $$invalidate(8, _hovering = true);
 	const mouseout_handler = () => $$invalidate(8, _hovering = false);
 	const focus_handler = () => $$invalidate(8, _hovering = false);
 	const blur_handler = () => $$invalidate(8, _hovering = false);
 
 	$$self.$$set = $$props => {
-		if ('open' in $$props) $$invalidate(10, open = $$props.open);
+		if ('open' in $$props) $$invalidate(12, open = $$props.open);
 		if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
 		if ('secondarytext' in $$props) $$invalidate(1, secondarytext = $$props.secondarytext);
 		if ('headingsize' in $$props) $$invalidate(2, headingsize = $$props.headingsize);
@@ -1276,8 +1307,8 @@ function instance$T($$self, $$props, $$invalidate) {
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*open*/ 1024) {
-			$$invalidate(9, isOpen = toBoolean(open));
+		if ($$self.$$.dirty & /*open*/ 4096) {
+			$$invalidate(11, isOpen = toBoolean(open));
 		}
 	};
 
@@ -1291,8 +1322,11 @@ function instance$T($$self, $$props, $$invalidate) {
 		mb,
 		ml,
 		_hovering,
+		_titleEl,
+		_headingContentSlotChildren,
 		isOpen,
 		open,
+		div1_binding,
 		mouseover_handler,
 		mouseout_handler,
 		focus_handler,
@@ -1306,7 +1340,7 @@ class Accordion extends SvelteElement {
 		const style = document.createElement('style');
 
 		style.textContent = `:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4)}.goa-accordion,.goa-accordion *{box-sizing:border-box}summary{min-height:3.5rem;border-width:var(--goa-border-width-s);border-style:solid;border-radius:var(--goa-border-radius-m);background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);color:var(--goa-color-text-default);;;padding:0.875rem 1rem 0 0;cursor:pointer;list-style:none;display:flex;align-items:flex-start;position:relative}summary.container-medium{min-height:4rem}summary::marker,summary::-webkit-details-marker{display:none}summary .title{display:flex;align-items:center;flex:1}.title span{padding-bottom:var(--goa-space-3xs, 0)}summary .heading{font:var(--goa-typography-heading-s);padding-right:1rem}summary .secondary-text{font:var(--goa-typography-body-s);line-height:1.5rem;padding-right:1rem}summary .heading-content{flex:1
-  }.content{border-bottom:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-left:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-right:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-bottom-left-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);padding:1.5rem;padding-left:3.5rem;padding-right:2rem}.content ::slotted(p:last-child){margin-bottom:0 !important}summary goa-icon{padding:0.125rem 1rem}summary.container-medium goa-icon{padding:0.375rem 1rem}details[open] goa-icon{transform:rotate(90deg)}details[open] summary{border-bottom-left-radius:var(--goa-border-radius-none);border-bottom-right-radius:var(--goa-border-radius-none)}summary:hover{background-color:var(--goa-color-greyscale-200)}summary:focus,summary:active{background-color:var(--goa-color-greyscale-100);outline:none}summary:active::before,summary:focus::before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:var(--goa-border-width-l) solid var(--goa-color-interactive-focus);border-radius:4px}summary .heading.heading-medium{line-height:2rem;font:var(--goa-typography-heading-m)}@media(max-width: 640px){summary{align-items:flex-start}summary .title{flex-direction:column;align-items:flex-start}}`;
+  }.content{border-bottom:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-left:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-right:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-bottom-left-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);padding:1.5rem;padding-left:3.5rem;padding-right:2rem}.content ::slotted(p:last-child){margin-bottom:0 !important}summary goa-icon{padding:0.125rem 1rem}summary.container-medium goa-icon{padding:0.375rem 1rem}details[open] goa-icon{transform:rotate(90deg)}details[open] summary{border-bottom-left-radius:var(--goa-border-radius-none);border-bottom-right-radius:var(--goa-border-radius-none)}summary:hover{background-color:var(--goa-color-greyscale-200)}summary:focus,summary:active{background-color:var(--goa-color-greyscale-100);outline:none}summary:active::before,summary:focus::before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:var(--goa-border-width-l) solid var(--goa-color-interactive-focus);border-radius:4px}summary .heading.heading-medium{line-height:2rem;font:var(--goa-typography-heading-m)}@media(max-width: 640px){summary{align-items:flex-start}summary .title{flex-direction:column;align-items:flex-start;padding-bottom:0.875rem}summary .title span{padding-bottom:0}summary .heading-content.heading-content-top{margin-top:var(--goa-space-xs)}}`;
 
 		this.shadowRoot.appendChild(style);
 
@@ -1321,7 +1355,7 @@ class Accordion extends SvelteElement {
 			create_fragment$Z,
 			safe_not_equal,
 			{
-				open: 10,
+				open: 12,
 				heading: 0,
 				secondarytext: 1,
 				headingsize: 2,
@@ -1361,7 +1395,7 @@ class Accordion extends SvelteElement {
 	}
 
 	get open() {
-		return this.$$.ctx[10];
+		return this.$$.ctx[12];
 	}
 
 	set open(open) {