@abgov/react-components 4.0.0-alpha.62 → 4.0.0-alpha.64

package/lib/chip/chip.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
+declare type ChipVariant = "filter";
 interface WCProps {
     ref: React.RefObject<HTMLElement>;
     leadingicon: string;
     error: boolean;
     deletable: boolean;
     content: string;
+    variant?: string;
 }
 declare global {
     namespace JSX {
@@ -19,6 +21,7 @@ interface Props {
     leadingIcon?: string;
     error?: boolean;
     content: string;
+    variant?: ChipVariant;
 }
-export declare const GoAChip: ({ leadingIcon, deletable, error, content, onClick }: Props) => JSX.Element;
+export declare const GoAChip: ({ leadingIcon, deletable, error, variant, content, onClick }: Props) => JSX.Element;
 export default GoAChip;

package/lib/container/container.d.ts

@@ -1,11 +1,10 @@
 import React, { FC, ReactNode } from 'react';
 declare type ContainerType = 'interactive' | 'non-interactive' | 'info' | 'error' | 'success' | 'warning';
-declare type HeadingSize = 'large' | 'small' | 'none';
+declare type Accent = 'thick' | 'thin' | 'filled';
 declare type ContainerPadding = "relaxed" | "compact";
 interface WCProps {
     type?: ContainerType;
-    headingsize?: HeadingSize;
-    colored?: boolean;
+    accent?: Accent;
     padding?: ContainerPadding;
 }
 declare global {
@@ -16,10 +15,9 @@ declare global {
     }
 }
 interface Props {
-    headingSize?: HeadingSize;
+    accent?: Accent;
     type?: ContainerType;
     title?: ReactNode;
-    colored?: boolean;
     padding?: ContainerPadding;
     actions?: ReactNode;
     children?: ReactNode;

package/package.json

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

package/react-components.esm.js

@@ -3456,7 +3456,7 @@ function create_if_block_1$8(ctx) {
     }
 
   };
-} // (42:2) {#if _deletable}
+} // (44:2) {#if _deletable}
 
 
 function create_if_block$e(ctx) {
@@ -3472,14 +3472,14 @@ function create_if_block$e(ctx) {
       set_custom_element_data(goa_icon, "type", "close-circle");
       set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value =
       /*_error*/
-      ctx[4] ? "var(--goa-color-status-emergency)" :
+      ctx[5] ? "var(--goa-color-status-emergency)" :
       /*_hovering*/
-      ctx[3] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)");
+      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] ?
+      ctx[5] ?
       /*_hovering*/
-      ctx[3] ? 1 : 0.5 : 1);
+      ctx[4] ? 1 : 0.5 : 1);
     },
 
     m(target, anchor) {
@@ -3489,21 +3489,21 @@ function create_if_block$e(ctx) {
     p(ctx, dirty) {
       if (dirty &
       /*_error, _hovering*/
-      24 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value =
+      48 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value =
       /*_error*/
-      ctx[4] ? "var(--goa-color-status-emergency)" :
+      ctx[5] ? "var(--goa-color-status-emergency)" :
       /*_hovering*/
-      ctx[3] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)")) {
+      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 =
+      48 && goa_icon_opacity_value !== (goa_icon_opacity_value =
       /*_error*/
-      ctx[4] ?
+      ctx[5] ?
       /*_hovering*/
-      ctx[3] ? 1 : 0.5 : 1)) {
+      ctx[4] ? 1 : 0.5 : 1)) {
         set_custom_element_data(goa_icon, "opacity", goa_icon_opacity_value);
       }
     },
