@abgov/react-components 4.0.0-alpha.149 → 4.0.0-alpha.150

package/index.d.ts

@@ -43,6 +43,7 @@ export * from "./lib/skeleton/skeleton";
 export * from "./lib/spacer/spacer";
 export * from "./lib/spinner/spinner";
 export * from "./lib/table/table";
+export * from "./lib/table/table-sort-header";
 export * from "./lib/textarea/textarea";
 export * from "./lib/two-column-layout/two-column-layout";
 export * from "./lib/three-column-layout/three-column-layout";

package/lib/table/table-sort-header.d.ts

@@ -0,0 +1,20 @@
+import React, { FC } from "react";
+export declare type Direction = "asc" | "desc" | "none";
+interface WCProps {
+    name?: string;
+    direction?: Direction;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-table-sort-header": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface Props {
+    name?: string;
+    direction?: Direction;
+    children?: React.ReactNode;
+}
+export declare const GoATableSortHeader: FC<Props>;
+export default GoATableSortHeader;

package/package.json

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

package/react-components.esm.js

@@ -10682,7 +10682,7 @@ function create_if_block$d(ctx) {
     16) show_if = null;
     if (show_if == null) show_if = !!Object.keys(
     /*_iconOverrides*/
-    ctx[13]).includes(
+    ctx[12]).includes(
     /*type*/
     ctx[4]);
     if (show_if) return create_if_block_1$7;
@@ -10722,7 +10722,7 @@ function create_if_block$d(ctx) {
     }
 
   };
-} // (59:4) {:else}
+} // (57:4) {:else}
 
 
 function create_else_block$5(ctx) {
@@ -10771,14 +10771,14 @@ function create_else_block$5(ctx) {
     }
 
   };
-} // (55:4) {#if Object.keys(_iconOverrides).includes(type)}
+} // (53:4) {#if Object.keys(_iconOverrides).includes(type)}
 
 
 function create_if_block_1$7(ctx) {
   let div;
   let raw_value =
   /*_iconOverrides*/
-  ctx[13][
+  ctx[12][
   /*type*/
   ctx[4]] + "";
   return {
@@ -10797,7 +10797,7 @@ function create_if_block_1$7(ctx) {
       /*type*/
       16 && raw_value !== (raw_value =
       /*_iconOverrides*/
-      ctx[13][
+      ctx[12][
       /*type*/
       ctx[4]] + "")) div.innerHTML = raw_value;
     },
@@ -10826,10 +10826,10 @@ function create_fragment$o(ctx) {
       ctx[5]}`);
       attr(div, "data-testid",
       /*testid*/
-      ctx[11]);
+      ctx[10]);
       attr(div, "title",
       /*title*/
-      ctx[10]);
+      ctx[9]);
       attr(div, "style", div_style_value = `
     ${calculateMargin(
       /*mt*/
@@ -10842,17 +10842,14 @@ function create_fragment$o(ctx) {
       ctx[3])}
     ${cssVar("--fill-color",
       /*fillcolor*/
-      ctx[8])};
-    ${cssVar("--hover-color",
-      /*hovercolor*/
       ctx[7])};
     ${cssVar("--opacity",
       /*opacity*/
-      ctx[9])};
+      ctx[8])};
   `);
       toggle_class(div, "inverted",
       /*isInverted*/
-      ctx[12]);
+      ctx[11]);
     },
 
     m(target, anchor) {
@@ -10886,23 +10883,23 @@ function create_fragment$o(ctx) {
 
       if (dirty &
       /*testid*/
-      2048) {
+      1024) {
         attr(div, "data-testid",
         /*testid*/
-        ctx[11]);
+        ctx[10]);
       }
 
       if (dirty &
       /*title*/
-      1024) {
+      512) {
         attr(div, "title",
         /*title*/
-        ctx[10]);
+        ctx[9]);
       }
 
       if (dirty &
-      /*mt, mr, mb, ml, fillcolor, hovercolor, opacity*/
-      911 && div_style_value !== (div_style_value = `
+      /*mt, mr, mb, ml, fillcolor, opacity*/
+      399 && div_style_value !== (div_style_value = `
     ${calculateMargin(
       /*mt*/
       ctx[0],
@@ -10914,23 +10911,20 @@ function create_fragment$o(ctx) {
       ctx[3])}
     ${cssVar("--fill-color",
       /*fillcolor*/
-      ctx[8])};
-    ${cssVar("--hover-color",
-      /*hovercolor*/
       ctx[7])};
     ${cssVar("--opacity",
       /*opacity*/
-      ctx[9])};
+      ctx[8])};
   `)) {
         attr(div, "style", div_style_value);
       }
 
       if (dirty &
       /*size, isInverted*/
-      4128) {
+      2080) {
         toggle_class(div, "inverted",
         /*isInverted*/
-        ctx[12]);
+        ctx[11]);
       }
     },
 
