@dta-au/civictheme-twig 1.16.0 → 1.16.1

package/components/02-molecules/link-card/link-card.mdx

@@ -5,7 +5,7 @@ import * as Stories from './link-card.stories';
 
 # Link card
 
-A single link rendered as a compact, flat list row. One card is one link - the whole row is the target - with a trailing icon that signals the link type. A digital.gov.au extension of the CivicTheme card family; the group heading and spacing are owned by the **Link list** organism, so the card stays layout-free.
+A single link rendered as a compact, flat list row. One card is one link – the whole row is the target – with a trailing icon that signals the link type. A digital.gov.au extension of the CivicTheme card family; the group heading and spacing are owned by the **Link list** organism, so the card stays layout-free.
 
 <Canvas of={Stories.LinkCard} />
 
@@ -18,24 +18,24 @@ A single link rendered as a compact, flat list row. One card is one link - the w
 
 ## When not to use
 
-- a single standalone call to action - use a button or plain link
-- rich cards with an image, summary, or metadata block - use a card from the card family instead
+- a single standalone call to action – use a button or plain link
+- rich cards with an image, summary, or metadata block – use a card from the card family instead
 
 ## Types
 
 The trailing icon is set by the link type:
 
-- **internal** (default) - a right arrow
-- **external** (`is_external: true`) - an upper-right arrow; pair with `is_new_window` for a new tab
-- **download** (`variant: 'download'`) - a download icon, plus the optional `file_extension` and `file_size` beside the title
+- **internal** (default) – a right arrow
+- **external** (`is_external: true`) – an upper-right arrow; pair with `is_new_window` for a new tab
+- **download** (`variant: 'download'`) – a download icon, plus the optional `file_extension` and `file_size` beside the title
 
 ## Secured and locked
 
 `is_secured` is orthogonal to the type: it adds a padlock beside the type icon for a gated resource (e.g. an internal page that needs sign-in), so a download can also be secured.
 
-- **secured + navigable** - padlock alongside the type icon
-- **deactivated** (`is_deactivated: true`) - a locked resource with no target; shows the padlock alone, dropping the directional arrow so it does not imply the card is navigable
-- discourage `is_secured` on external links - the destination owns its own authentication
+- **secured + navigable** – padlock alongside the type icon
+- **deactivated** (`is_deactivated: true`) – a locked resource with no target; shows the padlock alone, dropping the directional arrow so it does not imply the card is navigable
+- discourage `is_secured` on external links – the destination owns its own authentication
 
 <Canvas of={Stories.SecuredDeactivated} />
 

package/components/02-molecules/navigation-card/__snapshots__/navigation-card.test.js.snap

@@ -1,10 +1,245 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Navigation Card Component default variant keeps the bottom arrow and emits no variant modifier 1`] = `
+<div>
+  
+
+
+
+  
+  <div
+    class="ct-navigation-card ct-theme-light   ct-navigation-card--with-link  ct-navigation-card--card-clickable "
+  >
+    
+                            
+    
+    <div
+      class="ct-navigation-card__content"
+    >
+      
+                    
+                    
+                                  
+      <div
+        class="ct-navigation-card__title"
+      >
+                                  
+        <a
+          class="ct-navigation-card__title-link"
+          href="https://example.com"
+        >
+          
+                Card Title
+        </a>
+        
+                      
+      </div>
+      
+              
+                    
+                        
+
+
+      <div
+        class="ct-paragraph ct-theme-light ct-paragraph--regular ct-paragraph--no-margin ct-navigation-card__summary"
+      >
+        This is a summary of the card.
+      </div>
+                    
+                    
+              
+      <div
+        class="ct-navigation-card__tags"
+      >
+        
+          
+        <div
+          class="ct-navigation-card__link-graphic"
+        >
+          
+            
+          <svg
+            aria-hidden="true"
+            class="ct-icon ct-icon--size-regular"
+            height="24"
+            role="img"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            
+
+            <path
+              d="M17.92 11.62C17.8724 11.4973 17.801 11.3851 17.71 11.29L12.71 6.29C12.6168 6.19676 12.5061 6.1228 12.3842 6.07234C12.2624 6.02188 12.1319 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29C11.1968 6.38324 11.1228 6.49393 11.0723 6.61575C11.0219 6.73758 10.9959 6.86814 10.9959 7C10.9959 7.2663 11.1017 7.5217 11.29 7.71L14.59 11H7C6.73478 11 6.48043 11.1054 6.29289 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.29289 12.7071C6.48043 12.8946 6.73478 13 7 13H14.59L11.29 16.29C11.1963 16.383 11.1219 16.4936 11.0711 16.6154C11.0203 16.7373 10.9942 16.868 10.9942 17C10.9942 17.132 11.0203 17.2627 11.0711 17.3846C11.1219 17.5064 11.1963 17.617 11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71L17.71 12.71C17.801 12.6149 17.8724 12.5028 17.92 12.38C18.02 12.1365 18.02 11.8635 17.92 11.62Z"
+            />
+            
+
+          </svg>
+          
+          
+        </div>
+        
+        
+      </div>
+      
+          
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
 exports[`Navigation Card Component does not render when title is empty 1`] = `
 <div>
   
 
 
+
+
+</div>
+`;
+
+exports[`Navigation Card Component index variant renders its modifier class and moves the arrow onto the title 1`] = `
+<div>
+  
+
+
+
+  
+  <div
+    class="ct-navigation-card ct-theme-light ct-navigation-card--index  ct-navigation-card--with-link  ct-navigation-card--card-clickable "
+  >
+    
+                            
+    
+    <div
+      class="ct-navigation-card__content"
+    >
+      
+                    
+                    
+                                  
+      <div
+        class="ct-navigation-card__title"
+      >
+                                  
+        <a
+          class="ct-navigation-card__title-link"
+          href="https://example.com"
+        >
+          
+                
+      
+          <span
+            class="ct-text-icon__text"
+          >
+            Card 
+          </span>
+          <span
+            class="ct-text-icon__group"
+          >
+            <span
+              class="ct-text-icon__text"
+            >
+              Title
+            </span>
+             
+            <svg
+              aria-hidden="true"
+              class="ct-icon"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              
+
+              <path
+                d="M15.5397 11.29L9.87974 5.64C9.78677 5.54627 9.67617 5.47188 9.55431 5.42111C9.43246 5.37034 9.30175 5.3442 9.16974 5.3442C9.03773 5.3442 8.90702 5.37034 8.78516 5.42111C8.6633 5.47188 8.5527 5.54627 8.45974 5.64C8.27349 5.82736 8.16895 6.08081 8.16895 6.345C8.16895 6.60918 8.27349 6.86264 8.45974 7.05L13.4097 12.05L8.45974 17C8.27349 17.1874 8.16895 17.4408 8.16895 17.705C8.16895 17.9692 8.27349 18.2226 8.45974 18.41C8.55235 18.5045 8.6628 18.5797 8.78467 18.6312C8.90655 18.6826 9.03743 18.7094 9.16974 18.71C9.30204 18.7094 9.43293 18.6826 9.5548 18.6312C9.67668 18.5797 9.78712 18.5045 9.87974 18.41L15.5397 12.76C15.6412 12.6664 15.7223 12.5527 15.7777 12.4262C15.8331 12.2997 15.8617 12.1631 15.8617 12.025C15.8617 11.8869 15.8331 11.7503 15.7777 11.6238C15.7223 11.4973 15.6412 11.3836 15.5397 11.29Z"
+              />
+              
+
+            </svg>
+            
+
+          </span>
+        </a>
+        
+                      
+      </div>
+      
+              
+                    
+                        
+
+
+      <div
+        class="ct-paragraph ct-theme-light ct-paragraph--regular ct-paragraph--no-margin ct-navigation-card__summary"
+      >
+        This is a summary of the card.
+      </div>
+                    
+                    
+          
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Navigation Card Component index variant renders no arrow when only the title is clickable 1`] = `
+<div>
+  
+
+
+
+  
+  <div
+    class="ct-navigation-card ct-theme-light ct-navigation-card--index  ct-navigation-card--with-link   "
+  >
+    
+                            
+    
+    <div
+      class="ct-navigation-card__content"
+    >
+      
+                    
+                    
+                                  
+      <div
+        class="ct-navigation-card__title"
+      >
+                                  
+        <a
+          class="ct-navigation-card__title-link"
+          href="https://example.com"
+        >
+          
+                Card Title
+        </a>
+        
+                      
+      </div>
+      
+              
+                    
+                    
+                    
+          
+    </div>
+    
+  
+  </div>
+  
+
 </div>
 `;
 