@@ -3528,7 +3528,7 @@ function create_fragment$u(ctx) {
   ctx[0] && create_if_block_1$8(ctx);
   let if_block1 =
   /*_deletable*/
-  ctx[5] && create_if_block$e(ctx);
+  ctx[6] && create_if_block$e(ctx);
   return {
     c() {
       div1 = element("div");
@@ -3547,10 +3547,13 @@ function create_fragment$u(ctx) {
       attr(div1, "tabindex", "0");
       toggle_class(div1, "deletable",
       /*_deletable*/
-      ctx[5]);
+      ctx[6]);
       toggle_class(div1, "error",
       /*_error*/
-      ctx[4]);
+      ctx[5]);
+      toggle_class(div1, "variant",
+      /*variant*/
+      ctx[2]);
     },
 
     m(target, anchor) {
@@ -3563,20 +3566,20 @@ function create_fragment$u(ctx) {
       if (if_block1) if_block1.m(div1, null);
       /*div1_binding*/
 
-      ctx[9](div1);
+      ctx[10](div1);
 
       if (!mounted) {
         dispose = [listen(div1, "click",
         /*click_handler*/
-        ctx[10]), listen(div1, "mouseover",
+        ctx[11]), listen(div1, "mouseover",
         /*mouseover_handler*/
-        ctx[11]), listen(div1, "mouseout",
+        ctx[12]), listen(div1, "mouseout",
         /*mouseout_handler*/
-        ctx[12]), listen(div1, "focus",
+        ctx[13]), listen(div1, "focus",
         /*focus_handler*/
-        ctx[13]), listen(div1, "blur",
+        ctx[14]), listen(div1, "blur",
         /*blur_handler*/
-        ctx[14])];
+        ctx[15])];
         mounted = true;
       }
     },
@@ -3605,7 +3608,7 @@ function create_fragment$u(ctx) {
 
       if (
       /*_deletable*/
-      ctx[5]) {
+      ctx[6]) {
         if (if_block1) {
           if_block1.p(ctx, dirty);
         } else {
@@ -3620,18 +3623,26 @@ function create_fragment$u(ctx) {
 
       if (dirty &
       /*_deletable*/
-      32) {
+      64) {
         toggle_class(div1, "deletable",
         /*_deletable*/
-        ctx[5]);
+        ctx[6]);
       }
 
       if (dirty &
       /*_error*/
-      16) {
+      32) {
         toggle_class(div1, "error",
         /*_error*/
-        ctx[4]);
+        ctx[5]);
+      }
+
+      if (dirty &
+      /*variant*/
+      4) {
+        toggle_class(div1, "variant",
+        /*variant*/
+        ctx[2]);
       }
     },
 
@@ -3644,7 +3655,7 @@ function create_fragment$u(ctx) {
       if (if_block1) if_block1.d();
       /*div1_binding*/
 
-      ctx[9](null);
+      ctx[10](null);
       mounted = false;
       run_all(dispose);
     }
@@ -3665,6 +3676,9 @@ function instance$s($$self, $$props, $$invalidate) {
   let {
     content
   } = $$props;
+  let {
+    variant
+  } = $$props;
   let el;
   let _hovering = false; // booleans
 
@@ -3683,42 +3697,43 @@ 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 mouseover_handler = () => $$invalidate(4, _hovering = true);
 
-  const mouseout_handler = () => $$invalidate(3, _hovering = false);
+  const mouseout_handler = () => $$invalidate(4, _hovering = false);
 
-  const focus_handler = () => $$invalidate(3, _hovering = false);
+  const focus_handler = () => $$invalidate(4, _hovering = false);
 
-  const blur_handler = () => $$invalidate(3, _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));
+    256) {
+      $$invalidate(5, _error = toBoolean(error));
     }
 
     if ($$self.$$.dirty &
     /*deletable*/
-    256) {
-      $$invalidate(5, _deletable = toBoolean(deletable));
+    512) {
+      $$invalidate(6, _deletable = toBoolean(deletable));
     }
   };
 