@@ -10971,9 +10965,6 @@ function instance$m($$self, $$props, $$invalidate) {
   let {
     inverted = "false"
   } = $$props;
-  let {
-    hovercolor = ""
-  } = $$props;
   let {
     fillcolor = ""
   } = $$props;
@@ -11011,29 +11002,28 @@ function instance$m($$self, $$props, $$invalidate) {
     if ('type' in $$props) $$invalidate(4, type = $$props.type);
     if ('size' in $$props) $$invalidate(5, size = $$props.size);
     if ('theme' in $$props) $$invalidate(6, theme = $$props.theme);
-    if ('inverted' in $$props) $$invalidate(14, inverted = $$props.inverted);
-    if ('hovercolor' in $$props) $$invalidate(7, hovercolor = $$props.hovercolor);
-    if ('fillcolor' in $$props) $$invalidate(8, fillcolor = $$props.fillcolor);
-    if ('opacity' in $$props) $$invalidate(9, opacity = $$props.opacity);
-    if ('title' in $$props) $$invalidate(10, title = $$props.title);
-    if ('testid' in $$props) $$invalidate(11, testid = $$props.testid);
+    if ('inverted' in $$props) $$invalidate(13, inverted = $$props.inverted);
+    if ('fillcolor' in $$props) $$invalidate(7, fillcolor = $$props.fillcolor);
+    if ('opacity' in $$props) $$invalidate(8, opacity = $$props.opacity);
+    if ('title' in $$props) $$invalidate(9, title = $$props.title);
+    if ('testid' in $$props) $$invalidate(10, testid = $$props.testid);
   };
 
   $$self.$$.update = () => {
     if ($$self.$$.dirty &
     /*inverted*/
-    16384) {
-      $$invalidate(12, isInverted = toBoolean(inverted));
+    8192) {
+      $$invalidate(11, isInverted = toBoolean(inverted));
     }
   };
 
-  return [mt, mr, mb, ml, type, size, theme, hovercolor, fillcolor, opacity, title, testid, isInverted, _iconOverrides, inverted];
+  return [mt, mr, mb, ml, type, size, theme, fillcolor, opacity, title, testid, isInverted, _iconOverrides, inverted];
 }
 
 class Icon extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center}ion-icon{pointer-events:none;width:100%;height:100%}.goa-icon{fill:var(--fill-color);color:var(--fill-color);opacity:var(--opacity);display:inline-flex;align-items:center;justify-content:center}.goa-icon:hover ion-icon{fill:var(--hover-color);color:var(--hover-color)}.goa-icon--small{width:1.25rem;height:1.25rem}.goa-icon--medium{width:1.5rem;height:1.5rem}.goa-icon--large{width:2rem;height:2rem}.goa-icon--xlarge{width:2.5rem;height:2.5rem}.goa-icon:has(.icon-override){height:fit-content}.icon-override{display:flex;flex-direction:column;align-items:center}.inverted *{color:#fff;fill:#fff}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center}ion-icon{pointer-events:none;width:100%;height:100%}.goa-icon{fill:var(--fill-color);color:var(--fill-color);opacity:var(--opacity);display:inline-flex;align-items:center;justify-content:center}.goa-icon--small{width:1.25rem;height:1.25rem}.goa-icon--medium{width:1.5rem;height:1.5rem}.goa-icon--large{width:2rem;height:2rem}.goa-icon--xlarge{width:2.5rem;height:2.5rem}.goa-icon:has(.icon-override){height:fit-content}.icon-override{display:flex;flex-direction:column;align-items:center}.inverted *{color:#fff;fill:#fff}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -11046,12 +11036,11 @@ class Icon extends SvelteElement {
       type: 4,
       size: 5,
       theme: 6,
-      inverted: 14,
-      hovercolor: 7,
-      fillcolor: 8,
-      opacity: 9,
-      title: 10,
-      testid: 11
+      inverted: 13,
+      fillcolor: 7,
+      opacity: 8,
+      title: 9,
+      testid: 10
     }, null);
 
     if (options) {
@@ -11067,7 +11056,7 @@ class Icon extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["mt", "mr", "mb", "ml", "type", "size", "theme", "inverted", "hovercolor", "fillcolor", "opacity", "title", "testid"];
+    return ["mt", "mr", "mb", "ml", "type", "size", "theme", "inverted", "fillcolor", "opacity", "title", "testid"];
   }
 
   get mt() {
@@ -11148,7 +11137,7 @@ class Icon extends SvelteElement {
   }
 
   get inverted() {
-    return this.$$.ctx[14];
+    return this.$$.ctx[13];
   }
 
   set inverted(inverted) {
@@ -11158,19 +11147,8 @@ class Icon extends SvelteElement {
     flush();
   }
 
-  get hovercolor() {
-    return this.$$.ctx[7];
-  }
-
-  set hovercolor(hovercolor) {
-    this.$$set({
-      hovercolor
-    });
-    flush();
-  }
-
   get fillcolor() {
-    return this.$$.ctx[8];
+    return this.$$.ctx[7];
   }
 
   set fillcolor(fillcolor) {
@@ -11181,7 +11159,7 @@ class Icon extends SvelteElement {
   }
 
   get opacity() {
-    return this.$$.ctx[9];
+    return this.$$.ctx[8];
   }
 
   set opacity(opacity) {
@@ -11192,7 +11170,7 @@ class Icon extends SvelteElement {
   }
 
   get title() {
-    return this.$$.ctx[10];
+    return this.$$.ctx[9];
   }
 
   set title(title) {
@@ -11203,7 +11181,7 @@ class Icon extends SvelteElement {
   }
 
   get testid() {
-    return this.$$.ctx[11];
+    return this.$$.ctx[10];
   }
 
   set testid(testid) {
@@ -13578,7 +13556,7 @@ function instance$j($$self, $$props, $$invalidate) {
 class Modal extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}:host *{box-sizing:border-box}.modal{font-family:var(--goa-font-family-sans);position:fixed;inset:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.callout-bar{flex:0 0 3rem;text-align:center;padding-top:2rem;border-radius:4px 0px 0px 4px}.content{flex:1 1 auto;width:100%;margin:2rem}.content header{display:flex;justify-content:space-between}.content header.has-content{margin-bottom:2rem}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;display:flex;box-shadow:var(--goa-shadow-modal);border-radius:4px;border:1px solid var(--goa-color-greyscale-700)}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch)}}.modal-actions ::slotted(*){padding:1.5rem 0 0}.modal-content{margin:0 -2rem;line-height:1.75rem}.modal-content ::slotted(:last-child){margin-bottom:0 !important}.modal-title{font:var(--goa-typography-heading-m)}.modal-close{padding-left:var(--goa-space-m);margin-top:var(--goa-space-2xs)}.scroll-top{box-shadow:inset 0px -8px 6px -6px rgba(0, 0, 0, 0.1)}.scroll-middle{box-shadow:inset 0px -8px 6px -6px rgba(0, 0, 0, 0.1), inset 0px 8px 6px -6px rgba(0, 0, 0, 0.1)}.scroll-bottom{box-shadow:inset 0px 8px 6px -6px rgba(0, 0, 0, 0.1)}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}:host *{box-sizing:border-box}.modal{font-family:var(--goa-font-family-sans);position:fixed;inset:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.callout-bar{flex:0 0 3rem;text-align:center;padding-top:2rem;border-radius:4px 0px 0px 4px}.content{flex:1 1 auto;width:100%;margin:var(--goa-space-xl)}.content header{display:flex;justify-content:space-between}.content header.has-content{margin-bottom:var(--goa-space-l)}@media(max-width: 640px){.content{margin:var(--goa-space-l)}.content header.has-content{margin-bottom:var(--goa-space-m)}}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;display:flex;box-shadow:var(--goa-shadow-modal);border-radius:4px;border:1px solid var(--goa-color-greyscale-700)}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch)}}.modal-actions ::slotted(*){padding:var(--goa-space-xl) 0 0}@media(max-width: 640px){.modal-actions ::slotted(*){padding:var(--goa-space-l) 0 0}}.modal-content{margin:0 -2rem;line-height:1.75rem}.modal-content ::slotted(:last-child){margin-bottom:0 !important}.modal-title{font:var(--goa-typography-heading-m)}.modal-close{padding-left:var(--goa-space-m);margin-top:var(--goa-space-2xs)}.scroll-top{box-shadow:inset 0px -8px 6px -6px rgba(0, 0, 0, 0.1)}.scroll-middle{box-shadow:inset 0px -8px 6px -6px rgba(0, 0, 0, 0.1), inset 0px 8px 6px -6px rgba(0, 0, 0, 0.1)}.scroll-bottom{box-shadow:inset 0px 8px 6px -6px rgba(0, 0, 0, 0.1)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -23294,6 +23272,19 @@ function GoATable(props) {
   }), void 0);
 }
 