@@ -12,9 +247,11 @@ exports[`Navigation Card Component renders with image as icon 1`] = `
 <div>
   
 
+
+
   
   <div
-    class="ct-navigation-card ct-theme-light ct-navigation-card--with-image  ct-navigation-card--image-as-icon  "
+    class="ct-navigation-card ct-theme-light  ct-navigation-card--with-image  ct-navigation-card--image-as-icon  "
   >
     
               
@@ -77,9 +314,11 @@ exports[`Navigation Card Component renders with link when provided 1`] = `
 <div>
   
 
+
+
   
   <div
-    class="ct-navigation-card ct-theme-light  ct-navigation-card--with-link  ct-navigation-card--card-clickable "
+    class="ct-navigation-card ct-theme-light   ct-navigation-card--with-link  ct-navigation-card--card-clickable "
   >
     
                             
@@ -99,7 +338,8 @@ exports[`Navigation Card Component renders with link when provided 1`] = `
           class="ct-navigation-card__title-link"
           href="https://example.com"
         >
-          Card Title
+          
+                Card Title
         </a>
         
                       
@@ -166,9 +406,11 @@ exports[`Navigation Card Component renders with optional attributes, no icon, im
 <div>
   
 
+
+
   
   <div
-    class="ct-navigation-card ct-theme-dark ct-navigation-card--with-image ct-navigation-card--with-link  ct-navigation-card--card-clickable custom-class"
+    class="ct-navigation-card ct-theme-dark  ct-navigation-card--with-image ct-navigation-card--with-link  ct-navigation-card--card-clickable custom-class"
     data-test="true"
   >
     
@@ -225,7 +467,8 @@ exports[`Navigation Card Component renders with optional attributes, no icon, im
           href="https://example.com"
           target="_blank"
         >
-          Card Title
+          
+                Card Title
         </a>
         
                       
@@ -306,9 +549,11 @@ exports[`Navigation Card Component renders with optional attributes, with icon 1
 <div>
   
 
+
+
   
   <div
-    class="ct-navigation-card ct-theme-dark ct-navigation-card--with-image ct-navigation-card--with-link ct-navigation-card--image-as-icon ct-navigation-card--card-clickable custom-class"
+    class="ct-navigation-card ct-theme-dark  ct-navigation-card--with-image ct-navigation-card--with-link ct-navigation-card--image-as-icon ct-navigation-card--card-clickable custom-class"
     data-test="true"
   >
     
@@ -382,7 +627,8 @@ exports[`Navigation Card Component renders with optional attributes, with icon 1
           href="https://example.com"
           target="_blank"
         >
-          Card Title
+          
+                Card Title
         </a>
         
                       
@@ -463,9 +709,11 @@ exports[`Navigation Card Component renders with required attributes 1`] = `
 <div>
   
 
+
+
   
   <div
-    class="ct-navigation-card ct-theme-light     "
+    class="ct-navigation-card ct-theme-light      "
   >
     
                             

package/components/02-molecules/navigation-card/navigation-card.mdx

@@ -0,0 +1,39 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as Stories from './navigation-card.stories';
+
+<Meta of={Stories} />
+
+# Navigation card
+
+A card that points to another page, pairing a title link with a short summary and an optional image or icon. The whole card is the click target.
+
+<Canvas of={Stories.NavigationCard} />
+
+<Controls of={Stories.NavigationCard} />
+
+## When to use
+
+- a grid or list of destinations, each needing a title and a line or two of explanation
+- landing pages and section indexes, where the summary helps people choose where to go
+
+## When not to use
+
+- a bare list of links with no summary – use the **Link card** and **Link list** instead
+- a single standalone call to action – use a button or plain link
+
+## Variants
+
+- **default** – the directional arrow sits in the bottom corner of the card, below the summary
+- **index** (`variant: 'index'`) – the arrow moves inline to the end of the title, and a divider rule separates the title from the summary
+
+Both keep the whole card as the click target; the variant changes where the arrow sits, not how the card behaves. Use **index** for dense, text-only listings where the arrow reads better attached to the title than floating below the summary.
+
+<Canvas of={Stories.NavigationCardIndex} />
+
+The index divider takes the standard border token, so it follows the active theme. The variant sets no colour or surface of its own – a consuming theme controls those through `$ct-navigation-card-*`.
+
+## Accessibility
+
+- the whole card is a single link; the directional arrow is decorative (`aria-hidden`) in both variants, so assistive tech announces the title, not the icon
+- on the index variant the arrow is grouped with the last word of the title in a nowrap span, so it cannot wrap onto a line of its own
+- `is_title_click` narrows the target to the title alone; neither variant renders the arrow in that state

package/components/02-molecules/navigation-card/navigation-card.scss

@@ -32,6 +32,17 @@
     }
   }
 
