@i-dot-ai-npm/component-library-frontend 0.0.9 → 0.0.10

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

@@ -1 +1 @@
-.app-masthead{background-color:var(--govuk-brand-colour, #1d70b8)}.app-masthead__title,.app-masthead__body{color:var(--govuk-inverse-text-colour, #ffffff)}.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{--govuk-text-colour: #0b0c0c;background-color:var(--govuk-surface-background-colour, #f4f8fb)}.govuk-generic-header__homepage-link svg{display:inline-block;width:48px;height:48px;margin-top:-15px;margin-right:10px}.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__list-heading{font-size:1.1875rem;line-height:1.3157894737}@media print{.contents-panel__list-heading{font-size:14pt;line-height:1.15}}.contents-panel__list-heading{font-weight:400;margin:0;padding:10px 15px 10px 0;color:#484949}.contents-panel__list-heading:first-of-type{padding-top:0}.contents-panel__list{margin:0 0 20px;padding:0;list-style-type:none}.contents-panel__list-item{margin-bottom:5px;padding-top:5px;padding-bottom:5px}.contents-panel__link{padding:2px 0}.contents-panel__list-item--current{margin-left:-14px;padding-left:10px;border-left:4px solid #1d70b8;background-color:#fff}.contents-panel__list-item--current .contents-panel__link[aria-current=page]{font-weight:700}.govuk-template__body--iai-theme .govuk-service-navigation__item{border-color:var(--govuk-brand-colour, #1d70b8)}.govuk-template__body--iai-theme .govuk-service-navigation__link,.govuk-template__body--iai-theme .govuk-service-navigation__link:visited,.govuk-template__body--iai-theme .govuk-service-navigation__link:hover{color:var(--govuk-text-colour, #0b0c0c)}
+.app-masthead{background-color:var(--govuk-brand-colour, #1d70b8)}.app-masthead__title,.app-masthead__body{color:var(--govuk-inverse-text-colour, #ffffff)}.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{--govuk-text-colour: #0b0c0c;background-color:var(--govuk-surface-background-colour, #f4f8fb)}.govuk-generic-header__homepage-link svg{display:inline-block;width:48px;height:48px;margin-top:-15px;margin-right:10px}.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-modal{width:100%;max-width:640px;padding:0;border:4px solid var(--govuk-text-colour, #0b0c0c);background-color:#fff;color:var(--govuk-text-colour, #0b0c0c)}.iai-modal:not([open]){display:none}.iai-modal::backdrop{background-color:rgba(11,12,12,.6)}.iai-modal:focus-visible{outline:3px solid var(--govuk-focus-colour, #ffdd00);outline-offset:0}.iai-modal__container{padding:20px}@media(min-width: 40.0625em){.iai-modal__container{padding:30px}}.iai-modal__container{display:flex;flex-direction:column;gap:20px}.iai-modal__title{margin:0}.iai-modal__body{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{.iai-modal__body{font-family:sans-serif}}.iai-modal__body{font-weight:400;font-size:1.1875rem;line-height:1.3157894737}@media print{.iai-modal__body{font-size:14pt;line-height:1.15}}.iai-modal__body{margin:0}.iai-modal__body>:last-child{margin-bottom:0}.iai-modal__footer{margin:0}.iai-modal-scroll-locked{overflow:hidden}@media(prefers-reduced-motion: no-preference){.iai-modal[open]{animation:iai-modal-fade-in 150ms ease-out}.iai-modal[open]::backdrop{animation:iai-modal-backdrop-fade-in 150ms ease-out}}@keyframes iai-modal-fade-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes iai-modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}.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}@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__list-heading{font-size:1.1875rem;line-height:1.3157894737}@media print{.contents-panel__list-heading{font-size:14pt;line-height:1.15}}.contents-panel__list-heading{font-weight:400;margin:0;padding:10px 15px 10px 0;color:#484949}.contents-panel__list-heading:first-of-type{padding-top:0}.contents-panel__list{margin:0 0 20px;padding:0;list-style-type:none}.contents-panel__list-item{margin-bottom:5px;padding-top:5px;padding-bottom:5px}.contents-panel__link{padding:2px 0}.contents-panel__list-item--current{margin-left:-14px;padding-left:10px;border-left:4px solid #1d70b8;background-color:#fff}.contents-panel__list-item--current .contents-panel__link[aria-current=page]{font-weight:700}.govuk-template__body--iai-theme .govuk-service-navigation__item{border-color:var(--govuk-brand-colour, #1d70b8)}.govuk-template__body--iai-theme .govuk-service-navigation__link,.govuk-template__body--iai-theme .govuk-service-navigation__link:visited,.govuk-template__body--iai-theme .govuk-service-navigation__link:hover{color:var(--govuk-text-colour, #0b0c0c)}

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

@@ -1 +1 @@
-function i(){}export{i as initAllIAIDesignSystem};
+var l="iai-modal",c=`data-${l}-init`,s="iai-modal-scroll-locked";function d(){document.documentElement.classList.remove(s)}function a(t){!t||t.open||(t.showModal(),t.focus(),document.documentElement.classList.add(s))}function n(t){!t||!t.open||t.close()}function i(t){!t||t.hasAttribute(c)||(t.setAttribute(c,""),t.addEventListener("click",e=>{if(e.target.closest("[data-iai-modal-close]")){n(t);return}if(e.target!==t)return;let o=t.getBoundingClientRect();(e.clientX<o.left||e.clientX>o.right||e.clientY<o.top||e.clientY>o.bottom)&&n(t)}),t.addEventListener("close",d))}var r=!1;function u(){document.querySelectorAll(`dialog.iai-modal[data-module="${l}"]`).forEach(i),!r&&(r=!0,document.addEventListener("click",t=>{let e=t.target.closest("[data-iai-modal-open]");if(!e)return;let o=document.getElementById(e.getAttribute("data-iai-modal-open"));o&&(i(o),a(o))}))}function L(){u()}export{n as closeModal,L as initAllIAIDesignSystem,i as initModal,a as openModal};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@i-dot-ai-npm/component-library-frontend",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "i.AI GOV.UK design-system override layer (SCSS + JS). Layered on top of govuk-frontend.",
   "type": "module",
   "exports": {

package/src/components/modal/_index.scss

@@ -0,0 +1,87 @@
+@use "pkg:govuk-frontend/base" as *;
+
+$iai-modal-max-width: 640px;
+$iai-modal-border-width: 4px;
+
+.iai-modal {
+    width: 100%;
+    max-width: $iai-modal-max-width;
+    padding: 0;
+    border: $iai-modal-border-width solid $govuk-text-colour;
+    background-color: govuk-colour("white");
+    color: $govuk-text-colour;
+
+    &:not([open]) {
+        display: none;
+    }
+
+    &::backdrop {
+        background-color: rgba(govuk-colour("black"), 0.6);
+    }
+
+    &:focus-visible {
+        outline: $govuk-focus-width solid $govuk-focus-colour;
+        outline-offset: 0;
+    }
+}
+
+.iai-modal__container {
+    @include govuk-responsive-padding(6);
+    display: flex;
+    flex-direction: column;
+    gap: govuk-spacing(4);
+}
+
+.iai-modal__title {
+    margin: 0;
+}
+
+.iai-modal__body {
+    @include govuk-font($size: 19);
+    margin: 0;
+
+    > :last-child {
+        margin-bottom: 0;
+    }
+}
+
+.iai-modal__footer {
+    margin: 0;
+}
+
+// Set on the document by the central JS while a modal is open.
+.iai-modal-scroll-locked {
+    overflow: hidden;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .iai-modal[open] {
+        animation: iai-modal-fade-in 150ms ease-out;
+    }
+
+    .iai-modal[open]::backdrop {
+        animation: iai-modal-backdrop-fade-in 150ms ease-out;
+    }
+}
+
+@keyframes iai-modal-fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(govuk-spacing(2));
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes iai-modal-backdrop-fade-in {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}

package/src/components/modal/index.js

@@ -0,0 +1,92 @@
+// i.AI Design System — Modal behaviour over the native <dialog>.
+//
+// Markup:
+//   <dialog class="iai-modal" data-module="iai-modal"> ... </dialog>
+//   <button data-iai-modal-open="dialog-id">Open</button>
+//   <button data-iai-modal-close>Close</button>
+//
+// Framework wrappers driving the modal from an `open` prop should call the
+// exported open()/close() helpers rather than re-implementing this logic.
+
+const MODULE = "iai-modal";
+const INIT_FLAG = `data-${MODULE}-init`;
+const SCROLL_LOCK_CLASS = "iai-modal-scroll-locked";
+
+function unlockScroll() {
+    document.documentElement.classList.remove(SCROLL_LOCK_CLASS);
+}
+
+/**
+ * Open a modal dialog.
+ * @param {HTMLDialogElement} dialog
+ */
+export function open(dialog) {
+    if (!dialog || dialog.open) return;
+    dialog.showModal();
+    dialog.focus();
+    document.documentElement.classList.add(SCROLL_LOCK_CLASS);
+}
+
+/**
+ * Close a modal dialog. Scroll-lock release happens in the dialog's `close`
+ * event handler (see initModal), which also covers Esc. Native <dialog>
+ * restores focus to the opener itself.
+ * @param {HTMLDialogElement} dialog
+ */
+export function close(dialog) {
+    if (!dialog || !dialog.open) return;
+    dialog.close();
+}
+
+/**
+ * Enhance a single dialog element. Idempotent.
+ * @param {HTMLDialogElement} dialog
+ */
+export function initModal(dialog) {
+    if (!dialog || dialog.hasAttribute(INIT_FLAG)) return;
+    dialog.setAttribute(INIT_FLAG, "");
+
+    dialog.addEventListener("click", (event) => {
+        if (event.target.closest("[data-iai-modal-close]")) {
+            close(dialog);
+            return;
+        }
+        // A ::backdrop click reports the dialog as target but lands outside its
+        // content rect.
+        if (event.target !== dialog) return;
+        const rect = dialog.getBoundingClientRect();
+        const outside =
+            event.clientX < rect.left ||
+            event.clientX > rect.right ||
+            event.clientY < rect.top ||
+            event.clientY > rect.bottom;
+        if (outside) close(dialog);
+    });
+
+    // shortcut: unlocks unconditionally (one modal at a time); revisit if
+    // stacked modals are ever supported.
+    dialog.addEventListener("close", unlockScroll);
+}
+
+let triggersBound = false;
+
+/**
+ * Wire up every modal and its triggers on the page. Idempotent.
+ */
+export function initAllModals() {
+    document
+        .querySelectorAll(`dialog.iai-modal[data-module="${MODULE}"]`)
+        .forEach(initModal);
+
+    if (triggersBound) return;
+    triggersBound = true;
+    document.addEventListener("click", (event) => {
+        const trigger = event.target.closest("[data-iai-modal-open]");
+        if (!trigger) return;
+        const dialog = document.getElementById(trigger.getAttribute("data-iai-modal-open"));
+        if (dialog) {
+            initModal(dialog);
+            open(dialog);
+        }
+    });
+}

package/src/index.d.ts

@@ -5,3 +5,12 @@
  * `initAll()`.
  */
 export function initAllIAIDesignSystem(): void;
+
+/** Open a modal dialog and lock background scroll. */
+export function openModal(dialog: HTMLDialogElement): void;
+
+/** Close a modal dialog and restore focus to the element that opened it. */
+export function closeModal(dialog: HTMLDialogElement): void;
+
+/** Enhance a single modal dialog element. Idempotent. */
+export function initModal(dialog: HTMLDialogElement): void;

package/src/index.js

@@ -3,6 +3,10 @@
 // Progressive enhancement for i.AI components. Call after govuk-frontend's
 // initAll(). Each component's enhancement lives in its own module.
 
+import { initAllModals } from "./components/modal/index.js";
+
+export { open as openModal, close as closeModal, initModal } from "./components/modal/index.js";
+
 export function initAllIAIDesignSystem() {
-    // No component enhancements yet.
+    initAllModals();
 }

package/src/index.scss

@@ -15,6 +15,7 @@
 @forward "components/form-group";
 @forward "components/header";
 @forward "components/toggle";
+@forward "components/modal";
 @forward "components/card";
 @forward "components/contents-panel";
 @forward "components/service-navigation";