@i-dot-ai-npm/component-library-frontend 0.0.1 → 0.0.3

package/dist/i-ai-design-system.min.css

@@ -0,0 +1 @@
+.app-masthead{background-color:#d2e2f1}.govuk-button.govuk-button--tertiary{background-color:#fff;border:1px solid var(--govuk-border-colour, #cecece);border-bottom:3px solid rgba(0,0,0,0);box-shadow:0 2px 0 #858686;color:var(--govuk-link-colour, #1a65a6)}.govuk-button.govuk-button--tertiary:hover{background-color:#f4f8fb;color:var(--govuk-link-colour, #1a65a6)}.govuk-button.govuk-button--small{padding:6px 8px 4px;font-size:.875rem;line-height:1.25rem;box-shadow:0 1px 0 #858686}.govuk-button-group:has(.govuk-button--small){margin-bottom:0;align-items:center}.govuk-button-group .govuk-button--small{margin-bottom:0;margin-right:2px}.govuk-table--summary .govuk-button-group{flex-wrap:nowrap}.govuk-link--warning{color:var(--govuk-error-colour, #ca3535) !important}.govuk-link:focus{color:var(--govuk-link-colour, #1a65a6);outline:3px solid rgba(0,0,0,0);background-color:rgba(0,0,0,0);box-shadow:none;text-decoration:none}.govuk-link:focus-visible{outline:3px solid rgba(0,0,0,0);background-color:var(--govuk-focus-colour, #ffdd00);box-shadow:0 -2px var(--govuk-focus-colour, #ffdd00),0 4px var(--govuk-focus-text-colour, #0b0c0c);text-decoration:none}.govuk-table--summary .govuk-table__cell--stretch .govuk-link{display:inline-block;width:100%}.govuk-select--subtle{border:1px solid #858686;min-width:0}.govuk-input--subtle{border:1px solid #858686}.govuk-textarea--subtle{border:1px solid #858686}.govuk-checkboxes--subtle .govuk-checkboxes__label::before{border:1px solid #858686;background-color:#fff}.govuk-table--summary .govuk-checkboxes__label{padding:0}.govuk-table--subtle .govuk-table__header{font-size:1rem;line-height:1.25}@media print{.govuk-table--subtle .govuk-table__header{font-size:14pt;line-height:1.2}}.govuk-table--subtle .govuk-table__header{color:#484949}.govuk-table__cell--stretch{width:100%}.govuk-table__cell--no-wrap{white-space:nowrap}.govuk-table__cell--small{font-size:.875rem}.govuk-table--summary .govuk-table__cell{vertical-align:middle}.govuk-form-group--inline{display:flex;flex-direction:row;align-items:center;gap:1rem}.govuk-generic-header__homepage-link svg{display:inline-block}.iai-toggle__item{display:flex;align-items:center;gap:8px;margin-bottom:10px}.iai-toggle__item:last-child{margin-bottom:0}.iai-toggle__input{box-sizing:content-box;position:relative;flex:0 0 auto;width:46px;height:24px;margin:0;appearance:none;-webkit-appearance:none;background:none;cursor:pointer}.iai-toggle__input::before{content:"";box-sizing:border-box;position:absolute;top:0;left:0;width:46px;height:24px;border-radius:100px;background-color:#484949;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14' fill='none'%3E%3Cpath d='M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z' fill='white' stroke='white'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z' fill='white'/%3E%3C/svg%3E");background-repeat:no-repeat,no-repeat;background-position:8px center,30px center;background-size:12px 12px,10px 10px;transition:150ms}.iai-toggle__input::after{content:"";box-sizing:border-box;position:absolute;top:50%;left:1px;width:22px;height:22px;border:1px solid rgba(0,0,0,.25);border-radius:50%;background-color:#fff;transform:translateY(-50%);transition:150ms}.iai-toggle__input:checked::before{background-color:var(--govuk-success-colour, #0f7a52)}.iai-toggle__input:checked::after{left:23px}.iai-toggle__input:focus-visible::before{outline:3px solid rgba(0,0,0,0);outline-offset:0;box-shadow:0 0 0 4px var(--govuk-focus-colour, #ffdd00)}.iai-toggle__label{align-self:center;margin-bottom:0;padding:7px 0;cursor:pointer;touch-action:manipulation}.iai-toggle__input:disabled{cursor:not-allowed}.iai-toggle__input:disabled::before{background-color:#cecece}.iai-toggle__item:has(.iai-toggle__input:disabled) .iai-toggle__label{opacity:.5;cursor:not-allowed}@media(prefers-reduced-motion: reduce){.iai-toggle__input::before,.iai-toggle__input::after{transition-duration:0ms}}.iai-card-group{display:flex;flex-direction:column;gap:20px;margin-bottom:20px}@media(min-width: 768px){.iai-card-group{display:grid;grid-template-columns:repeat(3, 1fr)}}.iai-card-group__item{height:100%}.iai-card{position:relative;height:100%;box-sizing:border-box;padding:20px;background-color:#fff;border:2px solid #cecece}.iai-card__icon{margin-bottom:15px;color:#484949}.iai-card__icon svg{display:block}.iai-card:hover .iai-card__icon{color:#fff}.iai-card:hover{background-color:#0b0c0c}.iai-card__heading{margin:0 0 5px;font-size:1.1875rem;line-height:1.3157894737}.iai-card__link{color:var(--govuk-link-colour, #1a65a6);text-decoration:underline}.iai-card__link:after{content:"";position:absolute;inset:0}.iai-card__content{margin:0;color:var(--govuk-text-colour, #0b0c0c)}.iai-card:hover .iai-card__link,.iai-card:hover .iai-card__content{color:#fff !important}.iai-card--secondary{padding:15px 20px;background-color:#f3f3f3;border:none}.contents-panel{padding-right:15px;font-family:"GDS Transport",arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}/*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */@font-face{font-family:"GDS Transport";font-style:normal;font-weight:normal;font-display:fallback;src:url("/assets/fonts/light-94a07e06a1-v2.woff2") format("woff2"),url("/assets/fonts/light-f591b13f7d-v2.woff") format("woff")}@font-face{font-family:"GDS Transport";font-style:normal;font-weight:bold;font-display:fallback;src:url("/assets/fonts/bold-b542beb274-v2.woff2") format("woff2"),url("/assets/fonts/bold-affa96571d-v2.woff") format("woff")}@media print{.contents-panel{font-family:sans-serif}}.contents-panel{font-weight:400;font-size:1rem;line-height:1.25}@media print{.contents-panel{font-size:14pt;line-height:1.2}}.contents-panel__theme{font-size:1.1875rem;line-height:1.3157894737}@media print{.contents-panel__theme{font-size:14pt;line-height:1.15}}.contents-panel__theme{font-weight:400;margin:0;padding:10px 15px 10px 0;color:#484949}.contents-panel__theme:first-of-type{padding-top:0}.contents-panel__section{margin:0 0 20px;padding:0;list-style-type:none}.contents-panel__section-item{margin-bottom:5px;padding-top:5px;padding-bottom:5px}.contents-panel__link{padding:2px 0}.contents-panel__section-item--current{margin-left:-14px;padding-left:10px;border-left:4px solid #1d70b8;background-color:#fff}.contents-panel__section-item--current .contents-panel__link[aria-current=page]{font-weight:700}

package/dist/i-ai-design-system.min.js

@@ -0,0 +1 @@
+function i(){}export{i as initAllIAIDesignSystem};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@i-dot-ai-npm/component-library-frontend",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "i.AI GOV.UK design-system override layer (SCSS + JS). Layered on top of govuk-frontend.",
   "type": "module",
   "exports": {
@@ -15,7 +15,7 @@
   ],
   "scripts": {
     "build": "npm run build:css && npm run build:js",
-    "build:css": "sass --no-source-map --style=compressed src/index.scss dist/i-ai-design-system.min.css",
+    "build:css": "sass --no-source-map --style=compressed --pkg-importer=node src/index.scss dist/i-ai-design-system.min.css",
     "build:js": "esbuild src/index.js --bundle --minify --format=esm --outfile=dist/i-ai-design-system.min.js"
   },
   "peerDependencies": {
@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "esbuild": "^0.25.0",
+    "govuk-frontend": "^6.5.0",
     "sass": "^1.103.0"
   },
   "repository": {
@@ -35,4 +36,4 @@
     "registry": "https://registry.npmjs.org"
   },
   "license": "MIT"
-}
+}