+  // Arrow moves inline onto the title, with a divider rule below it. The
+  // whole-card click target is unchanged - ct-link-cover-parent still applies.
+  // The arrow itself needs no rules: civictheme:text-icon supplies the nowrap
+  // grouping and the preceding space, and a size-less .ct-icon is 1em.
+  &--index {
+    #{$root}__title {
+      padding-bottom: ct-spacing(2);
+      border-bottom: ct-particle(0.125) solid;
+    }
+  }
+
   @container (min-width: #{$ct-navigation-card-orientation-threshold}) {
     flex-direction: row;
   }
@@ -150,6 +161,12 @@
       }
     }
 
+    &#{$root}--index {
+      #{$root}__title {
+        @include ct-component-property($root, $theme, divider, border-color);
+      }
+    }
+
     #{$root}__title,
     #{$root}__title-link {
       @include ct-component-property($root, $theme, title, color);

package/components/02-molecules/navigation-card/navigation-card.stories.data.js

@@ -1,6 +1,7 @@
 export default {
   args: (theme = 'light') => ({
     theme,
+    variant: 'default',
     title: 'Navigation card heading which runs across two or three lines',
     summary: 'Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.',
     link: {

package/components/02-molecules/navigation-card/navigation-card.stories.js

@@ -14,6 +14,10 @@ const meta = {
       control: { type: 'radio' },
       options: ['light', 'dark'],
     },
+    variant: {
+      control: { type: 'radio' },
+      options: ['default', 'index'],
+    },
     title: {
       control: { type: 'text' },
     },
@@ -62,3 +66,17 @@ export const NavigationCard = {
   },
   args: NavigationCardData.args('light'),
 };
+
+export const NavigationCardIndex = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    ...NavigationCardData.args('light'),
+    variant: 'index',
+    title: 'Prepare your digital proposal',
+    summary: 'Understand the requirements of the investment process, meet your policy obligations and find information to support your proposal and business case.',
+    // The index variant is a text-only card - no image, no icon.
+    image: { url: '', alt: '' },
+  },
+};

package/components/02-molecules/navigation-card/navigation-card.test.js

@@ -143,4 +143,63 @@ describe('Navigation Card Component', () => {
 
     assertUniqueCssClasses(c);
   });
+
+  test('index variant renders its modifier class and moves the arrow onto the title', async () => {
+    const c = await dom(template, {
+      variant: 'index',
+      title: 'Card Title',
+      summary: 'This is a summary of the card.',
+      link: { text: 'Learn more', url: 'https://example.com' },
+    });
+
+    const element = c.querySelector('.ct-navigation-card');
+    expect(element.classList.contains('ct-navigation-card--index')).toBe(true);
+    // The whole card stays the click target, exactly as on the default variant.
+    expect(element.classList.contains('ct-navigation-card--card-clickable')).toBe(true);
+
+    // text-icon groups the last word with the arrow, so it cannot orphan.
+    const group = c.querySelector('.ct-navigation-card__title-link .ct-text-icon__group');
+    expect(group).toBeTruthy();
+    expect(group.textContent.trim()).toEqual('Title');
+
+    const icon = group.querySelector('.ct-icon');
+    expect(icon).toBeTruthy();
+    expect(icon.getAttribute('aria-hidden')).toEqual('true');
+    expect(c.querySelector('.ct-navigation-card__link-graphic')).toBeNull();
+
+    // The decorative arrow must not leak into the link's accessible name.
+    expect(c.querySelector('.ct-navigation-card__title-link').textContent.trim()).toEqual('Card Title');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('default variant keeps the bottom arrow and emits no variant modifier', async () => {
+    const c = await dom(template, {
+      title: 'Card Title',
+      summary: 'This is a summary of the card.',
+      link: { text: 'Learn more', url: 'https://example.com' },
+    });
+
+    const element = c.querySelector('.ct-navigation-card');
+    expect(element.className).not.toContain('ct-navigation-card--index');
+    expect(element.className).not.toContain('ct-navigation-card--default');
+    expect(c.querySelector('.ct-navigation-card__link-graphic')).toBeTruthy();
+    expect(c.querySelector('.ct-navigation-card__title-link .ct-text-icon__group')).toBeNull();
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('index variant renders no arrow when only the title is clickable', async () => {
+    const c = await dom(template, {
+      variant: 'index',
+      title: 'Card Title',
+      link: { text: 'Learn more', url: 'https://example.com' },
+      is_title_click: true,
+    });
+
+    expect(c.querySelector('.ct-navigation-card__title-link .ct-text-icon__group')).toBeNull();
+    expect(c.querySelector('.ct-navigation-card__link-graphic')).toBeNull();
+
+    assertUniqueCssClasses(c);
+  });
 });

package/components/02-molecules/navigation-card/navigation-card.twig

@@ -5,6 +5,7 @@
  *
  * Props:
  * - theme: [string] Theme variation (light or dark).
+ * - variant: [string] Card variant. "index" renders the directional arrow inline after the title and separates the title from the summary with a divider rule. The default places the arrow in the bottom corner. Both keep the whole card as the click target.
  * - image_as_icon: [boolean] Whether to show the image as an icon.
  * - modifier_class: [string] Additional CSS classes.
  * - image: [object] Card image.
@@ -41,6 +42,7 @@
  */
 #}
 
+{% set variant = variant in ['default', 'index'] ? variant : 'default' %}
 {% set with_image = image.url is not empty %}
 {% set with_image_class = with_image ? 'ct-navigation-card--with-image' : '' %}
 {% set with_link = link is not empty and link.url is defined and link.url is not empty %}
@@ -49,7 +51,11 @@
 {% set card_clickable_class = is_card_clickable ? 'ct-navigation-card--card-clickable' : '' %}
 {% set image_as_icon_class = image_as_icon ? 'ct-navigation-card--image-as-icon' : '' %}
 {% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
-{% set modifier_class = '%s %s %s %s %s %s'|format(theme_class, with_image_class, with_link_class, image_as_icon_class, card_clickable_class, modifier_class|default('')) %}
+{# Default emits no modifier, keeping existing cards unchanged (cf. step-by-step-nav). #}
+{% set variant_class = variant != 'default' ? 'ct-navigation-card--%s'|format(variant) : '' %}
+{# Index moves the arrow onto the title, so both placements share stock's condition. #}
+{% set with_title_icon = variant == 'index' and is_card_clickable %}
+{% set modifier_class = '%s %s %s %s %s %s %s'|format(theme_class, variant_class, with_image_class, with_link_class, image_as_icon_class, card_clickable_class, modifier_class|default('')) %}
 
 {% if title is not empty %}
   <div class="ct-navigation-card {{ modifier_class -}}" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
@@ -114,7 +120,20 @@
                 class="ct-navigation-card__title-link"
                 href="{{ link.url }}"
                 {% if link.is_new_window %}target="_blank"{% endif %}
-              >{{ title }}</a>
+              >
+                {#- text-icon groups the last word with the icon in a nowrap span, so the
+                    arrow cannot orphan onto its own line. Size-less icons are 1em, so it
+                    scales with the title; the icon atom sets aria-hidden itself (a11y #C). -#}
+                {%- if with_title_icon -%}
+                  {%- include '@base/text-icon/text-icon.twig' with {
+                    text: title,
+                    icon: 'right-arrow-1',
+                    icon_placement: 'after',
+                  } only -%}
+                {%- else -%}
+                  {{- title -}}
+                {%- endif -%}
+              </a>
             {% else %}
               {{ title }}
             {% endif %}
@@ -150,7 +169,7 @@
         {% endif %}
       {% endblock %}
 
-      {% if is_card_clickable %}
+      {% if is_card_clickable and not with_title_icon %}
         <div class="ct-navigation-card__tags">
           <div class="ct-navigation-card__link-graphic">
             {% include '@base/icon/icon.twig' with {

package/components/02-molecules/progress-nav/progress-nav.mdx

@@ -21,25 +21,25 @@ It follows the GOV.UK Design System task-list pattern, with a ghost-to-solid vis
 
 ## When not to use
 
-- a single-page form - it adds overhead with no benefit
-- a flow whose path is unknown ahead of time (heavily branching) - the list implies a known set of steps. For a branching client-side check, see the **Decision tool**, which shows only the path taken.
+- a single-page form – it adds overhead with no benefit
+- a flow whose path is unknown ahead of time (heavily branching) – the list implies a known set of steps. For a branching client-side check, see the **Decision tool**, which shows only the path taken.
 
 ## Statuses
 
 Each item takes a `status` that selects its marker:
 
-- **completed** - filled circle with a check
-- **saved** - filled circle with a dashed check (saved but revisitable)
-- **in-progress** - outline circle with a filled centre dot; pair with `is_active: true`
-- **error** - filled circle with an exclamation. Prefer handling errors inline on the step page; use this only for a saved step that still has a problem.
-- **todo** - dashed ghost circle ("Not started")
-- **cannot-start-yet** - a padlock; rendered as a non-interactive span, not a link
+- **completed** – filled circle with a check
+- **saved** – filled circle with a dashed check (saved but revisitable)
+- **in-progress** – outline circle with a filled centre dot; pair with `is_active: true`
+- **error** – filled circle with an exclamation. Prefer handling errors inline on the step page; use this only for a saved step that still has a problem.
+- **todo** – dashed ghost circle ("Not started")
+- **cannot-start-yet** – a padlock; rendered as a non-interactive span, not a link
 
 ## Accessibility
 
-- each step's link is linked to a visually-hidden status element via `aria-describedby`, so a screen reader announces "[step], link - [status]" as one unit
+- each step's link is linked to a visually-hidden status element via `aria-describedby`, so a screen reader announces "[step], link – [status]" as one unit
 - the active step carries `aria-current="step"`
-- `cannot-start-yet` steps use `aria-disabled="true"` on a span - never a disabled link
+- `cannot-start-yet` steps use `aria-disabled="true"` on a span – never a disabled link
 - markers never rely on colour alone; the status text and the marker shape carry the meaning
 - contrast is tuned so muted and disabled markers still meet WCAG 1.4.11 (3:1 for UI components)
 
@@ -47,7 +47,7 @@ Each item takes a `status` that selects its marker:
 
 - keep step titles short and matching the destination page heading
 - show progress with the `current_step` / `total_steps` counter, or a `progress_summary` override
-- keep one source of truth for status - drive it from the form's own step state
+- keep one source of truth for status – drive it from the form's own step state
 
 ## Don't
 

package/components/02-molecules/progress-tracker/progress-tracker.mdx

@@ -11,7 +11,7 @@ A horizontal step tracker: a row of markers joined by a connector line that fill
 
 <Controls of={Stories.Default} />
 
-It uses the `progress-tracker` / `progress-step` / `progress-marker` class language - the same one the NigelOToole progress-tracker and the Drupal Webform progress-tracker integration emit - so these styles also apply to that server-rendered markup.
+It uses the `progress-tracker` / `progress-step` / `progress-marker` class language – the same one the NigelOToole progress-tracker and the Drupal Webform progress-tracker integration emit – so these styles also apply to that server-rendered markup.
 
 ## When to use
 
@@ -20,16 +20,16 @@ It uses the `progress-tracker` / `progress-step` / `progress-marker` class langu
 
 ## When not to use
 
-- a long list of steps with descriptions - use the [Progress nav](?path=/docs/forms-progress-nav--docs) task list, which has room for status text and hints
+- a long list of steps with descriptions – use the [Progress nav](?path=/docs/forms-progress-nav--docs) task list, which has room for status text and hints
 - a single step
 
 ## Statuses
 
 Each step takes a `status`:
 
-- **complete** - filled marker with a check; its outgoing connector is brand-coloured
-- **active** - outlined marker with its number and a soft ring; pair with the current step
-- **todo** - outlined marker with its number, muted
+- **complete** – filled marker with a check; its outgoing connector is brand-coloured
+- **active** – outlined marker with its number and a soft ring; pair with the current step
+- **todo** – outlined marker with its number, muted
 
 ## Accessibility
 

package/components/variables.components.scss

@@ -23,6 +23,16 @@ $ct-link-card-dark-link-color: ct-color-dark('body') !default;
 $ct-link-card-dark-link-hover-color: ct-color-dark('interaction-background') !default;
 $ct-link-card-dark-deactivated-link-color: ct-color-dark('body') !default;
 
+//
+// Navigation Card (digital.gov.au).
+//
+// Divider rule between title and summary on the "index" variant. Upstream
+// navigation-card has no divider, so this is declared here rather than in
+// 00-base. Uses the same border token as the card's hover outline.
+//
+$ct-navigation-card-light-divider-border-color: ct-color-light('border') !default;
+$ct-navigation-card-dark-divider-border-color: ct-color-dark('border') !default;
+
 //
 // Link List (digital.gov.au).
 //

package/dist/civictheme.css

@@ -8123,6 +8123,10 @@ ol ol ol {
   left: 0;
   right: 0;
 }
+.ct-navigation-card--index .ct-navigation-card__title {
+  padding-bottom: 1rem;
+  border-bottom: 0.0625rem solid;
+}
 @container (min-width: 36rem) {
   .ct-navigation-card {
     flex-direction: row;
@@ -8238,6 +8242,9 @@ ol ol ol {
 .ct-navigation-card.ct-theme-light:not(.ct-navigation-card--card-clickable) .ct-navigation-card__title-link:hover {
   color: var(--ct-navigation-card-light-title-hover-color);
 }
+.ct-navigation-card.ct-theme-light.ct-navigation-card--index .ct-navigation-card__title {
+  border-color: var(--ct-navigation-card-light-divider-border-color);
+}
 .ct-navigation-card.ct-theme-light .ct-navigation-card__title,
 .ct-navigation-card.ct-theme-light .ct-navigation-card__title-link {
   color: var(--ct-navigation-card-light-title-color);
@@ -8261,6 +8268,9 @@ ol ol ol {
 .ct-navigation-card.ct-theme-dark:not(.ct-navigation-card--card-clickable) .ct-navigation-card__title-link:hover {
   color: var(--ct-navigation-card-dark-title-hover-color);
 }
+.ct-navigation-card.ct-theme-dark.ct-navigation-card--index .ct-navigation-card__title {
+  border-color: var(--ct-navigation-card-dark-divider-border-color);
+}
 .ct-navigation-card.ct-theme-dark .ct-navigation-card__title,
 .ct-navigation-card.ct-theme-dark .ct-navigation-card__title-link {
   color: var(--ct-navigation-card-dark-title-color);
@@ -14191,6 +14201,8 @@ html {
   --ct-link-card-dark-link-color: var(--ct-color-dark-body);
   --ct-link-card-dark-link-hover-color: var(--ct-color-dark-interaction-background);
   --ct-link-card-dark-deactivated-link-color: var(--ct-color-dark-body);
+  --ct-navigation-card-light-divider-border-color: var(--ct-color-light-border);
+  --ct-navigation-card-dark-divider-border-color: var(--ct-color-dark-border);
   --ct-link-list-connected-border-radius: 0.25rem;
   --ct-link-list-light-connected-border-color: var(--ct-color-light-border);
   --ct-link-list-dark-connected-border-color: var(--ct-color-dark-border);

package/dist/civictheme.storybook.css

@@ -8123,6 +8123,10 @@ ol ol ol {
   left: 0;
   right: 0;
 }
+.ct-navigation-card--index .ct-navigation-card__title {
+  padding-bottom: 1rem;
+  border-bottom: 0.0625rem solid;
+}
 @container (min-width: 36rem) {
   .ct-navigation-card {
     flex-direction: row;
@@ -8238,6 +8242,9 @@ ol ol ol {
 .ct-navigation-card.ct-theme-light:not(.ct-navigation-card--card-clickable) .ct-navigation-card__title-link:hover {
   color: var(--ct-navigation-card-light-title-hover-color);
 }
+.ct-navigation-card.ct-theme-light.ct-navigation-card--index .ct-navigation-card__title {
+  border-color: var(--ct-navigation-card-light-divider-border-color);
+}
 .ct-navigation-card.ct-theme-light .ct-navigation-card__title,
 .ct-navigation-card.ct-theme-light .ct-navigation-card__title-link {
   color: var(--ct-navigation-card-light-title-color);
@@ -8261,6 +8268,9 @@ ol ol ol {
 .ct-navigation-card.ct-theme-dark:not(.ct-navigation-card--card-clickable) .ct-navigation-card__title-link:hover {
   color: var(--ct-navigation-card-dark-title-hover-color);
 }
+.ct-navigation-card.ct-theme-dark.ct-navigation-card--index .ct-navigation-card__title {
+  border-color: var(--ct-navigation-card-dark-divider-border-color);
+}
 .ct-navigation-card.ct-theme-dark .ct-navigation-card__title,
 .ct-navigation-card.ct-theme-dark .ct-navigation-card__title-link {
   color: var(--ct-navigation-card-dark-title-color);
@@ -14191,6 +14201,8 @@ html {
   --ct-link-card-dark-link-color: var(--ct-color-dark-body);
   --ct-link-card-dark-link-hover-color: var(--ct-color-dark-interaction-background);
   --ct-link-card-dark-deactivated-link-color: var(--ct-color-dark-body);
+  --ct-navigation-card-light-divider-border-color: var(--ct-color-light-border);
+  --ct-navigation-card-dark-divider-border-color: var(--ct-color-dark-border);
   --ct-link-list-connected-border-radius: 0.25rem;
   --ct-link-list-light-connected-border-color: var(--ct-color-light-border);
   --ct-link-list-dark-connected-border-color: var(--ct-color-dark-border);

package/dist/civictheme.storybook.js

@@ -6147,342 +6147,6 @@ document.addEventListener('DOMContentLoaded', () => {
   );
 })();
 
-});
-document.addEventListener('DOMContentLoaded', () => {
-/**
- * Chart data core - framework-agnostic.
- *
- * Pure data helpers shared by the chart renderer (chart.js) and the bdga
- * paragraph editor. No DOM, no D3, no Drupal. Authored as ESM; built to
- * ESM + UMD so the editor's plain-JS admin library can load it too.
- *
- * Parity contract: isNumeric / autodetectKeys / validate mirror the PHP
- * save-time parsers in bdga (chart_postprocess.inc). Pinned by
- * tests/fixtures/chart_data_parity.json - PHP-generated, the authority.
- * Keep both sides green when editing these three.
- */
-
-export const ALLOWED_HOSTS = ['data.gov.au', 'www.data.gov.au'];
-export const MAX_ROWS = 5000;
-export const MAX_CELL_CHARS = 500;
-export const MAX_PAYLOAD_BYTES = 256 * 1024;
-export const FETCH_TIMEOUT_MS = 10000;
-
-// Port of PHP 8 is_numeric(). PHP 8 accepts leading AND trailing whitespace;
-// rejects thousands separators, hex/binary/underscore literals, and the bare
-// strings "INF"/"NAN". JSON numbers arrive as real numbers, hence the Number
-// branch.
-const PHP8_NUMERIC = /^[ \t\n\r\v\f]*[+-]?(\d+\.?\d*|\.\d+)([eE][+-]?\d+)?[ \t\n\r\v\f]*$/;
-export function isNumeric(value) {
-  if (typeof value === 'number') return Number.isFinite(value);
-  if (typeof value !== 'string') return false;
-  return PHP8_NUMERIC.test(value);
-}
-
-// Columns treated as the category axis even when numeric: a year is a label,
-// not a measurement. Exact match after trim + lowercase, not substring.
-const TEMPORAL_KEYS = new Set([
-  'year', 'years', 'fy', 'fiscal_year', 'financial_year', 'reporting_year',
-  'date', 'datetime', 'timestamp', 'month', 'quarter', 'period',
-]);
-const isTemporal = (header) => TEMPORAL_KEYS.has(String(header).trim().toLowerCase());
-
-/**
- * Pick the X (category) and Y (series) keys from a record set, mirroring
- * _bdga_chart_autodetect. records[0] is the type sample. X = first
- * non-numeric-or-temporal header (else the first header); Y = the remaining
- * numeric non-temporal headers, falling back to numeric temporal headers,
- * then to every non-X header.
- */
-export function autodetectKeys(records) {
-  const sample = (records && records[0]) || {};
-  const headers = Object.keys(sample);
-  let xKey = null;
-  for (const h of headers) {
-    if (!isNumeric(sample[h]) || isTemporal(h)) { xKey = h; break; }
-  }
-  if (xKey === null) xKey = headers[0] ?? '';
-
-  const numeric = [];
-  const numericTemporal = [];
-  for (const h of headers) {
-    if (h === xKey) continue;
-    if (isNumeric(sample[h])) {
-      (isTemporal(h) ? numericTemporal : numeric).push(h);
-    }
-  }
-  let yKeys = numeric;
-  if (!yKeys.length && numericTemporal.length) yKeys = numericTemporal;
-  if (!yKeys.length) yKeys = headers.filter((h) => h !== xKey);
-  return { x_key: xKey, y_keys: yKeys };
-}
-
-/**
- * Data-level validation, mirroring what the PHP parsers reject at save: a
- * non-empty chosen key absent from the data. Non-numeric Y values are NOT an
- * error - PHP coerces them to 0, so callers surface that as a warning, not a
- * save-blocker. `keys` is the autodetectKeys shape ({ x_key, y_keys }).
- * Returns [] when clean.
- */
-export function validate(records, keys = {}) {
-  const columns = new Set(Object.keys((records && records[0]) || {}));
-  const list = [...columns].join(', ');
-  const errors = [];
-  const xKey = keys.x_key ?? '';
-  const yKeys = keys.y_keys ?? [];
-  if (xKey && !columns.has(xKey)) errors.push(`X key "${xKey}" not in columns: ${list}`);
-  for (const y of yKeys) {
-    if (y && !columns.has(y)) errors.push(`Y key "${y}" not in columns: ${list}`);
-  }
-  return errors;
-}
-
-/**
- * Validate an author-supplied data.gov.au URL the way bdga does server-side
- * (_bdga_chart_validate_url): https only, host on the allowlist, length cap,
- * no embedded credentials. Returns { ok, host, error }; never throws.
- */
-export function validateSourceUrl(raw) {
-  const value = String(raw ?? '').trim();
-  if (value === '') return { ok: false, host: '', error: 'Empty URL' };
-  if (value.length > 2048) return { ok: false, host: '', error: 'URL exceeds 2048 chars' };
-  let url;
-  try {
-    url = new URL(value);
-  } catch {
-    return { ok: false, host: '', error: 'Malformed URL' };
-  }
-  if (url.protocol !== 'https:') return { ok: false, host: '', error: 'Scheme must be https' };
-  const host = url.hostname.toLowerCase();
-  if (!ALLOWED_HOSTS.includes(host)) return { ok: false, host, error: `Host not on allowlist: ${host}` };
-  if (url.username || url.password) return { ok: false, host, error: 'Credentials in URL not permitted' };
-  return { ok: true, host, error: '' };
-}
-
-// Sanitise raw records into flat { string: string } rows: drop nested
-// objects/arrays, coerce scalars to strings, cap each cell and the row count.
-// Numeric coercion of Y columns happens later in the renderer once keys are
-// resolved - the editor needs raw values to suggest keys.
-function sanitiseRecords(rawRecords) {
-  const out = [];
-  for (const r of rawRecords) {
-    if (out.length >= MAX_ROWS) break;
-    if (!r || typeof r !== 'object' || Array.isArray(r)) continue;
-    const row = {};
-    for (const k of Object.keys(r)) {
-      const v = r[k];
-      if (v === null || v === undefined) { row[k] = ''; continue; }
-      if (typeof v === 'object') continue;
-      const s = String(v);
-      row[k] = s.length > MAX_CELL_CHARS ? `${s.slice(0, MAX_CELL_CHARS)}…` : s;
-    }
-    out.push(row);
-  }
-  return out;
-}
-
-// CKAN gives a typed field list (result.fields = [{ id, type }]); prefer it so
-// the editor can suggest by type. Fall back to the first record's keys.
-function deriveFields(ckanFields, records) {
-  if (Array.isArray(ckanFields) && ckanFields.length) {
-    return ckanFields
-      .filter((f) => f && typeof f.id === 'string')
-      .map((f) => ({ id: f.id, type: typeof f.type === 'string' ? f.type : null }));
-  }
-  return Object.keys(records[0] || {}).map((id) => ({ id, type: null }));
-}
-
-/**
- * Fetch + sanitise records from a data.gov.au CKAN endpoint. Returns
- * { records, fields }; fields carries CKAN's typed column list when present
- * (the renderer's old extractCkanRows dropped it). Throws Error(message) on
- * any failure so callers can surface the message. Network, so not covered by
- * the parity fixtures. `fetchImpl` is injectable for tests.
- */
-export async function fetchRecords(url, { fetchImpl, timeoutMs = FETCH_TIMEOUT_MS } = {}) {
-  const check = validateSourceUrl(url);
-  if (!check.ok) throw new Error(check.error);
-  const doFetch = fetchImpl || (typeof fetch !== 'undefined' ? fetch : null);
-  if (!doFetch) throw new Error('No fetch implementation available');
-
-  const controller = typeof AbortController !== 'undefined' ? new AbortController() : null;
-  const timer = controller ? setTimeout(() => controller.abort(), timeoutMs) : null;
-  let payload;
-  try {
-    const res = await doFetch(new URL(String(url).trim()).toString(), {
-      method: 'GET',
-      credentials: 'omit',
-      referrerPolicy: 'no-referrer',
-      mode: 'cors',
-      signal: controller ? controller.signal : undefined,
-      headers: { Accept: 'application/json' },
-    });
-    if (timer) clearTimeout(timer);
-    if (!res.ok) throw new Error(`HTTP ${res.status}`);
-    const ct = (res.headers.get('content-type') || '').toLowerCase();
-    if (ct.indexOf('application/json') === -1) throw new Error(`Unexpected content-type: ${ct}`);
-    payload = await res.json();
-  } catch (err) {
-    if (timer) clearTimeout(timer);
-    if (err instanceof Error && /^(HTTP |Unexpected content-type)/.test(err.message)) throw err;
-    throw new Error(`Fetch failed: ${err && err.message ? err.message : err}`, { cause: err });
-  }
-
-  const rawRecords = payload && payload.result && Array.isArray(payload.result.records)
-    ? payload.result.records
-    : (Array.isArray(payload) ? payload : []);
-  const records = sanitiseRecords(rawRecords);
-  const fields = deriveFields(payload && payload.result ? payload.result.fields : null, records);
-  return { records, fields };
-}
-
-// Quote-aware single-line CSV split: handles embedded commas and "" escapes.
-// Embedded newlines inside quoted fields are not supported (rare in CKAN
-// tabular exports); the renderer falls back to the server-rendered table.
-function splitCsvLine(line) {
-  const out = [];
-  let cur = '';
-  let inQuotes = false;
-  for (let i = 0; i < line.length; i += 1) {
-    const ch = line[i];
-    if (inQuotes) {
-      if (ch === '"') {
-        if (line[i + 1] === '"') { cur += '"'; i += 1; } else { inQuotes = false; }
-      } else { cur += ch; }
-    } else if (ch === '"') {
-      inQuotes = true;
-    } else if (ch === ',') {
-      out.push(cur); cur = '';
-    } else {
-      cur += ch;
-    }
-  }
-  out.push(cur);
-  return out;
-}
-
-function parseCsvToRecords(text) {
-  const lines = text.split(/\r\n|\r|\n/).filter((l) => l.trim() !== '');
-  if (lines.length < 2) throw new Error('CSV needs a header row and at least one data row');
-  const headers = splitCsvLine(lines[0]).map((h) => h.trim());
-  const records = [];
-  for (let i = 1; i < lines.length && records.length < MAX_ROWS; i += 1) {
-    const cells = splitCsvLine(lines[i]);
-    const row = {};
-    headers.forEach((h, idx) => {
-      const cell = (cells[idx] ?? '').trim();
-      row[h] = cell.length > MAX_CELL_CHARS ? `${cell.slice(0, MAX_CELL_CHARS)}…` : cell;
-    });
-    records.push(row);
-  }
-  return { records, headers };
-}
-
-function parseJsonToRecords(text) {
-  let decoded;
-  try {
-    decoded = JSON.parse(text);
-  } catch (cause) {
-    throw new Error('Invalid JSON', { cause });
-  }
-  let raw = null;
-  if (Array.isArray(decoded)) raw = decoded;
-  else if (decoded && Array.isArray(decoded.rows)) raw = decoded.rows;
-  else if (decoded && decoded.result && Array.isArray(decoded.result.records)) raw = decoded.result.records;
-  if (!Array.isArray(raw) || !raw.length) throw new Error('No row array found in JSON');
-  const records = sanitiseRecords(raw);
-  return { records, headers: Object.keys(records[0] || {}) };
-}
-
-/**
- * Parse author-pasted CSV or JSON into { records, fields }. Mirrors the shapes
- * the PHP parsers accept (CSV header + rows; JSON array, { rows }, or CKAN
- * { result: { records } }). Key resolution is the caller's job via
- * autodetectKeys; this only produces records + the column list. Throws
- * Error(message) on malformed input.
- */
-export function parse(text, mode) {
-  const input = String(text ?? '');
-  if (input.length > MAX_PAYLOAD_BYTES) throw new Error('Payload exceeds size cap');
-  let result;
-  if (mode === 'csv') result = parseCsvToRecords(input);
-  else if (mode === 'json') result = parseJsonToRecords(input);
-  else throw new Error(`Unknown parse mode: ${mode}`);
-  return { records: result.records, fields: result.headers.map((id) => ({ id, type: null })) };
-}
-
-// Canonical 8-4-4-4-12 hex UUID, matching bdga's PHP _bdga_chart_is_uuid.
-const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
-const isUuid = (s) => typeof s === 'string' && UUID_RE.test(s);
-
-/**
- * Extract the CKAN resource_id (a UUID) from a data.gov.au data URL. Handles
- * the three shapes authors paste: ?resource_id=<uuid>, a datastore_search_sql
- * ?sql=... FROM "<uuid>", and a resource page .../resource/<uuid>. Returns the
- * lower-cased UUID, or null when none is found. Mirrors the removed PHP
- * _bdga_chart_extract_resource_id.
- */
-export function extractResourceId(url) {
-  let parsed;
-  try {
-    parsed = new URL(String(url ?? '').trim());
-  } catch {
-    return null;
-  }
-  const rid = parsed.searchParams.get('resource_id');
-  if (rid && isUuid(rid)) return rid.toLowerCase();
-  const sql = parsed.searchParams.get('sql');
-  const fromMatch = sql && sql.match(/FROM\s+"?([0-9a-fA-F-]{36})"?/);
-  if (fromMatch && isUuid(fromMatch[1])) return fromMatch[1].toLowerCase();
-  const pathMatch = parsed.pathname.match(/\/resource\/([0-9a-fA-F-]{36})/);
-  if (pathMatch && isUuid(pathMatch[1])) return pathMatch[1].toLowerCase();
-  return null;
-}
-
-/**
- * Resolve a data.gov.au datastore URL to its human resource landing page,
- * client-side (GovCMS bans server-side outbound HTTP). Editor-only: the
- * renderer just displays the stored source_page_url prop. Returns
- * { landingUrl, resourceId, packageId }, or null on any failure (not a
- * data.gov.au URL, no resource_id, resource_show fails, or no valid
- * package_id). Best-effort, so the editor shows no suggestion when null.
- * Mirrors the removed PHP _bdga_chart_resolve_source_page. `fetchImpl` is
- * injectable for tests.
- */
-export async function resolveSourcePage(url, { fetchImpl, timeoutMs = FETCH_TIMEOUT_MS } = {}) {
-  if (!validateSourceUrl(url).ok) return null;
-  const resourceId = extractResourceId(url);
-  if (!resourceId) return null;
-  const doFetch = fetchImpl || (typeof fetch !== 'undefined' ? fetch : null);
-  if (!doFetch) return null;
-
-  const controller = typeof AbortController !== 'undefined' ? new AbortController() : null;
-  const timer = controller ? setTimeout(() => controller.abort(), timeoutMs) : null;
-  try {
-    const encId = encodeURIComponent(resourceId);
-    const api = `https://data.gov.au/data/api/3/action/resource_show?id=${encId}`;
-    const res = await doFetch(api, {
-      method: 'GET',
-      credentials: 'omit',
-      referrerPolicy: 'no-referrer',
-      mode: 'cors',
-      signal: controller ? controller.signal : undefined,
-      headers: { Accept: 'application/json' },
-    });
-    if (timer) clearTimeout(timer);
-    if (!res.ok) return null;
-    const data = await res.json();
-    const packageId = data && data.result && data.result.package_id;
-    if (!isUuid(packageId)) return null;
-    const encPkg = encodeURIComponent(packageId);
-    const landingUrl = `https://data.gov.au/data/dataset/${encPkg}/resource/${encId}`;
-    return { landingUrl, resourceId, packageId: packageId.toLowerCase() };
-  } catch {
-    if (timer) clearTimeout(timer);
-    return null;
-  }
-}
-
 });
 document.addEventListener('DOMContentLoaded', () => {
 /**

package/dist/civictheme.variables.css

@@ -145,6 +145,8 @@ html {
   --ct-link-card-dark-link-color: var(--ct-color-dark-body);
   --ct-link-card-dark-link-hover-color: var(--ct-color-dark-interaction-background);
   --ct-link-card-dark-deactivated-link-color: var(--ct-color-dark-body);
+  --ct-navigation-card-light-divider-border-color: var(--ct-color-light-border);
+  --ct-navigation-card-dark-divider-border-color: var(--ct-color-dark-border);
   --ct-link-list-connected-border-radius: 0.25rem;
   --ct-link-list-light-connected-border-color: var(--ct-color-light-border);
   --ct-link-list-dark-connected-border-color: var(--ct-color-dark-border);

package/dist/constants.json

@@ -1589,6 +1589,8 @@
     "ct-link-card-dark-link-color": "ct-color-dark('body')",
     "ct-link-card-dark-link-hover-color": "ct-color-dark('interaction-background')",
     "ct-link-card-dark-deactivated-link-color": "ct-color-dark('body')",
+    "ct-navigation-card-light-divider-border-color": "ct-color-light('border')",
+    "ct-navigation-card-dark-divider-border-color": "ct-color-dark('border')",
     "ct-link-list-connected-border-radius": "$ct-border-radius",
     "ct-link-list-light-connected-border-color": "ct-color-light('border')",
     "ct-link-list-dark-connected-border-color": "ct-color-dark('border')",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dta-au/civictheme-twig",
-  "version": "1.16.0",
+  "version": "1.16.1",
   "license": "GPL-2.0-or-later",
   "description": "CivicTheme UI Kit for Twig",
   "keywords": [