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

package/dist/components/admiralty-checkbox.js.map

@@ -1 +1 @@
-{"file":"admiralty-checkbox.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,QACE,EAAC,IAAI,uDACH,2EAAkB,QAAQ,GAAG,MAAM,GAAG,IAAI,EACrC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE,IAChE,8DAAO,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,EAC1B,8DAAO,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,IAC1B,8EAAW,WAAW,IAAI,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,SAAS,CAAQ,CACrE,CACJ,CACD,EACP;KACH;;;;;;;;;;;;;;;;AAGH,IAAI,WAAW,GAAG,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;","names":[],"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.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,QACE,EAAC,IAAI,uDACH,2EAAkB,QAAQ,GAAG,MAAM,GAAG,IAAI,EACrC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE,IAChE,8DAAO,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,EAC1B,8DAAO,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,IAC1B,8EAAW,WAAW,IAAI,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,SAAS,CAAQ,CACrE,CACJ,CACD,EACP;KACH;;;;;;;;;;;;;;;;AAGH,IAAI,WAAW,GAAG,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;","names":[],"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/components/admiralty-hint.js

@@ -1,4 +1,4 @@
-import { H as HintComponent, d as defineCustomElement$1 } from './p-0784d59e.js';
+import { H as HintComponent, d as defineCustomElement$1 } from './p-3db0c35d.js';
 
 const AdmiraltyHint = HintComponent;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/admiralty-input.js

@@ -1,4 +1,4 @@
-import { I as InputComponent, d as defineCustomElement$1 } from './p-657e425d.js';
+import { I as InputComponent, d as defineCustomElement$1 } from './p-0418477e.js';
 
 const AdmiraltyInput = InputComponent;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/admiralty-label.js

@@ -1,4 +1,4 @@
-import { L as LabelComponent, d as defineCustomElement$1 } from './p-c19ae557.js';
+import { L as LabelComponent, d as defineCustomElement$1 } from './p-cd880614.js';
 
 const AdmiraltyLabel = LabelComponent;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/admiralty-progress-bar.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-1ea7ff0a.js';
-import { d as defineCustomElement$2 } from './p-c19ae557.js';
+import { d as defineCustomElement$2 } from './p-cd880614.js';
 
 const progressBarCss = ".visually-hidden.sc-admiralty-progress-bar: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-progress-bar{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-progress-bar{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-progress-bar{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-progress-bar{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-progress-bar{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-progress-bar{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-progress-bar{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-progress-bar{display:none}}progress.sc-admiralty-progress-bar{appearance:none;background:var(--admiralty-background-colour-tint);border:none;box-sizing:border-box;color:var(--admiralty-colour-primary);display:inline-block;font-size:var(--admiralty-progress-bar-font-size, var(--admiralty-font-size-0));flex:1;height:1em;width:100%}progress[value].error.sc-admiralty-progress-bar::-webkit-progress-value{background-color:var(--admiralty-colour-danger)}progress[value].error.sc-admiralty-progress-bar::-moz-progress-bar{background-color:var(--admiralty-colour-danger)}progress[value].sc-admiralty-progress-bar::-webkit-progress-value{background-color:var(--admiralty-colour-success)}progress[value].sc-admiralty-progress-bar::-moz-progress-bar{background-color:var(--admiralty-colour-success)}";
 const AdmiraltyProgressBarStyle0 = progressBarCss;

package/dist/components/admiralty-radio-group.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1ea7ff0a.js';
-import { d as defineCustomElement$4 } from './p-0784d59e.js';
+import { d as defineCustomElement$4 } from './p-3db0c35d.js';
 import { d as defineCustomElement$3 } from './p-02f00ad8.js';
 import { d as defineCustomElement$2 } from './p-9e5c9e5e.js';
 

package/dist/components/admiralty-read-more.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-1ea7ff0a.js';
 import { l as faArrowDown, m as faArrowRight, d as defineCustomElement$2 } from './p-02f00ad8.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/components/admiralty-read-more.js.map

@@ -1 +1 @@
-{"file":"admiralty-read-more.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,GAAG,WAAW,GAAG,YAAY,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,QACE,gEACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAED,+DACE,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,IAEjC,uEAAgB,KAAK,EAAC,wBAAwB,eAAY,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAmB,EACxG,+DAAO,IAAI,CAAC,OAAO,CAAQ,EAC3B,6DAAM,KAAK,EAAC,iBAAiB,UAAI,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,MAAM,kBAAqB,CAC9E,EACT,4DAAK,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,SAAS,qBAAmB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,IACvG,8DAAa,CACT,CACE,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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.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,GAAG,WAAW,GAAG,YAAY,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,QACE,gEACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAED,+DACE,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,IAEjC,uEAAgB,KAAK,EAAC,wBAAwB,eAAY,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAmB,EACxG,+DAAO,IAAI,CAAC,OAAO,CAAQ,EAC3B,6DAAM,KAAK,EAAC,iBAAiB,UAAI,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,MAAM,kBAAqB,CAC9E,EACT,4DAAK,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,SAAS,qBAAmB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,IACvG,8DAAa,CACT,CACE,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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/components/admiralty-select.js

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } 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 selectCss = ".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 AdmiraltySelectStyle0 = selectCss;
@@ -58,7 +58,7 @@ const SelectComponent = /*@__PURE__*/ proxyCustomElement(class SelectComponent e
         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))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/admiralty-select.js.map