+const GoATableSortHeader = ({
+  name,
+  direction: _direction = "none",
+  children
+}) => {
+  return jsx("goa-table-sort-header", Object.assign({
+    name: name,
+    direction: _direction
+  }, {
+    children: children
+  }), void 0);
+};
+
 const GoATextArea = ({
   name,
   value,
@@ -23400,4 +23391,4 @@ function GoAThreeColumnLayout(props) {
   }), void 0);
 }
 
-export { GoAAccordion, GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoABlock, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADetails, GoADivider, GoADropdown, GoADropdownItem, GoADropdownOption, GoAEmergencyBadge, GoAFileUploadCard, GoAFileUploadInput, GoAFormItem, GoAFormStep, GoAFormStepper, GoAGrid, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAOneColumnLayout, GoAPageBlock, GoAPages, GoAPagination, GoAPopover, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpacer, GoASpinner, GoASuccessBadge, GoATable, GoATextArea, GoAThreeColumnLayout, GoATwoColumnLayout };
+export { GoAAccordion, GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoABlock, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADetails, GoADivider, GoADropdown, GoADropdownItem, GoADropdownOption, GoAEmergencyBadge, GoAFileUploadCard, GoAFileUploadInput, GoAFormItem, GoAFormStep, GoAFormStepper, GoAGrid, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAOneColumnLayout, GoAPageBlock, GoAPages, GoAPagination, GoAPopover, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpacer, GoASpinner, GoASuccessBadge, GoATable, GoATableSortHeader, GoATextArea, GoAThreeColumnLayout, GoATwoColumnLayout };

