@ukho/admiralty-core 4.0.0-next.0 → 4.0.0-next.2

package/dist/admiralty/admiralty.esm.js

@@ -1,2 +1,2 @@
-import{p as e,b as a}from"./p-34931ad3.js";export{s as setNonce}from"./p-34931ad3.js";import{g as i}from"./p-e1255160.js";var l=()=>{const a=import.meta.url;const i={};if(a!==""){i.resourcesUrl=new URL(".",a).href}return e(i)};l().then((async e=>{await i();return a([["p-05b1d5c9",[[6,"admiralty-type-ahead",{value:[1],label:[1],hint:[1],placeholder:[1],resultsOnInitFocus:[4,"results-on-init-focus"],filterResult:[32]}]]],["p-9724fa6a",[[2,"admiralty-autocomplete",{autoselect:[4],cssNamespace:[1,"css-namespace"],displayMenu:[1,"display-menu"],minLength:[2,"min-length"],name:[1],placeholder:[1],confirmOnBlur:[4,"confirm-on-blur"],showNoOptionsFound:[4,"show-no-options-found"],showAllValues:[4,"show-all-values"],required:[4],assistiveHint:[1,"assistive-hint"],menuAttributes:[8,"menu-attributes"],inputClasses:[1,"input-classes"],menuClasses:[1,"menu-classes"],label:[1],hint:[1],invalid:[4],invalidMessage:[1,"invalid-message"],disabled:[4],value:[1025],focused:[32],hovered:[32],menuOpen:[32],options:[32],option:[32],query:[32],validChoiceMade:[32],selected:[32],ariaHint:[32]},null,{value:["onValueChange"],focused:["onFocusedChange"]}]]],["p-f9054641",[[6,"admiralty-select",{disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],hint:[1],label:[1],width:[2],value:[1032]},null,{value:["valueChanged"]}]]],["p-ff40f67e",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]},null,{value:["valueChanged"]}]]],["p-94582dfb",[[6,"admiralty-radio-group",{name:[1],label:[1],hint:[1],disabled:[4],value:[1032],displayVertical:[4,"display-vertical"],invalid:[4],invalidMessage:[1,"invalid-message"]},null,{value:["valueChanged"],invalid:["invalidChanged"]}]]],["p-a295fd5a",[[6,"admiralty-colour-block",{width:[2],height:[2],heading:[1],colour:[1],href:[1],linkText:[1,"link-text"],suppressRedirect:[4,"suppress-redirect"],enableCardEvent:[4,"enable-card-event"],actionText:[1,"action-text"]}]]],["p-5eedeb7d",[[6,"admiralty-error-summary",{heading:[1]}]]],["p-fd74e1f1",[[2,"admiralty-file-input",{label:[1],multiple:[4],invalid:[4],invalidMessage:[1,"invalid-message"],files:[32]}]]],["p-5cee1c21",[[6,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-0c31523d",[[6,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-c1a69fc5",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-01156ade",[[6,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-e0f7f99d",[[6,"admiralty-header",{headerTitle:[1,"header-title"],headerTitleUrl:[1,"header-title-url"],logoLinkUrl:[1,"logo-link-url"],logoImgUrl:[1,"logo-img-url"],logoAltText:[1,"logo-alt-text"],mobileMenuOpen:[32],displayHamburger:[32]}]]],["p-09638cc7",[[2,"admiralty-progress-bar",{label:[1],progression:[2],error:[4],progressionValue:[32]},null,{progression:["progressionChanged"]}]]],["p-fecc031a",[[6,"admiralty-read-more",{heading:[1],expanded:[32]}]]],["p-c0c14d5f",[[2,"admiralty-autocomplete-option",{value:[8]}]]],["p-67085edd",[[6,"admiralty-breadcrumbs"]]],["p-5f774e31",[[6,"admiralty-card",{heading:[1]}]]],["p-f466640f",[[2,"admiralty-checkbox",{checkboxRight:[4,"checkbox-right"],disabled:[4],name:[1],checked:[1540],value:[8],labelText:[1,"label-text"],labelHidden:[4,"label-hidden"]},null,{checked:["checkedChanged"]}]]],["p-b8be0667",[[6,"admiralty-footer",{imageLink:[1,"image-link"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],text:[1]}]]],["p-a2e48911",[[6,"admiralty-header-menu-item",{menuTitle:[1,"menu-title"],active:[4]}]]],["p-90f2ab44",[[6,"admiralty-header-menu-link",{menuTitle:[1,"menu-title"],active:[4],href:[1],suppressRedirect:[4,"suppress-redirect"]}]]],["p-a46c2308",[[2,"admiralty-header-profile",{isSignedIn:[4,"is-signed-in"],signedInText:[1,"signed-in-text"],signInOnly:[4,"sign-in-only"]}]]],["p-40c61496",[[6,"admiralty-header-sub-menu-item",{menuTitle:[1,"menu-title"],href:[1],suppressRedirect:[4,"suppress-redirect"]}]]],["p-3635aadc",[[2,"admiralty-hr"]]],["p-ce6a2cfe",[[6,"admiralty-link",{href:[1],newTab:[4,"new-tab"]}]]],["p-7bc9d9a7",[[6,"admiralty-modal-dialog",{heading:[1],label:[1],description:[1],show:[4]}]]],["p-f10bcef1",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["p-c8a03e51",[[2,"admiralty-phase-banner",{phase:[1],link:[1]}]]],["p-6dbd43ef",[[6,"admiralty-radio",{name:[1],value:[1025],disabled:[4],checked:[1028],invalid:[4],buttonTabindex:[32],setButtonTabindex:[64]},null,{value:["valueChanged"]}]]],["p-dd4f2ea1",[[6,"admiralty-side-nav",{label:[1]}]]],["p-10531893",[[2,"admiralty-side-nav-item",{sideNavItemId:[1,"side-nav-item-id"],headingTitle:[1,"heading-title"],navActive:[4,"nav-active"]}]]],["p-d276844c",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["p-6f567075",[[2,"admiralty-skip-link",{href:[1]}]]],["p-ad72d4a5",[[6,"admiralty-tab",{label:[1],tabLabelId:[1,"tab-label-id"],tabContentId:[1,"tab-content-id"]}]]],["p-28a9fd44",[[6,"admiralty-tab-group",{selectedIndex:[1026,"selected-index"]}]]],["p-ba388ca7",[[6,"admiralty-table",{caption:[1]}]]],["p-ed01126d",[[6,"admiralty-table-body"]]],["p-29ff4d12",[[6,"admiralty-table-cell"]]],["p-1792c11a",[[6,"admiralty-table-header"]]],["p-865fdc4d",[[6,"admiralty-table-header-cell"]]],["p-176604ae",[[6,"admiralty-table-row"]]],["p-23dab5c3",[[2,"admiralty-type-ahead-item",{value:[1]}]]],["p-b8de875c",[[1,"admiralty-icon",{iconName:[1,"icon-name"],iconPrefix:[1,"icon-prefix"]}]]],["p-55131dad",[[2,"admiralty-input",{name:[1],label:[1],hint:[1],disabled:[4],type:[1],placeholder:[1],width:[2],required:[4],invalid:[4],invalidMessage:[1,"invalid-message"],autocomplete:[1],value:[1032]},null,{value:["valueChanged"]}]]],["p-6c73ea79",[[6,"admiralty-dialogue",{type:[1],heading:[1],sectionRole:[1,"section-role"]}]]],["p-7166413c",[[6,"admiralty-expansion",{heading:[1],expanded:[1540],alignHeadingRight:[4,"align-heading-right"],hideBorder:[4,"hide-border"]}]]],["p-fc6ede91",[[6,"admiralty-button",{variant:[1],icon:[1],disabled:[516],type:[1],form:[1],name:[1],value:[1]}]]],["p-0b326027",[[6,"admiralty-hint",{disabled:[4]}],[6,"admiralty-label",{disabled:[4],for:[1]}],[6,"admiralty-input-invalid"]]]],e)}));
+import{p as e,b as a}from"./p-34931ad3.js";export{s as setNonce}from"./p-34931ad3.js";import{g as i}from"./p-e1255160.js";var l=()=>{const a=import.meta.url;const i={};if(a!==""){i.resourcesUrl=new URL(".",a).href}return e(i)};l().then((async e=>{await i();return a([["p-05b1d5c9",[[6,"admiralty-type-ahead",{value:[1],label:[1],hint:[1],placeholder:[1],resultsOnInitFocus:[4,"results-on-init-focus"],filterResult:[32]}]]],["p-9724fa6a",[[2,"admiralty-autocomplete",{autoselect:[4],cssNamespace:[1,"css-namespace"],displayMenu:[1,"display-menu"],minLength:[2,"min-length"],name:[1],placeholder:[1],confirmOnBlur:[4,"confirm-on-blur"],showNoOptionsFound:[4,"show-no-options-found"],showAllValues:[4,"show-all-values"],required:[4],assistiveHint:[1,"assistive-hint"],menuAttributes:[8,"menu-attributes"],inputClasses:[1,"input-classes"],menuClasses:[1,"menu-classes"],label:[1],hint:[1],invalid:[4],invalidMessage:[1,"invalid-message"],disabled:[4],value:[1025],focused:[32],hovered:[32],menuOpen:[32],options:[32],option:[32],query:[32],validChoiceMade:[32],selected:[32],ariaHint:[32]},null,{value:["onValueChange"],focused:["onFocusedChange"]}]]],["p-d0d907da",[[6,"admiralty-select",{disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],hint:[1],label:[1],width:[2],value:[1032]},null,{value:["valueChanged"]}]]],["p-ff40f67e",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]},null,{value:["valueChanged"]}]]],["p-94582dfb",[[6,"admiralty-radio-group",{name:[1],label:[1],hint:[1],disabled:[4],value:[1032],displayVertical:[4,"display-vertical"],invalid:[4],invalidMessage:[1,"invalid-message"]},null,{value:["valueChanged"],invalid:["invalidChanged"]}]]],["p-a295fd5a",[[6,"admiralty-colour-block",{width:[2],height:[2],heading:[1],colour:[1],href:[1],linkText:[1,"link-text"],suppressRedirect:[4,"suppress-redirect"],enableCardEvent:[4,"enable-card-event"],actionText:[1,"action-text"]}]]],["p-5eedeb7d",[[6,"admiralty-error-summary",{heading:[1]}]]],["p-fd74e1f1",[[2,"admiralty-file-input",{label:[1],multiple:[4],invalid:[4],invalidMessage:[1,"invalid-message"],files:[32]}]]],["p-5cee1c21",[[6,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-0c31523d",[[6,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-c1a69fc5",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-01156ade",[[6,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-e0f7f99d",[[6,"admiralty-header",{headerTitle:[1,"header-title"],headerTitleUrl:[1,"header-title-url"],logoLinkUrl:[1,"logo-link-url"],logoImgUrl:[1,"logo-img-url"],logoAltText:[1,"logo-alt-text"],mobileMenuOpen:[32],displayHamburger:[32]}]]],["p-09638cc7",[[2,"admiralty-progress-bar",{label:[1],progression:[2],error:[4],progressionValue:[32]},null,{progression:["progressionChanged"]}]]],["p-6363d2ad",[[6,"admiralty-read-more",{heading:[1],expanded:[32]}]]],["p-c0c14d5f",[[2,"admiralty-autocomplete-option",{value:[8]}]]],["p-67085edd",[[6,"admiralty-breadcrumbs"]]],["p-5f774e31",[[6,"admiralty-card",{heading:[1]}]]],["p-aaeb5cff",[[2,"admiralty-checkbox",{checkboxRight:[4,"checkbox-right"],disabled:[4],name:[1],checked:[1540],value:[8],labelText:[1,"label-text"],labelHidden:[4,"label-hidden"]},null,{checked:["checkedChanged"]}]]],["p-b8be0667",[[6,"admiralty-footer",{imageLink:[1,"image-link"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],text:[1]}]]],["p-a2e48911",[[6,"admiralty-header-menu-item",{menuTitle:[1,"menu-title"],active:[4]}]]],["p-90f2ab44",[[6,"admiralty-header-menu-link",{menuTitle:[1,"menu-title"],active:[4],href:[1],suppressRedirect:[4,"suppress-redirect"]}]]],["p-a46c2308",[[2,"admiralty-header-profile",{isSignedIn:[4,"is-signed-in"],signedInText:[1,"signed-in-text"],signInOnly:[4,"sign-in-only"]}]]],["p-40c61496",[[6,"admiralty-header-sub-menu-item",{menuTitle:[1,"menu-title"],href:[1],suppressRedirect:[4,"suppress-redirect"]}]]],["p-3635aadc",[[2,"admiralty-hr"]]],["p-ce6a2cfe",[[6,"admiralty-link",{href:[1],newTab:[4,"new-tab"]}]]],["p-7bc9d9a7",[[6,"admiralty-modal-dialog",{heading:[1],label:[1],description:[1],show:[4]}]]],["p-f10bcef1",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["p-c8a03e51",[[2,"admiralty-phase-banner",{phase:[1],link:[1]}]]],["p-6dbd43ef",[[6,"admiralty-radio",{name:[1],value:[1025],disabled:[4],checked:[1028],invalid:[4],buttonTabindex:[32],setButtonTabindex:[64]},null,{value:["valueChanged"]}]]],["p-dd4f2ea1",[[6,"admiralty-side-nav",{label:[1]}]]],["p-10531893",[[2,"admiralty-side-nav-item",{sideNavItemId:[1,"side-nav-item-id"],headingTitle:[1,"heading-title"],navActive:[4,"nav-active"]}]]],["p-d276844c",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["p-6f567075",[[2,"admiralty-skip-link",{href:[1]}]]],["p-ad72d4a5",[[6,"admiralty-tab",{label:[1],tabLabelId:[1,"tab-label-id"],tabContentId:[1,"tab-content-id"]}]]],["p-28a9fd44",[[6,"admiralty-tab-group",{selectedIndex:[1026,"selected-index"]}]]],["p-ba388ca7",[[6,"admiralty-table",{caption:[1]}]]],["p-ed01126d",[[6,"admiralty-table-body"]]],["p-29ff4d12",[[6,"admiralty-table-cell"]]],["p-1792c11a",[[6,"admiralty-table-header"]]],["p-865fdc4d",[[6,"admiralty-table-header-cell"]]],["p-176604ae",[[6,"admiralty-table-row"]]],["p-23dab5c3",[[2,"admiralty-type-ahead-item",{value:[1]}]]],["p-b8de875c",[[1,"admiralty-icon",{iconName:[1,"icon-name"],iconPrefix:[1,"icon-prefix"]}]]],["p-55131dad",[[2,"admiralty-input",{name:[1],label:[1],hint:[1],disabled:[4],type:[1],placeholder:[1],width:[2],required:[4],invalid:[4],invalidMessage:[1,"invalid-message"],autocomplete:[1],value:[1032]},null,{value:["valueChanged"]}]]],["p-6c73ea79",[[6,"admiralty-dialogue",{type:[1],heading:[1],sectionRole:[1,"section-role"]}]]],["p-7166413c",[[6,"admiralty-expansion",{heading:[1],expanded:[1540],alignHeadingRight:[4,"align-heading-right"],hideBorder:[4,"hide-border"]}]]],["p-fc6ede91",[[6,"admiralty-button",{variant:[1],icon:[1],disabled:[516],type:[1],form:[1],name:[1],value:[1]}]]],["p-fc133d32",[[6,"admiralty-hint",{disabled:[4]}],[6,"admiralty-label",{disabled:[4],for:[1]}],[6,"admiralty-input-invalid"]]]],e)}));
 //# sourceMappingURL=admiralty.esm.js.map

package/dist/admiralty/p-6363d2ad.entry.js

@@ -0,0 +1,2 @@
+import{r as a,c as e,h as t}from"./p-34931ad3.js";import{d as i,e as o}from"./p-7419d0f9.js";const n=".visually-hidden.sc-admiralty-read-more:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-read-more{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-read-more{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-read-more{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-read-more{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-read-more{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-read-more{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-read-more{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-read-more{display:none}}section.expansion.sc-admiralty-read-more{padding:2px 0}section.expansion.sc-admiralty-read-more .expansion-content.sc-admiralty-read-more{display:none;max-height:0;overflow:visible;border-left:4px solid var(--admiralty-colour-info)}section.expansion.expanded.sc-admiralty-read-more .expansion-content.sc-admiralty-read-more{display:block;max-height:initial;padding:2px 5px 2px 33px}section.expansion.sc-admiralty-read-more button.sc-admiralty-read-more{background-color:transparent;border:none;white-space:unset;color:var(--admiralty-text-color);font-weight:unset;cursor:pointer;margin:8px 0px;padding:4px;align-items:baseline;text-align:left;text-decoration:underline;text-underline-offset:0.15em}section.expansion.sc-admiralty-read-more button.expanded.sc-admiralty-read-more span.sc-admiralty-read-more{font-weight:var(--admiralty-read-more-font-weight, var(--admiralty-font-weight-medium))}section.expansion.sc-admiralty-read-more button.sc-admiralty-read-more .expansion-heading-icon.sc-admiralty-read-more{margin-top:1px;margin-left:5px;margin-right:8px;vertical-align:top}section.expansion.sc-admiralty-read-more button.sc-admiralty-read-more:hover{text-decoration-thickness:0.15em}section.expansion.sc-admiralty-read-more button.sc-admiralty-read-more:focus{outline:3px solid transparent;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-text-colour);text-decoration:none}";const r=n;let d=0;const s=class{constructor(t){a(this,t);this.admiraltyToggled=e(this,"admiraltyToggled",7);this.internalId=`admiralty-read-more-${++d}`;this.headerId=`${this.internalId}-header`;this.contentId=`${this.internalId}-content`;this.heading=undefined;this.expanded=false}get expansionIcon(){return this.expanded?i:o}onToggle(){this.expanded=!this.expanded;this.admiraltyToggled.emit(this.expanded)}render(){return t("section",{key:"5672c454a74e8e3ac1cbe556dd8cb1aa322bf057",class:{expansion:true,expanded:this.expanded}},t("button",{key:"04bf2c513a96542f89b0d8e889a8da22f96772bb",id:this.headerId,type:"button","aria-expanded":this.expanded,"aria-controls":this.contentId,class:{expanded:this.expanded},onClick:this.onToggle.bind(this)},t("admiralty-icon",{key:"b9df26edd2db37b09dc054f1e13a457c171ff3f9",class:"expansion-heading-icon","icon-name":this.expansionIcon.iconName}),t("span",{key:"fb60d5b4fb19539674cdf0db71e699bed3b0b48b"},this.heading),t("span",{key:"ce888d917b881faf32277087f6a67ff92b9a07b8",class:"visually-hidden"},", ",this.expanded?"Hide":"Show"," this section")),t("div",{key:"cac8700c2c899c5676ce46bd82f556d478b6f4b5",class:"expansion-content",id:this.contentId,"aria-labelledby":this.headerId,hidden:!this.expanded},t("slot",{key:"ec8c140702ff031ee0e938993a6d3638f0f3da6f"})))}};s.style=r;export{s as admiralty_read_more};
+//# sourceMappingURL=p-6363d2ad.entry.js.map