@@ -1 +1 @@
-{"file":"admiralty-select.js","mappings":"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","names":[],"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.js","mappings":"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","names":[],"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/components/admiralty-textarea.js

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } 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 textareaCss = ".visually-hidden.sc-admiralty-textarea: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-textarea{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-textarea{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-textarea{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-textarea{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-textarea{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-textarea{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-textarea{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-textarea{display:none}}.text-area-container.sc-admiralty-textarea textarea.sc-admiralty-textarea{display:block;position:relative;width:100%;min-height:170px;border:2px solid var(--admiralty-text-colour);color:var(--admiralty-text-colour);padding:12px 18px;outline:none;resize:vertical;overflow:auto;box-sizing:border-box;vertical-align:top;font-weight:var(--admiralty-text-area-font-weight, var(--admiralty-font-weight-normal));line-height:var(--admiralty-line-height);background-color:var(--admiralty-background-colour)}.text-area-container.sc-admiralty-textarea textarea.sc-admiralty-textarea:focus-visible{outline:3px solid var(--admiralty-focus-colour);box-shadow:var(--admiralty-text-colour) inset 0 0 0 2px}.text-area-container.sc-admiralty-textarea textarea.invalid.sc-admiralty-textarea{border-color:var(--admiralty-colour-danger)}.text-area-container.sc-admiralty-textarea textarea.invalid.sc-admiralty-textarea:focus-visible{border-color:unset;outline:3px solid var(--admiralty-focus-colour)}.text-area-container.sc-admiralty-textarea textarea.disabled.sc-admiralty-textarea{color:var(--admiralty-disabled-colour);border-color:var(--admiralty-disabled-colour)}";
 const AdmiraltyTextareaStyle0 = textareaCss;

package/dist/components/admiralty-type-ahead.js

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, d as Host } from './p-1ea7ff0a.js';
 import { K as Keys } from './p-a4bd6904.js';
-import { d as defineCustomElement$6 } from './p-0784d59e.js';
+import { d as defineCustomElement$6 } from './p-3db0c35d.js';
 import { d as defineCustomElement$5 } from './p-02f00ad8.js';