package/react-components.umd.js

@@ -10728,7 +10728,7 @@
 	    16) show_if = null;
 	    if (show_if == null) show_if = !!Object.keys(
 	    /*_iconOverrides*/
-	    ctx[13]).includes(
+	    ctx[12]).includes(
 	    /*type*/
 	    ctx[4]);
 	    if (show_if) return create_if_block_1$7;
@@ -10768,7 +10768,7 @@
 	    }
 
 	  };
-	} // (59:4) {:else}
+	} // (57:4) {:else}
 
 
 	function create_else_block$5(ctx) {
@@ -10817,14 +10817,14 @@
 	    }
 
 	  };
-	} // (55:4) {#if Object.keys(_iconOverrides).includes(type)}
+	} // (53:4) {#if Object.keys(_iconOverrides).includes(type)}
 
 
 	function create_if_block_1$7(ctx) {
 	  let div;
 	  let raw_value =
 	  /*_iconOverrides*/
-	  ctx[13][
+	  ctx[12][
 	  /*type*/
 	  ctx[4]] + "";
 	  return {
@@ -10843,7 +10843,7 @@
 	      /*type*/
 	      16 && raw_value !== (raw_value =
 	      /*_iconOverrides*/
-	      ctx[13][
+	      ctx[12][
 	      /*type*/
 	      ctx[4]] + "")) div.innerHTML = raw_value;
 	    },
@@ -10872,10 +10872,10 @@
       ctx[5]}`);
 	      attr(div, "data-testid",
 	      /*testid*/
-	      ctx[11]);
+	      ctx[10]);
 	      attr(div, "title",
 	      /*title*/
-	      ctx[10]);
+	      ctx[9]);
 	      attr(div, "style", div_style_value = `
     ${calculateMargin(
       /*mt*/
@@ -10888,17 +10888,14 @@
       ctx[3])}
     ${cssVar("--fill-color",
       /*fillcolor*/
-      ctx[8])};
-    ${cssVar("--hover-color",
-      /*hovercolor*/
       ctx[7])};
     ${cssVar("--opacity",
       /*opacity*/
-      ctx[9])};
+      ctx[8])};
   `);
 	      toggle_class(div, "inverted",
 	      /*isInverted*/
-	      ctx[12]);
+	      ctx[11]);
 	    },
 
 	    m(target, anchor) {
@@ -10932,23 +10929,23 @@
 
 	      if (dirty &
 	      /*testid*/
-	      2048) {
+	      1024) {
 	        attr(div, "data-testid",
 	        /*testid*/
-	        ctx[11]);
+	        ctx[10]);
 	      }
 
 	      if (dirty &
 	      /*title*/
-	      1024) {
+	      512) {
 	        attr(div, "title",
 	        /*title*/
-	        ctx[10]);
+	        ctx[9]);
 	      }
 
 	      if (dirty &
-	      /*mt, mr, mb, ml, fillcolor, hovercolor, opacity*/
-	      911 && div_style_value !== (div_style_value = `
+	      /*mt, mr, mb, ml, fillcolor, opacity*/
+	      399 && div_style_value !== (div_style_value = `
     ${calculateMargin(
       /*mt*/
       ctx[0],
@@ -10960,23 +10957,20 @@
       ctx[3])}
     ${cssVar("--fill-color",
       /*fillcolor*/
-      ctx[8])};
-    ${cssVar("--hover-color",
-      /*hovercolor*/
       ctx[7])};
     ${cssVar("--opacity",
       /*opacity*/
-      ctx[9])};
+      ctx[8])};
   `)) {
 	        attr(div, "style", div_style_value);
 	      }
 
 	      if (dirty &
 	      /*size, isInverted*/
-	      4128) {
+	      2080) {
 	        toggle_class(div, "inverted",
 	        /*isInverted*/
-	        ctx[12]);
+	        ctx[11]);
 	      }
 	    },
 