package/dist/admiralty/p-6363d2ad.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["readMoreCss","AdmiraltyReadMoreStyle0","nextId","ReadMoreComponent","this","internalId","headerId","contentId","expansionIcon","expanded","faArrowDown","faArrowRight","onToggle","admiraltyToggled","emit","render","h","key","class","expansion","id","type","onClick","bind","iconName","heading","hidden"],"sources":["src/components/read-more/read-more.scss?tag=admiralty-read-more&encapsulation=scoped","src/components/read-more/read-more.tsx"],"sourcesContent":["@import 'read-more.vars.scss';\n\nsection.expansion {\n  padding: 2px 0;\n\n  .expansion-content {\n    display: none;\n    max-height: 0;\n    overflow: visible;\n    border-left: 4px solid $read-more-border-colour;\n  }\n  &.expanded .expansion-content {\n    display: block;\n    max-height: initial;\n    padding: 2px 5px 2px 33px;\n  }\n\n  button {\n    background-color: transparent;\n    border: none;\n    white-space: unset;\n    color: $read-more-text-colour;\n    font-weight: unset;\n    cursor: pointer;\n    margin: 8px 0px;\n    padding: 4px;\n    align-items: baseline;\n    text-align: left;\n    text-decoration: underline;\n    text-underline-offset: 0.15em;\n\n    &.expanded span {\n      font-weight: $read-more-font-weight;\n    }\n\n    .expansion-heading-icon {\n      margin-top: 1px;\n      margin-left: 5px;\n      margin-right: 8px;\n      vertical-align: top;\n    }\n\n    &:hover {\n      text-decoration-thickness: 0.15em;\n    }\n\n    &:focus {\n      @include focus-highlight;\n    }\n  }\n}\n","import { Component, EventEmitter, Prop, State, Event, h } from '@stencil/core';\nimport { faArrowDown, faArrowRight } from '@fortawesome/free-solid-svg-icons';\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core';\n\nlet nextId = 0;\n\n@Component({\n  tag: 'admiralty-read-more',\n  styleUrl: 'read-more.scss',\n  scoped: true,\n})\nexport class ReadMoreComponent {\n  /**\n   * The text to display in the heading of the readmore component.\n   */\n  @Prop() heading: string;\n\n  @State() expanded = false;\n\n  /**\n   * The event that is dispatched when the expanded status is toggled.\n   */\n  @Event() admiraltyToggled: EventEmitter<boolean>;\n\n  internalId: string = `admiralty-read-more-${++nextId}`;\n\n  headerId: string = `${this.internalId}-header`;\n  contentId: string = `${this.internalId}-content`;\n\n  get expansionIcon(): IconDefinition {\n    return this.expanded ? faArrowDown : faArrowRight;\n  }\n\n  onToggle() {\n    this.expanded = !this.expanded;\n    this.admiraltyToggled.emit(this.expanded);\n  }\n\n  render() {\n    return (\n      <section\n        class={{\n          expansion: true,\n          expanded: this.expanded,\n        }}\n      >\n        <button\n          id={this.headerId}\n          type=\"button\"\n          aria-expanded={this.expanded}\n          aria-controls={this.contentId}\n          class={{ expanded: this.expanded }}\n          onClick={this.onToggle.bind(this)}\n        >\n          <admiralty-icon class=\"expansion-heading-icon\" icon-name={this.expansionIcon.iconName}></admiralty-icon>\n          <span>{this.heading}</span>\n          <span class=\"visually-hidden\">, {this.expanded ? 'Hide' : 'Show'} this section</span>\n        </button>\n        <div class=\"expansion-content\" id={this.contentId} aria-labelledby={this.headerId} hidden={!this.expanded}>\n          <slot></slot>\n        </div>\n      </section>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAc,m+EACpB,MAAAC,EAAeD,ECGf,IAAIE,EAAS,E,MAOAC,EAAiB,M,4EAa5BC,KAAAC,WAAqB,yBAAyBH,IAE9CE,KAAAE,SAAmB,GAAGF,KAAKC,oBAC3BD,KAAAG,UAAoB,GAAGH,KAAKC,qB,qCAVR,K,CAYpB,iBAAIG,GACF,OAAOJ,KAAKK,SAAWC,EAAcC,C,CAGvC,QAAAC,GACER,KAAKK,UAAYL,KAAKK,SACtBL,KAAKS,iBAAiBC,KAAKV,KAAKK,S,CAGlC,MAAAM,GACE,OACEC,EAAA,WAAAC,IAAA,2CACEC,MAAO,CACLC,UAAW,KACXV,SAAUL,KAAKK,WAGjBO,EAAA,UAAAC,IAAA,2CACEG,GAAIhB,KAAKE,SACTe,KAAK,SAAQ,gBACEjB,KAAKK,SAAQ,gBACbL,KAAKG,UACpBW,MAAO,CAAET,SAAUL,KAAKK,UACxBa,QAASlB,KAAKQ,SAASW,KAAKnB,OAE5BY,EAAA,kBAAAC,IAAA,2CAAgBC,MAAM,yBAAwB,YAAYd,KAAKI,cAAcgB,WAC7ER,EAAA,QAAAC,IAAA,4CAAOb,KAAKqB,SACZT,EAAA,QAAAC,IAAA,2CAAMC,MAAM,mBAAiB,KAAId,KAAKK,SAAW,OAAS,OAAM,kBAElEO,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBAAoBE,GAAIhB,KAAKG,UAAS,kBAAmBH,KAAKE,SAAUoB,QAAStB,KAAKK,UAC/FO,EAAA,QAAAC,IAAA,8C","ignoreList":[]}

package/dist/admiralty/p-aaeb5cff.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as a,H as o}from"./p-34931ad3.js";const i='.visually-hidden.sc-admiralty-checkbox:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-checkbox{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-checkbox{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-checkbox{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-checkbox{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-checkbox{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-checkbox{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-checkbox{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-checkbox{display:none}}.form-control.sc-admiralty-checkbox{font-size:var(--admiralty-checkbox-font-size, var(--admiralty-font-size-0));font-weight:var(--admiralty-checkbox-font-weight, var(--admiralty-font-weight-normal));position:relative;display:inline-block}.form-control.sc-admiralty-checkbox input[type=checkbox].sc-admiralty-checkbox{box-sizing:border-box;opacity:0;position:absolute;top:0;left:0;padding:0;width:30px;height:30px;margin:0;z-index:1;cursor:pointer}.form-control.sc-admiralty-checkbox input[type=checkbox].sc-admiralty-checkbox:checked+label.sc-admiralty-checkbox::after{content:""}.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox{position:relative;display:inline-block;padding-left:42px;margin-bottom:14px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;min-height:30px;line-height:30px}.form-control.sc-admiralty-checkbox label.disabled.sc-admiralty-checkbox{cursor:default;pointer-events:none;color:var(--admiralty-disabled-text-colour)}.form-control.sc-admiralty-checkbox label.disabled.sc-admiralty-checkbox::before{border-color:var(--admiralty-disabled-colour)}.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox::before,.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox::after{position:absolute;content:none;display:inline-block}.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox::before{content:"";height:26px;width:26px;border:2px solid var(--admiralty-colour-primary);left:0;top:0;background-color:var(--admiralty-colour-primary-contrast)}.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox::after{height:6px;width:13px;border-left:3px solid;border-bottom:3px solid;transform:rotate(-45deg);color:var(--admiralty-colour-primary);left:7px;top:8px}.form-control.sc-admiralty-checkbox input[type=checkbox].sc-admiralty-checkbox:focus+label.sc-admiralty-checkbox:before{outline-offset:unset;outline:3px solid var(--admiralty-focus-colour);box-shadow:var(--admiralty-colour-primary) inset 0 0 0 2px}.form-control.right-align.sc-admiralty-checkbox label.sc-admiralty-checkbox{padding-left:unset;padding-right:35px}.form-control.right-align.sc-admiralty-checkbox label.sc-admiralty-checkbox::before{left:unset;right:0}.form-control.right-align.sc-admiralty-checkbox label.sc-admiralty-checkbox::after{left:unset;right:6px}';const c=i;const r=class{constructor(a){t(this,a);this.admiraltyChange=e(this,"admiraltyChange",7);this.checkboxFocus=e(this,"checkboxFocus",7);this.checkboxBlur=e(this,"checkboxBlur",7);this.inputId=`admiralty-${l++}`;this.onBlur=()=>{this.checkboxBlur.emit()};this.onClick=t=>{if(!this.disabled){t.preventDefault();this.checked=!this.checked}};this.onFocus=()=>{this.checkboxFocus.emit()};this.checkboxRight=false;this.disabled=false;this.name=this.inputId;this.checked=false;this.value=undefined;this.labelText=null;this.labelHidden=false}checkedChanged(t){this.admiraltyChange.emit({checked:t,value:this.value})}render(){const{checked:t,checkboxRight:e,disabled:i,inputId:c,labelText:r,name:l,labelHidden:d}=this;return a(o,{key:"a87f6646f9ff7589711280d14ce641870b52e2b7"},a("div",{key:"f848389af634082d5c3d1ded0a3e8e848e358304","aria-hidden":i?"true":null,class:{"form-control":true,"right-align":e}},a("input",{key:"8c926c7225e1ae8353da8228ca1cf34da516fe7f",id:c,"aria-checked":`${t}`,type:"checkbox",onBlur:this.onBlur,onFocus:this.onFocus,onClick:this.onClick,disabled:i,name:l,checked:t}),a("label",{key:"aa8d99990c2995c2bfaf7dae73a4dd6b3e4e9f9a",htmlFor:c,class:{disabled:i},onClick:this.onClick},a("span",Object.assign({key:"d963bf7831d8e75c7fdce75e8049332759d580f6"},d&&{class:"visually-hidden"}),r))))}static get watchers(){return{checked:["checkedChanged"]}}};let l=0;r.style=c;export{r as admiralty_checkbox};
+//# sourceMappingURL=p-aaeb5cff.entry.js.map

package/dist/admiralty/p-aaeb5cff.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["checkboxCss","AdmiraltyCheckboxStyle0","CheckboxComponent","this","inputId","checkboxIds","onBlur","checkboxBlur","emit","onClick","event","disabled","preventDefault","checked","onFocus","checkboxFocus","checkedChanged","isChecked","admiraltyChange","value","render","checkboxRight","labelText","name","labelHidden","h","Host","key","class","id","type","htmlFor","Object","assign"],"sources":["src/components/checkbox/checkbox.scss?tag=admiralty-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@import 'checkbox.vars';\n\n.form-control {\n  font-size: $checkbox-font-size;\n  font-weight: $checkbox-font-weight;\n  position: relative;\n  display: inline-block;\n\n  input[type='checkbox'] {\n    box-sizing: border-box;\n    opacity: 0;\n    position: absolute;\n    top: 0;\n    left: 0;\n    padding: 0;\n    width: 30px;\n    height: 30px;\n    margin: 0;\n    z-index: 1;\n    cursor: pointer;\n\n    &:checked + label::after {\n      content: '';\n    }\n  }\n\n  label {\n    position: relative;\n    display: inline-block;\n    padding-left: 42px;\n    margin-bottom: 14px;\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n    min-height: 30px;\n    line-height: 30px;\n\n    &.disabled {\n      cursor: default;\n      pointer-events: none;\n      color: $checkbox-disabled-text-colour;\n\n      &::before {\n        border-color: $checkbox-disabled-border-colour;\n      }\n    }\n\n    &::before,\n    &::after {\n      position: absolute;\n      content: none;\n      display: inline-block;\n    }\n\n    &::before {\n      content: '';\n      height: 26px;\n      width: 26px;\n      border: 2px solid $checkbox-border-colour;\n      left: 0;\n      top: 0;\n      background-color: $checkbox-colour;\n    }\n\n    &::after {\n      height: 6px;\n      width: 13px;\n      border-left: 3px solid;\n      border-bottom: 3px solid;\n      transform: rotate(-45deg);\n      color: $checkbox-text-colour;\n      left: 7px;\n      top: 8px;\n    }\n  }\n\n  input[type='checkbox']:focus + label:before {\n    outline-offset: unset;\n    outline: 3px solid $checkbox-focus-colour;\n    box-shadow: $checkbox-border-colour inset 0 0 0 2px;\n  }\n\n  &.right-align label {\n    padding-left: unset;\n    padding-right: 35px;\n\n    &::before {\n      left: unset;\n      right: 0;\n    }\n\n    &::after {\n      left: unset;\n      right: 6px;\n    }\n  }\n}\n","import { Component, EventEmitter, Event, Host, h, Prop, Watch } from '@stencil/core';\nimport { CheckboxChangeEventDetail } from './checkbox.interface';\n\n@Component({\n  tag: 'admiralty-checkbox',\n  styleUrl: 'checkbox.scss',\n  scoped: true,\n})\nexport class CheckboxComponent {\n  private inputId = `admiralty-${checkboxIds++}`;\n\n  /**\n   * Whether the checkbox should be positioned to the right of the label.\n   */\n  @Prop() checkboxRight: boolean = false;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * If `true`, the checkbox is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * The value of the checkbox does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\n   * it's only used when the checkbox participates in a native `<form>`.\n   */\n  @Prop() value: any | null;\n\n  /**\n   * The label text must be provided and is displayed beside the checkbox, use the `labelHidden` property to control its visibility.\n   */\n  @Prop() labelText: string = null;\n\n  /**\n   * This visually hides the labelText while preserving accessibility.\n   */\n  @Prop() labelHidden: boolean = false;\n\n  /**\n   * Event is fired when the form control changes state\n   * @event admiraltyChange\n   */\n  @Event() admiraltyChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  /**\n   * Event is fired when the form control gains focus\n   * @event checkboxFocus\n   */\n  @Event() checkboxFocus: EventEmitter<FocusEvent>;\n\n  /**\n   * Event is fired when the form control loses focus\n   * @event checkboxBlur\n   */\n  @Event() checkboxBlur: EventEmitter<FocusEvent>;\n\n  @Watch('checked')\n  checkedChanged(isChecked: boolean) {\n    this.admiraltyChange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n  }\n\n  private onBlur = () => {\n    this.checkboxBlur.emit();\n  };\n\n  private onClick = (event: Event) => {\n    if (!this.disabled) {\n      event.preventDefault();\n      this.checked = !this.checked;\n    }\n  };\n\n  private onFocus = () => {\n    this.checkboxFocus.emit();\n  };\n\n  render() {\n    const { checked, checkboxRight, disabled, inputId, labelText, name, labelHidden } = this;\n\n    return (\n      <Host>\n        <div aria-hidden={disabled ? 'true' : null}\n             class={{ 'form-control': true, 'right-align': checkboxRight }}>\n          <input id={inputId}\n                 aria-checked={`${checked}`}\n                 type=\"checkbox\"\n                 onBlur={this.onBlur}\n                 onFocus={this.onFocus}\n                 onClick={this.onClick}\n                 disabled={disabled}\n                 name={name}\n                 checked={checked}/>\n          <label htmlFor={inputId}\n                 class={{ disabled: disabled }}\n                 onClick={this.onClick}>\n            <span {...(labelHidden && { class: 'visually-hidden' })}>{labelText}</span>\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet checkboxIds = 0;\n"],"mappings":"yDAAA,MAAMA,EAAc,+xGACpB,MAAAC,EAAeD,E,MCOFE,EAAiB,M,kKACpBC,KAAAC,QAAU,aAAaC,MAmEvBF,KAAAG,OAAS,KACfH,KAAKI,aAAaC,MAAM,EAGlBL,KAAAM,QAAWC,IACjB,IAAKP,KAAKQ,SAAU,CAClBD,EAAME,iBACNT,KAAKU,SAAWV,KAAKU,O,GAIjBV,KAAAW,QAAU,KAChBX,KAAKY,cAAcP,MAAM,E,mBA1EM,M,cAKL,M,UAKLL,KAAKC,Q,aAK+B,M,oCAc/B,K,iBAKG,K,CAqB/B,cAAAY,CAAeC,GACbd,KAAKe,gBAAgBV,KAAK,CACxBK,QAASI,EACTE,MAAOhB,KAAKgB,O,CAmBhB,MAAAC,GACE,MAAMP,QAAEA,EAAOQ,cAAEA,EAAaV,SAAEA,EAAQP,QAAEA,EAAOkB,UAAEA,EAASC,KAAEA,EAAIC,YAAEA,GAAgBrB,KAEpF,OACEsB,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,yDAAkBhB,EAAW,OAAS,KACjCiB,MAAO,CAAE,eAAgB,KAAM,cAAeP,IACjDI,EAAA,SAAAE,IAAA,2CAAOE,GAAIzB,EAAO,eACG,GAAGS,IACjBiB,KAAK,WACLxB,OAAQH,KAAKG,OACbQ,QAASX,KAAKW,QACdL,QAASN,KAAKM,QACdE,SAAUA,EACVY,KAAMA,EACNV,QAASA,IAChBY,EAAA,SAAAE,IAAA,2CAAOI,QAAS3B,EACTwB,MAAO,CAAEjB,SAAUA,GACnBF,QAASN,KAAKM,SACnBgB,EAAA,OAAAO,OAAAC,OAAA,CAAAN,IAAA,4CAAWH,GAAe,CAAEI,MAAO,oBAAuBN,K,4DAQtE,IAAIjB,EAAc,E","ignoreList":[]}