-import { d as defineCustomElement$4 } from './p-657e425d.js';
+import { d as defineCustomElement$4 } from './p-0418477e.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 typeAheadCss = ".visually-hidden.sc-admiralty-type-ahead: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-type-ahead{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-type-ahead{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-type-ahead{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-type-ahead{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-type-ahead{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-type-ahead{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-type-ahead{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-type-ahead{display:none}}*.sc-admiralty-type-ahead{margin:0px;padding:0px}.text-input-wrap.sc-admiralty-type-ahead{height:auto !important}.filterTextInput.sc-admiralty-type-ahead{width:100%}.typeahead-list-container.sc-admiralty-type-ahead{position:relative}.typeahead-list-container.sc-admiralty-type-ahead .typeahead-list.sc-admiralty-type-ahead{position:absolute;left:0px;top:-24px;background-color:var(--admiralty-background-colour);width:100%;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);border:2px solid var(--admiralty-text-colour);border-top:none;box-sizing:border-box;max-height:180px;overflow-y:auto;z-index:1;list-style:none}.typeahead-list-container.sc-admiralty-type-ahead .typeahead-list.sc-admiralty-type-ahead li.sc-admiralty-type-ahead{cursor:pointer;transform:unset !important;padding:6px;min-height:24px;margin:0}.typeahead-list-container.sc-admiralty-type-ahead .typeahead-list.sc-admiralty-type-ahead li.sc-admiralty-type-ahead:before{content:none}.typeahead-list-container.sc-admiralty-type-ahead .typeahead-list.sc-admiralty-type-ahead li.highlighted.sc-admiralty-type-ahead{background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast)}";
 const AdmiraltyTypeAheadStyle0 = typeAheadCss;