@@ -11017,9 +11011,6 @@
 	  let {
 	    inverted = "false"
 	  } = $$props;
-	  let {
-	    hovercolor = ""
-	  } = $$props;
 	  let {
 	    fillcolor = ""
 	  } = $$props;
@@ -11057,29 +11048,28 @@
 	    if ('type' in $$props) $$invalidate(4, type = $$props.type);
 	    if ('size' in $$props) $$invalidate(5, size = $$props.size);
 	    if ('theme' in $$props) $$invalidate(6, theme = $$props.theme);
-	    if ('inverted' in $$props) $$invalidate(14, inverted = $$props.inverted);
-	    if ('hovercolor' in $$props) $$invalidate(7, hovercolor = $$props.hovercolor);
-	    if ('fillcolor' in $$props) $$invalidate(8, fillcolor = $$props.fillcolor);
-	    if ('opacity' in $$props) $$invalidate(9, opacity = $$props.opacity);
-	    if ('title' in $$props) $$invalidate(10, title = $$props.title);
-	    if ('testid' in $$props) $$invalidate(11, testid = $$props.testid);
+	    if ('inverted' in $$props) $$invalidate(13, inverted = $$props.inverted);
+	    if ('fillcolor' in $$props) $$invalidate(7, fillcolor = $$props.fillcolor);
+	    if ('opacity' in $$props) $$invalidate(8, opacity = $$props.opacity);
+	    if ('title' in $$props) $$invalidate(9, title = $$props.title);
+	    if ('testid' in $$props) $$invalidate(10, testid = $$props.testid);
 	  };
 
 	  $$self.$$.update = () => {
 	    if ($$self.$$.dirty &
 	    /*inverted*/
-	    16384) {
-	      $$invalidate(12, isInverted = toBoolean(inverted));
+	    8192) {
+	      $$invalidate(11, isInverted = toBoolean(inverted));
 	    }
 	  };
 
