Production Release - August 15 / 2025

package.json

@@ -12,9 +12,9 @@
     "prettier": "npx prettier . --write"
   },
   "dependencies": {
-    "@abgov/react-components": "6.6.1",
-    "@abgov/ui-components-common": "1.6.0",
-    "@abgov/web-components": "1.36.1",
+    "@abgov/react-components": "6.7.0",
+    "@abgov/ui-components-common": "1.7.0",
+    "@abgov/web-components": "1.37.0",
     "@faker-js/faker": "^8.3.1",
     "highlight.js": "^11.8.0",
     "js-cookie": "^3.0.5",

src/components/sandbox/AngularReactiveSerializer.ts

@@ -9,6 +9,7 @@ const ReactiveComponents = [
   "goab-checkbox",
   "goab-radio-group",
   "goab-date-picker",
+  "goa-input"
 ];
 
 export class AngularReactiveSerializer extends BaseSerializer implements Serializer {
@@ -153,15 +154,17 @@ export class AngularReactiveSerializer extends BaseSerializer implements Seriali
       });
     }
 
-    if (children.startsWith("<goa-checkbox")) {
+    const componentsToProcess = ["<goa-checkbox", "<goa-input"];
+
+    if (componentsToProcess.some(component => children.startsWith(component))) {
       if (this.version === "old") {
         if (children.includes("goaChecked") && children.includes("goaValue")) {
           children = children.replace(/\bgoaValue\b\s?/g, "");
         }
 
-        if (children.includes("disabled=true")) {
+        if (children.includes('disabled="true"') || children.includes("disabled=true")) {
           children = children
-            .replace(/disabled=true/g, '[attr.disabled]="true"')
+            .replace(/disabled=(["']?)true\1/g, '[attr.disabled]="true"')
             .replace(/\bgoaValue\b\s?/g, "");
         }
       }

src/components/table-of-contents/TOC.tsx

@@ -120,8 +120,8 @@ export function TOC(props: TOCProps) {
     const currentHash = window.location.hash;
 
     if (currentHash.includes('#tab-')) {
-      // If URL contains #tab-, append our ID after it
-      return `${currentHash}#${id}`;
+      // If URL contains "#tab-" then append another hash after it
+      return `#${currentHash.split('#')[1]}#${id}`;
     }
 
     return `#${id}`;

src/components/version-language-switcher/HelpButton.tsx

@@ -24,9 +24,9 @@ export function HelpButton() {
   };
 
   return (
-    <GoabTooltip content="More information">
-      <GoabIconButton ml={"s"}
-                      mr={"s"}
+    <GoabTooltip content="Version and framework info">
+      <GoabIconButton ml={"xs"}
+                      mb={"2xs"}
                       variant="color"
                       size="small"
                       icon="help-circle"

src/components/version-language-switcher/VersionLanguageSwitcher.tsx

@@ -1,6 +1,6 @@
 import {
   GoabIcon,
-  GoabPopover, GoabTooltip
+  GoabPopover
 } from "@abgov/react-components";
 import {
   ANGULAR_VERSIONS, getVersionedUrlPath, Language, LanguageVersion,
@@ -103,7 +103,7 @@ export const VersionLanguageSwitcher = () => {
 
   return (
     <>
-      <GoabTooltip content="Framework">
+      <div className="version-language-switcher">
       <GoabPopover
         target={
           <a className="version-language-switcher__heading" href="#" id="language-switcher" onClick={e => openLanguagePopOver(e)}>
@@ -119,9 +119,7 @@ export const VersionLanguageSwitcher = () => {
           }
         </>
       </GoabPopover>
-      </GoabTooltip>
 
-      <GoabTooltip content="Version">
       <GoabPopover target={
         <a className="version-language-switcher__heading" href="#"
            onClick={e => openVersionPopOver(e)}>
@@ -136,7 +134,7 @@ export const VersionLanguageSwitcher = () => {
           ))}
         </>
       </GoabPopover>
-      </GoabTooltip>
+      </div>
     </>
   );
 }

src/components/version-language-switcher/version-language-switcher.css

@@ -3,7 +3,6 @@
     align-items: center;
     gap: var(--goa-space-2xs);
     font-size: var(--goa-font-size-2);
-    margin-left: var(--goa-space-m);
     white-space: nowrap;
     height: 20px;
 }
@@ -30,13 +29,30 @@
     align-items: center; /* vertically align content */
 }
 
+.version-language-switcher {
+    height: 20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center; /* vertically align content */
+    gap: var(--goa-space-s);
+    margin-bottom: var(--goa-space-xs);
+}
+
 @media (max-width: 623px) {
     [slot="version"] {
         display: flex; /* if needed to align items horizontally */
-        flex-direction: column;
+        flex-direction: row;
         align-items: flex-start;
-        gap: 2px;
+        gap: 0;
         margin-top: 0;
+        height: auto;
+    }
 
+    .version-language-switcher {
+        height: auto;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0;
+        margin-bottom: var(--goa-space-3xs);
     }
 }

src/examples/add-another-item-in-a-modal.tsx

@@ -41,7 +41,6 @@ export const AddAnotherItemInAModal = () => {
 
         <GoabModal
           heading="Add a new item"
-          role="dialog"
           open={addItemModalOpen}
           actions={
             <GoabButtonGroup alignment="end">
@@ -143,7 +142,7 @@ export const AddAnotherItemInAModal = () => {
         allowCopy={true}
         code={`
                   <goa-button type="tertiary" leadingicon="add" (_click)="toggleModal()">Add another item</goa-button>
-                  <goa-modal [open]="open" role="dialog"
+                  <goa-modal [open]="open"
                     (_close)="toggleModal()" heading="Add a new item">
                     <p>Fill in the information to create a new item</p>
                     <goa-form-item label="Type" mt="xs">
@@ -174,7 +173,7 @@ export const AddAnotherItemInAModal = () => {
         allowCopy={true}
         code={`
         <goab-button type="tertiary" leadingIcon="add" (onClick)="toggleModal()">Add another item</goab-button>
-        <goab-modal [open]="open" role="dialog"
+        <goab-modal [open]="open"
            (onClose)="toggleModal()" heading="Add a new item" [actions]="actions">
           <p>Fill in the information to create a new item</p>
           <goab-form-item label="Type" mt="xs">
@@ -259,7 +258,6 @@ export const AddAnotherItemInAModal = () => {
                   </GoAButton>
                    <GoAModal
                     heading="Add a new item"
-                    role="dialog"
                     open={open}
                     actions={
                       <GoAButtonGroup alignment="end">
@@ -297,7 +295,6 @@ export const AddAnotherItemInAModal = () => {
                   </GoabButton>
                    <GoabModal
                     heading="Add a new item"
-                    role="dialog"
                     open={open}
                     actions={
                       <GoabButtonGroup alignment="end">

src/examples/badge/BadgeExamples.tsx

@@ -1,16 +1,11 @@
-import {
-  GoabBadge,
-  GoabBlock,
-} from "@abgov/react-components";
-import { Sandbox } from "@components/sandbox";
 import { ShowStatusInATable } from "@examples/show-status-in-a-table.tsx";
+import { ShowMultipleTagsTogether } from "@examples/show-multiple-tags-together.tsx";
 import { ShowStatusOnACard } from "@examples/show-status-on-a-card.tsx";
 import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
 
 export default function BadgeExamples() {
   return (
     <>
-
       <SandboxHeader
         exampleTitle="Show status in a table"
         figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6304-22364&t=X0IQW5flDDaj8Vyg-4">
@@ -21,13 +16,7 @@ export default function BadgeExamples() {
         exampleTitle="Show multiple tags together"
         figmaExample="https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=60735-375622&t=tGwTYaG8Orm4iOm7-4">
       </SandboxHeader>
-      <Sandbox>
-        <GoabBlock gap="xs">
-          <GoabBadge type="information" content="In progress" />
-          <GoabBadge type="important" content="Priority" />
-          <GoabBadge type="emergency" content="Past deadline" />
-        </GoabBlock>
-      </Sandbox>
+      <ShowMultipleTagsTogether />
 
       <SandboxHeader
         exampleTitle="Show a status on a card"

src/examples/basic-modal-with-close.tsx

@@ -0,0 +1,112 @@
+import { Sandbox } from "@components/sandbox";
+import { GoabButton, GoabModal } from "@abgov/react-components";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { useContext, useState } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const BasicModalWithClose = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const [basicModalOpen, setBasicModalOpen] = useState<boolean>();
+  return (
+    <Sandbox skipRender>
+      <GoabButton onClick={() => setBasicModalOpen(true)}>Open Basic Modal</GoabButton>
+      <GoabModal
+        heading="Modal"
+        open={basicModalOpen}
+        onClose={() => setBasicModalOpen(false)}
+        >
+        <p>This modal uses an icon button to close it.</p>
+      </GoabModal>
+      {/*Angular*/}
+      <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                  export class SomeOtherComponent {
+                    open = false;
+                    toggleModal() {
+                      this.open = !this.open;
+                    }
+                  }
+                `}
+      />
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                  <goa-button (_click)="toggleModal();">Open Basic Modal</goa-button>
+                  <goa-modal [open]="open" (_close)="toggleModal()" heading="Modal">
+                      <p>This modal uses an icon button to close it.</p>
+                  </goa-modal>
+                `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                  <goab-button (onClick)="toggleModal();">Open Basic Modal</goab-button>
+                  <goab-modal [open]="open" (close)="toggleModal()" heading="Modal" [actions]="actions">
+                    <p>This modal uses an icon button to close it.</p>
+                  </goab-modal>
+                `}
+        />
+      )}
+
+      {/*React code*/}
+      <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  const [open, setOpen] = useState(false);
+                `}
+      />
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+                  <GoAButton onClick={() => setOpen(true)}>Open Basic Modal</GoAButton>
+                  <GoAModal
+                    heading="Modal"
+                    open={open}
+                    onClose={() => setOpen(false)}
+                  >
+                    <p>This modal uses an icon button to close it.</p>
+                  </GoAModal>
+                `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+                  <GoabButton onClick={() => setOpen(true)}>Open Basic Modal</GoabButton>
+                  <GoabModal
+                    heading="Modal"
+                    open={open}
+                    onClose={() => setOpen(false)}
+                  >
+                    <p>This modal uses an icon button to close it.</p>
+                  </GoabModal>
+                `}
+        />
+      )}
+    </Sandbox>
+  )
+}
+
+export default BasicModalWithClose;