package/dist/components/{p-657e425d.js → p-0418477e.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-1ea7ff0a.js';
-import { d as defineCustomElement$4 } from './p-0784d59e.js';
+import { d as defineCustomElement$4 } from './p-3db0c35d.js';
 import { d as defineCustomElement$3 } from './p-02f00ad8.js';
 import { d as defineCustomElement$2 } from './p-9e5c9e5e.js';
-import { d as defineCustomElement$1 } from './p-c19ae557.js';
+import { d as defineCustomElement$1 } from './p-cd880614.js';
 
 const inputCss = ".visually-hidden.sc-admiralty-input: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{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-input{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-input{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-input{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-input{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-input{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-input{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-input{display:none}}.text-input-container.sc-admiralty-input{display:flex;flex-direction:column}.text-input-container.sc-admiralty-input input.sc-admiralty-input{background-color:var(--admiralty-background-colour);border-color:var(--admiralty-text-colour);border-width:2px;border-style:solid;color:var(--admiralty-text-colour);font-size:var(--admiralty-input-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-input-font-weight, var(--admiralty-font-weight-normal));padding:12px}.text-input-container.sc-admiralty-input input.sc-admiralty-input:focus{outline-offset:unset;outline:3px solid var(--admiralty-focus-colour);box-shadow:var(--admiralty-text-colour) inset 0 0 0 2px}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input{border-color:var(--admiralty-colour-danger)}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input:focus-visible{border-color:unset;outline:3px solid var(--admiralty-focus-colour)}.text-input-container.sc-admiralty-input input.disabled.sc-admiralty-input{color:var(--admiralty-disabled-colour);border-color:var(--admiralty-disabled-colour);background:var(--admiralty-background-colour)}.text-input-container.sc-admiralty-input admiralty-input-invalid.sc-admiralty-input{margin-top:6px}";
 const AdmiraltyInputStyle0 = inputCss;
@@ -122,4 +122,4 @@ function defineCustomElement() {
 
 export { InputComponent as I, defineCustomElement as d };
 
-//# sourceMappingURL=p-657e425d.js.map
+//# sourceMappingURL=p-0418477e.js.map

package/dist/components/{p-657e425d.js.map → p-0418477e.js.map}

@@ -1 +1 @@
-{"file":"p-657e425d.js","mappings":"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","names":[],"sources":["src/components/input/input.scss?tag=admiralty-input&encapsulation=scoped","src/components/input/input.tsx"],"sourcesContent":["@import 'inputs.vars';\n\n.text-input-container {\n  display: flex;\n  flex-direction: column;\n\n  input {\n    background-color: $input-background-colour;\n    border-color: $input-border-colour;\n    border-width: 2px;\n    border-style: solid;\n    color: $input-text-colour;\n    font-size: $input-text-size;\n    line-height: 24px;\n    font-weight: $input-text-weight;\n\n    padding: 12px;\n\n    &:focus {\n      outline-offset: unset;\n      outline: 3px solid $input-focus-colour;\n      box-shadow: $input-border-colour inset 0 0 0 2px;\n    }\n\n    &.invalid {\n      border-color: $input-error-border-colour;\n\n      &:focus-visible {\n        border-color: unset;\n        outline: 3px solid $input-focus-colour;\n      }\n    }\n\n    &.disabled {\n      color: $input-disabled-text-colour;\n      border-color: $input-disabled-border-colour;\n      background: $input-background-colour;\n    }\n  }\n\n  admiralty-input-invalid {\n    margin-top: 6px;\n  }\n}\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/**\n * Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n */\n\n@Component({\n  tag: 'admiralty-input',\n  styleUrl: 'input.scss',\n  scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n  private internalId = ++nextId;\n  private nativeInput?: HTMLInputElement;\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string;\n\n  /**\n   * The label which will be used above the input to describe the input.\n   */\n  @Prop() label: string;\n\n  /**\n   * The hint which will be used under the label to describe the input.\n   */\n  @Prop() hint: string;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The input type, options are: text; number; date; time; email; password; tel; url\n   */\n  @Prop() type: 'text' | 'number' | 'date' | 'time' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n  /**\n   * The placeholder text to show in the input\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * The maximum width for the input field.\n   */\n  @Prop() width: number;\n\n  /**\n   * This dictates whether the input is required or not\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether to show the input in an invalid state\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the input is invalid\n   */\n  @Prop() invalidMessage: string;\n\n  /**\n   * Indicates whether the value of the control can be automatically completed by the browser.\n   */\n  @Prop() autocomplete: string = 'off';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() admiraltyInput: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Emitted when the input gains focus.\n   */\n  @Event() admiraltyFocus: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() admiraltyBlur: EventEmitter<FocusEvent>;\n\n  /**\n   * Update the native input element when the value changes\n   */\n\n  @Watch('value')\n  protected valueChanged() {\n    const nativeInput = this.nativeInput;\n    const value = this.getValue();\n    if (nativeInput && nativeInput.value !== value) {\n      nativeInput.value = value;\n    }\n    this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n  };\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  private onBlur = (ev: FocusEvent) => {\n    this.admiraltyBlur.emit(ev);\n  };\n\n  private onFocus = (ev: FocusEvent) => {\n    this.admiraltyFocus.emit(ev);\n  };\n\n  render() {\n    const value = this.getValue();\n    const id = this.el.id != '' ? this.el.id : `admiralty-input-${this.internalId}`;\n    const inputId = `${id}-input`;\n    const hintId = `${id}-hint`;\n    const errorId = `${id}-error`;\n\n    return (\n      <div class=\"text-input-container\">\n        {this.label ? (\n          <admiralty-label disabled={this.disabled} for={inputId}>\n            {this.label}\n          </admiralty-label>\n        ) : null}\n        {this.hint ? (\n          <admiralty-hint id={hintId} disabled={this.disabled}>\n            {this.hint}\n          </admiralty-hint>\n        ) : null}\n        <input\n          ref={input => (this.nativeInput = input)}\n          class={{ disabled: this.disabled, invalid: this.invalid }}\n          disabled={this.disabled}\n          id={inputId}\n          name={this.name}\n          type={this.type}\n          value={value}\n          onInput={this.onInput}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n          placeholder={this.placeholder}\n          autoComplete={this.autocomplete}\n          required={this.required}\n          style={{\n            maxWidth: this.width ? `${this.width}px` : null,\n          }}\n          aria-invalid={this.invalid ? 'true' : 'false'}\n          aria-describedby={(this.hint ? hintId : '') + ' ' + (this.invalid ? errorId : '')}\n        />\n        <admiralty-input-invalid id={errorId} style={{ ...(!(this.invalid && this.invalidMessage) ? { display: 'none' } : {}) }}>\n          {this.invalidMessage}\n        </admiralty-input-invalid>\n      </div>\n    );\n  }\n}\n\nlet nextId = 0;\n"],"version":3}
+{"file":"p-0418477e.js","mappings":"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","names":[],"sources":["src/components/input/input.scss?tag=admiralty-input&encapsulation=scoped","src/components/input/input.tsx"],"sourcesContent":["@import 'inputs.vars';\n\n.text-input-container {\n  display: flex;\n  flex-direction: column;\n\n  input {\n    background-color: $input-background-colour;\n    border-color: $input-border-colour;\n    border-width: 2px;\n    border-style: solid;\n    color: $input-text-colour;\n    font-size: $input-text-size;\n    line-height: 24px;\n    font-weight: $input-text-weight;\n\n    padding: 12px;\n\n    &:focus {\n      outline-offset: unset;\n      outline: 3px solid $input-focus-colour;\n      box-shadow: $input-border-colour inset 0 0 0 2px;\n    }\n\n    &.invalid {\n      border-color: $input-error-border-colour;\n\n      &:focus-visible {\n        border-color: unset;\n        outline: 3px solid $input-focus-colour;\n      }\n    }\n\n    &.disabled {\n      color: $input-disabled-text-colour;\n      border-color: $input-disabled-border-colour;\n      background: $input-background-colour;\n    }\n  }\n\n  admiralty-input-invalid {\n    margin-top: 6px;\n  }\n}\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/**\n * Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n */\n\n@Component({\n  tag: 'admiralty-input',\n  styleUrl: 'input.scss',\n  scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n  private internalId = ++nextId;\n  private nativeInput?: HTMLInputElement;\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string;\n\n  /**\n   * The label which will be used above the input to describe the input.\n   */\n  @Prop() label: string;\n\n  /**\n   * The hint which will be used under the label to describe the input.\n   */\n  @Prop() hint: string;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The input type, options are: text; number; date; time; email; password; tel; url\n   */\n  @Prop() type: 'text' | 'number' | 'date' | 'time' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n  /**\n   * The placeholder text to show in the input\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * The maximum width for the input field.\n   */\n  @Prop() width: number;\n\n  /**\n   * This dictates whether the input is required or not\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether to show the input in an invalid state\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the input is invalid\n   */\n  @Prop() invalidMessage: string;\n\n  /**\n   * Indicates whether the value of the control can be automatically completed by the browser.\n   */\n  @Prop() autocomplete: string = 'off';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() admiraltyInput: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Emitted when the input gains focus.\n   */\n  @Event() admiraltyFocus: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() admiraltyBlur: EventEmitter<FocusEvent>;\n\n  /**\n   * Update the native input element when the value changes\n   */\n\n  @Watch('value')\n  protected valueChanged() {\n    const nativeInput = this.nativeInput;\n    const value = this.getValue();\n    if (nativeInput && nativeInput.value !== value) {\n      nativeInput.value = value;\n    }\n    this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n  };\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  private onBlur = (ev: FocusEvent) => {\n    this.admiraltyBlur.emit(ev);\n  };\n\n  private onFocus = (ev: FocusEvent) => {\n    this.admiraltyFocus.emit(ev);\n  };\n\n  render() {\n    const value = this.getValue();\n    const id = this.el.id != '' ? this.el.id : `admiralty-input-${this.internalId}`;\n    const inputId = `${id}-input`;\n    const hintId = `${id}-hint`;\n    const errorId = `${id}-error`;\n\n    return (\n      <div class=\"text-input-container\">\n        {this.label ? (\n          <admiralty-label disabled={this.disabled} for={inputId}>\n            {this.label}\n          </admiralty-label>\n        ) : null}\n        {this.hint ? (\n          <admiralty-hint id={hintId} disabled={this.disabled}>\n            {this.hint}\n          </admiralty-hint>\n        ) : null}\n        <input\n          ref={input => (this.nativeInput = input)}\n          class={{ disabled: this.disabled, invalid: this.invalid }}\n          disabled={this.disabled}\n          id={inputId}\n          name={this.name}\n          type={this.type}\n          value={value}\n          onInput={this.onInput}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n          placeholder={this.placeholder}\n          autoComplete={this.autocomplete}\n          required={this.required}\n          style={{\n            maxWidth: this.width ? `${this.width}px` : null,\n          }}\n          aria-invalid={this.invalid ? 'true' : 'false'}\n          aria-describedby={(this.hint ? hintId : '') + ' ' + (this.invalid ? errorId : '')}\n        />\n        <admiralty-input-invalid id={errorId} style={{ ...(!(this.invalid && this.invalidMessage) ? { display: 'none' } : {}) }}>\n          {this.invalidMessage}\n        </admiralty-input-invalid>\n      </div>\n    );\n  }\n}\n\nlet nextId = 0;\n"],"version":3}

package/dist/components/{p-0784d59e.js → p-3db0c35d.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-1ea7ff0a.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 = /*@__PURE__*/ proxyCustomElement(class HintComponent extends H {
@@ -32,4 +32,4 @@ function defineCustomElement() {
 
 export { HintComponent as H, defineCustomElement as d };
 
-//# sourceMappingURL=p-0784d59e.js.map
+//# sourceMappingURL=p-3db0c35d.js.map

package/dist/components/{p-0784d59e.js.map → p-3db0c35d.js.map}

@@ -1 +1 @@
-{"file":"p-0784d59e.js","mappings":";;AAAA,MAAM,OAAO,GAAG,ksCAAksC,CAAC;AACntC,4BAAe,OAAO;;MCUT,aAAa;;;;;;IAMxB,MAAM;QACJ,QACE,0DAAG,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IACnC,8DAAa,CACX,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/hint/hint.scss?tag=admiralty-hint&encapsulation=scoped","src/components/hint/hint.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"],"version":3}
+{"file":"p-3db0c35d.js","mappings":";;AAAA,MAAM,OAAO,GAAG,usCAAusC,CAAC;AACxtC,4BAAe,OAAO;;MCUT,aAAa;;;;;;IAMxB,MAAM;QACJ,QACE,0DAAG,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IACnC,8DAAa,CACX,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/hint/hint.scss?tag=admiralty-hint&encapsulation=scoped","src/components/hint/hint.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"],"version":3}

package/dist/components/{p-c19ae557.js → p-cd880614.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-1ea7ff0a.js';
 
-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 = /*@__PURE__*/ proxyCustomElement(class LabelComponent extends H {
@@ -34,4 +34,4 @@ function defineCustomElement() {
 
 export { LabelComponent as L, defineCustomElement as d };
 
-//# sourceMappingURL=p-c19ae557.js.map
+//# sourceMappingURL=p-cd880614.js.map

package/dist/components/{p-c19ae557.js.map → p-cd880614.js.map}

@@ -1 +1 @@
-{"file":"p-c19ae557.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,gtCAAgtC,CAAC;AACluC,6BAAe,QAAQ;;MCUV,cAAc;;;;;;;IAWzB,MAAM;QACJ,QACE,8DAAO,OAAO,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC1D,8DAAa,CACP,EACR;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/label/label.scss?tag=admiralty-label&encapsulation=scoped","src/components/label/label.tsx"],"sourcesContent":["@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":"p-cd880614.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,qtCAAqtC,CAAC;AACvuC,6BAAe,QAAQ;;MCUV,cAAc;;;;;;;IAWzB,MAAM;QACJ,QACE,8DAAO,OAAO,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC1D,8DAAa,CACP,EACR;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/label/label.scss?tag=admiralty-label&encapsulation=scoped","src/components/label/label.tsx"],"sourcesContent":["@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/esm/admiralty-checkbox.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-04ede496.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/esm/admiralty-checkbox.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-checkbox.entry.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,QACE,EAAC,IAAI,uDACH,2EAAkB,QAAQ,GAAG,MAAM,GAAG,IAAI,EACrC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE,IAChE,8DAAO,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,EAC1B,8DAAO,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,IAC1B,8EAAW,WAAW,IAAI,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,SAAS,CAAQ,CACrE,CACJ,CACD,EACP;KACH;;;;;AAGH,IAAI,WAAW,GAAG,CAAC,CAAC;;;;;","names":[],"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.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,QACE,EAAC,IAAI,uDACH,2EAAkB,QAAQ,GAAG,MAAM,GAAG,IAAI,EACrC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE,IAChE,8DAAO,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,EAC1B,8DAAO,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,IAC1B,8EAAW,WAAW,IAAI,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,SAAS,CAAQ,CACrE,CACJ,CACD,EACP;KACH;;;;;AAGH,IAAI,WAAW,GAAG,CAAC,CAAC;;;;;","names":[],"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/esm/admiralty-hint_3.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host } from './index-04ede496.js';
 import { g as faExclamation } from './index-f8cc360f.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 {
@@ -28,7 +28,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/esm/admiralty-hint_3.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-hint.admiralty-input-invalid.admiralty-label.entry.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,ksCAAksC,CAAC;AACntC,4BAAe,OAAO;;MCUT,aAAa;;;;;IAMxB,MAAM;QACJ,QACE,0DAAG,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IACnC,8DAAa,CACX,EACJ;KACH;;;;ACvBH,MAAM,eAAe,GAAG,gyCAAgyC,CAAC;AACzzC,oCAAe,eAAe;;MCWjB,qBAAqB;;;;IAChC,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,oFAA2B,aAAa,CAAC,QAAQ,EAAE,KAAK,EAAC,YAAY,GAAkB,EACvF,4DACE,6DAAM,KAAK,EAAC,iBAAiB,aAAc,EAC3C,8DAAa,CACX,CACC,EACP;KACH;;;;ACvBH,MAAM,QAAQ,GAAG,gtCAAgtC,CAAC;AACluC,6BAAe,QAAQ;;MCUV,cAAc;;;;;;IAWzB,MAAM;QACJ,QACE,8DAAO,OAAO,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC1D,8DAAa,CACP,EACR;KACH;;;;;;","names":[],"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.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,usCAAusC,CAAC;AACxtC,4BAAe,OAAO;;MCUT,aAAa;;;;;IAMxB,MAAM;QACJ,QACE,0DAAG,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IACnC,8DAAa,CACX,EACJ;KACH;;;;ACvBH,MAAM,eAAe,GAAG,gyCAAgyC,CAAC;AACzzC,oCAAe,eAAe;;MCWjB,qBAAqB;;;;IAChC,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,oFAA2B,aAAa,CAAC,QAAQ,EAAE,KAAK,EAAC,YAAY,GAAkB,EACvF,4DACE,6DAAM,KAAK,EAAC,iBAAiB,aAAc,EAC3C,8DAAa,CACX,CACC,EACP;KACH;;;;ACvBH,MAAM,QAAQ,GAAG,qtCAAqtC,CAAC;AACvuC,6BAAe,QAAQ;;MCUV,cAAc;;;;;;IAWzB,MAAM;QACJ,QACE,8DAAO,OAAO,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC1D,8DAAa,CACP,EACR;KACH;;;;;;","names":[],"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/esm/admiralty-read-more.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h } from './index-04ede496.js';
 import { d as faArrowDown, e as faArrowRight } from './index-f8cc360f.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/esm/admiralty-read-more.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-read-more.entry.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,GAAG,WAAW,GAAG,YAAY,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,QACE,gEACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAED,+DACE,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,IAEjC,uEAAgB,KAAK,EAAC,wBAAwB,eAAY,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAmB,EACxG,+DAAO,IAAI,CAAC,OAAO,CAAQ,EAC3B,6DAAM,KAAK,EAAC,iBAAiB,UAAI,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,MAAM,kBAAqB,CAC9E,EACT,4DAAK,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,SAAS,qBAAmB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,IACvG,8DAAa,CACT,CACE,EACV;KACH;;;;;;","names":[],"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.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,GAAG,WAAW,GAAG,YAAY,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,QACE,gEACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAED,+DACE,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,IAEjC,uEAAgB,KAAK,EAAC,wBAAwB,eAAY,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAmB,EACxG,+DAAO,IAAI,CAAC,OAAO,CAAQ,EAC3B,6DAAM,KAAK,EAAC,iBAAiB,UAAI,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,MAAM,kBAAqB,CAC9E,EACT,4DAAK,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,SAAS,qBAAmB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,IACvG,8DAAa,CACT,CACE,EACV;KACH;;;;;;","names":[],"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/esm/admiralty-select.entry.js

@@ -53,7 +53,7 @@ const SelectComponent = class {
         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))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"admiralty-select.entry.js","mappings":"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","names":[],"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.js","mappings":"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","names":[],"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}