-  return [leadingicon, content, el, _hovering, _error, _deletable, onDelete, error, deletable, div1_binding, click_handler, mouseover_handler, mouseout_handler, focus_handler, blur_handler];
+  return [leadingicon, content, variant, el, _hovering, _error, _deletable, onDelete, error, deletable, div1_binding, click_handler, mouseover_handler, mouseout_handler, focus_handler, blur_handler];
 }
 
 class Chip extends SvelteElement {
@@ -3731,9 +3746,10 @@ class Chip extends SvelteElement {
       customElement: true
     }, instance$s, create_fragment$u, safe_not_equal, {
       leadingicon: 0,
-      error: 7,
-      deletable: 8,
-      content: 1
+      error: 8,
+      deletable: 9,
+      content: 1,
+      variant: 2
     }, null);
 
     if (options) {
@@ -3749,7 +3765,7 @@ class Chip extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["leadingicon", "error", "deletable", "content"];
+    return ["leadingicon", "error", "deletable", "content", "variant"];
   }
 
   get leadingicon() {
@@ -3764,7 +3780,7 @@ class Chip extends SvelteElement {
   }
 
   get error() {
-    return this.$$.ctx[7];
+    return this.$$.ctx[8];
   }
 
   set error(error) {
@@ -3775,7 +3791,7 @@ class Chip extends SvelteElement {
   }
 
   get deletable() {
-    return this.$$.ctx[8];
+    return this.$$.ctx[9];
   }
 
   set deletable(deletable) {
@@ -3796,6 +3812,17 @@ class Chip extends SvelteElement {
     flush();
   }
 
+  get variant() {
+    return this.$$.ctx[2];
+  }
+
+  set variant(variant) {
+    this.$$set({
+      variant
+    });
+    flush();
+  }
+
 }
 
 customElements.define("goa-chip", Chip);
@@ -4513,7 +4540,7 @@ function create_fragment$s(ctx) {
       attr(div0, "class", "title");
       attr(div1, "class", "actions");
       attr(header, "class", header_class_value = "heading--" +
-      /*headingsize*/
+      /*accent*/
       ctx[1]);
       attr(div2, "class", "content");
       attr(div3, "class", div3_class_value = `
@@ -4524,10 +4551,10 @@ function create_fragment$s(ctx) {
     padding--${
       /*padding*/
       ctx[2]}
+    accent--${
+      /*accent*/
+      ctx[1]}
   `);
-      toggle_class(div3, "colored",
-      /*_colored*/
-      ctx[3]);
     },
 
     m(target, anchor) {
@@ -4542,16 +4569,16 @@ function create_fragment$s(ctx) {
 
     p(ctx, [dirty]) {
       if (dirty &
-      /*headingsize*/
+      /*accent*/
       2 && header_class_value !== (header_class_value = "heading--" +
-      /*headingsize*/
+      /*accent*/
       ctx[1])) {
         attr(header, "class", header_class_value);
       }
 
       if (dirty &
-      /*type, padding*/
-      5 && div3_class_value !== (div3_class_value = `
+      /*type, padding, accent*/
+      7 && div3_class_value !== (div3_class_value = `
     goa-container
     goa-container--${
       /*type*/
@@ -4559,17 +4586,12 @@ function create_fragment$s(ctx) {
     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,
@@ -4583,16 +4605,11 @@ function create_fragment$s(ctx) {
 }
 
 function instance$q($$self, $$props, $$invalidate) {
-  let _colored;
-
   let {
-    type = 'non-interactive'
+    type = 'interactive'
   } = $$props;
   let {
-    colored = "false"
-  } = $$props;
-  let {
-    headingsize = 'large'
+    accent = 'filled'
   } = $$props;
   let {
     padding = "relaxed"
@@ -4600,34 +4617,24 @@ function instance$q($$self, $$props, $$invalidate) {
 
   $$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, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
     }, instance$q, create_fragment$s, safe_not_equal, {
       type: 0,
-      colored: 4,
-      headingsize: 1,
+      accent: 1,
       padding: 2
     }, null);
 
@@ -4644,7 +4651,7 @@ class Container extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["type", "colored", "headingsize", "padding"];
+    return ["type", "accent", "padding"];
   }
 
   get type() {
@@ -4658,24 +4665,13 @@ 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) {
+  set accent(accent) {
     this.$$set({
-      headingsize
+      accent
     });
     flush();
   }
@@ -13894,8 +13890,8 @@ function create_fragment$1(ctx) {
       set_custom_element_data(goa_container, "type",
       /*type*/
       ctx[3]);
-      set_custom_element_data(goa_container, "headingsize",
-      /*headingsize*/
+      set_custom_element_data(goa_container, "accent",
+      /*accent*/
       ctx[4]);
     },
 
@@ -13957,10 +13953,10 @@ function create_fragment$1(ctx) {
       }
 
       if (dirty &
-      /*headingsize*/
+      /*accent*/
       16) {
-        set_custom_element_data(goa_container, "headingsize",
-        /*headingsize*/
+        set_custom_element_data(goa_container, "accent",
+        /*accent*/
         ctx[4]);
       }
     },
@@ -13991,7 +13987,7 @@ function instance$1($$self, $$props, $$invalidate) {
     type = "default"
   } = $$props;
   let {
-    headingsize = "large"
+    accent = "thick"
   } = $$props;
 
   $$self.$$set = $$props => {
@@ -13999,10 +13995,10 @@ function instance$1($$self, $$props, $$invalidate) {
     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 {
@@ -14017,7 +14013,7 @@ class ContainerWrapper_test extends SvelteElement {
       actions: 1,
       content: 2,
       type: 3,
-      headingsize: 4
+      accent: 4
     }, null);
 
     if (options) {
@@ -14033,7 +14029,7 @@ class ContainerWrapper_test extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["title", "actions", "content", "type", "headingsize"];
+    return ["title", "actions", "content", "type", "accent"];
   }
 
   get title() {
@@ -14080,13 +14076,13 @@ class ContainerWrapper_test extends SvelteElement {
     flush();
   }
 
-  get headingsize() {
+  get accent() {
     return this.$$.ctx[4];
   }
 
-  set headingsize(headingsize) {
+  set accent(accent) {
     this.$$set({
-      headingsize
+      accent
     });
     flush();
   }
@@ -14437,6 +14433,7 @@ const GoAChip = ({
   leadingIcon: _leadingIcon = "",
   deletable: _deletable = false,
   error: _error = false,
+  variant,
   content,
   onClick
 }) => {
@@ -14460,7 +14457,8 @@ const GoAChip = ({
     leadingicon: _leadingIcon,
     error: _error,
     deletable: _deletable,
-    content: content
+    content: content,
+    variant: variant
   }, void 0);
 };
 
@@ -14481,9 +14479,8 @@ const GoACircularProgress = ({
 };
 
 const GoAContainer = ({
-  headingSize,
+  accent,
   title,
-  colored: _colored = false,
   padding,
   children,
   actions,
@@ -14492,8 +14489,7 @@ const GoAContainer = ({
   return jsxs("goa-container", Object.assign({
     type: type,
     padding: padding,
-    headingsize: headingSize,
-    colored: _colored
+    accent: accent
   }, {
     children: [title && jsx("div", Object.assign({
       slot: "title"

package/react-components.umd.js

@@ -3497,7 +3497,7 @@
 	    }
 
 	  };
-	} // (42:2) {#if _deletable}
+	} // (44:2) {#if _deletable}
 
 
 	function create_if_block$e(ctx) {
@@ -3513,14 +3513,14 @@
 	      set_custom_element_data(goa_icon, "type", "close-circle");
 	      set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value =
 	      /*_error*/
-	      ctx[4] ? "var(--goa-color-status-emergency)" :
+	      ctx[5] ? "var(--goa-color-status-emergency)" :
 	      /*_hovering*/
-	      ctx[3] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)");
+	      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] ?
+	      ctx[5] ?
 	      /*_hovering*/
-	      ctx[3] ? 1 : 0.5 : 1);
+	      ctx[4] ? 1 : 0.5 : 1);
 	    },
 
 	    m(target, anchor) {
@@ -3530,21 +3530,21 @@
 	    p(ctx, dirty) {
 	      if (dirty &
 	      /*_error, _hovering*/
-	      24 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value =
+	      48 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value =
 	      /*_error*/
-	      ctx[4] ? "var(--goa-color-status-emergency)" :
+	      ctx[5] ? "var(--goa-color-status-emergency)" :
 	      /*_hovering*/
-	      ctx[3] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)")) {
+	      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 =
+	      48 && goa_icon_opacity_value !== (goa_icon_opacity_value =
 	      /*_error*/
-	      ctx[4] ?
+	      ctx[5] ?
 	      /*_hovering*/
-	      ctx[3] ? 1 : 0.5 : 1)) {
+	      ctx[4] ? 1 : 0.5 : 1)) {
 	        set_custom_element_data(goa_icon, "opacity", goa_icon_opacity_value);
 	      }
 	    },
@@ -3569,7 +3569,7 @@
 	  ctx[0] && create_if_block_1$8(ctx);
 	  let if_block1 =
 	  /*_deletable*/
-	  ctx[5] && create_if_block$e(ctx);
+	  ctx[6] && create_if_block$e(ctx);
 	  return {
 	    c() {
 	      div1 = element("div");
@@ -3588,10 +3588,13 @@
 	      attr(div1, "tabindex", "0");
 	      toggle_class(div1, "deletable",
 	      /*_deletable*/
-	      ctx[5]);
+	      ctx[6]);
 	      toggle_class(div1, "error",
 	      /*_error*/
-	      ctx[4]);
+	      ctx[5]);
+	      toggle_class(div1, "variant",
+	      /*variant*/
+	      ctx[2]);
 	    },
 
 	    m(target, anchor) {
@@ -3604,20 +3607,20 @@
 	      if (if_block1) if_block1.m(div1, null);
 	      /*div1_binding*/
 
-	      ctx[9](div1);
+	      ctx[10](div1);
 
 	      if (!mounted) {
 	        dispose = [listen(div1, "click",
 	        /*click_handler*/
-	        ctx[10]), listen(div1, "mouseover",
+	        ctx[11]), listen(div1, "mouseover",
 	        /*mouseover_handler*/
-	        ctx[11]), listen(div1, "mouseout",
+	        ctx[12]), listen(div1, "mouseout",
 	        /*mouseout_handler*/
-	        ctx[12]), listen(div1, "focus",
+	        ctx[13]), listen(div1, "focus",
 	        /*focus_handler*/
-	        ctx[13]), listen(div1, "blur",
+	        ctx[14]), listen(div1, "blur",
 	        /*blur_handler*/
-	        ctx[14])];
+	        ctx[15])];
 	        mounted = true;
 	      }
 	    },
@@ -3646,7 +3649,7 @@
 
 	      if (
 	      /*_deletable*/
-	      ctx[5]) {
+	      ctx[6]) {
 	        if (if_block1) {
 	          if_block1.p(ctx, dirty);
 	        } else {
@@ -3661,18 +3664,26 @@
 
 	      if (dirty &
 	      /*_deletable*/
-	      32) {
+	      64) {
 	        toggle_class(div1, "deletable",
 	        /*_deletable*/
-	        ctx[5]);
+	        ctx[6]);
 	      }
 
 	      if (dirty &
 	      /*_error*/
-	      16) {
+	      32) {
 	        toggle_class(div1, "error",
 	        /*_error*/
-	        ctx[4]);
+	        ctx[5]);
+	      }
+
+	      if (dirty &
+	      /*variant*/
+	      4) {
+	        toggle_class(div1, "variant",
+	        /*variant*/
+	        ctx[2]);
 	      }
 	    },
 
@@ -3685,7 +3696,7 @@
 	      if (if_block1) if_block1.d();
 	      /*div1_binding*/
 
-	      ctx[9](null);
+	      ctx[10](null);
 	      mounted = false;
 	      run_all(dispose);
 	    }
@@ -3706,6 +3717,9 @@
 	  let {
 	    content
 	  } = $$props;
+	  let {
+	    variant
+	  } = $$props;
 	  let el;
 	  let _hovering = false; // booleans
 
@@ -3724,42 +3738,43 @@
 	  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 mouseover_handler = () => $$invalidate(4, _hovering = true);
 
-	  const mouseout_handler = () => $$invalidate(3, _hovering = false);
+	  const mouseout_handler = () => $$invalidate(4, _hovering = false);
 
-	  const focus_handler = () => $$invalidate(3, _hovering = false);
+	  const focus_handler = () => $$invalidate(4, _hovering = false);
 
-	  const blur_handler = () => $$invalidate(3, _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));
+	    256) {
+	      $$invalidate(5, _error = toBoolean(error));
 	    }
 
 	    if ($$self.$$.dirty &
 	    /*deletable*/
-	    256) {
-	      $$invalidate(5, _deletable = toBoolean(deletable));
+	    512) {
+	      $$invalidate(6, _deletable = toBoolean(deletable));
 	    }
 	  };
 
-	  return [leadingicon, content, el, _hovering, _error, _deletable, onDelete, error, deletable, div1_binding, click_handler, mouseover_handler, mouseout_handler, focus_handler, blur_handler];
+	  return [leadingicon, content, variant, el, _hovering, _error, _deletable, onDelete, error, deletable, div1_binding, click_handler, mouseover_handler, mouseout_handler, focus_handler, blur_handler];
 	}
 
 	class Chip extends SvelteElement {
@@ -3772,9 +3787,10 @@
 	      customElement: true
 	    }, instance$s, create_fragment$u, safe_not_equal, {
 	      leadingicon: 0,
-	      error: 7,
-	      deletable: 8,
-	      content: 1
+	      error: 8,
+	      deletable: 9,
+	      content: 1,
+	      variant: 2
 	    }, null);
 
 	    if (options) {
@@ -3790,7 +3806,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["leadingicon", "error", "deletable", "content"];
+	    return ["leadingicon", "error", "deletable", "content", "variant"];
 	  }
 
 	  get leadingicon() {
@@ -3805,7 +3821,7 @@
 	  }
 
 	  get error() {
-	    return this.$$.ctx[7];
+	    return this.$$.ctx[8];
 	  }
 
 	  set error(error) {
@@ -3816,7 +3832,7 @@
 	  }
 
 	  get deletable() {
-	    return this.$$.ctx[8];
+	    return this.$$.ctx[9];
 	  }
 
 	  set deletable(deletable) {
@@ -3837,6 +3853,17 @@
 	    flush();
 	  }
 
+	  get variant() {
+	    return this.$$.ctx[2];
+	  }
+
+	  set variant(variant) {
+	    this.$$set({
+	      variant
+	    });
+	    flush();
+	  }
+
 	}
 
 	customElements.define("goa-chip", Chip);
@@ -4555,7 +4582,7 @@
 	      attr(div0, "class", "title");
 	      attr(div1, "class", "actions");
 	      attr(header, "class", header_class_value = "heading--" +
-	      /*headingsize*/
+	      /*accent*/
 	      ctx[1]);
 	      attr(div2, "class", "content");
 	      attr(div3, "class", div3_class_value = `
@@ -4566,10 +4593,10 @@
     padding--${
       /*padding*/
       ctx[2]}
+    accent--${
+      /*accent*/
+      ctx[1]}
   `);
-	      toggle_class(div3, "colored",
-	      /*_colored*/
-	      ctx[3]);
 	    },
 
 	    m(target, anchor) {
@@ -4584,16 +4611,16 @@
 
 	    p(ctx, [dirty]) {
 	      if (dirty &
-	      /*headingsize*/
+	      /*accent*/
 	      2 && header_class_value !== (header_class_value = "heading--" +
-	      /*headingsize*/
+	      /*accent*/
 	      ctx[1])) {
 	        attr(header, "class", header_class_value);
 	      }
 
 	      if (dirty &
-	      /*type, padding*/
-	      5 && div3_class_value !== (div3_class_value = `
+	      /*type, padding, accent*/
+	      7 && div3_class_value !== (div3_class_value = `
     goa-container
     goa-container--${
       /*type*/
@@ -4601,17 +4628,12 @@
     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,
@@ -4625,16 +4647,11 @@
 	}
 
 	function instance$q($$self, $$props, $$invalidate) {
-	  let _colored;
-
 	  let {
-	    type = 'non-interactive'
+	    type = 'interactive'
 	  } = $$props;
 	  let {
-	    colored = "false"
-	  } = $$props;
-	  let {
-	    headingsize = 'large'
+	    accent = 'filled'
 	  } = $$props;
 	  let {
 	    padding = "relaxed"
@@ -4642,34 +4659,24 @@
 
 	  $$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, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
 	    }, instance$q, create_fragment$s, safe_not_equal, {
 	      type: 0,
-	      colored: 4,
-	      headingsize: 1,
+	      accent: 1,
 	      padding: 2
 	    }, null);
 
@@ -4686,7 +4693,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["type", "colored", "headingsize", "padding"];
+	    return ["type", "accent", "padding"];
 	  }
 
 	  get type() {
@@ -4700,24 +4707,13 @@
 	    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) {
+	  set accent(accent) {
 	    this.$$set({
-	      headingsize
+	      accent
 	    });
 	    flush();
 	  }
@@ -13943,8 +13939,8 @@
 	      set_custom_element_data(goa_container, "type",
 	      /*type*/
 	      ctx[3]);
-	      set_custom_element_data(goa_container, "headingsize",
-	      /*headingsize*/
+	      set_custom_element_data(goa_container, "accent",
+	      /*accent*/
 	      ctx[4]);
 	    },
 
@@ -14006,10 +14002,10 @@
 	      }
 
 	      if (dirty &
-	      /*headingsize*/
+	      /*accent*/
 	      16) {
-	        set_custom_element_data(goa_container, "headingsize",
-	        /*headingsize*/
+	        set_custom_element_data(goa_container, "accent",
+	        /*accent*/
 	        ctx[4]);
 	      }
 	    },
@@ -14040,7 +14036,7 @@
 	    type = "default"
 	  } = $$props;
 	  let {
-	    headingsize = "large"
+	    accent = "thick"
 	  } = $$props;
 
 	  $$self.$$set = $$props => {
@@ -14048,10 +14044,10 @@
 	    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 {
@@ -14066,7 +14062,7 @@
 	      actions: 1,
 	      content: 2,
 	      type: 3,
-	      headingsize: 4
+	      accent: 4
 	    }, null);
 
 	    if (options) {
@@ -14082,7 +14078,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["title", "actions", "content", "type", "headingsize"];
+	    return ["title", "actions", "content", "type", "accent"];
 	  }
 
 	  get title() {
@@ -14129,13 +14125,13 @@
 	    flush();
 	  }
 
-	  get headingsize() {
+	  get accent() {
 	    return this.$$.ctx[4];
 	  }
 
-	  set headingsize(headingsize) {
+	  set accent(accent) {
 	    this.$$set({
-	      headingsize
+	      accent
 	    });
 	    flush();
 	  }
@@ -14520,6 +14516,7 @@
 	      deletable = _c === void 0 ? false : _c,
 	      _d = _a.error,
 	      error = _d === void 0 ? false : _d,
+	      variant = _a.variant,
 	      content = _a.content,
 	      onClick = _a.onClick;
 	  var el = react.useRef(null);
@@ -14542,7 +14539,8 @@
 	    leadingicon: leadingIcon,
 	    error: error,
 	    deletable: deletable,
-	    content: content
+	    content: content,
+	    variant: variant
 	  }, void 0);
 	};
 
@@ -14562,10 +14560,8 @@
 	};
 
 	var GoAContainer = function GoAContainer(_a) {
-	  var headingSize = _a.headingSize,
+	  var accent = _a.accent,
 	      title = _a.title,
-	      _b = _a.colored,
-	      colored = _b === void 0 ? false : _b,
 	      padding = _a.padding,
 	      children = _a.children,
 	      actions = _a.actions,
@@ -14573,8 +14569,7 @@
 	  return jsxRuntime.jsxs("goa-container", __assign({
 	    type: type,
 	    padding: padding,
-	    headingsize: headingSize,
-	    colored: colored
+	    accent: accent
 	  }, {
 	    children: [title && jsxRuntime.jsx("div", __assign({
 	      slot: "title"