-	  return [mt, mr, mb, ml, type, size, theme, hovercolor, fillcolor, opacity, title, testid, isInverted, _iconOverrides, inverted];
+	  return [mt, mr, mb, ml, type, size, theme, fillcolor, opacity, title, testid, isInverted, _iconOverrides, inverted];
 	}
 
 	class Icon extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center}ion-icon{pointer-events:none;width:100%;height:100%}.goa-icon{fill:var(--fill-color);color:var(--fill-color);opacity:var(--opacity);display:inline-flex;align-items:center;justify-content:center}.goa-icon:hover ion-icon{fill:var(--hover-color);color:var(--hover-color)}.goa-icon--small{width:1.25rem;height:1.25rem}.goa-icon--medium{width:1.5rem;height:1.5rem}.goa-icon--large{width:2rem;height:2rem}.goa-icon--xlarge{width:2.5rem;height:2.5rem}.goa-icon:has(.icon-override){height:fit-content}.icon-override{display:flex;flex-direction:column;align-items:center}.inverted *{color:#fff;fill:#fff}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center}ion-icon{pointer-events:none;width:100%;height:100%}.goa-icon{fill:var(--fill-color);color:var(--fill-color);opacity:var(--opacity);display:inline-flex;align-items:center;justify-content:center}.goa-icon--small{width:1.25rem;height:1.25rem}.goa-icon--medium{width:1.5rem;height:1.5rem}.goa-icon--large{width:2rem;height:2rem}.goa-icon--xlarge{width:2.5rem;height:2.5rem}.goa-icon:has(.icon-override){height:fit-content}.icon-override{display:flex;flex-direction:column;align-items:center}.inverted *{color:#fff;fill:#fff}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -11092,12 +11082,11 @@
 	      type: 4,
 	      size: 5,
 	      theme: 6,
-	      inverted: 14,
-	      hovercolor: 7,
-	      fillcolor: 8,
-	      opacity: 9,
-	      title: 10,
-	      testid: 11
+	      inverted: 13,
+	      fillcolor: 7,
+	      opacity: 8,
+	      title: 9,
+	      testid: 10
 	    }, null);
 
 	    if (options) {
@@ -11113,7 +11102,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["mt", "mr", "mb", "ml", "type", "size", "theme", "inverted", "hovercolor", "fillcolor", "opacity", "title", "testid"];
+	    return ["mt", "mr", "mb", "ml", "type", "size", "theme", "inverted", "fillcolor", "opacity", "title", "testid"];
 	  }
 
 	  get mt() {
@@ -11194,7 +11183,7 @@
 	  }
 
 	  get inverted() {
-	    return this.$$.ctx[14];
+	    return this.$$.ctx[13];
 	  }
 
 	  set inverted(inverted) {
@@ -11204,19 +11193,8 @@
 	    flush();
 	  }
 