package/src/components/_app-masthead.scss

@@ -0,0 +1,5 @@
+@use "pkg:govuk-frontend/base" as *;
+
+.app-masthead {
+    background-color: govuk-colour("blue", $variant: "tint-80");
+}

package/src/components/_button.scss

@@ -1,23 +1,25 @@
+@use "pkg:govuk-frontend/base" as *;
+
 // Button overrides.
 
-.govuk-button--tertiary {
-    background-color: #ffffff;
-    border: 1px solid var(--govuk-border-colour);
+.govuk-button.govuk-button--tertiary {
+    background-color: govuk-colour("white");
+    border: 1px solid govuk-functional-colour("border");
     border-bottom: 3px solid transparent;
-    box-shadow: 0 2px 0 #858686;
-    color: var(--govuk-link-colour);
+    box-shadow: 0 2px 0 govuk-colour("black", $variant: "tint-50");
+    color: govuk-functional-colour("link");
 }
 
-.govuk-button--tertiary:hover {
-    background-color: #f4f8fb;
-    color: var(--govuk-link-colour);
+.govuk-button.govuk-button--tertiary:hover {
+    background-color: govuk-colour("blue", $variant: "tint-95");
+    color: govuk-functional-colour("link");
 }
 
-.govuk-button--small {
+.govuk-button.govuk-button--small {
     padding: 6px 8px 4px;
     font-size: 0.875rem;
     line-height: 1.25rem;
-    box-shadow: 0 1px 0 #858686;
+    box-shadow: 0 1px 0 govuk-colour("black", $variant: "tint-50");
 }
 
 .govuk-button-group:has(.govuk-button--small) {
@@ -29,3 +31,10 @@
     margin-bottom: 0;
     margin-right: 2px;
 }
+
+// summary table pattern
+.govuk-table--summary {
+    .govuk-button-group {
+        flex-wrap: nowrap;
+    }
+}

package/src/components/_card.scss

@@ -1,3 +1,5 @@
+@use "pkg:govuk-frontend/base" as *;
+
 // Card (i.AI component).
 
 .iai-card-group {
@@ -23,13 +25,13 @@
     height: 100%;
     box-sizing: border-box;
     padding: 20px;
-    background-color: var(--card-surface, #ffffff);
-    border: var(--card-border-width, 2px) solid var(--card-border, #b1b4b6);
+    background-color: govuk-colour("white");
+    border: 2px solid govuk-colour("black", $variant: "tint-80");
 }
 
 .iai-card__icon {
     margin-bottom: 15px;
-    color: var(--card-icon, #505a5f);
+    color: govuk-colour("black", $variant: "tint-25");
 }
 
 .iai-card__icon svg {
@@ -37,11 +39,11 @@
 }
 
 .iai-card:hover .iai-card__icon {
-    color: var(--card-text-hover, #ffffff);
+    color: govuk-colour("white");
 }
 
 .iai-card:hover {
-    background-color: var(--card-surface-hover, #0b0c0c);
+    background-color: govuk-colour("black");
 }
 
 .iai-card__heading {
@@ -51,7 +53,7 @@
 }
 
 .iai-card__link {
-    color: var(--govuk-link-colour, var(--grey-400));
+    color: govuk-functional-colour("link");
     text-decoration: underline;
 }
 
@@ -63,16 +65,16 @@
 
 .iai-card__content {
     margin: 0;
-    color: var(--govuk-text-colour, #0b0c0c);
+    color: govuk-functional-colour("text");
 }
 
 .iai-card:hover .iai-card__link,
 .iai-card:hover .iai-card__content {
-    color: var(--card-text-hover, #ffffff) !important;
+    color: govuk-colour("white") !important;
 }
 
 .iai-card--secondary {
     padding: 15px 20px;
-    background-color: var(--card-surface-secondary, #f3f2f1);
+    background-color: govuk-colour("black", $variant: "tint-95");
     border: none;
 }

package/src/components/_checkboxes.scss

@@ -1,6 +1,13 @@
-// Checkboxes overrides.
+@use "pkg:govuk-frontend/base" as *;
 
 .govuk-checkboxes--subtle .govuk-checkboxes__label::before {
-    border: 1px solid #858686;
-    background-color: #fff;
+    border: 1px solid govuk-colour("black", $variant: "tint-50");
+    background-color: govuk-colour("white");
+}
+
+// table summary pattern
+.govuk-table--summary {
+    .govuk-checkboxes__label {
+        padding: 0;
+    }
 }

package/src/components/_contents-panel.scss

@@ -0,0 +1,47 @@
+@use "pkg:govuk-frontend/base" as *;
+
+.contents-panel {
+    padding-right: govuk-spacing(3);
+    @include govuk-font(16);
+}
+
+.contents-panel__theme {
+    @include govuk-font-size($size: 19);
+    @include govuk-typography-weight-regular;
+    margin: 0;
+    padding: govuk-spacing(2) govuk-spacing(3) govuk-spacing(2) 0;
+    color: govuk-colour("black", $variant: "tint-25");
+
+    &:first-of-type {
+        padding-top: 0;
+    }
+}
+
+.contents-panel__section {
+    margin: 0 0 govuk-spacing(4);
+    padding: 0;
+    list-style-type: none;
+}
+
+.contents-panel__section-item {
+    margin-bottom: govuk-spacing(1);
+    padding-top: govuk-spacing(1);
+    padding-bottom: govuk-spacing(1);
+}
+
+.contents-panel__link {
+    padding: 2px 0;
+}
+
+.contents-panel__section-item--current {
+    $_current-indicator-width: 4px;
+
+    margin-left: -(govuk-spacing(2) + $_current-indicator-width);
+    padding-left: govuk-spacing(2);
+    border-left: $_current-indicator-width solid govuk-colour("blue");
+    background-color: govuk-colour("white");
+}
+
+.contents-panel__section-item--current .contents-panel__link[aria-current="page"] {
+    @include govuk-typography-weight-bold;
+}

package/src/components/_input.scss

@@ -1,5 +1,7 @@
+@use "pkg:govuk-frontend/base" as *;
+
 // Text input overrides.
 
 .govuk-input--subtle {
-    border: 1px solid #858686;
+    border: 1px solid govuk-colour("black", $variant: "tint-50");
 }

package/src/components/_link.scss

@@ -1,11 +1,13 @@
+@use "pkg:govuk-frontend/base" as *;
+
 // Link overrides.
 
 .govuk-link--warning {
-    color: #ca3535 !important;
+    color: govuk-functional-colour("error") !important;
 }
 
 .govuk-link:focus {
-    color: var(--govuk-link-colour);
+    color: govuk-functional-colour("link");
     outline: 3px solid transparent;
     background-color: transparent;
     box-shadow: none;
@@ -14,9 +16,19 @@
 
 .govuk-link:focus-visible {
     outline: 3px solid transparent;
-    background-color: var(--govuk-focus-colour, #fd0);
+    background-color: $govuk-focus-colour;
     box-shadow:
-        0 -2px var(--govuk-focus-colour, #fd0),
-        0 4px var(--govuk-focus-text-colour, #0b0c0c);
+        0 -2px $govuk-focus-colour,
+        0 4px $govuk-focus-text-colour;
     text-decoration: none;
 }
+
+// table summary pattern
+.govuk-table--summary {
+    .govuk-table__cell--stretch {
+        .govuk-link {
+            display: inline-block;
+            width: 100%;
+        }
+    }
+}

package/src/components/_select.scss

@@ -1,6 +1,8 @@
+@use "pkg:govuk-frontend/base" as *;
+
 // Select overrides.
 
 .govuk-select--subtle {
-    border: 1px solid #858686;
+    border: 1px solid govuk-colour("black", $variant: "tint-50");
     min-width: 0;
 }

package/src/components/_table.scss

@@ -1,21 +1,26 @@
+@use "pkg:govuk-frontend/base" as *;
+
 // Table overrides.
+.govuk-table--subtle .govuk-table__header {
+    @include govuk-font-size(16);
+    color: govuk-colour("black", $variant: "tint-25");
+}
 
-.govuk-table--subtle {
-    border-collapse: separate;
-    border-spacing: 0;
+.govuk-table__cell--stretch {
+    width: 100%;
 }
 
-.govuk-table--subtle .govuk-table__header {
-    font-size: 1rem;
-    color: #484949;
-    border-color: #484949;
+.govuk-table__cell--no-wrap {
+    white-space: nowrap;
 }
 
-.govuk-table--subtle .govuk-table__cell {
-    padding: 0;
-    vertical-align: middle;
+.govuk-table__cell--small {
+    font-size: 0.875rem;
 }
 
-.govuk-table__row:hover {
-    background-color: #f2f2f2;
+// table summary pattern
+.govuk-table--summary {
+    .govuk-table__cell {
+        vertical-align: middle;
+    }
 }

package/src/components/_textarea.scss

@@ -1,5 +1,7 @@
+@use "pkg:govuk-frontend/base" as *;
+
 // Textarea overrides.
 
 .govuk-textarea--subtle {
-    border: 1px solid #858686;
+    border: 1px solid govuk-colour("black", $variant: "tint-50");
 }

package/src/components/_toggle.scss

@@ -1,26 +1,18 @@
-// Toggle
-//
-// Authored as a self-contained control (no dependency on the GOV.UK checkbox
-// classes). The developer writes only:
-//
-//   <div class="iai-toggle__item" data-module="govuk-toggle">
-//     <input class="iai-toggle__input" type="checkbox" id="toggle">
-//     <label class="iai-toggle__label" for="toggle">Toggle label</label>
-//   </div>
-//
-// Progressive enhancement:
-//   - No JS: the control renders as a GOV.UK-style checkbox (box + tick),
-//     drawn here in CSS. Fully functional native checkbox.
-//   - JS (body.govuk-frontend-supported): toggle.js injects the decorative
-//     track (.iai-toggle__display) and the checkmark/cross icons, and the
-//     rules below switch the control into a sliding toggle.
+@use "pkg:govuk-frontend/base" as *;
+
+$iai-toggle-track-width: 46px;
+$iai-toggle-track-height: 24px;
+$iai-toggle-handle-size: 22px;
+$iai-toggle-handle-inset: 1px;
+$iai-toggle-track-gap: 8px;
+
+$iai-toggle-checkmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14' fill='none'%3E%3Cpath d='M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z' fill='white' stroke='white'/%3E%3C/svg%3E");
+$iai-toggle-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z' fill='white'/%3E%3C/svg%3E");
 
-// Item: lays out the control and its label on one line.
 .iai-toggle__item {
     display: flex;
-    position: relative;
     align-items: center;
-    gap: 8px;
+    gap: $iai-toggle-track-gap;
     margin-bottom: 10px;
 }
 
@@ -28,195 +20,89 @@
     margin-bottom: 0;
 }
 
-// Label: mirrors GOV.UK checkbox label styling.
-.iai-toggle__label {
-    align-self: center;
-    margin-bottom: 0;
-    padding: 7px 15px;
-    cursor: pointer;
-    touch-action: manipulation;
-}
-
-// No-JS control wrapper: a 40px square that holds the checkbox box + tick.
-.iai-toggle {
-    display: inline-block;
+.iai-toggle__input {
+    box-sizing: content-box;
     position: relative;
-    width: 40px;
-    height: 40px;
     flex: 0 0 auto;
+    width: $iai-toggle-track-width;
+    height: $iai-toggle-track-height;
+    margin: 0;
+    appearance: none;
+    -webkit-appearance: none;
+    background: none;
     cursor: pointer;
 }
 
-// Empty check box (GOV.UK: 40px square, 2px current-colour border).
-.iai-toggle::before {
+.iai-toggle__input::before {
     content: "";
     box-sizing: border-box;
     position: absolute;
     top: 0;
     left: 0;
-    width: 40px;
-    height: 40px;
-    border: 2px solid currentcolor;
-    background: transparent;
-}
-
-// Check mark (GOV.UK: rotated corner shape), hidden until checked.
-.iai-toggle::after {
-    content: "";
-    box-sizing: border-box;
-    position: absolute;
-    top: 11px;
-    left: 8px;
-    width: 23px;
-    height: 12px;
-    transform: rotate(-45deg);
-    border: solid;
-    border-width: 0 0 5px 5px;
-    border-top-color: transparent;
-    opacity: 0;
-    background: transparent;
-}
-
-// The real checkbox: an invisible overlay filling the wrapper, so the whole
-// box is clickable and it stays focusable/tabbable.
-.iai-toggle__input {
-    position: absolute;
-    inset: 0;
-    z-index: 3;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    opacity: 0;
-    cursor: pointer;
-}
-
-// Reveal the check mark when the input is checked.
-.iai-toggle:has(.iai-toggle__input:checked)::after {
-    opacity: 1;
-}
-
-// Focus ring on the box when the input is focused.
-.iai-toggle:has(.iai-toggle__input:focus)::before {
-    border-width: 4px;
-    outline: 3px solid transparent;
-    outline-offset: 1px;
-    box-shadow: 0 0 0 3px #ffdd00;
-}
-
-// Disabled.
-.iai-toggle:has(.iai-toggle__input:disabled) {
-    cursor: not-allowed;
-}
-
-.iai-toggle__item:has(.iai-toggle__input:disabled) .iai-toggle__label {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-// The decorative track is not rendered until JS injects it.
-.iai-toggle__display {
-    display: none;
-}
-
-// ------------------------------------------------------------------ *
-// JS enhanced: turn the wrapper into the sliding toggle track.        *
-// ------------------------------------------------------------------ *
-
-.govuk-frontend-supported .iai-toggle {
-    display: inline-flex;
-    width: auto;
-    height: auto;
-}
-
-// Hide the no-JS checkbox box + tick.
-.govuk-frontend-supported .iai-toggle::before,
-.govuk-frontend-supported .iai-toggle::after {
-    content: none;
-}
-
-// Show the track.
-.govuk-frontend-supported .iai-toggle__display {
-    display: inline-block;
-}
-
-// Track (pill).
-.iai-toggle__display {
-    box-sizing: content-box;
-    position: relative;
-    width: 44px;
-    height: 24px;
+    width: $iai-toggle-track-width;
+    height: $iai-toggle-track-height;
     border-radius: 100px;
-    background-color: #505a5f;
-    color: #fff;
+    background-color: govuk-colour("black", $variant: "tint-25");
+    background-image: $iai-toggle-checkmark, $iai-toggle-cross;
+    background-repeat: no-repeat, no-repeat;
+    background-position: 8px center, 30px center;
+    background-size: 12px 12px, 10px 10px;
     transition: 150ms;
-    cursor: pointer;
-    // Decorative: let clicks fall through to the overlaid real input.
-    pointer-events: none;
 }
 
-// Handle (sliding circle).
-.iai-toggle__handle {
+.iai-toggle__input::after {
+    content: "";
     box-sizing: border-box;
     position: absolute;
-    z-index: 2;
     top: 50%;
-    left: 0;
-    width: 22px;
-    height: 22px;
+    left: $iai-toggle-handle-inset;
+    width: $iai-toggle-handle-size;
+    height: $iai-toggle-handle-size;
     border: 1px solid rgba(0, 0, 0, 0.25);
     border-radius: 50%;
-    background-color: #fff;
+    background-color: govuk-colour("white");
     transform: translateY(-50%);
-    transition: inherit;
+    transition: 150ms;
 }
 
-// Checked: green track, handle slides right.
-.iai-toggle__input:checked ~ .iai-toggle__display {
-    background-color: #00703c;
+.iai-toggle__input:checked::before {
+    background-color: govuk-functional-colour("success");
 }
 
-.iai-toggle__input:checked ~ .iai-toggle__display .iai-toggle__handle {
-    left: 22px;
+.iai-toggle__input:checked::after {
+    left: $iai-toggle-track-width - $iai-toggle-handle-size - $iai-toggle-handle-inset;
 }
 
-// Focus ring on the track.
-.iai-toggle__input:focus-visible ~ .iai-toggle__display {
+.iai-toggle__input:focus-visible::before {
     outline: 3px solid transparent;
     outline-offset: 0;
-    box-shadow: 0 0 0 4px #ffdd00;
+    box-shadow: 0 0 0 4px $govuk-focus-colour;
 }
 
-// Disabled track.
-.iai-toggle__input:disabled ~ .iai-toggle__display {
-    background-color: #b1b4b6;
-    border-color: #6f7276;
-    cursor: not-allowed;
+.iai-toggle__label {
+    align-self: center;
+    margin-bottom: 0;
+    padding: 7px 0;
+    cursor: pointer;
+    touch-action: manipulation;
 }
 
-// Icons sit at the two handle rest positions.
-.iai-toggle__icon {
-    position: absolute;
-    top: 50%;
-    width: 12px;
-    height: 12px;
-    transform: translate(-50%, -50%);
-    color: inherit;
-    fill: currentcolor;
+.iai-toggle__input:disabled {
+    cursor: not-allowed;
 }
 
-.iai-toggle__icon--checkmark {
-    left: 14px;
+.iai-toggle__input:disabled::before {
+    background-color: govuk-colour("black", $variant: "tint-80");
 }
 
-.iai-toggle__icon--cross {
-    left: 32px;
-    width: 10px;
-    height: 10px;
+.iai-toggle__item:has(.iai-toggle__input:disabled) .iai-toggle__label {
+    opacity: 0.5;
+    cursor: not-allowed;
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .iai-toggle__display,
-    .iai-toggle__handle {
+    .iai-toggle__input::before,
+    .iai-toggle__input::after {
         transition-duration: 0ms;
     }
 }

package/src/index.js

@@ -3,10 +3,6 @@
 // Progressive enhancement for i.AI components. Call after govuk-frontend's
 // initAll(). Each component's enhancement lives in its own module.
 
-import { initToggles } from './scripts/toggle.js';
-
-export { initToggles };
-
 export function initAllIAIDesignSystem() {
-  initToggles();
+    // No component enhancements yet.
 }

package/src/index.scss

@@ -4,10 +4,9 @@
 // to GOV.UK components; it has no base layout or typography of its own.
 //
 // Each component (GOV.UK override or i.AI-new) lives in its own module.
-
+@forward "components/app-masthead";
 @forward "components/button";
 @forward "components/link";
-@forward "components/radios";
 @forward "components/select";
 @forward "components/input";
 @forward "components/textarea";
@@ -17,3 +16,4 @@
 @forward "components/header";
 @forward "components/toggle";
 @forward "components/card";
+@forward "components/contents-panel";

package/src/components/_radios.scss

@@ -1,45 +0,0 @@
-// Radios overrides, including the i.AI card-style radios variant.
-
-.govuk-radios__item {
-    align-content: flex-start;
-}
-
-.govuk-radios--cards {
-    align-items: stretch;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-@media (width > 48rem) {
-    .govuk-radios--cards {
-        flex-direction: row;
-        gap: 0.5rem;
-    }
-}
-
-.govuk-radios--cards .govuk-radios__item {
-    border: 2px solid transparent;
-    background-color: var(--govuk-surface-background-colour);
-    flex: 1;
-    box-shadow:
-        var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
-        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    --tw-shadow:
-        0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
-        0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-}
-
-.govuk-radios--cards .govuk-radios__item:has(.govuk-radios__input:checked) {
-    border-color: var(--govuk-brand-colour);
-    background-color: #d2e2f1;
-}
-
-.govuk-radios--cards .govuk-radios__input:checked + .govuk-radios__label:after {
-    right: 22px;
-    left: auto;
-}
-
-.govuk-radios--cards .govuk-radios__label::before {
-    right: 15px;
-    left: auto;
-}

package/src/scripts/toggle.js

@@ -1,68 +0,0 @@
-/*
- * Toggle enhancement module.
- *
- * Progressive enhancement for elements marked with
- * data-module="govuk-toggle". Without this script the control renders as a
- * plain, fully-functional checkbox (styled by the toggle styles). With it, the
- * checkbox is upgraded into a sliding toggle:
- *
- *   - the input gains role="switch"
- *   - the input is wrapped in a .iai-toggle control
- *   - a decorative .iai-toggle__display track (handle + icons) is injected
- *
- * The enhanced appearance itself is gated in CSS on the
- * body.govuk-frontend-supported class (added by the page template), so this
- * script only builds the DOM the CSS needs.
- */
-
-const CHECKMARK_SVG = '<svg aria-hidden="true" focusable="false" class="iai-toggle__icon iai-toggle__icon--checkmark" width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z" fill="currentcolor" stroke="currentcolor"></path></svg>';
-
-const CROSS_SVG = '<svg aria-hidden="true" focusable="false" class="iai-toggle__icon iai-toggle__icon--cross" width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z" fill="currentcolor"></path></svg>';
-
-/**
- * Enhance a single toggle item.
- * @param {Element} item - element with data-module="govuk-toggle"
- */
-function enhanceToggle(item) {
-  if (item.dataset.toggleInitialised === 'true') {
-    return;
-  }
-
-  const input = item.querySelector('.iai-toggle__input');
-  if (!input) {
-    return;
-  }
-
-  // Announce as a switch to assistive tech only once the visual switch exists.
-  input.setAttribute('role', 'switch');
-
-  /*
-   * If the input is already inside a control wrapper, reuse it; otherwise
-   * wrap it so the CSS has a .iai-toggle to key off.
-   */
-  let control = input.closest('.iai-toggle');
-  if (!control) {
-    control = document.createElement('div');
-    control.className = 'iai-toggle';
-    input.parentNode.insertBefore(control, input);
-    control.appendChild(input);
-  }
-
-  // Inject the decorative track (handle + icons) if not already present.
-  if (!control.querySelector('.iai-toggle__display')) {
-    const display = document.createElement('span');
-    display.className = 'iai-toggle__display';
-    display.setAttribute('aria-hidden', 'true');
-    display.innerHTML = `<span class="iai-toggle__handle"></span>${CHECKMARK_SVG}${CROSS_SVG}`;
-    control.appendChild(display);
-  }
-
-  item.dataset.toggleInitialised = 'true';
-}
-
-/** Enhance all toggles on the page. */
-export function initToggles() {
-  document
-    .querySelectorAll('[data-module="govuk-toggle"]')
-    .forEach(enhanceToggle);
-}