package/dist/admiralty/{p-f9054641.entry.js → p-d0d907da.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as a,H as i,g as s}from"./p-34931ad3.js";const l=".visually-hidden.sc-admiralty-select:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-select{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-select{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-select{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-select{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-select{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-select{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-select{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-select{display:none}}.disabled.sc-admiralty-select{color:var(--admiralty-disabled-colour)}.select-wrapper.sc-admiralty-select{position:relative}.select-down-icon.sc-admiralty-select{font-size:var(--admiralty-select-icon-font-size, var(--admiralty-font-size-2));font-weight:var(--admiralty-select-font-weight, var(--admiralty-font-weight-normal));pointer-events:none;position:absolute;right:12px;top:12px}select.sc-admiralty-select{appearance:none;background-color:var(--admiralty-background-colour);border:2px solid var(--admiralty-text-colour);box-sizing:border-box;color:var(--admiralty-text-colour);font-size:var(--admiralty-select-font-size, var(--admiralty-font-size-0));line-height:24px;margin-bottom:6px;position:relative;font-weight:var(--admiralty-select-font-weight, var(--admiralty-font-weight-normal));padding:12px;width:100%}select.invalid.sc-admiralty-select{border-color:var(--admiralty-colour-danger)}select.sc-admiralty-select:focus-visible{outline:3px solid var(--admiralty-focus-colour);box-shadow:inset 0 0 0 2px var(--admiralty-text-colour)}select.disabled.sc-admiralty-select{border-color:var(--admiralty-disabled-colour)}";const d=l;const o=class{constructor(a){t(this,a);this.admiraltyChange=e(this,"admiraltyChange",7);this.admiraltyBlur=e(this,"admiraltyBlur",7);this.internalId=++n;this.disabled=false;this.invalid=false;this.invalidMessage=null;this.hint=null;this.label="Choose a colour";this.width=undefined;this.value=""}valueChanged(){const t=this.nativeInput;const e=this.getValue();if(t&&t.value!==e){t.value=e}this.admiraltyChange.emit({value:this.value==null?this.getValue():this.value.toString()})}getValue(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}handleSelect(t){const e=t.target;if(e){this.value=e.value||""}}handleBlur(t){this.admiraltyBlur.emit()}selectOption(){const t=this.el.querySelectorAll("option");t.forEach((t=>{t.selected=t.value===this.getValue()}))}componentWillRender(){this.selectOption()}render(){const{disabled:t,hint:e,label:s}=this;const l=t?"disabled":"";const d=this.el.id!=""?this.el.id:`admiralty-select-${this.internalId}`;const o=`${d}-input`;const n=`${d}-hint`;const r=`${d}-error`;return a(i,{key:"2940535d0dc2cde6c73d878374d67b9248bb0e2e"},a("div",{key:"bc341f9cf4341229cd190147fd7ab8e829ac5461",class:`admiralty-select ${l}`},a("admiralty-label",{key:"277a17ebe84bd53678e03dfae5bde4692c096ca7",disabled:this.disabled,for:o},s),e?a("admiralty-hint",{id:n,disabled:this.disabled},e):null,a("div",{key:"d10c2daee9d07e628b8eb252f8aa3e78a04ab3d2",class:"select-wrapper",style:this.width?{maxWidth:`${this.width}px`}:{}},a("select",{key:"abf6e39780b232efabe040dc61c215ce51959c5d",ref:t=>this.nativeInput=t,id:o,class:{"admiralty-form-control":true,invalid:this.invalid,disabled:t},"aria-disabled":t?"true":"false","aria-label":s,onChange:t=>this.handleSelect(t),onBlur:t=>this.handleBlur(t),disabled:t,"aria-describedby":(this.hint?n:"")+" "+(this.invalid?r:"")},a("slot",{key:"2469897c3306c41fbbabd82225786237a6756b17"})),a("admiralty-icon",{key:"b937725ff36327ee945774320750f7e114cb146b",class:`select-down-icon ${l}`,"icon-name":"angle-down"})),a("admiralty-input-invalid",{key:"ce8c5a8c68b953512a74655c9bbc9da6101cb085",id:r,style:Object.assign({},!(this.invalid&&this.invalidMessage)?{display:"none"}:{})},this.invalidMessage)))}get el(){return s(this)}static get watchers(){return{value:["valueChanged"]}}};let n=0;o.style=d;export{o as admiralty_select};
-//# sourceMappingURL=p-f9054641.entry.js.map
+import{r as t,c as a,h as e,H as i,g as s}from"./p-34931ad3.js";const l=".visually-hidden.sc-admiralty-select:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-select{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-select{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-select{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-select{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-select{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-select{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-select{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-select{display:none}}.disabled.sc-admiralty-select{color:var(--admiralty-disabled-colour)}.select-wrapper.sc-admiralty-select{position:relative}.select-down-icon.sc-admiralty-select{font-size:var(--admiralty-select-icon-font-size, var(--admiralty-font-size-2));font-weight:var(--admiralty-select-font-weight, var(--admiralty-font-weight-normal));pointer-events:none;position:absolute;right:12px;top:12px}select.sc-admiralty-select{appearance:none;background-color:var(--admiralty-background-colour);border:2px solid var(--admiralty-text-colour);box-sizing:border-box;color:var(--admiralty-text-colour);font-size:var(--admiralty-select-font-size, var(--admiralty-font-size-0));line-height:24px;margin-bottom:6px;position:relative;font-weight:var(--admiralty-select-font-weight, var(--admiralty-font-weight-normal));padding:12px;width:100%}select.invalid.sc-admiralty-select{border-color:var(--admiralty-colour-danger)}select.sc-admiralty-select:focus-visible{outline:3px solid var(--admiralty-focus-colour);box-shadow:inset 0 0 0 2px var(--admiralty-text-colour)}select.disabled.sc-admiralty-select{border-color:var(--admiralty-disabled-colour)}";const d=l;const o=class{constructor(e){t(this,e);this.admiraltyChange=a(this,"admiraltyChange",7);this.admiraltyBlur=a(this,"admiraltyBlur",7);this.internalId=++n;this.disabled=false;this.invalid=false;this.invalidMessage=null;this.hint=null;this.label="Choose a colour";this.width=undefined;this.value=""}valueChanged(){const t=this.nativeInput;const a=this.getValue();if(t&&t.value!==a){t.value=a}this.admiraltyChange.emit({value:this.value==null?this.getValue():this.value.toString()})}getValue(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}handleSelect(t){const a=t.target;if(a){this.value=a.value||""}}handleBlur(t){this.admiraltyBlur.emit()}selectOption(){const t=this.el.querySelectorAll("option");t.forEach((t=>{t.selected=t.value===this.getValue()}))}componentWillRender(){this.selectOption()}render(){const{disabled:t,hint:a,label:s}=this;const l=t?"disabled":"";const d=this.el.id!=""?this.el.id:`admiralty-select-${this.internalId}`;const o=`${d}-input`;const n=`${d}-hint`;const r=`${d}-error`;return e(i,{key:"4571979f6a2b25fed378acc1af80a18a5cfcbba0"},e("div",{key:"8be89f4512071c5fc103be93f4ef1e04b8c2ccc7",class:`admiralty-select ${l}`},e("admiralty-label",{key:"d8dab5a97130de0a0379038b6a5541674bf5810f",disabled:this.disabled,for:o},s),a?e("admiralty-hint",{id:n,disabled:this.disabled},a):null,e("div",{key:"ea42f4c04d7c6e9b0a14a913f7e85eed2f9fb733",class:"select-wrapper",style:this.width?{maxWidth:`${this.width}px`}:{}},e("select",{key:"09528928c2d1bf532f68e812927b6d5273f6ced6",ref:t=>this.nativeInput=t,id:o,class:{"admiralty-form-control":true,invalid:this.invalid,disabled:t},"aria-disabled":t?"true":"false","aria-label":s,onChange:t=>this.handleSelect(t),onBlur:t=>this.handleBlur(t),disabled:t,"aria-describedby":(this.hint?n:"")+" "+(this.invalid?r:"")},e("slot",{key:"d568595ea010b0c699e8820a77a1ca5be3adc67f"})),e("admiralty-icon",{key:"d0dd66d2145aec731670d9c15b7b0ad075d64420",class:`select-down-icon ${l}`,"icon-name":"angle-down"})),e("admiralty-input-invalid",{key:"19a2285b312615e138d0d4c4b85f5fec0c479689",id:r,style:Object.assign({},!(this.invalid&&this.invalidMessage)?{display:"none"}:{})},this.invalidMessage)))}get el(){return s(this)}static get watchers(){return{value:["valueChanged"]}}};let n=0;o.style=d;export{o as admiralty_select};
+//# sourceMappingURL=p-d0d907da.entry.js.map