-	  get hovercolor() {
-	    return this.$$.ctx[7];
-	  }
-
-	  set hovercolor(hovercolor) {
-	    this.$$set({
-	      hovercolor
-	    });
-	    flush();
-	  }
-
 	  get fillcolor() {
-	    return this.$$.ctx[8];
+	    return this.$$.ctx[7];
 	  }
 
 	  set fillcolor(fillcolor) {
@@ -11227,7 +11205,7 @@
 	  }
 
 	  get opacity() {
-	    return this.$$.ctx[9];
+	    return this.$$.ctx[8];
 	  }
 
 	  set opacity(opacity) {
@@ -11238,7 +11216,7 @@
 	  }
 
 	  get title() {
-	    return this.$$.ctx[10];
+	    return this.$$.ctx[9];
 	  }
 
 	  set title(title) {
@@ -11249,7 +11227,7 @@
 	  }
 
 	  get testid() {
-	    return this.$$.ctx[11];
+	    return this.$$.ctx[10];
 	  }
 
 	  set testid(testid) {
@@ -13625,7 +13603,7 @@
 	class Modal extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}:host *{box-sizing:border-box}.modal{font-family:var(--goa-font-family-sans);position:fixed;inset:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.callout-bar{flex:0 0 3rem;text-align:center;padding-top:2rem;border-radius:4px 0px 0px 4px}.content{flex:1 1 auto;width:100%;margin:2rem}.content header{display:flex;justify-content:space-between}.content header.has-content{margin-bottom:2rem}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;display:flex;box-shadow:var(--goa-shadow-modal);border-radius:4px;border:1px solid var(--goa-color-greyscale-700)}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch)}}.modal-actions ::slotted(*){padding:1.5rem 0 0}.modal-content{margin:0 -2rem;line-height:1.75rem}.modal-content ::slotted(:last-child){margin-bottom:0 !important}.modal-title{font:var(--goa-typography-heading-m)}.modal-close{padding-left:var(--goa-space-m);margin-top:var(--goa-space-2xs)}.scroll-top{box-shadow:inset 0px -8px 6px -6px rgba(0, 0, 0, 0.1)}.scroll-middle{box-shadow:inset 0px -8px 6px -6px rgba(0, 0, 0, 0.1), inset 0px 8px 6px -6px rgba(0, 0, 0, 0.1)}.scroll-bottom{box-shadow:inset 0px 8px 6px -6px rgba(0, 0, 0, 0.1)}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}:host *{box-sizing:border-box}.modal{font-family:var(--goa-font-family-sans);position:fixed;inset:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.callout-bar{flex:0 0 3rem;text-align:center;padding-top:2rem;border-radius:4px 0px 0px 4px}.content{flex:1 1 auto;width:100%;margin:var(--goa-space-xl)}.content header{display:flex;justify-content:space-between}.content header.has-content{margin-bottom:var(--goa-space-l)}@media(max-width: 640px){.content{margin:var(--goa-space-l)}.content header.has-content{margin-bottom:var(--goa-space-m)}}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;display:flex;box-shadow:var(--goa-shadow-modal);border-radius:4px;border:1px solid var(--goa-color-greyscale-700)}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch)}}.modal-actions ::slotted(*){padding:var(--goa-space-xl) 0 0}@media(max-width: 640px){.modal-actions ::slotted(*){padding:var(--goa-space-l) 0 0}}.modal-content{margin:0 -2rem;line-height:1.75rem}.modal-content ::slotted(:last-child){margin-bottom:0 !important}.modal-title{font:var(--goa-typography-heading-m)}.modal-close{padding-left:var(--goa-space-m);margin-top:var(--goa-space-2xs)}.scroll-top{box-shadow:inset 0px -8px 6px -6px rgba(0, 0, 0, 0.1)}.scroll-middle{box-shadow:inset 0px -8px 6px -6px rgba(0, 0, 0, 0.1), inset 0px 8px 6px -6px rgba(0, 0, 0, 0.1)}.scroll-bottom{box-shadow:inset 0px 8px 6px -6px rgba(0, 0, 0, 0.1)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -23336,6 +23314,19 @@
 	  }), void 0);
 	}
 
+	var GoATableSortHeader = function GoATableSortHeader(_a) {
+	  var name = _a.name,
+	      _b = _a.direction,
+	      direction = _b === void 0 ? "none" : _b,
+	      children = _a.children;
+	  return jsxRuntime.jsx("goa-table-sort-header", __assign({
+	    name: name,
+	    direction: direction
+	  }, {
+	    children: children
+	  }), void 0);
+	};
+
 	var GoATextArea = function GoATextArea(_a) {
 	  var name = _a.name,
 	      value = _a.value,
@@ -23501,6 +23492,7 @@
 	exports.GoASpinner = GoASpinner;
 	exports.GoASuccessBadge = GoASuccessBadge;
 	exports.GoATable = GoATable;
+	exports.GoATableSortHeader = GoATableSortHeader;
 	exports.GoATextArea = GoATextArea;
 	exports.GoAThreeColumnLayout = GoAThreeColumnLayout;
 	exports.GoATwoColumnLayout = GoATwoColumnLayout;