package/dist/admiralty/p-d0d907da.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["selectCss","AdmiraltySelectStyle0","SelectComponent","this","internalId","nextId","valueChanged","nativeSelect","nativeInput","value","getValue","admiraltyChange","emit","toString","handleSelect","event","select","target","handleBlur","_event","admiraltyBlur","selectOption","options","el","querySelectorAll","forEach","option","selected","componentWillRender","render","disabled","hint","label","disabledClass","id","inputId","hintId","errorId","h","Host","key","class","for","style","width","maxWidth","ref","invalid","onChange","onBlur","Object","assign","invalidMessage","display"],"sources":["src/components/select/select.scss?tag=admiralty-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["@import 'select.vars';\n.disabled {\n  color: $select-disabled-text-colour;\n}\n\n.select-wrapper {\n  position: relative;\n}\n\n.select-down-icon {\n  font-size: $select-icon-size;\n  font-weight: $select-text-weight;\n  pointer-events: none;\n  position: absolute;\n  right: 12px;\n  top: 12px;\n}\n\nselect {\n  appearance: none;\n  background-color: $select-background-colour;\n  border: 2px solid $select-border-colour;\n  box-sizing: border-box;\n  color: $select-text-colour;\n  font-size: $select-text-size;\n  line-height: 24px;\n  margin-bottom: 6px;\n  position: relative;\n  font-weight: $select-text-weight;\n  padding: 12px;\n  width: 100%;\n\n  &.invalid {\n    border-color: $select-error-border-colour;\n  }\n\n  &:focus-visible {\n    outline: 3px solid $select-focus-colour;\n    box-shadow: inset 0 0 0 2px $select-border-colour;\n  }\n\n  &.disabled {\n    border-color: $select-disabled-border-colour;\n  }\n}\n","import { Component, Event, Prop, Element, EventEmitter, h, Host, Watch } from '@stencil/core';\nimport { SelectChangeEventDetail } from './select.interface';\n\n@Component({\n  tag: 'admiralty-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class SelectComponent {\n  @Element() el?: HTMLElement;\n  private internalId = ++nextId;\n  private nativeInput?: HTMLSelectElement;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   * Whether to show that the select is in an invalid state.\n   */\n  @Prop() invalid: boolean = false;\n  /**\n   * The message to show when the select is invalid.\n   */\n  @Prop() invalidMessage: string = null;\n  /**\n   * The text that will be used as a field label.\n   */\n  @Prop() hint: string = null;\n  /**\n   * The text that will be used as a field label.\n   */\n  @Prop() label: string = 'Choose a colour';\n  /**\n   * The maximum width (px) for the input field.\n   */\n  @Prop() width?: number;\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() admiraltyChange: EventEmitter<SelectChangeEventDetail>;\n  /**\n   * Emitted when the component loses focus.\n   */\n  @Event() admiraltyBlur: EventEmitter<void>;\n\n  /**\n   * The value of the option selected as a string or number.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  @Watch('value')\n  protected valueChanged() {\n    const nativeSelect = this.nativeInput;\n    const value = this.getValue();\n    if (nativeSelect && nativeSelect.value !== value) {\n      nativeSelect.value = value;\n    }\n    this.admiraltyChange.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  handleSelect(event: Event) {\n    const select = event.target as HTMLSelectElement | null;\n    if (select) {\n      this.value = select.value || '';\n    }\n  }\n\n  handleBlur(_event: FocusEvent): void {\n    this.admiraltyBlur.emit();\n  }\n\n  selectOption() {\n    const options = this.el.querySelectorAll('option');\n    options.forEach(option => {\n      option.selected = option.value === this.getValue();\n    });\n  }\n\n  componentWillRender() {\n    this.selectOption();\n  }\n\n  render() {\n    const { disabled, hint, label } = this;\n    const disabledClass = disabled ? 'disabled' : '';\n    const id = this.el.id != '' ? this.el.id : `admiralty-select-${this.internalId}`;\n    const inputId = `${id}-input`;\n    const hintId = `${id}-hint`;\n    const errorId = `${id}-error`;\n\n    return (\n      <Host>\n        <div class={`admiralty-select ${disabledClass}`}>\n          <admiralty-label disabled={this.disabled} for={inputId}>\n            {label}\n          </admiralty-label>\n          {hint ? (\n            <admiralty-hint id={hintId} disabled={this.disabled}>\n              {hint}\n            </admiralty-hint>\n          ) : null}\n          <div class=\"select-wrapper\" style={this.width ? { maxWidth: `${this.width}px` } : {}}>\n            <select\n              ref={select => (this.nativeInput = select)}\n              id={inputId}\n              class={{ 'admiralty-form-control': true, 'invalid': this.invalid, 'disabled': disabled }}\n              aria-disabled={disabled ? 'true' : 'false'}\n              aria-label={label}\n              onChange={event => this.handleSelect(event)}\n              onBlur={event => this.handleBlur(event)}\n              disabled={disabled}\n              aria-describedby={(this.hint ? hintId : '') + ' ' + (this.invalid ? errorId : '')}\n            >\n              <slot></slot>\n            </select>\n            <admiralty-icon class={`select-down-icon ${disabledClass}`} icon-name=\"angle-down\"></admiralty-icon>\n          </div>\n          <admiralty-input-invalid id={errorId} style={{ ...(!(this.invalid && this.invalidMessage) ? { display: 'none' } : {}) }}>\n            {this.invalidMessage}\n          </admiralty-input-invalid>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"],"mappings":"gEAAA,MAAMA,EAAY,gmEAClB,MAAAC,EAAeD,E,MCOFE,EAAe,M,uHAElBC,KAAAC,aAAeC,E,cAMK,M,aAID,M,oBAIM,K,UAIV,K,WAIC,kB,gCAiBkC,E,CAGhD,YAAAC,GACR,MAAMC,EAAeJ,KAAKK,YAC1B,MAAMC,EAAQN,KAAKO,WACnB,GAAIH,GAAgBA,EAAaE,QAAUA,EAAO,CAChDF,EAAaE,MAAQA,C,CAEvBN,KAAKQ,gBAAgBC,KAAK,CAAEH,MAAON,KAAKM,OAAS,KAAON,KAAKO,WAAaP,KAAKM,MAAMI,Y,CAG/E,QAAAH,GACN,cAAcP,KAAKM,QAAU,SAAWN,KAAKM,MAAMI,YAAcV,KAAKM,OAAS,IAAII,U,CAGrF,YAAAC,CAAaC,GACX,MAAMC,EAASD,EAAME,OACrB,GAAID,EAAQ,CACVb,KAAKM,MAAQO,EAAOP,OAAS,E,EAIjC,UAAAS,CAAWC,GACThB,KAAKiB,cAAcR,M,CAGrB,YAAAS,GACE,MAAMC,EAAUnB,KAAKoB,GAAGC,iBAAiB,UACzCF,EAAQG,SAAQC,IACdA,EAAOC,SAAWD,EAAOjB,QAAUN,KAAKO,UAAU,G,CAItD,mBAAAkB,GACEzB,KAAKkB,c,CAGP,MAAAQ,GACE,MAAMC,SAAEA,EAAQC,KAAEA,EAAIC,MAAEA,GAAU7B,KAClC,MAAM8B,EAAgBH,EAAW,WAAa,GAC9C,MAAMI,EAAK/B,KAAKoB,GAAGW,IAAM,GAAK/B,KAAKoB,GAAGW,GAAK,oBAAoB/B,KAAKC,aACpE,MAAM+B,EAAU,GAAGD,UACnB,MAAME,EAAS,GAAGF,SAClB,MAAMG,EAAU,GAAGH,UAEnB,OACEI,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAO,oBAAoBR,KAC9BK,EAAA,mBAAAE,IAAA,2CAAiBV,SAAU3B,KAAK2B,SAAUY,IAAKP,GAC5CH,GAEFD,EACCO,EAAA,kBAAgBJ,GAAIE,EAAQN,SAAU3B,KAAK2B,UACxCC,GAED,KACJO,EAAA,OAAAE,IAAA,2CAAKC,MAAM,iBAAiBE,MAAOxC,KAAKyC,MAAQ,CAAEC,SAAU,GAAG1C,KAAKyC,WAAc,IAChFN,EAAA,UAAAE,IAAA,2CACEM,IAAK9B,GAAWb,KAAKK,YAAcQ,EACnCkB,GAAIC,EACJM,MAAO,CAAE,yBAA0B,KAAMM,QAAW5C,KAAK4C,QAASjB,SAAYA,GAAU,gBACzEA,EAAW,OAAS,QAAO,aAC9BE,EACZgB,SAAUjC,GAASZ,KAAKW,aAAaC,GACrCkC,OAAQlC,GAASZ,KAAKe,WAAWH,GACjCe,SAAUA,EAAQ,oBACC3B,KAAK4B,KAAOK,EAAS,IAAM,KAAOjC,KAAK4C,QAAUV,EAAU,KAE9EC,EAAA,QAAAE,IAAA,8CAEFF,EAAA,kBAAAE,IAAA,2CAAgBC,MAAO,oBAAoBR,IAAe,YAAY,gBAExEK,EAAA,2BAAAE,IAAA,2CAAyBN,GAAIG,EAASM,MAAKO,OAAAC,OAAA,KAAUhD,KAAK4C,SAAW5C,KAAKiD,gBAAkB,CAAEC,QAAS,QAAW,KAC/GlD,KAAKiD,iB,gFAQlB,IAAI/C,EAAS,E","ignoreList":[]}

package/dist/admiralty/p-fc133d32.entry.js

@@ -0,0 +1,2 @@
+import{r as a,h as i,H as t}from"./p-34931ad3.js";import{g as n}from"./p-7419d0f9.js";const d=".visually-hidden.sc-admiralty-hint:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-hint{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-hint{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-hint{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-hint{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-hint{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-hint{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-hint{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-hint{display:none}}p.sc-admiralty-hint{margin-top:0;margin-bottom:6px;display:block;font-weight:var(--admiralty-hint-font-weight, var(--admiralty-font-weight-normal))}p.disabled.sc-admiralty-hint{color:var(--admiralty-disabled-text-colour)}";const e=d;const l=class{constructor(i){a(this,i);this.disabled=undefined}render(){return i("p",{key:"fa4e0104076ea8fa402097fa0b168a09130ca2b6",class:{disabled:this.disabled}},i("slot",{key:"ddbfe3d97713f7b678d1d5525b12268f1e475f90"}))}};l.style=e;const o=".visually-hidden.sc-admiralty-input-invalid:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-input-invalid{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-input-invalid{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-input-invalid{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-input-invalid{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-input-invalid{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-input-invalid{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-input-invalid{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-input-invalid{display:none}}.sc-admiralty-input-invalid-h{display:flex;align-items:center}admiralty-icon.sc-admiralty-input-invalid{color:var(--admiralty-colour-danger);margin:4px 0}p.sc-admiralty-input-invalid{margin:0;color:var(--admiralty-colour-danger)}";const p=o;const r=class{constructor(i){a(this,i)}render(){return i(t,{key:"af51d1606b951c52a09c995fc5939323da083793"},i("admiralty-icon",{key:"49f7aad40765557e16f3a7f1692ea42274664303","icon-name":n.iconName,class:"error-icon"}),i("p",{key:"2440c856953d5b4f29cf8a8ffd03cae9effa776e"},i("span",{key:"a6c73389144f9140cffafd7e789f6695f573600b",class:"visually-hidden"},"Error:"),i("slot",{key:"d6fffffe66b5e79aea3d7e9beae60be0a2cb90ac"})))}};r.style=p;const m=".visually-hidden.sc-admiralty-label:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-label{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-label{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-label{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-label{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-label{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-label{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-label{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-label{display:none}}label.sc-admiralty-label{margin-bottom:6px;display:inline-block;font-weight:var(--admiralty-label-font-weight, var(--admiralty-font-weight-medium))}label.disabled.sc-admiralty-label{color:var(--admiralty-disabled-text-colour)}";const s=m;const c=class{constructor(i){a(this,i);this.disabled=undefined;this.for=undefined}render(){return i("label",{key:"505e239217e7cf51d53aa4ee63babbef8bda8e91",htmlFor:this.for,class:{disabled:this.disabled}},i("slot",{key:"99afa7d53e41e54bae6bd2223a4b83da5d346cb3"}))}};c.style=s;export{l as admiralty_hint,r as admiralty_input_invalid,c as admiralty_label};
+//# sourceMappingURL=p-fc133d32.entry.js.map

package/dist/admiralty/{p-0b326027.entry.js.map → p-fc133d32.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["hintCss","AdmiraltyHintStyle0","HintComponent","render","h","key","class","disabled","this","inputInvalidCss","AdmiraltyInputInvalidStyle0","InputInvalidComponent","Host","faExclamation","iconName","labelCss","AdmiraltyLabelStyle0","LabelComponent","htmlFor","for"],"sources":["src/components/hint/hint.scss?tag=admiralty-hint&encapsulation=scoped","src/components/hint/hint.tsx","src/components/input-invalid/input-invalid.scss?tag=admiralty-input-invalid&encapsulation=scoped","src/components/input-invalid/input-invalid.tsx","src/components/label/label.scss?tag=admiralty-label&encapsulation=scoped","src/components/label/label.tsx"],"sourcesContent":["@import 'hint.vars';\n\np {\n  margin-top: 0;\n  margin-bottom: 6px;\n  display: block;\n  font-weight: $hint-text-weight;\n\n  &.disabled {\n    color: $hint-disabled-text-colour;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot - The hint content should be placed in the slot e.g.\n * `<admiralty-hint>Enter your full name</admiralty-hint>`\n */\n@Component({\n  tag: 'admiralty-hint',\n  styleUrl: 'hint.scss',\n  scoped: true,\n})\nexport class HintComponent {\n  /**\n   * The disabled option can be used to disable the component.\n   */\n  @Prop() disabled: boolean;\n\n  render() {\n    return (\n      <p class={{ disabled: this.disabled }}>\n        <slot></slot>\n      </p>\n    );\n  }\n}\n","@import \"input-invalid.vars\";\n\n:host {\n  display: flex;\n  align-items: center;\n}\n\nadmiralty-icon {\n  color: $input-invalid-text-colour;\n  margin: 4px 0;\n}\n\np {\n  margin: 0;\n  color: $input-invalid-text-colour;\n}\n\n","import { Component, h, Host } from '@stencil/core';\nimport { faExclamation } from '@fortawesome/free-solid-svg-icons';\n\n/**\n * @slot - The error content should be placed in the slot e.g.\n * `<admiralty-input-invalid>This field is required</admiralty-input-invalid>`\n */\n@Component({\n  tag: 'admiralty-input-invalid',\n  styleUrl: 'input-invalid.scss',\n  scoped: true,\n})\nexport class InputInvalidComponent {\n  render() {\n    return (\n      <Host>\n        <admiralty-icon icon-name={faExclamation.iconName} class=\"error-icon\"></admiralty-icon>\n        <p>\n          <span class=\"visually-hidden\">Error:</span>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n}\n","@import 'label.vars.scss';\n\nlabel {\n  margin-bottom: 6px;\n  display: inline-block;\n  font-weight: $label-text-weight;\n\n  &.disabled {\n    color: $label-disabled-text-colour;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot - The label content should be placed in the slot e.g.\n * `<admiralty-label>First Name</admiralty-label>`\n */\n@Component({\n  tag: 'admiralty-label',\n  styleUrl: 'label.scss',\n  scoped: true,\n})\nexport class LabelComponent {\n  /**\n   * The disabled option can be used to disable the component.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * The id of the input the label is attached to\n   */\n  @Prop() for: string;\n\n  render() {\n    return (\n      <label htmlFor={this.for} class={{ disabled: this.disabled }}>\n        <slot></slot>\n      </label>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAU,msCAChB,MAAAC,EAAeD,E,MCUFE,EAAa,M,iDAMxB,MAAAC,GACE,OACEC,EAAA,KAAAC,IAAA,2CAAGC,MAAO,CAAEC,SAAUC,KAAKD,WACzBH,EAAA,QAAAC,IAAA,6C,aCpBR,MAAMI,EAAkB,iyCACxB,MAAAC,EAAeD,E,MCWFE,EAAqB,M,yBAChC,MAAAR,GACE,OACEC,EAACQ,EAAI,CAAAP,IAAA,4CACHD,EAAA,kBAAAC,IAAA,uDAA2BQ,EAAcC,SAAUR,MAAM,eACzDF,EAAA,KAAAC,IAAA,4CACED,EAAA,QAAAC,IAAA,2CAAMC,MAAM,mBAAiB,UAC7BF,EAAA,QAAAC,IAAA,8C,aCnBV,MAAMU,EAAW,itCACjB,MAAAC,EAAeD,E,MCUFE,EAAc,M,oEAWzB,MAAAd,GACE,OACEC,EAAA,SAAAC,IAAA,2CAAOa,QAASV,KAAKW,IAAKb,MAAO,CAAEC,SAAUC,KAAKD,WAChDH,EAAA,QAAAC,IAAA,6C","ignoreList":[]}
+{"version":3,"names":["hintCss","AdmiraltyHintStyle0","HintComponent","render","h","key","class","disabled","this","inputInvalidCss","AdmiraltyInputInvalidStyle0","InputInvalidComponent","Host","faExclamation","iconName","labelCss","AdmiraltyLabelStyle0","LabelComponent","htmlFor","for"],"sources":["src/components/hint/hint.scss?tag=admiralty-hint&encapsulation=scoped","src/components/hint/hint.tsx","src/components/input-invalid/input-invalid.scss?tag=admiralty-input-invalid&encapsulation=scoped","src/components/input-invalid/input-invalid.tsx","src/components/label/label.scss?tag=admiralty-label&encapsulation=scoped","src/components/label/label.tsx"],"sourcesContent":["@import 'hint.vars';\n\np {\n  margin-top: 0;\n  margin-bottom: 6px;\n  display: block;\n  font-weight: $hint-text-weight;\n\n  &.disabled {\n    color: $hint-disabled-text-colour;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot - The hint content should be placed in the slot e.g.\n * `<admiralty-hint>Enter your full name</admiralty-hint>`\n */\n@Component({\n  tag: 'admiralty-hint',\n  styleUrl: 'hint.scss',\n  scoped: true,\n})\nexport class HintComponent {\n  /**\n   * The disabled option can be used to disable the component.\n   */\n  @Prop() disabled: boolean;\n\n  render() {\n    return (\n      <p class={{ disabled: this.disabled }}>\n        <slot></slot>\n      </p>\n    );\n  }\n}\n","@import \"input-invalid.vars\";\n\n:host {\n  display: flex;\n  align-items: center;\n}\n\nadmiralty-icon {\n  color: $input-invalid-text-colour;\n  margin: 4px 0;\n}\n\np {\n  margin: 0;\n  color: $input-invalid-text-colour;\n}\n\n","import { Component, h, Host } from '@stencil/core';\nimport { faExclamation } from '@fortawesome/free-solid-svg-icons';\n\n/**\n * @slot - The error content should be placed in the slot e.g.\n * `<admiralty-input-invalid>This field is required</admiralty-input-invalid>`\n */\n@Component({\n  tag: 'admiralty-input-invalid',\n  styleUrl: 'input-invalid.scss',\n  scoped: true,\n})\nexport class InputInvalidComponent {\n  render() {\n    return (\n      <Host>\n        <admiralty-icon icon-name={faExclamation.iconName} class=\"error-icon\"></admiralty-icon>\n        <p>\n          <span class=\"visually-hidden\">Error:</span>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n}\n","@import 'label.vars.scss';\n\nlabel {\n  margin-bottom: 6px;\n  display: inline-block;\n  font-weight: $label-text-weight;\n\n  &.disabled {\n    color: $label-disabled-text-colour;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot - The label content should be placed in the slot e.g.\n * `<admiralty-label>First Name</admiralty-label>`\n */\n@Component({\n  tag: 'admiralty-label',\n  styleUrl: 'label.scss',\n  scoped: true,\n})\nexport class LabelComponent {\n  /**\n   * The disabled option can be used to disable the component.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * The id of the input the label is attached to\n   */\n  @Prop() for: string;\n\n  render() {\n    return (\n      <label htmlFor={this.for} class={{ disabled: this.disabled }}>\n        <slot></slot>\n      </label>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAU,wsCAChB,MAAAC,EAAeD,E,MCUFE,EAAa,M,iDAMxB,MAAAC,GACE,OACEC,EAAA,KAAAC,IAAA,2CAAGC,MAAO,CAAEC,SAAUC,KAAKD,WACzBH,EAAA,QAAAC,IAAA,6C,aCpBR,MAAMI,EAAkB,iyCACxB,MAAAC,EAAeD,E,MCWFE,EAAqB,M,yBAChC,MAAAR,GACE,OACEC,EAACQ,EAAI,CAAAP,IAAA,4CACHD,EAAA,kBAAAC,IAAA,uDAA2BQ,EAAcC,SAAUR,MAAM,eACzDF,EAAA,KAAAC,IAAA,4CACED,EAAA,QAAAC,IAAA,2CAAMC,MAAM,mBAAiB,UAC7BF,EAAA,QAAAC,IAAA,8C,aCnBV,MAAMU,EAAW,stCACjB,MAAAC,EAAeD,E,MCUFE,EAAc,M,oEAWzB,MAAAd,GACE,OACEC,EAAA,SAAAC,IAAA,2CAAOa,QAASV,KAAKW,IAAKb,MAAO,CAAEC,SAAUC,KAAKD,WAChDH,EAAA,QAAAC,IAAA,6C","ignoreList":[]}

package/dist/cjs/admiralty-checkbox.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7cb38aed.js');
 
-const checkboxCss = ".visually-hidden.sc-admiralty-checkbox:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-checkbox{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-checkbox{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-checkbox{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-checkbox{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-checkbox{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-checkbox{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-checkbox{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-checkbox{display:none}}.form-control.sc-admiralty-checkbox{font-size:var(--admiralty-checkbox-font-size, var(--admiralty-font-size-0));font-weight:var(--admiralty-checkbox-font-weight, var(--admiralty-font-weight-normal));position:relative;display:inline-block}.form-control.sc-admiralty-checkbox input[type=checkbox].sc-admiralty-checkbox{box-sizing:border-box;opacity:0;position:absolute;top:0;left:0;padding:0;width:30px;height:30px;margin:0;z-index:1;cursor:pointer}.form-control.sc-admiralty-checkbox input[type=checkbox].sc-admiralty-checkbox:checked+label.sc-admiralty-checkbox::after{content:\"\"}.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox{position:relative;display:inline-block;padding-left:42px;margin-bottom:14px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;min-height:30px;line-height:30px}.form-control.sc-admiralty-checkbox label.disabled.sc-admiralty-checkbox{cursor:default;pointer-events:none}.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox::before,.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox::after{position:absolute;content:none;display:inline-block}.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox::before{content:\"\";height:26px;width:26px;border:2px solid var(--admiralty-colour-primary);left:0;top:0;background-color:var(--admiralty-colour-primary-contrast)}.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox::after{height:6px;width:13px;border-left:3px solid;border-bottom:3px solid;transform:rotate(-45deg);color:var(--admiralty-colour-primary);left:7px;top:8px}.form-control.sc-admiralty-checkbox input[type=checkbox].sc-admiralty-checkbox:focus+label.sc-admiralty-checkbox:before{outline-offset:unset;outline:3px solid var(--admiralty-focus-colour);box-shadow:var(--admiralty-colour-primary) inset 0 0 0 2px}.form-control.right-align.sc-admiralty-checkbox label.sc-admiralty-checkbox{padding-left:unset;padding-right:35px}.form-control.right-align.sc-admiralty-checkbox label.sc-admiralty-checkbox::before{left:unset;right:0}.form-control.right-align.sc-admiralty-checkbox label.sc-admiralty-checkbox::after{left:unset;right:6px}";
+const checkboxCss = ".visually-hidden.sc-admiralty-checkbox:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-checkbox{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-checkbox{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-checkbox{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-checkbox{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-checkbox{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-checkbox{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-checkbox{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-checkbox{display:none}}.form-control.sc-admiralty-checkbox{font-size:var(--admiralty-checkbox-font-size, var(--admiralty-font-size-0));font-weight:var(--admiralty-checkbox-font-weight, var(--admiralty-font-weight-normal));position:relative;display:inline-block}.form-control.sc-admiralty-checkbox input[type=checkbox].sc-admiralty-checkbox{box-sizing:border-box;opacity:0;position:absolute;top:0;left:0;padding:0;width:30px;height:30px;margin:0;z-index:1;cursor:pointer}.form-control.sc-admiralty-checkbox input[type=checkbox].sc-admiralty-checkbox:checked+label.sc-admiralty-checkbox::after{content:\"\"}.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox{position:relative;display:inline-block;padding-left:42px;margin-bottom:14px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;min-height:30px;line-height:30px}.form-control.sc-admiralty-checkbox label.disabled.sc-admiralty-checkbox{cursor:default;pointer-events:none;color:var(--admiralty-disabled-text-colour)}.form-control.sc-admiralty-checkbox label.disabled.sc-admiralty-checkbox::before{border-color:var(--admiralty-disabled-colour)}.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox::before,.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox::after{position:absolute;content:none;display:inline-block}.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox::before{content:\"\";height:26px;width:26px;border:2px solid var(--admiralty-colour-primary);left:0;top:0;background-color:var(--admiralty-colour-primary-contrast)}.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox::after{height:6px;width:13px;border-left:3px solid;border-bottom:3px solid;transform:rotate(-45deg);color:var(--admiralty-colour-primary);left:7px;top:8px}.form-control.sc-admiralty-checkbox input[type=checkbox].sc-admiralty-checkbox:focus+label.sc-admiralty-checkbox:before{outline-offset:unset;outline:3px solid var(--admiralty-focus-colour);box-shadow:var(--admiralty-colour-primary) inset 0 0 0 2px}.form-control.right-align.sc-admiralty-checkbox label.sc-admiralty-checkbox{padding-left:unset;padding-right:35px}.form-control.right-align.sc-admiralty-checkbox label.sc-admiralty-checkbox::before{left:unset;right:0}.form-control.right-align.sc-admiralty-checkbox label.sc-admiralty-checkbox::after{left:unset;right:6px}";
 const AdmiraltyCheckboxStyle0 = checkboxCss;
 
 const CheckboxComponent = class {

package/dist/cjs/admiralty-checkbox.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-checkbox.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,unGAAunG,CAAC;AAC5oG,gCAAe,WAAW;;MCOb,iBAAiB;;;;;;QACpB,YAAO,GAAG,aAAa,WAAW,EAAE,EAAE,CAAC;QAmEvC,WAAM,GAAG;YACf,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;SAC1B,CAAC;QAEM,YAAO,GAAG,CAAC,KAAY;YAC7B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;aAC9B;SACF,CAAC;QAEM,YAAO,GAAG;YAChB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;SAC3B,CAAC;6BA3E+B,KAAK;wBAKV,KAAK;oBAKV,IAAI,CAAC,OAAO;uBAKwB,KAAK;;yBAcpC,IAAI;2BAKD,KAAK;;IAqBpC,cAAc,CAAC,SAAkB;QAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC;KACJ;IAiBD,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAEzF,QACEA,QAACC,UAAI,uDACHD,iFAAkB,QAAQ,GAAG,MAAM,GAAG,IAAI,EACrC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE,IAChEA,oEAAO,EAAE,EAAE,OAAO,kBACG,GAAG,OAAO,EAAE,EAC1B,IAAI,EAAC,UAAU,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,GAAG,EAC1BA,oEAAO,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,IAC1BA,oFAAW,WAAW,IAAI,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,SAAS,CAAQ,CACrE,CACJ,CACD,EACP;KACH;;;;;AAGH,IAAI,WAAW,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["src/components/checkbox/checkbox.scss?tag=admiralty-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@import 'checkbox.vars';\n\n.form-control {\n  font-size: $checkbox-font-size;\n  font-weight: $checkbox-font-weight;\n  position: relative;\n  display: inline-block;\n\n  input[type='checkbox'] {\n    box-sizing: border-box;\n    opacity: 0;\n    position: absolute;\n    top: 0;\n    left: 0;\n    padding: 0;\n    width: 30px;\n    height: 30px;\n    margin: 0;\n    z-index: 1;\n    cursor: pointer;\n\n    &:checked + label::after {\n      content: '';\n    }\n  }\n\n  label {\n    position: relative;\n    display: inline-block;\n    padding-left: 42px;\n    margin-bottom: 14px;\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n    min-height: 30px;\n    line-height: 30px;\n\n    &.disabled {\n      cursor: default;\n      pointer-events: none;\n    }\n\n    &::before,\n    &::after {\n      position: absolute;\n      content: none;\n      display: inline-block;\n    }\n\n    &::before {\n      content: '';\n      height: 26px;\n      width: 26px;\n      border: 2px solid $checkbox-border-colour;\n      left: 0;\n      top: 0;\n      background-color: $checkbox-colour;\n    }\n\n    &::after {\n      height: 6px;\n      width: 13px;\n      border-left: 3px solid;\n      border-bottom: 3px solid;\n      transform: rotate(-45deg);\n      color: $checkbox-text-colour;\n      left: 7px;\n      top: 8px;\n    }\n  }\n\n  input[type='checkbox']:focus + label:before {\n    outline-offset: unset;\n    outline: 3px solid $checkbox-focus-colour;\n    box-shadow: $checkbox-border-colour inset 0 0 0 2px;\n  }\n\n  &.right-align label {\n    padding-left: unset;\n    padding-right: 35px;\n\n    &::before {\n      left: unset;\n      right: 0;\n    }\n\n    &::after {\n      left: unset;\n      right: 6px;\n    }\n  }\n}\n","import { Component, EventEmitter, Event, Host, h, Prop, Watch } from '@stencil/core';\nimport { CheckboxChangeEventDetail } from './checkbox.interface';\n\n@Component({\n  tag: 'admiralty-checkbox',\n  styleUrl: 'checkbox.scss',\n  scoped: true,\n})\nexport class CheckboxComponent {\n  private inputId = `admiralty-${checkboxIds++}`;\n\n  /**\n   * Whether the checkbox should be positioned to the right of the label.\n   */\n  @Prop() checkboxRight: boolean = false;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * If `true`, the checkbox is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * The value of the checkbox does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\n   * it's only used when the checkbox participates in a native `<form>`.\n   */\n  @Prop() value: any | null;\n\n  /**\n   * The label text must be provided and is displayed beside the checkbox, use the `labelHidden` property to control its visibility.\n   */\n  @Prop() labelText: string = null;\n\n  /**\n   * This visually hides the labelText while preserving accessibility.\n   */\n  @Prop() labelHidden: boolean = false;\n\n  /**\n   * Event is fired when the form control changes state\n   * @event admiraltyChange\n   */\n  @Event() admiraltyChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  /**\n   * Event is fired when the form control gains focus\n   * @event checkboxFocus\n   */\n  @Event() checkboxFocus: EventEmitter<FocusEvent>;\n\n  /**\n   * Event is fired when the form control loses focus\n   * @event checkboxBlur\n   */\n  @Event() checkboxBlur: EventEmitter<FocusEvent>;\n\n  @Watch('checked')\n  checkedChanged(isChecked: boolean) {\n    this.admiraltyChange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n  }\n\n  private onBlur = () => {\n    this.checkboxBlur.emit();\n  };\n\n  private onClick = (event: Event) => {\n    if (!this.disabled) {\n      event.preventDefault();\n      this.checked = !this.checked;\n    }\n  };\n\n  private onFocus = () => {\n    this.checkboxFocus.emit();\n  };\n\n  render() {\n    const { checked, checkboxRight, disabled, inputId, labelText, name, labelHidden } = this;\n\n    return (\n      <Host>\n        <div aria-hidden={disabled ? 'true' : null}\n             class={{ 'form-control': true, 'right-align': checkboxRight }}>\n          <input id={inputId}\n                 aria-checked={`${checked}`}\n                 type=\"checkbox\"\n                 onBlur={this.onBlur}\n                 onFocus={this.onFocus}\n                 onClick={this.onClick}\n                 disabled={disabled}\n                 name={name}\n                 checked={checked}/>\n          <label htmlFor={inputId}\n                 class={{ disabled: disabled }}\n                 onClick={this.onClick}>\n            <span {...(labelHidden && { class: 'visually-hidden' })}>{labelText}</span>\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet checkboxIds = 0;\n"],"version":3}
+{"file":"admiralty-checkbox.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,kyGAAkyG,CAAC;AACvzG,gCAAe,WAAW;;MCOb,iBAAiB;;;;;;QACpB,YAAO,GAAG,aAAa,WAAW,EAAE,EAAE,CAAC;QAmEvC,WAAM,GAAG;YACf,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;SAC1B,CAAC;QAEM,YAAO,GAAG,CAAC,KAAY;YAC7B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;aAC9B;SACF,CAAC;QAEM,YAAO,GAAG;YAChB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;SAC3B,CAAC;6BA3E+B,KAAK;wBAKV,KAAK;oBAKV,IAAI,CAAC,OAAO;uBAKwB,KAAK;;yBAcpC,IAAI;2BAKD,KAAK;;IAqBpC,cAAc,CAAC,SAAkB;QAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC;KACJ;IAiBD,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAEzF,QACEA,QAACC,UAAI,uDACHD,iFAAkB,QAAQ,GAAG,MAAM,GAAG,IAAI,EACrC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE,IAChEA,oEAAO,EAAE,EAAE,OAAO,kBACG,GAAG,OAAO,EAAE,EAC1B,IAAI,EAAC,UAAU,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,GAAG,EAC1BA,oEAAO,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,IAC1BA,oFAAW,WAAW,IAAI,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,SAAS,CAAQ,CACrE,CACJ,CACD,EACP;KACH;;;;;AAGH,IAAI,WAAW,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["src/components/checkbox/checkbox.scss?tag=admiralty-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@import 'checkbox.vars';\n\n.form-control {\n  font-size: $checkbox-font-size;\n  font-weight: $checkbox-font-weight;\n  position: relative;\n  display: inline-block;\n\n  input[type='checkbox'] {\n    box-sizing: border-box;\n    opacity: 0;\n    position: absolute;\n    top: 0;\n    left: 0;\n    padding: 0;\n    width: 30px;\n    height: 30px;\n    margin: 0;\n    z-index: 1;\n    cursor: pointer;\n\n    &:checked + label::after {\n      content: '';\n    }\n  }\n\n  label {\n    position: relative;\n    display: inline-block;\n    padding-left: 42px;\n    margin-bottom: 14px;\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n    min-height: 30px;\n    line-height: 30px;\n\n    &.disabled {\n      cursor: default;\n      pointer-events: none;\n      color: $checkbox-disabled-text-colour;\n\n      &::before {\n        border-color: $checkbox-disabled-border-colour;\n      }\n    }\n\n    &::before,\n    &::after {\n      position: absolute;\n      content: none;\n      display: inline-block;\n    }\n\n    &::before {\n      content: '';\n      height: 26px;\n      width: 26px;\n      border: 2px solid $checkbox-border-colour;\n      left: 0;\n      top: 0;\n      background-color: $checkbox-colour;\n    }\n\n    &::after {\n      height: 6px;\n      width: 13px;\n      border-left: 3px solid;\n      border-bottom: 3px solid;\n      transform: rotate(-45deg);\n      color: $checkbox-text-colour;\n      left: 7px;\n      top: 8px;\n    }\n  }\n\n  input[type='checkbox']:focus + label:before {\n    outline-offset: unset;\n    outline: 3px solid $checkbox-focus-colour;\n    box-shadow: $checkbox-border-colour inset 0 0 0 2px;\n  }\n\n  &.right-align label {\n    padding-left: unset;\n    padding-right: 35px;\n\n    &::before {\n      left: unset;\n      right: 0;\n    }\n\n    &::after {\n      left: unset;\n      right: 6px;\n    }\n  }\n}\n","import { Component, EventEmitter, Event, Host, h, Prop, Watch } from '@stencil/core';\nimport { CheckboxChangeEventDetail } from './checkbox.interface';\n\n@Component({\n  tag: 'admiralty-checkbox',\n  styleUrl: 'checkbox.scss',\n  scoped: true,\n})\nexport class CheckboxComponent {\n  private inputId = `admiralty-${checkboxIds++}`;\n\n  /**\n   * Whether the checkbox should be positioned to the right of the label.\n   */\n  @Prop() checkboxRight: boolean = false;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * If `true`, the checkbox is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * The value of the checkbox does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\n   * it's only used when the checkbox participates in a native `<form>`.\n   */\n  @Prop() value: any | null;\n\n  /**\n   * The label text must be provided and is displayed beside the checkbox, use the `labelHidden` property to control its visibility.\n   */\n  @Prop() labelText: string = null;\n\n  /**\n   * This visually hides the labelText while preserving accessibility.\n   */\n  @Prop() labelHidden: boolean = false;\n\n  /**\n   * Event is fired when the form control changes state\n   * @event admiraltyChange\n   */\n  @Event() admiraltyChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  /**\n   * Event is fired when the form control gains focus\n   * @event checkboxFocus\n   */\n  @Event() checkboxFocus: EventEmitter<FocusEvent>;\n\n  /**\n   * Event is fired when the form control loses focus\n   * @event checkboxBlur\n   */\n  @Event() checkboxBlur: EventEmitter<FocusEvent>;\n\n  @Watch('checked')\n  checkedChanged(isChecked: boolean) {\n    this.admiraltyChange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n  }\n\n  private onBlur = () => {\n    this.checkboxBlur.emit();\n  };\n\n  private onClick = (event: Event) => {\n    if (!this.disabled) {\n      event.preventDefault();\n      this.checked = !this.checked;\n    }\n  };\n\n  private onFocus = () => {\n    this.checkboxFocus.emit();\n  };\n\n  render() {\n    const { checked, checkboxRight, disabled, inputId, labelText, name, labelHidden } = this;\n\n    return (\n      <Host>\n        <div aria-hidden={disabled ? 'true' : null}\n             class={{ 'form-control': true, 'right-align': checkboxRight }}>\n          <input id={inputId}\n                 aria-checked={`${checked}`}\n                 type=\"checkbox\"\n                 onBlur={this.onBlur}\n                 onFocus={this.onFocus}\n                 onClick={this.onClick}\n                 disabled={disabled}\n                 name={name}\n                 checked={checked}/>\n          <label htmlFor={inputId}\n                 class={{ disabled: disabled }}\n                 onClick={this.onClick}>\n            <span {...(labelHidden && { class: 'visually-hidden' })}>{labelText}</span>\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet checkboxIds = 0;\n"],"version":3}

package/dist/cjs/admiralty-hint_3.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-7cb38aed.js');
 const index$1 = require('./index-c47043c1.js');
 
-const hintCss = ".visually-hidden.sc-admiralty-hint:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-hint{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-hint{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-hint{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-hint{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-hint{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-hint{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-hint{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-hint{display:none}}p.sc-admiralty-hint{margin-top:0;margin-bottom:6px;display:block;font-weight:var(--admiralty-hint-font-weight, var(--admiralty-font-weight-normal))}p.disabled.sc-admiralty-hint{color:var(--admiralty-disabled-colour)}";
+const hintCss = ".visually-hidden.sc-admiralty-hint:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-hint{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-hint{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-hint{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-hint{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-hint{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-hint{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-hint{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-hint{display:none}}p.sc-admiralty-hint{margin-top:0;margin-bottom:6px;display:block;font-weight:var(--admiralty-hint-font-weight, var(--admiralty-font-weight-normal))}p.disabled.sc-admiralty-hint{color:var(--admiralty-disabled-text-colour)}";
 const AdmiraltyHintStyle0 = hintCss;
 
 const HintComponent = class {
@@ -32,7 +32,7 @@ const InputInvalidComponent = class {
 };
 InputInvalidComponent.style = AdmiraltyInputInvalidStyle0;
 
-const labelCss = ".visually-hidden.sc-admiralty-label:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-label{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-label{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-label{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-label{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-label{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-label{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-label{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-label{display:none}}label.sc-admiralty-label{margin-bottom:6px;display:inline-block;font-weight:var(--admiralty-label-font-weight, var(--admiralty-font-weight-medium))}label.disabled.sc-admiralty-label{color:var(--admiralty-disabled-colour)}";
+const labelCss = ".visually-hidden.sc-admiralty-label:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-label{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-label{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-label{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-label{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-label{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-label{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-label{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-label{display:none}}label.sc-admiralty-label{margin-bottom:6px;display:inline-block;font-weight:var(--admiralty-label-font-weight, var(--admiralty-font-weight-medium))}label.disabled.sc-admiralty-label{color:var(--admiralty-disabled-text-colour)}";
 const AdmiraltyLabelStyle0 = labelCss;
 
 const LabelComponent = class {

package/dist/cjs/admiralty-hint_3.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-hint.admiralty-input-invalid.admiralty-label.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,OAAO,GAAG,ksCAAksC,CAAC;AACntC,4BAAe,OAAO;;MCUT,aAAa;;;;;IAMxB,MAAM;QACJ,QACEA,gEAAG,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IACnCA,oEAAa,CACX,EACJ;KACH;;;;ACvBH,MAAM,eAAe,GAAG,gyCAAgyC,CAAC;AACzzC,oCAAe,eAAe;;MCWjB,qBAAqB;;;;IAChC,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,0FAA2BE,qBAAa,CAAC,QAAQ,EAAE,KAAK,EAAC,YAAY,GAAkB,EACvFF,kEACEA,mEAAM,KAAK,EAAC,iBAAiB,aAAc,EAC3CA,oEAAa,CACX,CACC,EACP;KACH;;;;ACvBH,MAAM,QAAQ,GAAG,gtCAAgtC,CAAC;AACluC,6BAAe,QAAQ;;MCUV,cAAc;;;;;;IAWzB,MAAM;QACJ,QACEA,oEAAO,OAAO,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC1DA,oEAAa,CACP,EACR;KACH;;;;;;;;","names":["h","Host","faExclamation"],"sources":["src/components/hint/hint.scss?tag=admiralty-hint&encapsulation=scoped","src/components/hint/hint.tsx","src/components/input-invalid/input-invalid.scss?tag=admiralty-input-invalid&encapsulation=scoped","src/components/input-invalid/input-invalid.tsx","src/components/label/label.scss?tag=admiralty-label&encapsulation=scoped","src/components/label/label.tsx"],"sourcesContent":["@import 'hint.vars';\n\np {\n  margin-top: 0;\n  margin-bottom: 6px;\n  display: block;\n  font-weight: $hint-text-weight;\n\n  &.disabled {\n    color: $hint-disabled-text-colour;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot - The hint content should be placed in the slot e.g.\n * `<admiralty-hint>Enter your full name</admiralty-hint>`\n */\n@Component({\n  tag: 'admiralty-hint',\n  styleUrl: 'hint.scss',\n  scoped: true,\n})\nexport class HintComponent {\n  /**\n   * The disabled option can be used to disable the component.\n   */\n  @Prop() disabled: boolean;\n\n  render() {\n    return (\n      <p class={{ disabled: this.disabled }}>\n        <slot></slot>\n      </p>\n    );\n  }\n}\n","@import \"input-invalid.vars\";\n\n:host {\n  display: flex;\n  align-items: center;\n}\n\nadmiralty-icon {\n  color: $input-invalid-text-colour;\n  margin: 4px 0;\n}\n\np {\n  margin: 0;\n  color: $input-invalid-text-colour;\n}\n\n","import { Component, h, Host } from '@stencil/core';\nimport { faExclamation } from '@fortawesome/free-solid-svg-icons';\n\n/**\n * @slot - The error content should be placed in the slot e.g.\n * `<admiralty-input-invalid>This field is required</admiralty-input-invalid>`\n */\n@Component({\n  tag: 'admiralty-input-invalid',\n  styleUrl: 'input-invalid.scss',\n  scoped: true,\n})\nexport class InputInvalidComponent {\n  render() {\n    return (\n      <Host>\n        <admiralty-icon icon-name={faExclamation.iconName} class=\"error-icon\"></admiralty-icon>\n        <p>\n          <span class=\"visually-hidden\">Error:</span>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n}\n","@import 'label.vars.scss';\n\nlabel {\n  margin-bottom: 6px;\n  display: inline-block;\n  font-weight: $label-text-weight;\n\n  &.disabled {\n    color: $label-disabled-text-colour;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot - The label content should be placed in the slot e.g.\n * `<admiralty-label>First Name</admiralty-label>`\n */\n@Component({\n  tag: 'admiralty-label',\n  styleUrl: 'label.scss',\n  scoped: true,\n})\nexport class LabelComponent {\n  /**\n   * The disabled option can be used to disable the component.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * The id of the input the label is attached to\n   */\n  @Prop() for: string;\n\n  render() {\n    return (\n      <label htmlFor={this.for} class={{ disabled: this.disabled }}>\n        <slot></slot>\n      </label>\n    );\n  }\n}\n"],"version":3}
+{"file":"admiralty-hint.admiralty-input-invalid.admiralty-label.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,OAAO,GAAG,usCAAusC,CAAC;AACxtC,4BAAe,OAAO;;MCUT,aAAa;;;;;IAMxB,MAAM;QACJ,QACEA,gEAAG,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IACnCA,oEAAa,CACX,EACJ;KACH;;;;ACvBH,MAAM,eAAe,GAAG,gyCAAgyC,CAAC;AACzzC,oCAAe,eAAe;;MCWjB,qBAAqB;;;;IAChC,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,0FAA2BE,qBAAa,CAAC,QAAQ,EAAE,KAAK,EAAC,YAAY,GAAkB,EACvFF,kEACEA,mEAAM,KAAK,EAAC,iBAAiB,aAAc,EAC3CA,oEAAa,CACX,CACC,EACP;KACH;;;;ACvBH,MAAM,QAAQ,GAAG,qtCAAqtC,CAAC;AACvuC,6BAAe,QAAQ;;MCUV,cAAc;;;;;;IAWzB,MAAM;QACJ,QACEA,oEAAO,OAAO,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC1DA,oEAAa,CACP,EACR;KACH;;;;;;;;","names":["h","Host","faExclamation"],"sources":["src/components/hint/hint.scss?tag=admiralty-hint&encapsulation=scoped","src/components/hint/hint.tsx","src/components/input-invalid/input-invalid.scss?tag=admiralty-input-invalid&encapsulation=scoped","src/components/input-invalid/input-invalid.tsx","src/components/label/label.scss?tag=admiralty-label&encapsulation=scoped","src/components/label/label.tsx"],"sourcesContent":["@import 'hint.vars';\n\np {\n  margin-top: 0;\n  margin-bottom: 6px;\n  display: block;\n  font-weight: $hint-text-weight;\n\n  &.disabled {\n    color: $hint-disabled-text-colour;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot - The hint content should be placed in the slot e.g.\n * `<admiralty-hint>Enter your full name</admiralty-hint>`\n */\n@Component({\n  tag: 'admiralty-hint',\n  styleUrl: 'hint.scss',\n  scoped: true,\n})\nexport class HintComponent {\n  /**\n   * The disabled option can be used to disable the component.\n   */\n  @Prop() disabled: boolean;\n\n  render() {\n    return (\n      <p class={{ disabled: this.disabled }}>\n        <slot></slot>\n      </p>\n    );\n  }\n}\n","@import \"input-invalid.vars\";\n\n:host {\n  display: flex;\n  align-items: center;\n}\n\nadmiralty-icon {\n  color: $input-invalid-text-colour;\n  margin: 4px 0;\n}\n\np {\n  margin: 0;\n  color: $input-invalid-text-colour;\n}\n\n","import { Component, h, Host } from '@stencil/core';\nimport { faExclamation } from '@fortawesome/free-solid-svg-icons';\n\n/**\n * @slot - The error content should be placed in the slot e.g.\n * `<admiralty-input-invalid>This field is required</admiralty-input-invalid>`\n */\n@Component({\n  tag: 'admiralty-input-invalid',\n  styleUrl: 'input-invalid.scss',\n  scoped: true,\n})\nexport class InputInvalidComponent {\n  render() {\n    return (\n      <Host>\n        <admiralty-icon icon-name={faExclamation.iconName} class=\"error-icon\"></admiralty-icon>\n        <p>\n          <span class=\"visually-hidden\">Error:</span>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n}\n","@import 'label.vars.scss';\n\nlabel {\n  margin-bottom: 6px;\n  display: inline-block;\n  font-weight: $label-text-weight;\n\n  &.disabled {\n    color: $label-disabled-text-colour;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot - The label content should be placed in the slot e.g.\n * `<admiralty-label>First Name</admiralty-label>`\n */\n@Component({\n  tag: 'admiralty-label',\n  styleUrl: 'label.scss',\n  scoped: true,\n})\nexport class LabelComponent {\n  /**\n   * The disabled option can be used to disable the component.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * The id of the input the label is attached to\n   */\n  @Prop() for: string;\n\n  render() {\n    return (\n      <label htmlFor={this.for} class={{ disabled: this.disabled }}>\n        <slot></slot>\n      </label>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/admiralty-read-more.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-7cb38aed.js');
 const index$1 = require('./index-c47043c1.js');
 
-const readMoreCss = ".visually-hidden.sc-admiralty-read-more:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-read-more{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-read-more{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-read-more{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-read-more{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-read-more{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-read-more{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-read-more{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-read-more{display:none}}section.expansion.sc-admiralty-read-more{padding:2px 0}section.expansion.sc-admiralty-read-more .expansion-content.sc-admiralty-read-more{display:none;max-height:0;overflow:visible;border-left:4px solid var(--admiralty-colour-info)}section.expansion.expanded.sc-admiralty-read-more .expansion-content.sc-admiralty-read-more{display:block;max-height:initial;padding:2px 5px}section.expansion.sc-admiralty-read-more button.sc-admiralty-read-more{background-color:transparent;border:none;white-space:unset;color:var(--admiralty-text-color);font-weight:unset;cursor:pointer;margin:8px 0px;padding:4px;align-items:baseline;text-align:left;text-decoration:underline;text-underline-offset:0.15em}section.expansion.sc-admiralty-read-more button.expanded.sc-admiralty-read-more span.sc-admiralty-read-more{font-weight:var(--admiralty-read-more-font-weight, var(--admiralty-font-weight-medium))}section.expansion.sc-admiralty-read-more button.sc-admiralty-read-more .expansion-heading-icon.sc-admiralty-read-more{margin-left:5px;margin-right:8px;vertical-align:top}section.expansion.sc-admiralty-read-more button.sc-admiralty-read-more:hover{text-decoration-thickness:0.15em}section.expansion.sc-admiralty-read-more button.sc-admiralty-read-more:focus{outline:3px solid transparent;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-text-colour);text-decoration:none}";
+const readMoreCss = ".visually-hidden.sc-admiralty-read-more:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-read-more{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-read-more{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-read-more{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-read-more{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-read-more{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-read-more{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-read-more{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-read-more{display:none}}section.expansion.sc-admiralty-read-more{padding:2px 0}section.expansion.sc-admiralty-read-more .expansion-content.sc-admiralty-read-more{display:none;max-height:0;overflow:visible;border-left:4px solid var(--admiralty-colour-info)}section.expansion.expanded.sc-admiralty-read-more .expansion-content.sc-admiralty-read-more{display:block;max-height:initial;padding:2px 5px 2px 33px}section.expansion.sc-admiralty-read-more button.sc-admiralty-read-more{background-color:transparent;border:none;white-space:unset;color:var(--admiralty-text-color);font-weight:unset;cursor:pointer;margin:8px 0px;padding:4px;align-items:baseline;text-align:left;text-decoration:underline;text-underline-offset:0.15em}section.expansion.sc-admiralty-read-more button.expanded.sc-admiralty-read-more span.sc-admiralty-read-more{font-weight:var(--admiralty-read-more-font-weight, var(--admiralty-font-weight-medium))}section.expansion.sc-admiralty-read-more button.sc-admiralty-read-more .expansion-heading-icon.sc-admiralty-read-more{margin-top:1px;margin-left:5px;margin-right:8px;vertical-align:top}section.expansion.sc-admiralty-read-more button.sc-admiralty-read-more:hover{text-decoration-thickness:0.15em}section.expansion.sc-admiralty-read-more button.sc-admiralty-read-more:focus{outline:3px solid transparent;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-text-colour);text-decoration:none}";
 const AdmiraltyReadMoreStyle0 = readMoreCss;
 
 let nextId = 0;

package/dist/cjs/admiralty-read-more.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-read-more.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,08EAA08E,CAAC;AAC/9E,gCAAe,WAAW;;ACG1B,IAAI,MAAM,GAAG,CAAC,CAAC;MAOF,iBAAiB;;;;QAa5B,eAAU,GAAW,uBAAuB,EAAE,MAAM,EAAE,CAAC;QAEvD,aAAQ,GAAW,GAAG,IAAI,CAAC,UAAU,SAAS,CAAC;QAC/C,cAAS,GAAW,GAAG,IAAI,CAAC,UAAU,UAAU,CAAC;;wBAV7B,KAAK;;IAYzB,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,QAAQ,GAAGA,mBAAW,GAAGC,oBAAY,CAAC;KACnD;IAED,QAAQ;QACN,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC3C;IAED,MAAM;QACJ,QACEC,sEACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAEDA,qEACE,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,SAAS,EAC7B,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAClC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAEjCA,6EAAgB,KAAK,EAAC,wBAAwB,eAAY,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAmB,EACxGA,qEAAO,IAAI,CAAC,OAAO,CAAQ,EAC3BA,mEAAM,KAAK,EAAC,iBAAiB,UAAI,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,MAAM,kBAAqB,CAC9E,EACTA,kEAAK,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,SAAS,qBAAmB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,IACvGA,oEAAa,CACT,CACE,EACV;KACH;;;;;;","names":["faArrowDown","faArrowRight","h"],"sources":["src/components/read-more/read-more.scss?tag=admiralty-read-more&encapsulation=scoped","src/components/read-more/read-more.tsx"],"sourcesContent":["@import 'read-more.vars.scss';\n\nsection.expansion {\n  padding: 2px 0;\n\n  .expansion-content {\n    display: none;\n    max-height: 0;\n    overflow: visible;\n    border-left: 4px solid $read-more-border-colour;\n  }\n  &.expanded .expansion-content {\n    display: block;\n    max-height: initial;\n    padding: 2px 5px;\n  }\n\n  button {\n    background-color: transparent;\n    border: none;\n    white-space: unset;\n    color: $read-more-text-colour;\n    font-weight: unset;\n    cursor: pointer;\n    margin: 8px 0px;\n    padding: 4px;\n    align-items: baseline;\n    text-align: left;\n    text-decoration: underline;\n    text-underline-offset: 0.15em;\n\n    &.expanded span {\n      font-weight: $read-more-font-weight;\n    }\n\n    .expansion-heading-icon {\n      margin-left: 5px;\n      margin-right: 8px;\n      vertical-align: top;\n    }\n\n    &:hover {\n      text-decoration-thickness: 0.15em;\n    }\n\n    &:focus {\n      @include focus-highlight;\n    }\n  }\n}\n","import { Component, EventEmitter, Prop, State, Event, h } from '@stencil/core';\nimport { faArrowDown, faArrowRight } from '@fortawesome/free-solid-svg-icons';\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core';\n\nlet nextId = 0;\n\n@Component({\n  tag: 'admiralty-read-more',\n  styleUrl: 'read-more.scss',\n  scoped: true,\n})\nexport class ReadMoreComponent {\n  /**\n   * The text to display in the heading of the readmore component.\n   */\n  @Prop() heading: string;\n\n  @State() expanded = false;\n\n  /**\n   * The event that is dispatched when the expanded status is toggled.\n   */\n  @Event() admiraltyToggled: EventEmitter<boolean>;\n\n  internalId: string = `admiralty-read-more-${++nextId}`;\n\n  headerId: string = `${this.internalId}-header`;\n  contentId: string = `${this.internalId}-content`;\n\n  get expansionIcon(): IconDefinition {\n    return this.expanded ? faArrowDown : faArrowRight;\n  }\n\n  onToggle() {\n    this.expanded = !this.expanded;\n    this.admiraltyToggled.emit(this.expanded);\n  }\n\n  render() {\n    return (\n      <section\n        class={{\n          expansion: true,\n          expanded: this.expanded,\n        }}\n      >\n        <button\n          id={this.headerId}\n          type=\"button\"\n          aria-expanded={this.expanded}\n          aria-controls={this.contentId}\n          class={{ expanded: this.expanded }}\n          onClick={this.onToggle.bind(this)}\n        >\n          <admiralty-icon class=\"expansion-heading-icon\" icon-name={this.expansionIcon.iconName}></admiralty-icon>\n          <span>{this.heading}</span>\n          <span class=\"visually-hidden\">, {this.expanded ? 'Hide' : 'Show'} this section</span>\n        </button>\n        <div class=\"expansion-content\" id={this.contentId} aria-labelledby={this.headerId} hidden={!this.expanded}>\n          <slot></slot>\n        </div>\n      </section>\n    );\n  }\n}\n"],"version":3}
+{"file":"admiralty-read-more.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,k+EAAk+E,CAAC;AACv/E,gCAAe,WAAW;;ACG1B,IAAI,MAAM,GAAG,CAAC,CAAC;MAOF,iBAAiB;;;;QAa5B,eAAU,GAAW,uBAAuB,EAAE,MAAM,EAAE,CAAC;QAEvD,aAAQ,GAAW,GAAG,IAAI,CAAC,UAAU,SAAS,CAAC;QAC/C,cAAS,GAAW,GAAG,IAAI,CAAC,UAAU,UAAU,CAAC;;wBAV7B,KAAK;;IAYzB,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,QAAQ,GAAGA,mBAAW,GAAGC,oBAAY,CAAC;KACnD;IAED,QAAQ;QACN,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC3C;IAED,MAAM;QACJ,QACEC,sEACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAEDA,qEACE,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,SAAS,EAC7B,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAClC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAEjCA,6EAAgB,KAAK,EAAC,wBAAwB,eAAY,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAmB,EACxGA,qEAAO,IAAI,CAAC,OAAO,CAAQ,EAC3BA,mEAAM,KAAK,EAAC,iBAAiB,UAAI,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,MAAM,kBAAqB,CAC9E,EACTA,kEAAK,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,SAAS,qBAAmB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,IACvGA,oEAAa,CACT,CACE,EACV;KACH;;;;;;","names":["faArrowDown","faArrowRight","h"],"sources":["src/components/read-more/read-more.scss?tag=admiralty-read-more&encapsulation=scoped","src/components/read-more/read-more.tsx"],"sourcesContent":["@import 'read-more.vars.scss';\n\nsection.expansion {\n  padding: 2px 0;\n\n  .expansion-content {\n    display: none;\n    max-height: 0;\n    overflow: visible;\n    border-left: 4px solid $read-more-border-colour;\n  }\n  &.expanded .expansion-content {\n    display: block;\n    max-height: initial;\n    padding: 2px 5px 2px 33px;\n  }\n\n  button {\n    background-color: transparent;\n    border: none;\n    white-space: unset;\n    color: $read-more-text-colour;\n    font-weight: unset;\n    cursor: pointer;\n    margin: 8px 0px;\n    padding: 4px;\n    align-items: baseline;\n    text-align: left;\n    text-decoration: underline;\n    text-underline-offset: 0.15em;\n\n    &.expanded span {\n      font-weight: $read-more-font-weight;\n    }\n\n    .expansion-heading-icon {\n      margin-top: 1px;\n      margin-left: 5px;\n      margin-right: 8px;\n      vertical-align: top;\n    }\n\n    &:hover {\n      text-decoration-thickness: 0.15em;\n    }\n\n    &:focus {\n      @include focus-highlight;\n    }\n  }\n}\n","import { Component, EventEmitter, Prop, State, Event, h } from '@stencil/core';\nimport { faArrowDown, faArrowRight } from '@fortawesome/free-solid-svg-icons';\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core';\n\nlet nextId = 0;\n\n@Component({\n  tag: 'admiralty-read-more',\n  styleUrl: 'read-more.scss',\n  scoped: true,\n})\nexport class ReadMoreComponent {\n  /**\n   * The text to display in the heading of the readmore component.\n   */\n  @Prop() heading: string;\n\n  @State() expanded = false;\n\n  /**\n   * The event that is dispatched when the expanded status is toggled.\n   */\n  @Event() admiraltyToggled: EventEmitter<boolean>;\n\n  internalId: string = `admiralty-read-more-${++nextId}`;\n\n  headerId: string = `${this.internalId}-header`;\n  contentId: string = `${this.internalId}-content`;\n\n  get expansionIcon(): IconDefinition {\n    return this.expanded ? faArrowDown : faArrowRight;\n  }\n\n  onToggle() {\n    this.expanded = !this.expanded;\n    this.admiraltyToggled.emit(this.expanded);\n  }\n\n  render() {\n    return (\n      <section\n        class={{\n          expansion: true,\n          expanded: this.expanded,\n        }}\n      >\n        <button\n          id={this.headerId}\n          type=\"button\"\n          aria-expanded={this.expanded}\n          aria-controls={this.contentId}\n          class={{ expanded: this.expanded }}\n          onClick={this.onToggle.bind(this)}\n        >\n          <admiralty-icon class=\"expansion-heading-icon\" icon-name={this.expansionIcon.iconName}></admiralty-icon>\n          <span>{this.heading}</span>\n          <span class=\"visually-hidden\">, {this.expanded ? 'Hide' : 'Show'} this section</span>\n        </button>\n        <div class=\"expansion-content\" id={this.contentId} aria-labelledby={this.headerId} hidden={!this.expanded}>\n          <slot></slot>\n        </div>\n      </section>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/admiralty-select.cjs.entry.js

@@ -57,7 +57,7 @@ const SelectComponent = class {
         const inputId = `${id}-input`;
         const hintId = `${id}-hint`;
         const errorId = `${id}-error`;
-        return (index.h(index.Host, { key: '2940535d0dc2cde6c73d878374d67b9248bb0e2e' }, index.h("div", { key: 'bc341f9cf4341229cd190147fd7ab8e829ac5461', class: `admiralty-select ${disabledClass}` }, index.h("admiralty-label", { key: '277a17ebe84bd53678e03dfae5bde4692c096ca7', disabled: this.disabled, for: inputId }, label), hint ? (index.h("admiralty-hint", { id: hintId, disabled: this.disabled }, hint)) : null, index.h("div", { key: 'd10c2daee9d07e628b8eb252f8aa3e78a04ab3d2', class: "select-wrapper", style: this.width ? { maxWidth: `${this.width}px` } : {} }, index.h("select", { key: 'abf6e39780b232efabe040dc61c215ce51959c5d', ref: select => (this.nativeInput = select), id: inputId, class: { 'admiralty-form-control': true, 'invalid': this.invalid, 'disabled': disabled }, "aria-disabled": disabled ? 'true' : 'false', "aria-label": label, onChange: event => this.handleSelect(event), onBlur: event => this.handleBlur(event), disabled: disabled, "aria-describedby": (this.hint ? hintId : '') + ' ' + (this.invalid ? errorId : '') }, index.h("slot", { key: '2469897c3306c41fbbabd82225786237a6756b17' })), index.h("admiralty-icon", { key: 'b937725ff36327ee945774320750f7e114cb146b', class: `select-down-icon ${disabledClass}`, "icon-name": "angle-down" })), index.h("admiralty-input-invalid", { key: 'ce8c5a8c68b953512a74655c9bbc9da6101cb085', id: errorId, style: Object.assign({}, (!(this.invalid && this.invalidMessage) ? { display: 'none' } : {})) }, this.invalidMessage))));
+        return (index.h(index.Host, { key: '4571979f6a2b25fed378acc1af80a18a5cfcbba0' }, index.h("div", { key: '8be89f4512071c5fc103be93f4ef1e04b8c2ccc7', class: `admiralty-select ${disabledClass}` }, index.h("admiralty-label", { key: 'd8dab5a97130de0a0379038b6a5541674bf5810f', disabled: this.disabled, for: inputId }, label), hint ? (index.h("admiralty-hint", { id: hintId, disabled: this.disabled }, hint)) : null, index.h("div", { key: 'ea42f4c04d7c6e9b0a14a913f7e85eed2f9fb733', class: "select-wrapper", style: this.width ? { maxWidth: `${this.width}px` } : {} }, index.h("select", { key: '09528928c2d1bf532f68e812927b6d5273f6ced6', ref: select => (this.nativeInput = select), id: inputId, class: { 'admiralty-form-control': true, 'invalid': this.invalid, 'disabled': disabled }, "aria-disabled": disabled ? 'true' : 'false', "aria-label": label, onChange: event => this.handleSelect(event), onBlur: event => this.handleBlur(event), disabled: disabled, "aria-describedby": (this.hint ? hintId : '') + ' ' + (this.invalid ? errorId : '') }, index.h("slot", { key: 'd568595ea010b0c699e8820a77a1ca5be3adc67f' })), index.h("admiralty-icon", { key: 'd0dd66d2145aec731670d9c15b7b0ad075d64420', class: `select-down-icon ${disabledClass}`, "icon-name": "angle-down" })), index.h("admiralty-input-invalid", { key: '19a2285b312615e138d0d4c4b85f5fec0c479689', id: errorId, style: Object.assign({}, (!(this.invalid && this.invalidMessage) ? { display: 'none' } : {})) }, this.invalidMessage))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/admiralty-select.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-select.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/select/select.scss?tag=admiralty-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["@import 'select.vars';\n.disabled {\n  color: $select-disabled-text-colour;\n}\n\n.select-wrapper {\n  position: relative;\n}\n\n.select-down-icon {\n  font-size: $select-icon-size;\n  font-weight: $select-text-weight;\n  pointer-events: none;\n  position: absolute;\n  right: 12px;\n  top: 12px;\n}\n\nselect {\n  appearance: none;\n  background-color: $select-background-colour;\n  border: 2px solid $select-border-colour;\n  box-sizing: border-box;\n  color: $select-text-colour;\n  font-size: $select-text-size;\n  line-height: 24px;\n  margin-bottom: 6px;\n  position: relative;\n  font-weight: $select-text-weight;\n  padding: 12px;\n  width: 100%;\n\n  &.invalid {\n    border-color: $select-error-border-colour;\n  }\n\n  &:focus-visible {\n    outline: 3px solid $select-focus-colour;\n    box-shadow: inset 0 0 0 2px $select-border-colour;\n  }\n\n  &.disabled {\n    border-color: $select-disabled-border-colour;\n  }\n}\n","import { Component, Event, Prop, Element, EventEmitter, h, Host, Watch } from '@stencil/core';\nimport { SelectChangeEventDetail } from './select.interface';\n\n@Component({\n  tag: 'admiralty-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class SelectComponent {\n  @Element() el?: HTMLElement;\n  private internalId = ++nextId;\n  private nativeInput?: HTMLSelectElement;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   * Whether to show that the select is in an invalid state.\n   */\n  @Prop() invalid: boolean = false;\n  /**\n   * The message to show when the select is invalid.\n   */\n  @Prop() invalidMessage: string = null;\n  /**\n   * The text that will be used as a field label.\n   */\n  @Prop() hint: string = null;\n  /**\n   * The text that will be used as a field label.\n   */\n  @Prop() label: string = 'Choose a colour';\n  /**\n   * The maximum width (px) for the input field.\n   */\n  @Prop() width?: number;\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() admiraltyChange: EventEmitter<SelectChangeEventDetail>;\n  /**\n   * Emitted when the component loses focus.\n   */\n  @Event() admiraltyBlur: EventEmitter<void>;\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  @Watch('value')\n  protected valueChanged() {\n    const nativeSelect = this.nativeInput;\n    const value = this.getValue();\n    if (nativeSelect && nativeSelect.value !== value) {\n      nativeSelect.value = value;\n    }\n    this.admiraltyChange.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  handleSelect(event: Event) {\n    const select = event.target as HTMLSelectElement | null;\n    if (select) {\n      this.value = select.value || '';\n    }\n  }\n\n  handleBlur(_event: FocusEvent): void {\n    this.admiraltyBlur.emit();\n  }\n\n  selectOption() {\n    const options = this.el.querySelectorAll('option');\n    options.forEach(option => {\n      option.selected = option.value === this.getValue();\n    });\n  }\n\n  componentWillRender() {\n    this.selectOption();\n  }\n\n  render() {\n    const { disabled, hint, label } = this;\n    const disabledClass = disabled ? 'disabled' : '';\n    const id = this.el.id != '' ? this.el.id : `admiralty-select-${this.internalId}`;\n    const inputId = `${id}-input`;\n    const hintId = `${id}-hint`;\n    const errorId = `${id}-error`;\n\n    return (\n      <Host>\n        <div class={`admiralty-select ${disabledClass}`}>\n          <admiralty-label disabled={this.disabled} for={inputId}>\n            {label}\n          </admiralty-label>\n          {hint ? (\n            <admiralty-hint id={hintId} disabled={this.disabled}>\n              {hint}\n            </admiralty-hint>\n          ) : null}\n          <div class=\"select-wrapper\" style={this.width ? { maxWidth: `${this.width}px` } : {}}>\n            <select\n              ref={select => (this.nativeInput = select)}\n              id={inputId}\n              class={{ 'admiralty-form-control': true, 'invalid': this.invalid, 'disabled': disabled }}\n              aria-disabled={disabled ? 'true' : 'false'}\n              aria-label={label}\n              onChange={event => this.handleSelect(event)}\n              onBlur={event => this.handleBlur(event)}\n              disabled={disabled}\n              aria-describedby={(this.hint ? hintId : '') + ' ' + (this.invalid ? errorId : '')}\n            >\n              <slot></slot>\n            </select>\n            <admiralty-icon class={`select-down-icon ${disabledClass}`} icon-name=\"angle-down\"></admiralty-icon>\n          </div>\n          <admiralty-input-invalid id={errorId} style={{ ...(!(this.invalid && this.invalidMessage) ? { display: 'none' } : {}) }}>\n            {this.invalidMessage}\n          </admiralty-input-invalid>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"],"version":3}
+{"file":"admiralty-select.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,+lEAA+lE,CAAC;AAClnE,8BAAe,SAAS;;MCOX,eAAe;;;;;QAElB,eAAU,GAAG,EAAE,MAAM,CAAC;wBAMF,KAAK;uBAIN,KAAK;8BAIC,IAAI;oBAId,IAAI;qBAIH,iBAAiB;;qBAiBiB,EAAE;;IAGlD,YAAY;QACpB,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC;QACtC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,IAAI,YAAY,IAAI,YAAY,CAAC,KAAK,KAAK,KAAK,EAAE;YAChD,YAAY,CAAC,KAAK,GAAG,KAAK,CAAC;SAC5B;QACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;KACpG;IAEO,QAAQ;QACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;KAC/F;IAED,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAkC,CAAC;QACxD,IAAI,MAAM,EAAE;YACV,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC;SACjC;KACF;IAED,UAAU,CAAC,MAAkB;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAC3B;IAED,YAAY;QACV,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QACnD,OAAO,CAAC,OAAO,CAAC,MAAM;YACpB,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,QAAQ,EAAE,CAAC;SACpD,CAAC,CAAC;KACJ;IAED,mBAAmB;QACjB,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACvC,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC;QACjD,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,GAAG,oBAAoB,IAAI,CAAC,UAAU,EAAE,CAAC;QACjF,MAAM,OAAO,GAAG,GAAG,EAAE,QAAQ,CAAC;QAC9B,MAAM,MAAM,GAAG,GAAG,EAAE,OAAO,CAAC;QAC5B,MAAM,OAAO,GAAG,GAAG,EAAE,QAAQ,CAAC;QAE9B,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,oBAAoB,aAAa,EAAE,IAC7CA,8EAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,OAAO,IACnD,KAAK,CACU,EACjB,IAAI,IACHA,4BAAgB,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAChD,IAAI,CACU,IACf,IAAI,EACRA,kEAAK,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,GAAG,EAAE,IAClFA,qEACE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,EAC1C,EAAE,EAAE,OAAO,EACX,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,mBACzE,QAAQ,GAAG,MAAM,GAAG,OAAO,gBAC9B,KAAK,EACjB,QAAQ,EAAE,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC3C,MAAM,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EACvC,QAAQ,EAAE,QAAQ,sBACA,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,EAAE,IAAI,GAAG,IAAI,IAAI,CAAC,OAAO,GAAG,OAAO,GAAG,EAAE,CAAC,IAEjFA,oEAAa,CACN,EACTA,6EAAgB,KAAK,EAAE,oBAAoB,aAAa,EAAE,eAAY,YAAY,GAAkB,CAChG,EACNA,sFAAyB,EAAE,EAAE,OAAO,EAAE,KAAK,qBAAQ,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MACjH,IAAI,CAAC,cAAc,CACI,CACtB,CACD,EACP;KACH;;;;;;AAGH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["src/components/select/select.scss?tag=admiralty-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["@import 'select.vars';\n.disabled {\n  color: $select-disabled-text-colour;\n}\n\n.select-wrapper {\n  position: relative;\n}\n\n.select-down-icon {\n  font-size: $select-icon-size;\n  font-weight: $select-text-weight;\n  pointer-events: none;\n  position: absolute;\n  right: 12px;\n  top: 12px;\n}\n\nselect {\n  appearance: none;\n  background-color: $select-background-colour;\n  border: 2px solid $select-border-colour;\n  box-sizing: border-box;\n  color: $select-text-colour;\n  font-size: $select-text-size;\n  line-height: 24px;\n  margin-bottom: 6px;\n  position: relative;\n  font-weight: $select-text-weight;\n  padding: 12px;\n  width: 100%;\n\n  &.invalid {\n    border-color: $select-error-border-colour;\n  }\n\n  &:focus-visible {\n    outline: 3px solid $select-focus-colour;\n    box-shadow: inset 0 0 0 2px $select-border-colour;\n  }\n\n  &.disabled {\n    border-color: $select-disabled-border-colour;\n  }\n}\n","import { Component, Event, Prop, Element, EventEmitter, h, Host, Watch } from '@stencil/core';\nimport { SelectChangeEventDetail } from './select.interface';\n\n@Component({\n  tag: 'admiralty-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class SelectComponent {\n  @Element() el?: HTMLElement;\n  private internalId = ++nextId;\n  private nativeInput?: HTMLSelectElement;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   * Whether to show that the select is in an invalid state.\n   */\n  @Prop() invalid: boolean = false;\n  /**\n   * The message to show when the select is invalid.\n   */\n  @Prop() invalidMessage: string = null;\n  /**\n   * The text that will be used as a field label.\n   */\n  @Prop() hint: string = null;\n  /**\n   * The text that will be used as a field label.\n   */\n  @Prop() label: string = 'Choose a colour';\n  /**\n   * The maximum width (px) for the input field.\n   */\n  @Prop() width?: number;\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() admiraltyChange: EventEmitter<SelectChangeEventDetail>;\n  /**\n   * Emitted when the component loses focus.\n   */\n  @Event() admiraltyBlur: EventEmitter<void>;\n\n  /**\n   * The value of the option selected as a string or number.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  @Watch('value')\n  protected valueChanged() {\n    const nativeSelect = this.nativeInput;\n    const value = this.getValue();\n    if (nativeSelect && nativeSelect.value !== value) {\n      nativeSelect.value = value;\n    }\n    this.admiraltyChange.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  handleSelect(event: Event) {\n    const select = event.target as HTMLSelectElement | null;\n    if (select) {\n      this.value = select.value || '';\n    }\n  }\n\n  handleBlur(_event: FocusEvent): void {\n    this.admiraltyBlur.emit();\n  }\n\n  selectOption() {\n    const options = this.el.querySelectorAll('option');\n    options.forEach(option => {\n      option.selected = option.value === this.getValue();\n    });\n  }\n\n  componentWillRender() {\n    this.selectOption();\n  }\n\n  render() {\n    const { disabled, hint, label } = this;\n    const disabledClass = disabled ? 'disabled' : '';\n    const id = this.el.id != '' ? this.el.id : `admiralty-select-${this.internalId}`;\n    const inputId = `${id}-input`;\n    const hintId = `${id}-hint`;\n    const errorId = `${id}-error`;\n\n    return (\n      <Host>\n        <div class={`admiralty-select ${disabledClass}`}>\n          <admiralty-label disabled={this.disabled} for={inputId}>\n            {label}\n          </admiralty-label>\n          {hint ? (\n            <admiralty-hint id={hintId} disabled={this.disabled}>\n              {hint}\n            </admiralty-hint>\n          ) : null}\n          <div class=\"select-wrapper\" style={this.width ? { maxWidth: `${this.width}px` } : {}}>\n            <select\n              ref={select => (this.nativeInput = select)}\n              id={inputId}\n              class={{ 'admiralty-form-control': true, 'invalid': this.invalid, 'disabled': disabled }}\n              aria-disabled={disabled ? 'true' : 'false'}\n              aria-label={label}\n              onChange={event => this.handleSelect(event)}\n              onBlur={event => this.handleBlur(event)}\n              disabled={disabled}\n              aria-describedby={(this.hint ? hintId : '') + ' ' + (this.invalid ? errorId : '')}\n            >\n              <slot></slot>\n            </select>\n            <admiralty-icon class={`select-down-icon ${disabledClass}`} icon-name=\"angle-down\"></admiralty-icon>\n          </div>\n          <admiralty-input-invalid id={errorId} style={{ ...(!(this.invalid && this.invalidMessage) ? { display: 'none' } : {}) }}>\n            {this.invalidMessage}\n          </admiralty-input-invalid>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"],"version":3}

package/dist/collection/components/checkbox/checkbox.css

@@ -100,6 +100,10 @@
 .form-control label.disabled {
   cursor: default;
   pointer-events: none;
+  color: var(--admiralty-disabled-text-colour);
+}
+.form-control label.disabled::before {
+  border-color: var(--admiralty-disabled-colour);
 }
 .form-control label::before, .form-control label::after {
   position: absolute;

package/dist/collection/components/hint/hint.css

@@ -69,5 +69,5 @@ p {
   font-weight: var(--admiralty-hint-font-weight, var(--admiralty-font-weight-normal));
 }
 p.disabled {
-  color: var(--admiralty-disabled-colour);
+  color: var(--admiralty-disabled-text-colour);
 }

package/dist/collection/components/label/label.css

@@ -68,5 +68,5 @@ label {
   font-weight: var(--admiralty-label-font-weight, var(--admiralty-font-weight-medium));
 }
 label.disabled {
-  color: var(--admiralty-disabled-colour);
+  color: var(--admiralty-disabled-text-colour);
 }

package/dist/collection/components/read-more/read-more.css

@@ -74,7 +74,7 @@ section.expansion .expansion-content {
 section.expansion.expanded .expansion-content {
   display: block;
   max-height: initial;
-  padding: 2px 5px;
+  padding: 2px 5px 2px 33px;
 }
 section.expansion button {
   background-color: transparent;
@@ -94,6 +94,7 @@ section.expansion button.expanded span {
   font-weight: var(--admiralty-read-more-font-weight, var(--admiralty-font-weight-medium));
 }
 section.expansion button .expansion-heading-icon {
+  margin-top: 1px;
   margin-left: 5px;
   margin-right: 8px;
   vertical-align: top;

package/dist/collection/components/select/select.js

@@ -46,7 +46,7 @@ export class SelectComponent {
         const inputId = `${id}-input`;
         const hintId = `${id}-hint`;
         const errorId = `${id}-error`;
-        return (h(Host, { key: '2940535d0dc2cde6c73d878374d67b9248bb0e2e' }, h("div", { key: 'bc341f9cf4341229cd190147fd7ab8e829ac5461', class: `admiralty-select ${disabledClass}` }, h("admiralty-label", { key: '277a17ebe84bd53678e03dfae5bde4692c096ca7', disabled: this.disabled, for: inputId }, label), hint ? (h("admiralty-hint", { id: hintId, disabled: this.disabled }, hint)) : null, h("div", { key: 'd10c2daee9d07e628b8eb252f8aa3e78a04ab3d2', class: "select-wrapper", style: this.width ? { maxWidth: `${this.width}px` } : {} }, h("select", { key: 'abf6e39780b232efabe040dc61c215ce51959c5d', ref: select => (this.nativeInput = select), id: inputId, class: { 'admiralty-form-control': true, 'invalid': this.invalid, 'disabled': disabled }, "aria-disabled": disabled ? 'true' : 'false', "aria-label": label, onChange: event => this.handleSelect(event), onBlur: event => this.handleBlur(event), disabled: disabled, "aria-describedby": (this.hint ? hintId : '') + ' ' + (this.invalid ? errorId : '') }, h("slot", { key: '2469897c3306c41fbbabd82225786237a6756b17' })), h("admiralty-icon", { key: 'b937725ff36327ee945774320750f7e114cb146b', class: `select-down-icon ${disabledClass}`, "icon-name": "angle-down" })), h("admiralty-input-invalid", { key: 'ce8c5a8c68b953512a74655c9bbc9da6101cb085', id: errorId, style: Object.assign({}, (!(this.invalid && this.invalidMessage) ? { display: 'none' } : {})) }, this.invalidMessage))));
+        return (h(Host, { key: '4571979f6a2b25fed378acc1af80a18a5cfcbba0' }, h("div", { key: '8be89f4512071c5fc103be93f4ef1e04b8c2ccc7', class: `admiralty-select ${disabledClass}` }, h("admiralty-label", { key: 'd8dab5a97130de0a0379038b6a5541674bf5810f', disabled: this.disabled, for: inputId }, label), hint ? (h("admiralty-hint", { id: hintId, disabled: this.disabled }, hint)) : null, h("div", { key: 'ea42f4c04d7c6e9b0a14a913f7e85eed2f9fb733', class: "select-wrapper", style: this.width ? { maxWidth: `${this.width}px` } : {} }, h("select", { key: '09528928c2d1bf532f68e812927b6d5273f6ced6', ref: select => (this.nativeInput = select), id: inputId, class: { 'admiralty-form-control': true, 'invalid': this.invalid, 'disabled': disabled }, "aria-disabled": disabled ? 'true' : 'false', "aria-label": label, onChange: event => this.handleSelect(event), onBlur: event => this.handleBlur(event), disabled: disabled, "aria-describedby": (this.hint ? hintId : '') + ' ' + (this.invalid ? errorId : '') }, h("slot", { key: 'd568595ea010b0c699e8820a77a1ca5be3adc67f' })), h("admiralty-icon", { key: 'd0dd66d2145aec731670d9c15b7b0ad075d64420', class: `select-down-icon ${disabledClass}`, "icon-name": "angle-down" })), h("admiralty-input-invalid", { key: '19a2285b312615e138d0d4c4b85f5fec0c479689', id: errorId, style: Object.assign({}, (!(this.invalid && this.invalidMessage) ? { display: 'none' } : {})) }, this.invalidMessage))));
     }
     static get is() { return "admiralty-select"; }
     static get encapsulation() { return "scoped"; }
@@ -181,7 +181,7 @@ export class SelectComponent {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The value of the input."
+                    "text": "The value of the option selected as a string or number."
                 },
                 "attribute": "value",
                 "reflect": false,

package/dist/collection/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, Prop, Element, EventEmitter, h, Host, Watch } from '@stencil/core';\nimport { SelectChangeEventDetail } from './select.interface';\n\n@Component({\n  tag: 'admiralty-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class SelectComponent {\n  @Element() el?: HTMLElement;\n  private internalId = ++nextId;\n  private nativeInput?: HTMLSelectElement;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   * Whether to show that the select is in an invalid state.\n   */\n  @Prop() invalid: boolean = false;\n  /**\n   * The message to show when the select is invalid.\n   */\n  @Prop() invalidMessage: string = null;\n  /**\n   * The text that will be used as a field label.\n   */\n  @Prop() hint: string = null;\n  /**\n   * The text that will be used as a field label.\n   */\n  @Prop() label: string = 'Choose a colour';\n  /**\n   * The maximum width (px) for the input field.\n   */\n  @Prop() width?: number;\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() admiraltyChange: EventEmitter<SelectChangeEventDetail>;\n  /**\n   * Emitted when the component loses focus.\n   */\n  @Event() admiraltyBlur: EventEmitter<void>;\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  @Watch('value')\n  protected valueChanged() {\n    const nativeSelect = this.nativeInput;\n    const value = this.getValue();\n    if (nativeSelect && nativeSelect.value !== value) {\n      nativeSelect.value = value;\n    }\n    this.admiraltyChange.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  handleSelect(event: Event) {\n    const select = event.target as HTMLSelectElement | null;\n    if (select) {\n      this.value = select.value || '';\n    }\n  }\n\n  handleBlur(_event: FocusEvent): void {\n    this.admiraltyBlur.emit();\n  }\n\n  selectOption() {\n    const options = this.el.querySelectorAll('option');\n    options.forEach(option => {\n      option.selected = option.value === this.getValue();\n    });\n  }\n\n  componentWillRender() {\n    this.selectOption();\n  }\n\n  render() {\n    const { disabled, hint, label } = this;\n    const disabledClass = disabled ? 'disabled' : '';\n    const id = this.el.id != '' ? this.el.id : `admiralty-select-${this.internalId}`;\n    const inputId = `${id}-input`;\n    const hintId = `${id}-hint`;\n    const errorId = `${id}-error`;\n\n    return (\n      <Host>\n        <div class={`admiralty-select ${disabledClass}`}>\n          <admiralty-label disabled={this.disabled} for={inputId}>\n            {label}\n          </admiralty-label>\n          {hint ? (\n            <admiralty-hint id={hintId} disabled={this.disabled}>\n              {hint}\n            </admiralty-hint>\n          ) : null}\n          <div class=\"select-wrapper\" style={this.width ? { maxWidth: `${this.width}px` } : {}}>\n            <select\n              ref={select => (this.nativeInput = select)}\n              id={inputId}\n              class={{ 'admiralty-form-control': true, 'invalid': this.invalid, 'disabled': disabled }}\n              aria-disabled={disabled ? 'true' : 'false'}\n              aria-label={label}\n              onChange={event => this.handleSelect(event)}\n              onBlur={event => this.handleBlur(event)}\n              disabled={disabled}\n              aria-describedby={(this.hint ? hintId : '') + ' ' + (this.invalid ? errorId : '')}\n            >\n              <slot></slot>\n            </select>\n            <admiralty-icon class={`select-down-icon ${disabledClass}`} icon-name=\"angle-down\"></admiralty-icon>\n          </div>\n          <admiralty-input-invalid id={errorId} style={{ ...(!(this.invalid && this.invalidMessage) ? { display: 'none' } : {}) }}>\n            {this.invalidMessage}\n          </admiralty-input-invalid>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"]}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, Prop, Element, EventEmitter, h, Host, Watch } from '@stencil/core';\nimport { SelectChangeEventDetail } from './select.interface';\n\n@Component({\n  tag: 'admiralty-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class SelectComponent {\n  @Element() el?: HTMLElement;\n  private internalId = ++nextId;\n  private nativeInput?: HTMLSelectElement;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   * Whether to show that the select is in an invalid state.\n   */\n  @Prop() invalid: boolean = false;\n  /**\n   * The message to show when the select is invalid.\n   */\n  @Prop() invalidMessage: string = null;\n  /**\n   * The text that will be used as a field label.\n   */\n  @Prop() hint: string = null;\n  /**\n   * The text that will be used as a field label.\n   */\n  @Prop() label: string = 'Choose a colour';\n  /**\n   * The maximum width (px) for the input field.\n   */\n  @Prop() width?: number;\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() admiraltyChange: EventEmitter<SelectChangeEventDetail>;\n  /**\n   * Emitted when the component loses focus.\n   */\n  @Event() admiraltyBlur: EventEmitter<void>;\n\n  /**\n   * The value of the option selected as a string or number.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  @Watch('value')\n  protected valueChanged() {\n    const nativeSelect = this.nativeInput;\n    const value = this.getValue();\n    if (nativeSelect && nativeSelect.value !== value) {\n      nativeSelect.value = value;\n    }\n    this.admiraltyChange.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  handleSelect(event: Event) {\n    const select = event.target as HTMLSelectElement | null;\n    if (select) {\n      this.value = select.value || '';\n    }\n  }\n\n  handleBlur(_event: FocusEvent): void {\n    this.admiraltyBlur.emit();\n  }\n\n  selectOption() {\n    const options = this.el.querySelectorAll('option');\n    options.forEach(option => {\n      option.selected = option.value === this.getValue();\n    });\n  }\n\n  componentWillRender() {\n    this.selectOption();\n  }\n\n  render() {\n    const { disabled, hint, label } = this;\n    const disabledClass = disabled ? 'disabled' : '';\n    const id = this.el.id != '' ? this.el.id : `admiralty-select-${this.internalId}`;\n    const inputId = `${id}-input`;\n    const hintId = `${id}-hint`;\n    const errorId = `${id}-error`;\n\n    return (\n      <Host>\n        <div class={`admiralty-select ${disabledClass}`}>\n          <admiralty-label disabled={this.disabled} for={inputId}>\n            {label}\n          </admiralty-label>\n          {hint ? (\n            <admiralty-hint id={hintId} disabled={this.disabled}>\n              {hint}\n            </admiralty-hint>\n          ) : null}\n          <div class=\"select-wrapper\" style={this.width ? { maxWidth: `${this.width}px` } : {}}>\n            <select\n              ref={select => (this.nativeInput = select)}\n              id={inputId}\n              class={{ 'admiralty-form-control': true, 'invalid': this.invalid, 'disabled': disabled }}\n              aria-disabled={disabled ? 'true' : 'false'}\n              aria-label={label}\n              onChange={event => this.handleSelect(event)}\n              onBlur={event => this.handleBlur(event)}\n              disabled={disabled}\n              aria-describedby={(this.hint ? hintId : '') + ' ' + (this.invalid ? errorId : '')}\n            >\n              <slot></slot>\n            </select>\n            <admiralty-icon class={`select-down-icon ${disabledClass}`} icon-name=\"angle-down\"></admiralty-icon>\n          </div>\n          <admiralty-input-invalid id={errorId} style={{ ...(!(this.invalid && this.invalidMessage) ? { display: 'none' } : {}) }}>\n            {this.invalidMessage}\n          </admiralty-input-invalid>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"]}

package/dist/components/admiralty-autocomplete.js

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h } from './p-1ea7ff0a.js';
-import { d as defineCustomElement$5 } from './p-0784d59e.js';
+import { d as defineCustomElement$5 } from './p-3db0c35d.js';
 import { d as defineCustomElement$4 } from './p-02f00ad8.js';
 import { d as defineCustomElement$3 } from './p-9e5c9e5e.js';
-import { d as defineCustomElement$2 } from './p-c19ae557.js';
+import { d as defineCustomElement$2 } from './p-cd880614.js';
 
 const watchForOptions = (containerEl, tagName, onChange) => {
     if (typeof MutationObserver === 'undefined') {

package/dist/components/admiralty-checkbox.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1ea7ff0a.js';
 
-const checkboxCss = ".visually-hidden.sc-admiralty-checkbox:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-checkbox{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-checkbox{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-checkbox{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-checkbox{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-checkbox{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-checkbox{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-checkbox{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-checkbox{display:none}}.form-control.sc-admiralty-checkbox{font-size:var(--admiralty-checkbox-font-size, var(--admiralty-font-size-0));font-weight:var(--admiralty-checkbox-font-weight, var(--admiralty-font-weight-normal));position:relative;display:inline-block}.form-control.sc-admiralty-checkbox input[type=checkbox].sc-admiralty-checkbox{box-sizing:border-box;opacity:0;position:absolute;top:0;left:0;padding:0;width:30px;height:30px;margin:0;z-index:1;cursor:pointer}.form-control.sc-admiralty-checkbox input[type=checkbox].sc-admiralty-checkbox:checked+label.sc-admiralty-checkbox::after{content:\"\"}.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox{position:relative;display:inline-block;padding-left:42px;margin-bottom:14px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;min-height:30px;line-height:30px}.form-control.sc-admiralty-checkbox label.disabled.sc-admiralty-checkbox{cursor:default;pointer-events:none}.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox::before,.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox::after{position:absolute;content:none;display:inline-block}.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox::before{content:\"\";height:26px;width:26px;border:2px solid var(--admiralty-colour-primary);left:0;top:0;background-color:var(--admiralty-colour-primary-contrast)}.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox::after{height:6px;width:13px;border-left:3px solid;border-bottom:3px solid;transform:rotate(-45deg);color:var(--admiralty-colour-primary);left:7px;top:8px}.form-control.sc-admiralty-checkbox input[type=checkbox].sc-admiralty-checkbox:focus+label.sc-admiralty-checkbox:before{outline-offset:unset;outline:3px solid var(--admiralty-focus-colour);box-shadow:var(--admiralty-colour-primary) inset 0 0 0 2px}.form-control.right-align.sc-admiralty-checkbox label.sc-admiralty-checkbox{padding-left:unset;padding-right:35px}.form-control.right-align.sc-admiralty-checkbox label.sc-admiralty-checkbox::before{left:unset;right:0}.form-control.right-align.sc-admiralty-checkbox label.sc-admiralty-checkbox::after{left:unset;right:6px}";
+const checkboxCss = ".visually-hidden.sc-admiralty-checkbox:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-checkbox{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-checkbox{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-checkbox{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-checkbox{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-checkbox{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-checkbox{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-checkbox{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-checkbox{display:none}}.form-control.sc-admiralty-checkbox{font-size:var(--admiralty-checkbox-font-size, var(--admiralty-font-size-0));font-weight:var(--admiralty-checkbox-font-weight, var(--admiralty-font-weight-normal));position:relative;display:inline-block}.form-control.sc-admiralty-checkbox input[type=checkbox].sc-admiralty-checkbox{box-sizing:border-box;opacity:0;position:absolute;top:0;left:0;padding:0;width:30px;height:30px;margin:0;z-index:1;cursor:pointer}.form-control.sc-admiralty-checkbox input[type=checkbox].sc-admiralty-checkbox:checked+label.sc-admiralty-checkbox::after{content:\"\"}.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox{position:relative;display:inline-block;padding-left:42px;margin-bottom:14px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;min-height:30px;line-height:30px}.form-control.sc-admiralty-checkbox label.disabled.sc-admiralty-checkbox{cursor:default;pointer-events:none;color:var(--admiralty-disabled-text-colour)}.form-control.sc-admiralty-checkbox label.disabled.sc-admiralty-checkbox::before{border-color:var(--admiralty-disabled-colour)}.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox::before,.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox::after{position:absolute;content:none;display:inline-block}.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox::before{content:\"\";height:26px;width:26px;border:2px solid var(--admiralty-colour-primary);left:0;top:0;background-color:var(--admiralty-colour-primary-contrast)}.form-control.sc-admiralty-checkbox label.sc-admiralty-checkbox::after{height:6px;width:13px;border-left:3px solid;border-bottom:3px solid;transform:rotate(-45deg);color:var(--admiralty-colour-primary);left:7px;top:8px}.form-control.sc-admiralty-checkbox input[type=checkbox].sc-admiralty-checkbox:focus+label.sc-admiralty-checkbox:before{outline-offset:unset;outline:3px solid var(--admiralty-focus-colour);box-shadow:var(--admiralty-colour-primary) inset 0 0 0 2px}.form-control.right-align.sc-admiralty-checkbox label.sc-admiralty-checkbox{padding-left:unset;padding-right:35px}.form-control.right-align.sc-admiralty-checkbox label.sc-admiralty-checkbox::before{left:unset;right:0}.form-control.right-align.sc-admiralty-checkbox label.sc-admiralty-checkbox::after{left:unset;right:6px}";
 const AdmiraltyCheckboxStyle0 = checkboxCss;
 
 const CheckboxComponent = /*@__PURE__*/ proxyCustomElement(class CheckboxComponent extends H {