npm - @ukho/admiralty-core - Versions diffs - 5.2.0-next.5 → 5.2.0-next.7 - Mend

@ukho/admiralty-core 5.2.0-next.5 → 5.2.0-next.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (173) hide show

package/dist/esm/admiralty-radio.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-60c25452.js';
-const radioCss = ".visually-hidden.sc-admiralty-radio: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-radio{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-radio{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-radio{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-radio{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-radio{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-radio{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-radio{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-radio{display:none}}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio{appearance:none;border:2px solid var(--admiralty-colour-primary);border-radius:1rem;height:1.625rem;width:1.625rem;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-right:var(--admiralty-radio-input-margin-right, 18px)}.admiralty-radio.sc-admiralty-radio input.invalid.sc-admiralty-radio{border-color:var(--admiralty-colour-danger)}.admiralty-radio.sc-admiralty-radio input.invalid.sc-admiralty-radio:focus-visible{border-color:unset;outline:3px solid var(--admiralty-focus-colour)}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:checked:after{border-radius:100%;background-color:var(--admiralty-colour-primary);width:0.75rem;height:0.75rem;content:\" \"}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:disabled{border:2px solid var(--admiralty-disabled-colour)}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:focus{outline:4px solid var(--admiralty-focus-colour);outline-offset:0;border-width:3.5px}.admiralty-radio.sc-admiralty-radio label.sc-admiralty-radio{font-weight:var(--admiralty-radio-label-font-weight, var(--admiralty-font-weight-normal));position:relative;top:2px}.conditional.sc-admiralty-radio{margin:var(--admiralty-radio-conditional-margin, 10px var(--admiralty-spacing-0) var(--admiralty-spacing-0) 13px);padding-left:var(--admiralty-radio-conditional-padding-left, 30px);border-left:4px solid lightgrey}.conditional.sc-admiralty-radio:empty{margin:var(--admiralty-radio-conditional-margin-empty, var(--admiralty-spacing-0))}.conditional.unchecked.sc-admiralty-radio{display:none}";
+const radioCss = ".visually-hidden.sc-admiralty-radio: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-radio{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-radio{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-radio{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-radio{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-radio{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-radio{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-radio{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-radio{display:none}}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio{appearance:none;border:2px solid var(--admiralty-colour-primary);border-radius:1rem;height:1.625rem;width:1.625rem;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-right:var(--admiralty-radio-input-margin-right, 18px)}.admiralty-radio.sc-admiralty-radio input.invalid.sc-admiralty-radio{border-color:var(--admiralty-colour-danger)}.admiralty-radio.sc-admiralty-radio input.invalid.sc-admiralty-radio:focus-visible{border-color:unset;outline:3px solid var(--admiralty-focus-colour)}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:checked:after{border-radius:100%;background-color:var(--admiralty-colour-primary);width:0.75rem;height:0.75rem;content:\" \"}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:disabled{border:2px solid var(--admiralty-disabled-colour)}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:focus{border-color:var(--admiralty-focus-colour);border-width:3.5px}.admiralty-radio.sc-admiralty-radio label.sc-admiralty-radio{font-weight:var(--admiralty-radio-label-font-weight, var(--admiralty-font-weight-normal));position:relative;top:2px}.conditional.sc-admiralty-radio{margin:var(--admiralty-radio-conditional-margin, 10px var(--admiralty-spacing-0) var(--admiralty-spacing-0) 13px);padding-left:var(--admiralty-radio-conditional-padding-left, 30px);border-left:4px solid lightgrey}.conditional.sc-admiralty-radio:empty{margin:var(--admiralty-radio-conditional-margin-empty, var(--admiralty-spacing-0))}.conditional.unchecked.sc-admiralty-radio{display:none}";
 const AdmiraltyRadioStyle0 = radioCss;
 const RadioComponent = class {

package/dist/esm/admiralty-radio.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-radio.entry.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,~~0lFAA0lF~~,CAAC;~~AAC5mF~~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","names":[],"sources":["src/components/radio/radio.scss?tag=admiralty-radio&encapsulation=scoped","src/components/radio/radio.tsx"],"sourcesContent":["@import 'radio.vars';\n\n.admiralty-radio {\n input {\n appearance: none;\n border: 2px solid $radio-border-colour;\n border-radius: 1rem;\n height: 1.625rem;\n width: 1.625rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n margin-right: $radio-input-margin-right;\n\n &.invalid {\n border-color: $radio-invalid-border-colour;\n\n &:focus-visible {\n border-color: unset;\n outline: 3px solid $radio-focus-colour;\n }\n }\n\n &:checked:after {\n border-radius: 100%;\n background-color: $radio-checked-background-colour;\n width: 0.75rem;\n height: 0.75rem;\n content: ' ';\n }\n\n &:disabled {\n border: 2px solid $radio-disabled-border-colour;\n }\n\n &:focus {\n ~~outline~~: ~~4px solid~~ $radio-focus-colour;\n ~~outline-offset: 0;\n~~ border-width: 3.5px;\n }\n }\n label {\n font-weight: $radio-label-font-weight;\n position: relative;\n top: 2px;\n }\n}\n\n.conditional {\n margin: $radio-conditional-margin;\n padding-left: $radio-conditional-padding-left;\n border-left: 4px solid lightgrey;\n &:empty {\n margin: $radio-conditional-margin-empty;\n }\n &.unchecked {\n display: none;\n }\n}\n","import { Element, Component, Event, h, Prop, Watch, Host, State, Method, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'admiralty-radio',\n styleUrl: 'radio.scss',\n scoped: true,\n})\nexport class RadioComponent {\n private internalId = ++radioButtonIds;\n private nativeInput!: HTMLInputElement;\n private radioGroup: HTMLAdmiraltyRadioGroupElement \| null = null;\n\n @Element() el!: HTMLElement;\n\n /*\n The tabindex of the radio button.\n * @internal\n /\n @State() buttonTabindex = -1;\n\n /\n The name of the radio button for use on selection within a radio group\n /\n @Prop() name: string;\n /\n The value of the radio button for use on selection within a radio group\n /\n @Prop({ mutable: true }) value: string \| null;\n /\n Determines whether the radio button is disabled. A button in disabled state will not fire click output events.\n /\n @Prop() disabled?: boolean = false;\n\n /\n Determines whether the radio button is selected (or checked)\n /\n @Prop({ mutable: true }) checked?: boolean = false;\n\n /\n Determines whether to add the invalid stying to the radio button\n /\n @Prop() invalid: boolean = false;\n\n /\n Emitted when the radio button gains focus.\n /\n @Event() admiraltyFocus!: EventEmitter<void>;\n\n /\n Emitted when the radio button loses focus.\n /\n @Event() admiraltyBlur!: EventEmitter<void>;\n\n /\n Emitted when the radio is selected\n /\n @Event() admiraltyChange!: EventEmitter<void>;\n\n @Watch('value')\n valueChanged() {\n /\n The new value of the radio may\n * match the radio group's value,\n * so we see if it should be checked.\n /\n this.updateState();\n }\n\n connectedCallback() {\n if (this.value === undefined) {\n // radio buttons should always be used with a value\n this.value = `admiralty-radio-${this.internalId}`;\n }\n const radioGroup = (this.radioGroup = this.el.closest('admiralty-radio-group'));\n\n if (radioGroup) {\n this.updateState();\n radioGroup.addEventListener('admiraltyChange', this.updateState);\n }\n }\n\n disconnectedCallback() {\n const radioGroup = this.radioGroup;\n if (radioGroup) {\n radioGroup.removeEventListener('admiraltyChange', this.updateState);\n this.radioGroup = null;\n }\n }\n\n /* @internal */\n @Method()\n async setButtonTabindex(value: number) {\n this.buttonTabindex = value;\n }\n\n private updateState = () => {\n if (this.radioGroup) {\n this.checked = this.radioGroup.value === this.value;\n if (this.nativeInput && this.checked) {\n this.nativeInput.focus();\n }\n }\n };\n\n private onClick = () => {\n this.checked = this.nativeInput.checked;\n };\n\n private onFocus = () => {\n this.admiraltyFocus.emit();\n };\n\n private onBlur = () => {\n this.admiraltyBlur.emit();\n };\n\n render() {\n const { buttonTabindex, checked, disabled, name, value } = this;\n const id = this.el.id != '' ? this.el.id : `admiralty-radio-${this.internalId}`;\n const inputId = `${id}-input`;\n return (\n <Host>\n <div class={{ 'admiralty-radio': true, 'checked': checked }}>\n <input\n class={{ 'invalid': this.invalid, 'admiralty-radio': true }}\n aria-checked={`${checked}`}\n aria-hidden={disabled ? 'true' : null}\n aria-labelledby={inputId}\n id={inputId}\n name={name}\n tabindex={buttonTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n type=\"radio\"\n value={value}\n checked={checked}\n disabled={disabled ? true : null}\n ref={nativeEl => (this.nativeInput = nativeEl as HTMLInputElement)}\n />\n <label htmlFor={inputId}>\n <slot />\n </label>\n </div>\n <div class={{ conditional: true, checked: checked, unchecked: !checked }}>\n <slot name=\"conditional\"></slot>\n </div>\n </Host>\n );\n }\n}\n\nlet radioButtonIds = 0;\n"],"version":3}
1	+ {"file":"admiralty-radio.entry.js","mappings":"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","names":[],"sources":["src/components/radio/radio.scss?tag=admiralty-radio&encapsulation=scoped","src/components/radio/radio.tsx"],"sourcesContent":["@import 'radio.vars';\n\n.admiralty-radio {\n input {\n appearance: none;\n border: 2px solid $radio-border-colour;\n border-radius: 1rem;\n height: 1.625rem;\n width: 1.625rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n margin-right: $radio-input-margin-right;\n\n &.invalid {\n border-color: $radio-invalid-border-colour;\n\n &:focus-visible {\n border-color: unset;\n outline: 3px solid $radio-focus-colour;\n }\n }\n\n &:checked:after {\n border-radius: 100%;\n background-color: $radio-checked-background-colour;\n width: 0.75rem;\n height: 0.75rem;\n content: ' ';\n }\n\n &:disabled {\n border: 2px solid $radio-disabled-border-colour;\n }\n\n &:focus {\n border-color: $radio-focus-colour;\n border-width: 3.5px;\n }\n }\n label {\n font-weight: $radio-label-font-weight;\n position: relative;\n top: 2px;\n }\n}\n\n.conditional {\n margin: $radio-conditional-margin;\n padding-left: $radio-conditional-padding-left;\n border-left: 4px solid lightgrey;\n &:empty {\n margin: $radio-conditional-margin-empty;\n }\n &.unchecked {\n display: none;\n }\n}\n","import { Element, Component, Event, h, Prop, Watch, Host, State, Method, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'admiralty-radio',\n styleUrl: 'radio.scss',\n scoped: true,\n})\nexport class RadioComponent {\n private internalId = ++radioButtonIds;\n private nativeInput!: HTMLInputElement;\n private radioGroup: HTMLAdmiraltyRadioGroupElement \| null = null;\n\n @Element() el!: HTMLElement;\n\n /*\n The tabindex of the radio button.\n * @internal\n /\n @State() buttonTabindex = -1;\n\n /\n The name of the radio button for use on selection within a radio group\n /\n @Prop() name: string;\n /\n The value of the radio button for use on selection within a radio group\n /\n @Prop({ mutable: true }) value: string \| null;\n /\n Determines whether the radio button is disabled. A button in disabled state will not fire click output events.\n /\n @Prop() disabled?: boolean = false;\n\n /\n Determines whether the radio button is selected (or checked)\n /\n @Prop({ mutable: true }) checked?: boolean = false;\n\n /\n Determines whether to add the invalid stying to the radio button\n /\n @Prop() invalid: boolean = false;\n\n /\n Emitted when the radio button gains focus.\n /\n @Event() admiraltyFocus!: EventEmitter<void>;\n\n /\n Emitted when the radio button loses focus.\n /\n @Event() admiraltyBlur!: EventEmitter<void>;\n\n /\n Emitted when the radio is selected\n /\n @Event() admiraltyChange!: EventEmitter<void>;\n\n @Watch('value')\n valueChanged() {\n /\n The new value of the radio may\n * match the radio group's value,\n * so we see if it should be checked.\n /\n this.updateState();\n }\n\n connectedCallback() {\n if (this.value === undefined) {\n // radio buttons should always be used with a value\n this.value = `admiralty-radio-${this.internalId}`;\n }\n const radioGroup = (this.radioGroup = this.el.closest('admiralty-radio-group'));\n\n if (radioGroup) {\n this.updateState();\n radioGroup.addEventListener('admiraltyChange', this.updateState);\n }\n }\n\n disconnectedCallback() {\n const radioGroup = this.radioGroup;\n if (radioGroup) {\n radioGroup.removeEventListener('admiraltyChange', this.updateState);\n this.radioGroup = null;\n }\n }\n\n /* @internal */\n @Method()\n async setButtonTabindex(value: number) {\n this.buttonTabindex = value;\n }\n\n private updateState = () => {\n if (this.radioGroup) {\n this.checked = this.radioGroup.value === this.value;\n if (this.nativeInput && this.checked) {\n this.nativeInput.focus();\n }\n }\n };\n\n private onClick = () => {\n this.checked = this.nativeInput.checked;\n };\n\n private onFocus = () => {\n this.admiraltyFocus.emit();\n };\n\n private onBlur = () => {\n this.admiraltyBlur.emit();\n };\n\n render() {\n const { buttonTabindex, checked, disabled, name, value } = this;\n const id = this.el.id != '' ? this.el.id : `admiralty-radio-${this.internalId}`;\n const inputId = `${id}-input`;\n return (\n <Host>\n <div class={{ 'admiralty-radio': true, 'checked': checked }}>\n <input\n class={{ 'invalid': this.invalid, 'admiralty-radio': true }}\n aria-checked={`${checked}`}\n aria-hidden={disabled ? 'true' : null}\n aria-labelledby={inputId}\n id={inputId}\n name={name}\n tabindex={buttonTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n type=\"radio\"\n value={value}\n checked={checked}\n disabled={disabled ? true : null}\n ref={nativeEl => (this.nativeInput = nativeEl as HTMLInputElement)}\n />\n <label htmlFor={inputId}>\n <slot />\n </label>\n </div>\n <div class={{ conditional: true, checked: checked, unchecked: !checked }}>\n <slot name=\"conditional\"></slot>\n </div>\n </Host>\n );\n }\n}\n\nlet radioButtonIds = 0;\n"],"version":3}

package/dist/esm/admiralty-read-more.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-60c25452.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:var(--admiralty-read-more-padding, 2px var(--admiralty-spacing-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:var(--admiralty-read-more-expanded-content-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:var(--admiralty-read-more-button-margin, var(--admiralty-spacing-2) var(--admiralty-spacing-0));padding:var(--admiralty-read-more-button-padding, var(--admiralty-spacing-1));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:var(--admiralty-read-more-expansion-heading-icon-margin, 1px var(--admiralty-spacing-2) 1px 5px);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:var(--admiralty-read-more-padding, 2px var(--admiralty-spacing-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:var(--admiralty-read-more-expanded-content-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:var(--admiralty-read-more-button-margin, var(--admiralty-spacing-2) var(--admiralty-spacing-0));padding:var(--admiralty-read-more-button-padding, var(--admiralty-spacing-1));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:var(--admiralty-read-more-expansion-heading-icon-margin, 1px var(--admiralty-spacing-2) 1px 5px);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-focus-contrast);background-color:var(--admiralty-focus-colour);box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-focus-contrast);text-decoration:none}";
 const AdmiraltyReadMoreStyle0 = readMoreCss;
 let nextId = 0;

package/dist/esm/admiralty-read-more.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-read-more.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,~~syFAAsyF~~,CAAC;~~AAC3zF~~,gCAAe,WAAW;;ACC1B,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,wBAAwB,GAAG,uBAAuB,CAAC;KAC3E;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,EAAC,IAAI,EAAE,IAAI,CAAC,aAAa,GAAmB,EAC1F,+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: $read-more-padding;\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: $read-more-expanded-content-padding;\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: $read-more-button-margin;\n padding: $read-more-button-padding;\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: $read-more-button-expansion-heading-icon-margin;\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';\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(): string {\n return this.expanded ? 'arrow-downward-rounded' : 'arrow-forward-rounded';\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\" name={this.expansionIcon}></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}
1	+ {"file":"admiralty-read-more.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,4yFAA4yF,CAAC;AACj0F,gCAAe,WAAW;;ACC1B,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,wBAAwB,GAAG,uBAAuB,CAAC;KAC3E;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,EAAC,IAAI,EAAE,IAAI,CAAC,aAAa,GAAmB,EAC1F,+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: $read-more-padding;\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: $read-more-expanded-content-padding;\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: $read-more-button-margin;\n padding: $read-more-button-padding;\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: $read-more-button-expansion-heading-icon-margin;\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';\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(): string {\n return this.expanded ? 'arrow-downward-rounded' : 'arrow-forward-rounded';\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\" name={this.expansionIcon}></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-tab-group.entry.js CHANGED Viewed

@@ -13,7 +13,7 @@ var Keys;
     Keys["SPACE"] = " ";
 })(Keys || (Keys = {}));
-const tabGroupCss = ".visually-hidden.sc-admiralty-tab-group: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-tab-group{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-tab-group{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-tab-group{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-tab-group{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-tab-group{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-tab-group{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-tab-group{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-tab-group{display:none}}.tab-group-headers.sc-admiralty-tab-group{width:100%}hr.sc-admiralty-tab-group{width:100%;height:2px;margin:var(--admiralty-tab-group-horizontal-rule-margin, 6px var(--admiralty-spacing-0));background-color:var(--admiralty-colour-light)}.headers.sc-admiralty-tab-group{overflow-x:auto;white-space:nowrap;display:flex;flex-wrap:wrap}.headers.sc-admiralty-tab-group .heading.sc-admiralty-tab-group{cursor:pointer;padding:var(--admiralty-tab-group-heading-padding, 10px);height:42px;max-width:fit-content;box-sizing:border-box;user-select:none;text-align:center;text-decoration:none;color:var(--admiralty-colour-primary);background-color:unset;font-weight:var(--admiralty-tab-group-font-weight, var(--admiralty-font-weight-medium));font-size:var(--admiralty-tab-group-font-size, var(--admiralty-font-size-0));margin-left:var(--admiralty-tab-group-heading-margin-left, var(--admiralty-spacing-1))}.headers.sc-admiralty-tab-group .heading.sc-admiralty-tab-group:first-child{margin-left:var(--admiralty-tab-group-heading-first-child-margin-left, var(--admiralty-spacing-0))}@media (max-width: 1023px){.headers.sc-admiralty-tab-group .heading.sc-admiralty-tab-group{font-size:var(--admiralty-tab-group-not-desktop-font-size, var(--admiralty-font-size--1));line-height:18px;padding:var(--admiralty-tab-group-heading-not-desktop-padding, var(--admiralty-spacing-2));height:unset;width:unset}}.headers.sc-admiralty-tab-group .heading.sc-admiralty-tab-group:focus-visible{box-shadow:var(--admiralty-focus-colour) inset 0 0 0 2px}.headers.sc-admiralty-tab-group .heading.sc-admiralty-tab-group:focus,.headers.sc-admiralty-tab-group .heading.active.sc-admiralty-tab-group: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;box-shadow:0px -4px var(--admiralty-text-colour) inset}.headers.sc-admiralty-tab-group .heading.sc-admiralty-tab-group:hover{background-color:var(--admiralty-hover-background-colour);color:var(--admiralty-colour-primary);box-shadow:unset}.headers.sc-admiralty-tab-group .heading.active.sc-admiralty-tab-group{background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast)}";
+const tabGroupCss = ".visually-hidden.sc-admiralty-tab-group: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-tab-group{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-tab-group{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-tab-group{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-tab-group{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-tab-group{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-tab-group{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-tab-group{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-tab-group{display:none}}.tab-group-headers.sc-admiralty-tab-group{width:100%}hr.sc-admiralty-tab-group{width:100%;height:2px;margin:var(--admiralty-tab-group-horizontal-rule-margin, 6px var(--admiralty-spacing-0));background-color:var(--admiralty-colour-light)}.headers.sc-admiralty-tab-group{overflow-x:auto;white-space:nowrap;display:flex;flex-wrap:wrap}.headers.sc-admiralty-tab-group .heading.sc-admiralty-tab-group{cursor:pointer;padding:var(--admiralty-tab-group-heading-padding, 10px);height:42px;max-width:fit-content;box-sizing:border-box;user-select:none;text-align:center;text-decoration:none;color:var(--admiralty-colour-primary);background-color:unset;font-weight:var(--admiralty-tab-group-font-weight, var(--admiralty-font-weight-medium));font-size:var(--admiralty-tab-group-font-size, var(--admiralty-font-size-0));margin-left:var(--admiralty-tab-group-heading-margin-left, var(--admiralty-spacing-1))}.headers.sc-admiralty-tab-group .heading.sc-admiralty-tab-group:first-child{margin-left:var(--admiralty-tab-group-heading-first-child-margin-left, var(--admiralty-spacing-0))}@media (max-width: 1023px){.headers.sc-admiralty-tab-group .heading.sc-admiralty-tab-group{font-size:var(--admiralty-tab-group-not-desktop-font-size, var(--admiralty-font-size--1));line-height:18px;padding:var(--admiralty-tab-group-heading-not-desktop-padding, var(--admiralty-spacing-2));height:unset;width:unset}}.headers.sc-admiralty-tab-group .heading.sc-admiralty-tab-group:focus-visible{box-shadow:var(--admiralty-focus-colour) inset 0 0 0 2px}.headers.sc-admiralty-tab-group .heading.sc-admiralty-tab-group:focus,.headers.sc-admiralty-tab-group .heading.active.sc-admiralty-tab-group:focus{outline:3px solid transparent;color:var(--admiralty-focus-contrast);background-color:var(--admiralty-focus-colour);box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-focus-contrast);text-decoration:none;box-shadow:0px -4px var(--admiralty-text-colour) inset}.headers.sc-admiralty-tab-group .heading.sc-admiralty-tab-group:hover{background-color:var(--admiralty-hover-background-colour);color:var(--admiralty-colour-primary);box-shadow:unset}.headers.sc-admiralty-tab-group .heading.active.sc-admiralty-tab-group{background-color:var(--tab-group-active-background-colour);color:var(--admiralty-colour-secondary-contrast);box-shadow:0px -4px var(--tab-group-active-shadow-colour) inset}";
 const AdmiraltyTabGroupStyle0 = tabGroupCss;
 let nextId = 0;

package/dist/esm/admiralty-tab-group.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-tab-group.entry.js","mappings":"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","names":[],"sources":["src/components/Keys.ts","src/components/tab-group/tab-group.scss?tag=admiralty-tab-group&encapsulation=scoped","src/components/tab-group/tab-group.tsx"],"sourcesContent":["export enum Keys {\n UP_ARROW = 'ArrowUp',\n DOWN_ARROW = 'ArrowDown',\n LEFT_ARROW = 'ArrowLeft',\n RIGHT_ARROW = 'ArrowRight',\n ENTER = 'Enter',\n TAB = 'Tab',\n HOME = 'Home',\n END = 'End',\n SPACE = ' '\n}\n","@import 'tab-group.vars';\n\n.tab-group-headers {\n width: 100%;\n}\n\nhr {\n width: 100%;\n height: 2px;\n margin: $tab-group-horizontal-rule-margin;\n background-color: $tab-group-separator-colour;\n}\n\n.headers {\n overflow-x: auto;\n white-space: nowrap;\n display: flex;\n flex-wrap: wrap;\n\n .heading {\n cursor: pointer;\n padding: $tab-group-heading-padding;\n height: 42px;\n max-width: fit-content;\n box-sizing: border-box;\n user-select: none;\n\n text-align: center;\n text-decoration: none;\n color: $tab-group-heading-text-colour;\n background-color: unset;\n font-weight: $tab-group-heading-text-weight;\n font-size: $tab-group-heading-text-font;\n margin-left: $tab-group-heading-margin-left;\n\n &:first-child {\n margin-left: $tab-group-heading-first-child-margin-left;\n }\n\n @include not-desktop {\n font-size: $tab-group-heading-not-desktop-text-font;\n line-height: 18px;\n padding: $tab-group-heading-not-desktop-padding;\n height: unset;\n width: unset;\n }\n\n &:focus-visible {\n box-shadow: $tab-group-focus-colour inset 0 0 0 2px;\n }\n\n &:focus,\n &.active:focus {\n @include focus-highlight;\n box-shadow: 0px -4px $tab-group-focus-text-colour inset;\n }\n\n &:hover {\n background-color: $tab-group-heading-hover-background-colour;\n color: $tab-group-heading-text-colour;\n box-shadow: unset;\n }\n\n &.active {\n background-color: $tab-group-active-background-colour;\n color: $tab-group-active-text-colour;\n }\n }\n}\n","import { Component, Element, Prop, Event, h, EventEmitter, Host, forceUpdate } from '@stencil/core';\nimport { Keys } from '../Keys';\n\ninterface TabInfo {\n label: string;\n index: number;\n}\n\nlet nextId = 0;\n\n@Component({\n tag: 'admiralty-tab-group',\n styleUrl: 'tab-group.scss',\n scoped: true,\n})\nexport class TabGroupComponent {\n @Element() el: HTMLElement;\n\n @Prop({ mutable: true }) selectedIndex = 0;\n\n @Event() admiraltyTabSelected: EventEmitter<number>;\n\n private _groupId = nextId++;\n\n private _tabs: TabInfo[] = [];\n private _tabHeaders: HTMLElement[] = [];\n\n handleSelectedTab(idx: number) {\n const oldContent = this.el.querySelector(`.tab-content#${this.getTabContentId(this.selectedIndex)}`);\n oldContent.classList.remove('active');\n oldContent.setAttribute('tabindex', this.getTabIndex(idx).toString());\n\n this.selectedIndex = idx;\n this.setSelectedTabContent();\n\n this.admiraltyTabSelected.emit(idx);\n }\n\n private setSelectedTabContent() {\n const activeContent = this.el.querySelector(`.tab-content#${this.getTabContentId(this.selectedIndex)}`);\n activeContent.classList.add('active');\n activeContent.setAttribute('tabindex', this.getTabIndex(this.selectedIndex).toString());\n }\n\n private getTabIndex(index: number): number \| null {\n return this.selectedIndex === index ? 0 : -1;\n }\n\n private getTabContentId(i: number): string {\n return `tab-panel-${this._groupId}-${i}`;\n }\n\n private getTabLabelId(i: number): string {\n return `tab-label-${this._groupId}-${i}`;\n }\n\n handleKeyDown(event: KeyboardEvent): void {\n const tgt = event.target as HTMLElement;\n let processed = false;\n\n switch (event.key) {\n case Keys.LEFT_ARROW:\n this.moveFocusToPreviousTab(tgt);\n processed = true;\n break;\n case Keys.RIGHT_ARROW:\n this.moveFocusToNextTab(tgt);\n processed = true;\n break;\n\n case Keys.HOME:\n this.moveFocusToTabHeader(this._tabHeaders[0]);\n processed = true;\n break;\n\n case Keys.END:\n this.moveFocusToTabHeader(this._tabHeaders[this._tabHeaders.length - 1]);\n processed = true;\n break;\n default:\n break;\n }\n\n if (processed) {\n event.stopPropagation();\n event.preventDefault();\n }\n }\n\n private moveFocusToTabHeader(header: HTMLElement) {\n header.focus();\n }\n\n private moveFocusToPreviousTab(currentHeader: HTMLElement) {\n const firstTab = this._tabHeaders[0];\n const lastTab = this._tabHeaders[this._tabHeaders.length - 1];\n\n if (currentHeader === firstTab) {\n this.moveFocusToTabHeader(lastTab);\n } else {\n const index = this._tabHeaders.indexOf(currentHeader);\n this.moveFocusToTabHeader(this._tabHeaders[index - 1]);\n }\n }\n\n private moveFocusToNextTab(currentHeader: HTMLElement) {\n const firstTab = this._tabHeaders[0];\n const lastTab = this._tabHeaders[this._tabHeaders.length - 1];\n\n if (currentHeader === lastTab) {\n this.moveFocusToTabHeader(firstTab);\n } else {\n const index = this._tabHeaders.indexOf(currentHeader);\n this.moveFocusToTabHeader(this._tabHeaders[index + 1]);\n }\n }\n\n componentWillLoad() {\n const tabItems = this.el.querySelectorAll('admiralty-tab');\n\n this._tabs = [];\n\n if (tabItems.length > 0) {\n let idx = 0;\n tabItems.forEach(t => {\n t.tabLabelId = this.getTabLabelId(idx);\n t.tabContentId = this.getTabContentId(idx);\n\n this._tabs.push({ label: t.label, index: idx });\n ++idx;\n });\n\n this.selectedIndex = Math.max(0, Math.min(this.selectedIndex, tabItems.length - 1));\n }\n }\n\n componentDidLoad() {\n this._tabHeaders = Array.from(this.el.querySelectorAll('[role=\"tab\"]'));\n\n const tabItems = this.el.querySelectorAll('admiralty-tab .tab-content');\n\n if (tabItems.length > 0) {\n const tabContent = this.el.querySelector('hr');\n tabContent.after(...Array.from(tabItems));\n\n this.setSelectedTabContent();\n forceUpdate(this);\n }\n }\n\n render() {\n const createHeaders = () =>\n Array.from(this._tabs).map(tab => (\n <button\n class={{ heading: true, active: tab.index === this.selectedIndex }}\n id={this.getTabLabelId(tab.index)}\n role=\"tab\"\n tabIndex={this.getTabIndex(tab.index)}\n aria-setsize={this._tabs.length}\n aria-selected={`${tab.index === this.selectedIndex}`}\n aria-controls={this.getTabContentId(tab.index)}\n onClick={_ev => this.handleSelectedTab(tab.index)}\n onKeyDown={ev => this.handleKeyDown(ev)}\n >\n {tab.label}\n </button>\n ));\n\n return (\n <Host>\n <div class=\"tab-group-headers\" role=\"tablist\">\n <div class=\"headers\">{createHeaders()}</div>\n </div>\n <hr />\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"admiralty-tab-group.entry.js","mappings":"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","names":[],"sources":["src/components/Keys.ts","src/components/tab-group/tab-group.scss?tag=admiralty-tab-group&encapsulation=scoped","src/components/tab-group/tab-group.tsx"],"sourcesContent":["export enum Keys {\n UP_ARROW = 'ArrowUp',\n DOWN_ARROW = 'ArrowDown',\n LEFT_ARROW = 'ArrowLeft',\n RIGHT_ARROW = 'ArrowRight',\n ENTER = 'Enter',\n TAB = 'Tab',\n HOME = 'Home',\n END = 'End',\n SPACE = ' '\n}\n","@import 'tab-group.vars';\n\n.tab-group-headers {\n width: 100%;\n}\n\nhr {\n width: 100%;\n height: 2px;\n margin: $tab-group-horizontal-rule-margin;\n background-color: $tab-group-separator-colour;\n}\n\n.headers {\n overflow-x: auto;\n white-space: nowrap;\n display: flex;\n flex-wrap: wrap;\n\n .heading {\n cursor: pointer;\n padding: $tab-group-heading-padding;\n height: 42px;\n max-width: fit-content;\n box-sizing: border-box;\n user-select: none;\n\n text-align: center;\n text-decoration: none;\n color: $tab-group-heading-text-colour;\n background-color: unset;\n font-weight: $tab-group-heading-text-weight;\n font-size: $tab-group-heading-text-font;\n margin-left: $tab-group-heading-margin-left;\n\n &:first-child {\n margin-left: $tab-group-heading-first-child-margin-left;\n }\n\n @include not-desktop {\n font-size: $tab-group-heading-not-desktop-text-font;\n line-height: 18px;\n padding: $tab-group-heading-not-desktop-padding;\n height: unset;\n width: unset;\n }\n\n &:focus-visible {\n box-shadow: $tab-group-focus-colour inset 0 0 0 2px;\n }\n\n &:focus,\n &.active:focus {\n @include focus-highlight;\n box-shadow: 0px -4px $tab-group-focus-text-colour inset;\n }\n\n &:hover {\n background-color: $tab-group-heading-hover-background-colour;\n color: $tab-group-heading-text-colour;\n box-shadow: unset;\n }\n\n &.active {\n background-color: $tab-group-active-background-colour;\n color: $tab-group-active-text-colour;\n box-shadow: 0px -4px $tab-group-active-shadow-colour inset;\n }\n }\n}\n","import { Component, Element, Prop, Event, h, EventEmitter, Host, forceUpdate } from '@stencil/core';\nimport { Keys } from '../Keys';\n\ninterface TabInfo {\n label: string;\n index: number;\n}\n\nlet nextId = 0;\n\n@Component({\n tag: 'admiralty-tab-group',\n styleUrl: 'tab-group.scss',\n scoped: true,\n})\nexport class TabGroupComponent {\n @Element() el: HTMLElement;\n\n @Prop({ mutable: true }) selectedIndex = 0;\n\n @Event() admiraltyTabSelected: EventEmitter<number>;\n\n private _groupId = nextId++;\n\n private _tabs: TabInfo[] = [];\n private _tabHeaders: HTMLElement[] = [];\n\n handleSelectedTab(idx: number) {\n const oldContent = this.el.querySelector(`.tab-content#${this.getTabContentId(this.selectedIndex)}`);\n oldContent.classList.remove('active');\n oldContent.setAttribute('tabindex', this.getTabIndex(idx).toString());\n\n this.selectedIndex = idx;\n this.setSelectedTabContent();\n\n this.admiraltyTabSelected.emit(idx);\n }\n\n private setSelectedTabContent() {\n const activeContent = this.el.querySelector(`.tab-content#${this.getTabContentId(this.selectedIndex)}`);\n activeContent.classList.add('active');\n activeContent.setAttribute('tabindex', this.getTabIndex(this.selectedIndex).toString());\n }\n\n private getTabIndex(index: number): number \| null {\n return this.selectedIndex === index ? 0 : -1;\n }\n\n private getTabContentId(i: number): string {\n return `tab-panel-${this._groupId}-${i}`;\n }\n\n private getTabLabelId(i: number): string {\n return `tab-label-${this._groupId}-${i}`;\n }\n\n handleKeyDown(event: KeyboardEvent): void {\n const tgt = event.target as HTMLElement;\n let processed = false;\n\n switch (event.key) {\n case Keys.LEFT_ARROW:\n this.moveFocusToPreviousTab(tgt);\n processed = true;\n break;\n case Keys.RIGHT_ARROW:\n this.moveFocusToNextTab(tgt);\n processed = true;\n break;\n\n case Keys.HOME:\n this.moveFocusToTabHeader(this._tabHeaders[0]);\n processed = true;\n break;\n\n case Keys.END:\n this.moveFocusToTabHeader(this._tabHeaders[this._tabHeaders.length - 1]);\n processed = true;\n break;\n default:\n break;\n }\n\n if (processed) {\n event.stopPropagation();\n event.preventDefault();\n }\n }\n\n private moveFocusToTabHeader(header: HTMLElement) {\n header.focus();\n }\n\n private moveFocusToPreviousTab(currentHeader: HTMLElement) {\n const firstTab = this._tabHeaders[0];\n const lastTab = this._tabHeaders[this._tabHeaders.length - 1];\n\n if (currentHeader === firstTab) {\n this.moveFocusToTabHeader(lastTab);\n } else {\n const index = this._tabHeaders.indexOf(currentHeader);\n this.moveFocusToTabHeader(this._tabHeaders[index - 1]);\n }\n }\n\n private moveFocusToNextTab(currentHeader: HTMLElement) {\n const firstTab = this._tabHeaders[0];\n const lastTab = this._tabHeaders[this._tabHeaders.length - 1];\n\n if (currentHeader === lastTab) {\n this.moveFocusToTabHeader(firstTab);\n } else {\n const index = this._tabHeaders.indexOf(currentHeader);\n this.moveFocusToTabHeader(this._tabHeaders[index + 1]);\n }\n }\n\n componentWillLoad() {\n const tabItems = this.el.querySelectorAll('admiralty-tab');\n\n this._tabs = [];\n\n if (tabItems.length > 0) {\n let idx = 0;\n tabItems.forEach(t => {\n t.tabLabelId = this.getTabLabelId(idx);\n t.tabContentId = this.getTabContentId(idx);\n\n this._tabs.push({ label: t.label, index: idx });\n ++idx;\n });\n\n this.selectedIndex = Math.max(0, Math.min(this.selectedIndex, tabItems.length - 1));\n }\n }\n\n componentDidLoad() {\n this._tabHeaders = Array.from(this.el.querySelectorAll('[role=\"tab\"]'));\n\n const tabItems = this.el.querySelectorAll('admiralty-tab .tab-content');\n\n if (tabItems.length > 0) {\n const tabContent = this.el.querySelector('hr');\n tabContent.after(...Array.from(tabItems));\n\n this.setSelectedTabContent();\n forceUpdate(this);\n }\n }\n\n render() {\n const createHeaders = () =>\n Array.from(this._tabs).map(tab => (\n <button\n class={{ heading: true, active: tab.index === this.selectedIndex }}\n id={this.getTabLabelId(tab.index)}\n role=\"tab\"\n tabIndex={this.getTabIndex(tab.index)}\n aria-setsize={this._tabs.length}\n aria-selected={`${tab.index === this.selectedIndex}`}\n aria-controls={this.getTabContentId(tab.index)}\n onClick={_ev => this.handleSelectedTab(tab.index)}\n onKeyDown={ev => this.handleKeyDown(ev)}\n >\n {tab.label}\n </button>\n ));\n\n return (\n <Host>\n <div class=\"tab-group-headers\" role=\"tablist\">\n <div class=\"headers\">{createHeaders()}</div>\n </div>\n <hr />\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/admiralty-text-side-bar-item.entry.js CHANGED Viewed

@@ -6,7 +6,7 @@ const TextSideBarItemVariant = {
     TextLink: 'textLink'
 };
-const textSideBarItemCss = ".visually-hidden.sc-admiralty-text-side-bar-item: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-text-side-bar-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-text-side-bar-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-text-side-bar-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-text-side-bar-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-text-side-bar-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-text-side-bar-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-text-side-bar-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-text-side-bar-item{display:none}}.sc-admiralty-text-side-bar-item-h{--admiralty-icon-font-size:var(--admiralty-font-size-2)}li.sc-admiralty-text-side-bar-item{display:flex;justify-content:center;list-style:none;margin:0 0 0 1px}li.sc-admiralty-text-side-bar-item:before{content:\"\";display:none}.expandable-item.sc-admiralty-text-side-bar-item{flex:1;display:flex;flex-flow:column}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item{display:inline-flex;align-items:center;font-size:var(--admiralty-side-bar-item-font-size, var(--admiralty-font-size-0));white-space:nowrap;font-weight:var(--admiralty-side-bar-item-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;padding:0.3rem 0.5rem;overflow-wrap:break-word;color:var(--admiralty-side-bar-item-text-colour, var(--admiralty-colour-primary))}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item:hover{color:var(--admiralty-colour-primary);font-weight:var(--admiralty-side-bar-item-font-weight, var(--admiralty-font-weight-medium));background-color:var(--admiralty-hover-background-colour)}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item:focus-visible,.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.active.sc-admiralty-text-side-bar-item:focus-visible{outline:none;box-shadow:inset 0 -4px 0 0 var(--admiralty-colour-primary);background-color:var(--admiralty-focus-colour);color:var(--admiralty-colour-primary)}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.active.sc-admiralty-text-side-bar-item{font-weight:500;background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast)}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item:active{background-color:var(--admiralty-focus-colour);color:var(--admiralty-colour-primary);box-shadow:inset 0 -4px 0 0 var(--admiralty-colour-primary)}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item .slot.sc-admiralty-text-side-bar-item{line-height:2.5rem}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item .icon.sc-admiralty-text-side-bar-item{display:flex;width:100%;justify-content:right;font-size:var(--admiralty-side-bar-item-icon-font-size, var(--admiralty-font-size-4))}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item .expansion-content.sc-admiralty-text-side-bar-item{display:none;max-height:0;overflow:visible}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.expanded.sc-admiralty-text-side-bar-item .expansion-content.sc-admiralty-text-side-bar-item{display:block;max-height:initial;padding:12px 0}.text-link.sc-admiralty-text-side-bar-item{all:unset;cursor:pointer;display:flex;flex-direction:column;justify-content:left;flex:1;user-select:none;text-decoration:none;text-align:left;color:var(--admiralty-text-colour);font-weight:var(--admiralty-text-link-font-weight, var(--admiralty-font-weight-normal));font-size:var(--admiralty-side-bar-item-font-size, var(--admiralty-font-size-0));padding:0.5rem 1.5rem}.text-link.is-main-link.sc-admiralty-text-side-bar-item{font-weight:var(--admiralty-text-link-is-main-font-weight, var(--admiralty-font-weight-medium));padding:0.5rem}.text-link.sc-admiralty-text-side-bar-item:hover{color:var(--admiralty-colour-primary);font-weight:var(--admiralty-side-bar-item-font-weight, var(--admiralty-font-weight-medium));background-color:var(--admiralty-hover-background-colour)}.text-link.sc-admiralty-text-side-bar-item:focus-visible,.text-link.active.sc-admiralty-text-side-bar-item:focus-visible{outline:none;box-shadow:inset 0 -4px 0 0 var(--admiralty-colour-primary);background-color:var(--admiralty-focus-colour);color:var(--admiralty-colour-primary)}.text-link.active.sc-admiralty-text-side-bar-item{font-weight:var(--admiralty-text-link-active-font-weight, var(--admiralty-font-weight-medium));background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast)}.text-link.sc-admiralty-text-side-bar-item:active{background-color:var(--admiralty-focus-colour);color:var(--admiralty-colour-primary);box-shadow:inset 0 -4px 0 0 var(--admiralty-colour-primary)}";
+const textSideBarItemCss = ".visually-hidden.sc-admiralty-text-side-bar-item: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-text-side-bar-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-text-side-bar-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-text-side-bar-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-text-side-bar-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-text-side-bar-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-text-side-bar-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-text-side-bar-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-text-side-bar-item{display:none}}.sc-admiralty-text-side-bar-item-h{--admiralty-icon-font-size:var(--admiralty-font-size-2)}li.sc-admiralty-text-side-bar-item{display:flex;justify-content:center;list-style:none;margin:0 0 0 1px}li.sc-admiralty-text-side-bar-item:before{content:\"\";display:none}.expandable-item.sc-admiralty-text-side-bar-item{flex:1;display:flex;flex-flow:column;background-color:var(--admiralty-header-background-colour)}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item{display:inline-flex;align-items:center;font-size:var(--admiralty-side-bar-item-font-size, var(--admiralty-font-size-0));white-space:nowrap;font-weight:var(--admiralty-side-bar-item-font-weight, var(--admiralty-font-weight-medium));background-color:var(--admiralty-header-background-colour);cursor:pointer;padding:0.3rem 0.5rem;overflow-wrap:break-word;color:var(--admiralty-side-bar-item-text-colour, var(--admiralty-colour-primary))}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item:hover{color:var(--admiralty-colour-primary);font-weight:var(--admiralty-side-bar-item-font-weight, var(--admiralty-font-weight-medium));background-color:var(--admiralty-hover-background-colour)}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item:focus-visible,.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.active.sc-admiralty-text-side-bar-item:focus-visible{outline:none;box-shadow:inset 0 -4px 0 0 var(--text-side-bar-item-focus-border-colour);background-color:var(--text-side-bar-focus-background-colour);color:var(--admiralty-colour-primary)}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.active.sc-admiralty-text-side-bar-item{font-weight:500;background-color:var(--text-side-bar-item-active-background-colour);color:var(--admiralty-colour-secondary-contrast);border-top:2px solid var(--admiralty-colour-secondary-contrast);border-bottom:2px solid var(--admiralty-colour-secondary-contrast)}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item:active{background-color:var(--admiralty-focus-colour);color:var(--admiralty-focus-contrast);box-shadow:inset 0 -4px 0 0 var(--admiralty-focus-contrast)}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item .slot.sc-admiralty-text-side-bar-item{line-height:2.5rem}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item .icon.sc-admiralty-text-side-bar-item{display:flex;width:100%;justify-content:right;font-size:var(--admiralty-side-bar-item-icon-font-size, var(--admiralty-font-size-4))}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.sc-admiralty-text-side-bar-item .expansion-content.sc-admiralty-text-side-bar-item{display:none;max-height:0;overflow:visible}.expandable-item.sc-admiralty-text-side-bar-item .expandable-item-button.expanded.sc-admiralty-text-side-bar-item .expansion-content.sc-admiralty-text-side-bar-item{display:block;max-height:initial;padding:12px 0}.text-link.sc-admiralty-text-side-bar-item{all:unset;cursor:pointer;display:flex;flex-direction:column;justify-content:left;flex:1;user-select:none;text-decoration:none;text-align:left;color:var(--admiralty-text-colour);font-weight:var(--admiralty-text-link-font-weight, var(--admiralty-font-weight-normal));font-size:var(--admiralty-side-bar-item-font-size, var(--admiralty-font-size-0));padding:0.5rem 1.5rem}.text-link.is-main-link.sc-admiralty-text-side-bar-item{font-weight:var(--admiralty-text-link-is-main-font-weight, var(--admiralty-font-weight-medium));padding:0.5rem}.text-link.sc-admiralty-text-side-bar-item:hover{color:var(--admiralty-colour-primary);font-weight:var(--admiralty-side-bar-item-font-weight, var(--admiralty-font-weight-medium));background-color:var(--admiralty-hover-background-colour)}.text-link.sc-admiralty-text-side-bar-item:focus-visible,.text-link.active.sc-admiralty-text-side-bar-item:focus-visible{outline:none;box-shadow:inset 0 -4px 0 0 var(--text-side-bar-item-focus-border-colour);background-color:var(--text-side-bar-focus-background-colour);color:var(--admiralty-colour-primary)}.text-link.active.sc-admiralty-text-side-bar-item{font-weight:var(--admiralty-text-link-active-font-weight, var(--admiralty-font-weight-medium));background-color:var(--text-side-bar-item-active-background-colour);color:var(--admiralty-colour-secondary-contrast);border-top:2px solid var(--admiralty-colour-secondary-contrast);border-bottom:2px solid var(--admiralty-colour-secondary-contrast)}.text-link.sc-admiralty-text-side-bar-item:active{background-color:var(--admiralty-focus-colour);color:var(--admiralty-focus-contrast);box-shadow:inset 0 -4px 0 0 var(--admiralty-focus-contrast)}";
 const AdmiraltyTextSideBarItemStyle0 = textSideBarItemCss;
 const TextSideBarItemComponent = class {

package/dist/esm/admiralty-text-side-bar-item.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-text-side-bar-item.entry.js","mappings":"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","names":[],"sources":["src/components/text-side-bar-item/text-side-bar-item.types.ts","src/components/text-side-bar-item/text-side-bar-item.scss?tag=admiralty-text-side-bar-item&encapsulation=scoped","src/components/text-side-bar-item/text-side-bar-item.tsx"],"sourcesContent":["export type TextSideBarItemVariant = 'expandable' \| 'text' \| 'textLink';\nexport const TextSideBarItemVariant = {\n Expandable: 'expandable' as TextSideBarItemVariant,\n Text: 'text' as TextSideBarItemVariant,\n TextLink: 'textLink' as TextSideBarItemVariant\n}\n","@import 'text-side-bar-item.vars.scss';\n\n:host {\n --admiralty-icon-font-size: var(--admiralty-font-size-2);\n}\n\nli {\n display: flex;\n justify-content: center;\n list-style: none;\n margin: 0 0 0 1px;\n &:before {\n content: '';\n display: none;\n }\n}\n\n.expandable-item {\n flex: 1;\n display: flex;\n flex-flow: column;\n\n .expandable-item-button {\n display: inline-flex;\n align-items: center;\n font-size: $expandable-side-bar-item-font-size;\n white-space: nowrap;\n font-weight: $expandable-side-bar-item-font-weight;\n background-color: unset;\n cursor: pointer;\n padding: .3rem .5rem;\n overflow-wrap: break-word;\n color: $expandable-side-bar-item-text-colour;\n\n &:hover {\n color: $text-link-font-colour;\n font-weight: $expandable-side-bar-item-font-weight;\n background-color: $text-link-background-hover-colour;\n }\n\n &:focus-visible,\n &.active:focus-visible {\n outline: none;\n box-shadow: inset 0 -4px 0 0 $text-link-focus-text-colour;\n background-color: $text-link-focus-background-colour;\n color: $text-link-focus-text-colour;\n }\n\n &.active {\n font-weight: 500;\n background-color: $text-link-active-background-colour;\n color: $text-link-active-text-colour;\n }\n\n &:active {\n background-color: $text-link-focus-background-colour;\n color: $text-link-focus-text-colour;\n box-shadow: inset 0 -4px 0 0 $text-link-focus-text-colour;\n }\n\n .slot {\n line-height: 2.5rem;\n }\n\n .icon {\n display: flex;\n width: 100%;\n justify-content: right;\n font-size: $expandable-side-bar-item-icon-font-size;\n }\n\n .expansion-content {\n display: none;\n max-height: 0;\n overflow: visible;\n }\n &.expanded .expansion-content {\n display: block;\n max-height: initial;\n padding: 12px 0;\n }\n }\n}\n\n.text-link {\n all: unset;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n justify-content: left;\n flex: 1;\n user-select: none;\n text-decoration: none;\n text-align: left;\n color: $text-side-bar-item-text-colour;\n font-weight: $text-link-font-weight;\n font-size: $expandable-side-bar-item-font-size;\n padding: .5rem 1.5rem;\n\n &.is-main-link {\n font-weight: $text-link-is-main-font-weight;\n padding: .5rem;\n }\n\n &:hover {\n color: $text-link-font-colour;\n font-weight: $expandable-side-bar-item-font-weight;\n background-color: $text-link-background-hover-colour;\n }\n\n &:focus-visible,\n &.active:focus-visible {\n outline: none;\n box-shadow: inset 0 -4px 0 0 $text-link-focus-text-colour;\n background-color: $text-link-focus-background-colour;\n color: $text-link-focus-text-colour;\n }\n\n &.active {\n font-weight: $text-link-active-font-weight;\n background-color: $text-link-active-background-colour;\n color: $text-link-active-text-colour;\n }\n\n &:active {\n background-color: $text-link-focus-background-colour;\n color: $text-link-focus-text-colour;\n box-shadow: inset 0 -4px 0 0 $text-link-focus-text-colour;\n }\n}\n","import { Component, Event, EventEmitter, Prop, h, Element, Watch, Host } from '@stencil/core';\nimport { TextSideBarItemVariant } from \"./text-side-bar-item.types\";\n\n/*\n @slot The text to display under the icon for secondary variant\n /\n@Component({\n tag: 'admiralty-text-side-bar-item',\n styleUrl: 'text-side-bar-item.scss',\n scoped: true,\n})\nexport class TextSideBarItemComponent {\n private internalId: number = ++nextId;\n\n @Element() el!: HTMLAdmiraltyTextSideBarItemElement;\n /\n The type of text side bar item to render. Valid values are `primary` and `secondary`.\n * Default value is `primary`.\n /\n @Prop() variant: TextSideBarItemVariant = TextSideBarItemVariant.Expandable;\n\n /\n The event that is dispatched when the expanded status is toggled.\n /\n @Event() toggled: EventEmitter<boolean>;\n\n /\n Whether the component is expanded.\n /\n @Prop({ mutable: true, reflect: true }) expanded = false;\n\n /\n The name of the icon to display. A full list of available icons can be viewed at [https://fonts.google.com/icons](https://fonts.google.com/icons)\n /\n @Prop() icon: string;\n /\n The URL to link to.\n /\n @Prop() href: string;\n\n /\n Item text for the button or link depending on variant\n /\n @Prop() itemText: string;\n\n /\n Causes the default browser redirect to be suppressed. Can be used in conjunction with the\n * `onTextSideBarItemClick` event to use a navigation router and prevent a full page reload when navigating.\n /\n @Prop() suppressRedirect?: boolean = false;\n\n /\n Represents whether this SideBarItem is 'active' and will be styled differently than SideBarItems\n * that are not 'active'. There should only be one SideBarItem that is 'active' per SideBar.\n /\n @Prop({ mutable: true, reflect: true }) active: boolean = false; // { mutable: true, reflect: true }\n\n /\n An event emitted when this Side Bar item is selected containing the sideBarItemId\n */\n @Event() textSideBarItemClick: EventEmitter<string>;\n\n @Watch('active')\n handleActiveChange(newValue: boolean) {\n const anchor = this.el.querySelector('a');\n if (anchor) {\n anchor.classList.toggle('active', newValue)\n }\n }\n\n componentDidLoad() {\n this.handleActiveChange(this.active)\n }\n\n onToggle() {\n this.expanded = !this.expanded;\n\n if (this.expanded) {\n this.el.dispatchEvent(new CustomEvent('text-side-bar-item-active', {\n detail: { id: this.internalId },\n bubbles: true,\n composed: true\n }))\n }\n\n this.toggled.emit(this.expanded);\n }\n\n handleMouseDown(id: string) {\n this.active = true;\n const allItems = document.querySelectorAll('admiralty-text-side-bar-item');\n allItems.forEach(item => {\n let anchor: any = (item.shadowRoot ?? item).querySelector('a');\n if (anchor && anchor.id.toString() === id.toString()) {\n anchor.classList.add('active')\n } else {\n if(anchor === null) {\n anchor = (item.shadowRoot ?? item).querySelector('button');\n }\n anchor.classList.remove('active');\n }\n })\n }\n\n handleClick(ev: MouseEvent): CustomEvent<string> {\n if (this.suppressRedirect) {\n ev.preventDefault();\n }\n ev.stopPropagation();\n\n this.el.dispatchEvent(new CustomEvent('text-side-bar-item-active', {\n detail: { id: this.internalId },\n bubbles: true,\n composed: true\n }));\n\n // BUG: when changing this to object it the item loses active state for some reason when click elsewhere.\n return this.textSideBarItemClick.emit(this.href);\n }\n\n getExpansionIcon(): string {\n return this.expanded ? 'keyboard-arrow-up-rounded' : 'keyboard-arrow-down-rounded';\n }\n\n render() {\n return (\n <Host data-text-side-bar-item-id={'text-side-bar-item-' + this.internalId}>\n <li>\n {this.variant === TextSideBarItemVariant.Expandable &&\n <div class=\"expandable-item\">\n <button id={\"text-side-bar-item-button-\" + this.internalId}\n class={{ 'expandable-item-button': true, 'active': this.active }}\n onClick={() => this.onToggle()}>\n {this.itemText}\n <div class=\"icon\">\n <admiralty-icon size={30} name={this.getExpansionIcon()}></admiralty-icon>\n </div>\n </button>\n <div class=\"slot\" hidden={!this.expanded}>\n <slot></slot>\n </div>\n </div>\n }\n\n {this.variant === TextSideBarItemVariant.Text &&\n <a id={\"text-side-bar-item-anchor-\" + this.internalId}\n class={{ 'text-link': true, 'active': this.active }}\n href={this.href}\n onMouseDown={() => this.handleMouseDown(\"text-side-bar-item-anchor-\" + this.internalId)}\n onClick={ev => this.handleClick(ev)}>\n {this.itemText}\n </a>\n }\n\n {this.variant === TextSideBarItemVariant.TextLink &&\n <a id={\"text-side-bar-item-anchor-\" + this.internalId}\n class={{ 'text-link is-main-link': true, 'active': this.active }}\n href={this.href}\n onMouseDown={() => this.handleMouseDown(\"text-side-bar-item-anchor-\" + this.internalId)}\n onClick={ev => this.handleClick(ev)}>\n {this.itemText}\n </a>\n }\n </li>\n </Host>\n );\n }\n}\nlet nextId = 0;\n"],"version":3}
1	+ {"file":"admiralty-text-side-bar-item.entry.js","mappings":"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","names":[],"sources":["src/components/text-side-bar-item/text-side-bar-item.types.ts","src/components/text-side-bar-item/text-side-bar-item.scss?tag=admiralty-text-side-bar-item&encapsulation=scoped","src/components/text-side-bar-item/text-side-bar-item.tsx"],"sourcesContent":["export type TextSideBarItemVariant = 'expandable' \| 'text' \| 'textLink';\nexport const TextSideBarItemVariant = {\n Expandable: 'expandable' as TextSideBarItemVariant,\n Text: 'text' as TextSideBarItemVariant,\n TextLink: 'textLink' as TextSideBarItemVariant\n}\n","@import 'text-side-bar-item.vars.scss';\n\n:host {\n --admiralty-icon-font-size: var(--admiralty-font-size-2);\n}\n\nli {\n display: flex;\n justify-content: center;\n list-style: none;\n margin: 0 0 0 1px;\n &:before {\n content: '';\n display: none;\n }\n}\n\n.expandable-item {\n flex: 1;\n display: flex;\n flex-flow: column;\n background-color: $side-bar-background-colour;\n\n .expandable-item-button {\n display: inline-flex;\n align-items: center;\n font-size: $expandable-side-bar-item-font-size;\n white-space: nowrap;\n font-weight: $expandable-side-bar-item-font-weight;\n background-color: $side-bar-background-colour;\n cursor: pointer;\n padding: .3rem .5rem;\n overflow-wrap: break-word;\n color: $expandable-side-bar-item-text-colour;\n\n &:hover {\n color: $text-link-font-colour;\n font-weight: $expandable-side-bar-item-font-weight;\n background-color: $text-link-background-hover-colour;\n }\n\n &:focus-visible,\n &.active:focus-visible {\n outline: none;\n box-shadow: inset 0 -4px 0 0 $text-side-bar-focus-border-colour;\n background-color: $text-side-bar-focus-background-colour;\n color: $text-link-focus-text-colour;\n }\n\n &.active {\n font-weight: 500;\n background-color: $text-side-bar-item-active-background-colour;\n color: $text-link-active-text-colour;\n border-top: 2px solid $text-side-bar-item-active-border-colour;\n border-bottom: 2px solid $text-side-bar-item-active-border-colour;\n }\n\n &:active {\n background-color: $text-link-focus-background-colour;\n color: $text-side-bar-focus-text-color;\n box-shadow: inset 0 -4px 0 0 $text-side-bar-focus-text-color;\n }\n\n .slot {\n line-height: 2.5rem;\n }\n\n .icon {\n display: flex;\n width: 100%;\n justify-content: right;\n font-size: $expandable-side-bar-item-icon-font-size;\n }\n\n .expansion-content {\n display: none;\n max-height: 0;\n overflow: visible;\n }\n\n &.expanded .expansion-content {\n display: block;\n max-height: initial;\n padding: 12px 0;\n }\n }\n}\n\n.text-link {\n all: unset;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n justify-content: left;\n flex: 1;\n user-select: none;\n text-decoration: none;\n text-align: left;\n color: $text-side-bar-item-text-colour;\n font-weight: $text-link-font-weight;\n font-size: $expandable-side-bar-item-font-size;\n padding: .5rem 1.5rem;\n\n &.is-main-link {\n font-weight: $text-link-is-main-font-weight;\n padding: .5rem;\n }\n\n &:hover {\n color: $text-link-font-colour;\n font-weight: $expandable-side-bar-item-font-weight;\n background-color: $text-link-background-hover-colour;\n }\n\n &:focus-visible,\n &.active:focus-visible {\n outline: none;\n box-shadow: inset 0 -4px 0 0 $text-side-bar-focus-border-colour;\n background-color: $text-side-bar-focus-background-colour;\n color: $text-link-focus-text-colour;\n }\n\n &.active {\n font-weight: $text-link-active-font-weight;\n background-color: $text-side-bar-item-active-background-colour;\n color: $text-link-active-text-colour;\n border-top: 2px solid $text-side-bar-item-active-border-colour;\n border-bottom: 2px solid $text-side-bar-item-active-border-colour;\n }\n\n &:active {\n background-color: $text-link-focus-background-colour;\n color: $text-side-bar-focus-text-color;\n box-shadow: inset 0 -4px 0 0 $text-side-bar-focus-text-color;\n }\n}\n","import { Component, Event, EventEmitter, Prop, h, Element, Watch, Host } from '@stencil/core';\nimport { TextSideBarItemVariant } from \"./text-side-bar-item.types\";\n\n/*\n @slot The text to display under the icon for secondary variant\n /\n@Component({\n tag: 'admiralty-text-side-bar-item',\n styleUrl: 'text-side-bar-item.scss',\n scoped: true,\n})\nexport class TextSideBarItemComponent {\n private internalId: number = ++nextId;\n\n @Element() el!: HTMLAdmiraltyTextSideBarItemElement;\n /\n The type of text side bar item to render. Valid values are `primary` and `secondary`.\n * Default value is `primary`.\n /\n @Prop() variant: TextSideBarItemVariant = TextSideBarItemVariant.Expandable;\n\n /\n The event that is dispatched when the expanded status is toggled.\n /\n @Event() toggled: EventEmitter<boolean>;\n\n /\n Whether the component is expanded.\n /\n @Prop({ mutable: true, reflect: true }) expanded = false;\n\n /\n The name of the icon to display. A full list of available icons can be viewed at [https://fonts.google.com/icons](https://fonts.google.com/icons)\n /\n @Prop() icon: string;\n /\n The URL to link to.\n /\n @Prop() href: string;\n\n /\n Item text for the button or link depending on variant\n /\n @Prop() itemText: string;\n\n /\n Causes the default browser redirect to be suppressed. Can be used in conjunction with the\n * `onTextSideBarItemClick` event to use a navigation router and prevent a full page reload when navigating.\n /\n @Prop() suppressRedirect?: boolean = false;\n\n /\n Represents whether this SideBarItem is 'active' and will be styled differently than SideBarItems\n * that are not 'active'. There should only be one SideBarItem that is 'active' per SideBar.\n /\n @Prop({ mutable: true, reflect: true }) active: boolean = false; // { mutable: true, reflect: true }\n\n /\n An event emitted when this Side Bar item is selected containing the sideBarItemId\n */\n @Event() textSideBarItemClick: EventEmitter<string>;\n\n @Watch('active')\n handleActiveChange(newValue: boolean) {\n const anchor = this.el.querySelector('a');\n if (anchor) {\n anchor.classList.toggle('active', newValue)\n }\n }\n\n componentDidLoad() {\n this.handleActiveChange(this.active)\n }\n\n onToggle() {\n this.expanded = !this.expanded;\n\n if (this.expanded) {\n this.el.dispatchEvent(new CustomEvent('text-side-bar-item-active', {\n detail: { id: this.internalId },\n bubbles: true,\n composed: true\n }))\n }\n\n this.toggled.emit(this.expanded);\n }\n\n handleMouseDown(id: string) {\n this.active = true;\n const allItems = document.querySelectorAll('admiralty-text-side-bar-item');\n allItems.forEach(item => {\n let anchor: any = (item.shadowRoot ?? item).querySelector('a');\n if (anchor && anchor.id.toString() === id.toString()) {\n anchor.classList.add('active')\n } else {\n if(anchor === null) {\n anchor = (item.shadowRoot ?? item).querySelector('button');\n }\n anchor.classList.remove('active');\n }\n })\n }\n\n handleClick(ev: MouseEvent): CustomEvent<string> {\n if (this.suppressRedirect) {\n ev.preventDefault();\n }\n ev.stopPropagation();\n\n this.el.dispatchEvent(new CustomEvent('text-side-bar-item-active', {\n detail: { id: this.internalId },\n bubbles: true,\n composed: true\n }));\n\n // BUG: when changing this to object it the item loses active state for some reason when click elsewhere.\n return this.textSideBarItemClick.emit(this.href);\n }\n\n getExpansionIcon(): string {\n return this.expanded ? 'keyboard-arrow-up-rounded' : 'keyboard-arrow-down-rounded';\n }\n\n render() {\n return (\n <Host data-text-side-bar-item-id={'text-side-bar-item-' + this.internalId}>\n <li>\n {this.variant === TextSideBarItemVariant.Expandable &&\n <div class=\"expandable-item\">\n <button id={\"text-side-bar-item-button-\" + this.internalId}\n class={{ 'expandable-item-button': true, 'active': this.active }}\n onClick={() => this.onToggle()}>\n {this.itemText}\n <div class=\"icon\">\n <admiralty-icon size={30} name={this.getExpansionIcon()}></admiralty-icon>\n </div>\n </button>\n <div class=\"slot\" hidden={!this.expanded}>\n <slot></slot>\n </div>\n </div>\n }\n\n {this.variant === TextSideBarItemVariant.Text &&\n <a id={\"text-side-bar-item-anchor-\" + this.internalId}\n class={{ 'text-link': true, 'active': this.active }}\n href={this.href}\n onMouseDown={() => this.handleMouseDown(\"text-side-bar-item-anchor-\" + this.internalId)}\n onClick={ev => this.handleClick(ev)}>\n {this.itemText}\n </a>\n }\n\n {this.variant === TextSideBarItemVariant.TextLink &&\n <a id={\"text-side-bar-item-anchor-\" + this.internalId}\n class={{ 'text-link is-main-link': true, 'active': this.active }}\n href={this.href}\n onMouseDown={() => this.handleMouseDown(\"text-side-bar-item-anchor-\" + this.internalId)}\n onClick={ev => this.handleClick(ev)}>\n {this.itemText}\n </a>\n }\n </li>\n </Host>\n );\n }\n}\nlet nextId = 0;\n"],"version":3}

package/dist/esm/admiralty-text-side-bar.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index-60c25452.js';
-const textSideBarCss = ".visually-hidden.sc-admiralty-text-side-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-text-side-bar{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-text-side-bar{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-text-side-bar{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-text-side-bar{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-text-side-bar{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-text-side-bar{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-text-side-bar{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-text-side-bar{display:none}}.sc-admiralty-text-side-bar-h{border-right:1px solid var(--admiralty-text-side-bar-right-border, var(--admiralty-colour-light))}nav.sc-admiralty-text-side-bar{display:flex;flex-direction:column;justify-content:space-between;height:100%;background-color:var(--admiralty-colour-primary-contrast)}ul.sc-admiralty-text-side-bar{display:flex;flex-direction:column}.logo.sc-admiralty-text-side-bar{height:50px;margin:24px 0 20px}";
+const textSideBarCss = ".visually-hidden.sc-admiralty-text-side-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-text-side-bar{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-text-side-bar{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-text-side-bar{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-text-side-bar{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-text-side-bar{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-text-side-bar{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-text-side-bar{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-text-side-bar{display:none}}.sc-admiralty-text-side-bar-h{border-right:1px solid var(--admiralty-text-side-bar-right-border, var(--admiralty-colour-light))}@media (prefers-color-scheme: dark){.sc-admiralty-text-side-bar-h{color-scheme:dark}}nav.sc-admiralty-text-side-bar{display:flex;flex-direction:column;justify-content:space-between;height:100%;background-color:var(--admiralty-header-background-colour)}ul.sc-admiralty-text-side-bar{display:flex;flex-direction:column}.logo.sc-admiralty-text-side-bar{height:50px;margin:24px 0 20px}";
 const AdmiraltyTextSideBarStyle0 = textSideBarCss;
 const TextSideBarComponent = class {

package/dist/esm/admiralty-text-side-bar.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-text-side-bar.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,~~k+CAAk+C~~,CAAC;~~AAC1/C~~,mCAAe,cAAc;;MCWhB,oBAAoB;;;;wBASH,IAAI;0BAIH,oBAAoB;gCAKd,OAAO;;IAE1C,MAAM;QACJ,QACE,0EAAiB,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,GAAG,OAAO,GAAG,OAAO,EAAE,IAC7I,6DACE,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACvB,EACL,6DACE,6DAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,IAAI,CAAC,QAAQ,GAAG,WAAK,KAAK,EAAC,MAAM,EAAC,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,EAAC,WAAW,iBAAa,MAAM,GAAG,GAAG,IAAI,CAClG,CACD,EACN;KACH;;;;;;;","names":[],"sources":["src/components/text-side-bar/text-side-bar.scss?tag=admiralty-text-side-bar&encapsulation=scoped","src/components/text-side-bar/text-side-bar.tsx"],"sourcesContent":["@import 'text-side-bar.vars';\n\n:host {\n border-right: 1px solid $side-bar-right-border-colour;\n}\n\nnav {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n background-color: $side-bar-background-colour;\n}\n\nul {\n display: flex;\n flex-direction: column;\n}\n\n.logo {\n height: 50px;\n margin: 24px 0 20px;\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\n\n/*\n @slot items - 'admiralty-text-side-bar-item' components should be placed here in the items slot\n * @slot footer - additional 'admiralty-text-side-bar-item' components can be placed in the footer slot\n * to display at the bottom of the text side bar.\n /\n@Component({\n tag: 'admiralty-text-side-bar',\n styleUrl: 'text-side-bar.scss',\n scoped: true,\n})\nexport class TextSideBarComponent {\n @Element() el!: HTMLAdmiraltyTextSideBarElement;\n /\n A label for accessibility purposes to describe what this navigation is for.\n /\n @Prop() label: string;\n /\n Set this to false to hide the logo that is displayed in the bottom of the side bar.\n /\n @Prop() showLogo: boolean = true;\n /\n The URI of the logo image\n /\n @Prop() logoImgUrl: string = 'svg/UKHO crest.svg';\n\n /\n Sets the sidebar width\n */\n @Prop() textSideBarWidth: string = '150px';\n\n render() {\n return (\n <nav aria-label={this.label} style={{ width: this.textSideBarWidth ? this.textSideBarWidth !== '' ? this.textSideBarWidth : '100px' : '100px' }}>\n <ul>\n <slot name=\"items\"></slot>\n </ul>\n <ul>\n <slot name=\"footer\"></slot>\n {this.showLogo ? <img class=\"logo\" src={this.logoImgUrl} alt=\"UKHO Logo\" aria-hidden=\"true\" /> : null}\n </ul>\n </nav>\n );\n }\n}\n"],"version":3}
1	+ {"file":"admiralty-text-side-bar.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,wjDAAwjD,CAAC;AAChlD,mCAAe,cAAc;;MCWhB,oBAAoB;;;;wBASH,IAAI;0BAIH,oBAAoB;gCAKd,OAAO;;IAE1C,MAAM;QACJ,QACE,0EAAiB,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,GAAG,OAAO,GAAG,OAAO,EAAE,IAC7I,6DACE,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACvB,EACL,6DACE,6DAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,IAAI,CAAC,QAAQ,GAAG,WAAK,KAAK,EAAC,MAAM,EAAC,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,EAAC,WAAW,iBAAa,MAAM,GAAG,GAAG,IAAI,CAClG,CACD,EACN;KACH;;;;;;;","names":[],"sources":["src/components/text-side-bar/text-side-bar.scss?tag=admiralty-text-side-bar&encapsulation=scoped","src/components/text-side-bar/text-side-bar.tsx"],"sourcesContent":["@import 'text-side-bar.vars';\n\n:host {\n border-right: 1px solid $side-bar-right-border-colour;\n}\n\n@media(prefers-color-scheme: dark) { // Changes browser scrollbar to dark\n :host {\n color-scheme: dark;\n }\n}\n\nnav {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n background-color: $side-bar-background-colour;\n}\n\nul {\n display: flex;\n flex-direction: column;\n}\n\n.logo {\n height: 50px;\n margin: 24px 0 20px;\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\n\n/*\n @slot items - 'admiralty-text-side-bar-item' components should be placed here in the items slot\n * @slot footer - additional 'admiralty-text-side-bar-item' components can be placed in the footer slot\n * to display at the bottom of the text side bar.\n /\n@Component({\n tag: 'admiralty-text-side-bar',\n styleUrl: 'text-side-bar.scss',\n scoped: true,\n})\nexport class TextSideBarComponent {\n @Element() el!: HTMLAdmiraltyTextSideBarElement;\n /\n A label for accessibility purposes to describe what this navigation is for.\n /\n @Prop() label: string;\n /\n Set this to false to hide the logo that is displayed in the bottom of the side bar.\n /\n @Prop() showLogo: boolean = true;\n /\n The URI of the logo image\n /\n @Prop() logoImgUrl: string = 'svg/UKHO crest.svg';\n\n /\n Sets the sidebar width\n */\n @Prop() textSideBarWidth: string = '150px';\n\n render() {\n return (\n <nav aria-label={this.label} style={{ width: this.textSideBarWidth ? this.textSideBarWidth !== '' ? this.textSideBarWidth : '100px' : '100px' }}>\n <ul>\n <slot name=\"items\"></slot>\n </ul>\n <ul>\n <slot name=\"footer\"></slot>\n {this.showLogo ? <img class=\"logo\" src={this.logoImgUrl} alt=\"UKHO Logo\" aria-hidden=\"true\" /> : null}\n </ul>\n </nav>\n );\n }\n}\n"],"version":3}

package/docs/docs.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-01-09T15:19:45",
+  "timestamp": "2026-01-26T09:57:57",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.21.0",

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ukho/admiralty-core",
-  "version": "5.2.0-next.5",
+  "version": "5.2.0-next.7",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -71,5 +71,5 @@
   "license": "MIT",
   "url": "https://github.com/UKHO/admiralty-design-system",
   "repository": "git://github.com/UKHO/admiralty-design-system.git",
-  "gitHead": "7127f4b4ec14dc59d339f3ff0a540af3c5e86aa7"
+  "gitHead": "41b95573da35a6768384456a11dbb523bbe078cc"
 }

package/styles/admiralty.bundle.css CHANGED Viewed

	@@ -1 +1 @@
1	- @charset "UTF-8";@import url(https://cdn.fonts.net/kit/aa1c2560-9670-43e2-85b0-f27b25f69c56/aa1c2560-9670-43e2-85b0-f27b25f69c56_enhanced.css);{margin:0;padding:0;border:0}html{--admiralty-font-family:"JohnstonITCPro",Helvetica,sans-serif;--admiralty-font-weight:var(--admiralty-font-weight-normal);--admiralty-font-size:18px;--admiralty-line-height:24px;line-height:1.15;-webkit-text-size-adjust:100%}body{background:var(--admiralty-background-colour);color:var(--admiralty-text-colour);margin:0}.admiralty-colour-primary{--admiralty-colour-base:var(--admiralty-colour-primary, #09315b)!important;--admiralty-colour-base-rgb:var(--admiralty-colour-primary-rgb, 9, 49, 91)!important;--admiralty-colour-contrast:var(--admiralty-colour-primary-contrast, #ffffff)!important;--admiralty-colour-contrast-rgb:var(--admiralty-colour-primary-contrast-rgb, 255, 255, 255)!important;--admiralty-colour-shade:var(--admiralty-colour-primary-shade, rgb(7.92, 43.12, 80.08))!important;--admiralty-colour-tint:var(--admiralty-colour-primary-tint, rgb(33.6, 69.6, 107.4))!important}.admiralty-colour-secondary{--admiralty-colour-base:var(--admiralty-colour-secondary, #007e97)!important;--admiralty-colour-base-rgb:var(--admiralty-colour-secondary-rgb, 0, 126, 151)!important;--admiralty-colour-contrast:var(--admiralty-colour-secondary-contrast, #ffffff)!important;--admiralty-colour-contrast-rgb:var(--admiralty-colour-secondary-contrast-rgb, 255, 255, 255)!important;--admiralty-colour-shade:var(--admiralty-colour-secondary-shade, rgb(0, 110.88, 132.88))!important;--admiralty-colour-tint:var(--admiralty-colour-secondary-tint, rgb(25.5, 138.9, 161.4))!important}.admiralty-colour-tertiary{--admiralty-colour-base:var(--admiralty-colour-tertiary, #65c4db)!important;--admiralty-colour-base-rgb:var(--admiralty-colour-tertiary-rgb, 101, 196, 219)!important;--admiralty-colour-contrast:var(--admiralty-colour-tertiary-contrast, #333333)!important;--admiralty-colour-contrast-rgb:var(--admiralty-colour-tertiary-contrast-rgb, 51, 51, 51)!important;--admiralty-colour-shade:var(--admiralty-colour-tertiary-shade, rgb(88.88, 172.48, 192.72))!important;--admiralty-colour-tint:var(--admiralty-colour-tertiary-tint, rgb(116.4, 201.9, 222.6))!important}.admiralty-colour-success{--admiralty-colour-base:var(--admiralty-colour-success, #47a234)!important;--admiralty-colour-base-rgb:var(--admiralty-colour-success-rgb, 71, 162, 52)!important;--admiralty-colour-contrast:var(--admiralty-colour-success-contrast, #333333)!important;--admiralty-colour-contrast-rgb:var(--admiralty-colour-success-contrast-rgb, 51, 51, 51)!important;--admiralty-colour-shade:var(--admiralty-colour-success-shade, rgb(62.48, 142.56, 45.76))!important;--admiralty-colour-tint:var(--admiralty-colour-success-tint, rgb(89.4, 171.3, 72.3))!important}.admiralty-colour-warning{--admiralty-colour-base:var(--admiralty-colour-warning, #e3660e)!important;--admiralty-colour-base-rgb:var(--admiralty-colour-warning-rgb, 227, 102, 14)!important;--admiralty-colour-contrast:var(--admiralty-colour-warning-contrast, #333333)!important;--admiralty-colour-contrast-rgb:var(--admiralty-colour-warning-contrast-rgb, 51, 51, 51)!important;--admiralty-colour-shade:var(--admiralty-colour-warning-shade, rgb(199.76, 89.76, 12.32))!important;--admiralty-colour-tint:var(--admiralty-colour-warning-tint, rgb(229.8, 117.3, 38.1))!important}.admiralty-colour-danger{--admiralty-colour-base:var(--admiralty-colour-danger, #e20d0d)!important;--admiralty-colour-base-rgb:var(--admiralty-colour-danger-rgb, 226, 13, 13)!important;--admiralty-colour-contrast:var(--admiralty-colour-danger-contrast, #333333)!important;--admiralty-colour-contrast-rgb:var(--admiralty-colour-danger-contrast-rgb, 51, 51, 51)!important;--admiralty-colour-shade:var(--admiralty-colour-danger-shade, rgb(198.88, 11.44, 11.44))!important;--admiralty-colour-tint:var(--admiralty-colour-danger-tint, rgb(228.9, 37.2, 37.2))!important}.admiralty-colour-info{--admiralty-colour-base:var(--admiralty-colour-info, #0177c1)!important;--admiralty-colour-base-rgb:var(--admiralty-colour-info-rgb, 1, 119, 193)!important;--admiralty-colour-contrast:var(--admiralty-colour-info-contrast, #333333)!important;--admiralty-colour-contrast-rgb:var(--admiralty-colour-info-contrast-rgb, 51, 51, 51)!important;--admiralty-colour-shade:var(--admiralty-colour-info-shade, rgb(0.88, 104.72, 169.84))!important;--admiralty-colour-tint:var(--admiralty-colour-info-tint, rgb(26.4, 132.6, 199.2))!important}.admiralty-colour-light{--admiralty-colour-base:var(--admiralty-colour-light, #d8d8d8)!important;--admiralty-colour-base-rgb:var(--admiralty-colour-light-rgb, 216, 216, 216)!important;--admiralty-colour-contrast:var(--admiralty-colour-light-contrast, #333333)!important;--admiralty-colour-contrast-rgb:var(--admiralty-colour-light-contrast-rgb, 51, 51, 51)!important;--admiralty-colour-shade:var(--admiralty-colour-light-shade, rgb(190.08, 190.08, 190.08))!important;--admiralty-colour-tint:var(--admiralty-colour-light-tint, rgb(219.9, 219.9, 219.9))!important}/! normalize.css v8.0.1 \| MIT License \| github.com/necolas/normalize.css /details,main{display:block}h1{font-size:2em}hr{box-sizing:content-box;height:0;overflow:visible}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;color:var(--admiralty-colour-primary);text-underline-offset:0.15em}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}.visually-hidden: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:479px) and (min-width:0px){.tablet-only,.tablet-or-desktop{display:none}}@media (min-width:1024px){.not-desktop,.phone-only,.phone-or-tablet,.tablet-only{display:none}}@media (max-width:1023px) and (min-width:480px){.phone-only{display:none}}html{font-family:var(--admiralty-font-family);font-size:var(--admiralty-font-size);line-height:var(--admiralty-line-height);font-weight:var(--admiralty-font-weight)}a:focus{outline:3px solid var(--admiralty-focus-colour);outline-offset:1px;outline:transparent solid 3px;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}a:hover{text-decoration-thickness:0.15em}h1{color:var(--admiralty-colour-primary);font-weight:var(--admiralty-font-weight-medium);font-size:var(--admiralty-font-size-6);line-height:60px;margin:0 0 30px}@media (max-width:1023px){.desktop-only{display:none}h1{font-size:var(--admiralty-font-size-6);line-height:54px}}h2{color:var(--admiralty-colour-primary);font-weight:var(--admiralty-font-weight-medium);font-size:var(--admiralty-font-size-3);line-height:48px;margin-bottom:18px}@media (max-width:1023px){h2{font-size:var(--admiralty-font-size-3);line-height:42px}h3,h4,h5{font-size:var(--admiralty-font-size-0);line-height:30px}}h3,h4,h5{color:var(--admiralty-colour-primary);font-weight:var(--admiralty-font-weight-medium);font-size:var(--admiralty-font-size-0);line-height:30px;margin-bottom:12px}h6{color:var(--admiralty-colour-primary);font-weight:var(--admiralty-font-weight-medium);font-size:var(--admiralty-font-size--1);line-height:24px;margin-bottom:12px}@media (max-width:1023px){h6{font-size:var(--admiralty-font-size--1)}p{font-size:var(--admiralty-font-size-0)}}p{font-size:var(--admiralty-font-size-0);line-height:24px;margin-bottom:30px}.intro{font-size:var(--admiralty-font-size-3);line-height:36px;margin-bottom:30px}@media (max-width:1023px){.intro{font-size:var(--admiralty-font-size-2)}}.small{font-size:var(--admiralty-font-size-0)}blockquote{line-height:30px;width:100%;padding:24px 18px;border-left:5px solid var(--admiralty-colour-primary);margin-bottom:30px;background:var(--admiralty-background-colour-tint)}ul{list-style:none}ol a,ul a{font-weight:var(--admiralty-font-weight-normal)}ul li{margin-bottom:12px}ul li:before{content:"■";font-size:var(--admiralty-font-size-0);color:var(--admiralty-colour-primary);vertical-align:text-bottom;margin-right:12px}@media (max-width:1023px){.small{font-size:var(--admiralty-font-size--1);line-height:22px}blockquote{line-height:24px}ul li:before{font-size:var(--admiralty-font-size-0)}}ol{list-style:none;counter-reset:li}ol li:before{content:counter(li) ".";color:var(--admiralty-colour-primary);font-size:var(--admiralty-font-size-0);margin-right:12px}ol li{counter-increment:li;margin-bottom:12px}.white-text {color:var(--admiralty-colour-primary-contrast)}
1	+ @charset "UTF-8";@import url(https://cdn.fonts.net/kit/aa1c2560-9670-43e2-85b0-f27b25f69c56/aa1c2560-9670-43e2-85b0-f27b25f69c56_enhanced.css);{margin:0;padding:0;border:0}html{--admiralty-font-family:"JohnstonITCPro",Helvetica,sans-serif;--admiralty-font-weight:var(--admiralty-font-weight-normal);--admiralty-font-size:18px;--admiralty-line-height:24px;line-height:1.15;-webkit-text-size-adjust:100%}body{background:var(--admiralty-background-colour);color:var(--admiralty-text-colour);margin:0}body:focus{color:var(--admiralty-focus-contrast)}.admiralty-colour-primary{--admiralty-colour-base:var(--admiralty-colour-primary, #09315b)!important;--admiralty-colour-base-rgb:var(--admiralty-colour-primary-rgb, 9, 49, 91)!important;--admiralty-colour-contrast:var(--admiralty-colour-primary-contrast, #ffffff)!important;--admiralty-colour-contrast-rgb:var(--admiralty-colour-primary-contrast-rgb, 255, 255, 255)!important;--admiralty-colour-shade:var(--admiralty-colour-primary-shade, rgb(7.92, 43.12, 80.08))!important;--admiralty-colour-tint:var(--admiralty-colour-primary-tint, rgb(33.6, 69.6, 107.4))!important}.admiralty-colour-secondary{--admiralty-colour-base:var(--admiralty-colour-secondary, #007e97)!important;--admiralty-colour-base-rgb:var(--admiralty-colour-secondary-rgb, 0, 126, 151)!important;--admiralty-colour-contrast:var(--admiralty-colour-secondary-contrast, #ffffff)!important;--admiralty-colour-contrast-rgb:var(--admiralty-colour-secondary-contrast-rgb, 255, 255, 255)!important;--admiralty-colour-shade:var(--admiralty-colour-secondary-shade, rgb(0, 110.88, 132.88))!important;--admiralty-colour-tint:var(--admiralty-colour-secondary-tint, rgb(25.5, 138.9, 161.4))!important}.admiralty-colour-tertiary{--admiralty-colour-base:var(--admiralty-colour-tertiary, #65c4db)!important;--admiralty-colour-base-rgb:var(--admiralty-colour-tertiary-rgb, 101, 196, 219)!important;--admiralty-colour-contrast:var(--admiralty-colour-tertiary-contrast, #333333)!important;--admiralty-colour-contrast-rgb:var(--admiralty-colour-tertiary-contrast-rgb, 51, 51, 51)!important;--admiralty-colour-shade:var(--admiralty-colour-tertiary-shade, rgb(88.88, 172.48, 192.72))!important;--admiralty-colour-tint:var(--admiralty-colour-tertiary-tint, rgb(116.4, 201.9, 222.6))!important}.admiralty-colour-success{--admiralty-colour-base:var(--admiralty-colour-success, #47a234)!important;--admiralty-colour-base-rgb:var(--admiralty-colour-success-rgb, 71, 162, 52)!important;--admiralty-colour-contrast:var(--admiralty-colour-success-contrast, #333333)!important;--admiralty-colour-contrast-rgb:var(--admiralty-colour-success-contrast-rgb, 51, 51, 51)!important;--admiralty-colour-shade:var(--admiralty-colour-success-shade, rgb(62.48, 142.56, 45.76))!important;--admiralty-colour-tint:var(--admiralty-colour-success-tint, rgb(89.4, 171.3, 72.3))!important}.admiralty-colour-warning{--admiralty-colour-base:var(--admiralty-colour-warning, #e3660e)!important;--admiralty-colour-base-rgb:var(--admiralty-colour-warning-rgb, 227, 102, 14)!important;--admiralty-colour-contrast:var(--admiralty-colour-warning-contrast, #333333)!important;--admiralty-colour-contrast-rgb:var(--admiralty-colour-warning-contrast-rgb, 51, 51, 51)!important;--admiralty-colour-shade:var(--admiralty-colour-warning-shade, rgb(199.76, 89.76, 12.32))!important;--admiralty-colour-tint:var(--admiralty-colour-warning-tint, rgb(229.8, 117.3, 38.1))!important}.admiralty-colour-danger{--admiralty-colour-base:var(--admiralty-colour-danger, #e20d0d)!important;--admiralty-colour-base-rgb:var(--admiralty-colour-danger-rgb, 226, 13, 13)!important;--admiralty-colour-contrast:var(--admiralty-colour-danger-contrast, #333333)!important;--admiralty-colour-contrast-rgb:var(--admiralty-colour-danger-contrast-rgb, 51, 51, 51)!important;--admiralty-colour-shade:var(--admiralty-colour-danger-shade, rgb(198.88, 11.44, 11.44))!important;--admiralty-colour-tint:var(--admiralty-colour-danger-tint, rgb(228.9, 37.2, 37.2))!important}.admiralty-colour-info{--admiralty-colour-base:var(--admiralty-colour-info, #0177c1)!important;--admiralty-colour-base-rgb:var(--admiralty-colour-info-rgb, 1, 119, 193)!important;--admiralty-colour-contrast:var(--admiralty-colour-info-contrast, #333333)!important;--admiralty-colour-contrast-rgb:var(--admiralty-colour-info-contrast-rgb, 51, 51, 51)!important;--admiralty-colour-shade:var(--admiralty-colour-info-shade, rgb(0.88, 104.72, 169.84))!important;--admiralty-colour-tint:var(--admiralty-colour-info-tint, rgb(26.4, 132.6, 199.2))!important}.admiralty-colour-light{--admiralty-colour-base:var(--admiralty-colour-light, #d8d8d8)!important;--admiralty-colour-base-rgb:var(--admiralty-colour-light-rgb, 216, 216, 216)!important;--admiralty-colour-contrast:var(--admiralty-colour-light-contrast, #333333)!important;--admiralty-colour-contrast-rgb:var(--admiralty-colour-light-contrast-rgb, 51, 51, 51)!important;--admiralty-colour-shade:var(--admiralty-colour-light-shade, rgb(190.08, 190.08, 190.08))!important;--admiralty-colour-tint:var(--admiralty-colour-light-tint, rgb(219.9, 219.9, 219.9))!important}/! normalize.css v8.0.1 \| MIT License \| github.com/necolas/normalize.css /details,main{display:block}h1{font-size:2em}hr{box-sizing:content-box;height:0;overflow:visible}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;color:var(--admiralty-colour-primary);text-underline-offset:0.15em}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}.visually-hidden: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:479px) and (min-width:0px){.tablet-only,.tablet-or-desktop{display:none}}@media (min-width:1024px){.not-desktop,.phone-only,.phone-or-tablet,.tablet-only{display:none}}@media (max-width:1023px) and (min-width:480px){.phone-only{display:none}}html{font-family:var(--admiralty-font-family);font-size:var(--admiralty-font-size);line-height:var(--admiralty-line-height);font-weight:var(--admiralty-font-weight)}a:focus{outline-offset:1px;outline:transparent solid 3px;color:var(--admiralty-focus-contrast);background-color:var(--admiralty-focus-colour);box-shadow:0 -2px var(--admiralty-focus-colour),0 4px var(--admiralty-focus-contrast);text-decoration:none}a:hover{text-decoration-thickness:0.15em}h1{color:var(--admiralty-colour-primary);font-weight:var(--admiralty-font-weight-medium);font-size:var(--admiralty-font-size-6);line-height:60px;margin:0 0 30px}@media (max-width:1023px){.desktop-only{display:none}h1{font-size:var(--admiralty-font-size-6);line-height:54px}}h2{color:var(--admiralty-colour-primary);font-weight:var(--admiralty-font-weight-medium);font-size:var(--admiralty-font-size-3);line-height:48px;margin-bottom:18px}@media (max-width:1023px){h2{font-size:var(--admiralty-font-size-3);line-height:42px}h3,h4,h5{font-size:var(--admiralty-font-size-0);line-height:30px}}h3,h4,h5{color:var(--admiralty-colour-primary);font-weight:var(--admiralty-font-weight-medium);font-size:var(--admiralty-font-size-0);line-height:30px;margin-bottom:12px}h6{color:var(--admiralty-colour-primary);font-weight:var(--admiralty-font-weight-medium);font-size:var(--admiralty-font-size--1);line-height:24px;margin-bottom:12px}@media (max-width:1023px){h6{font-size:var(--admiralty-font-size--1)}p{font-size:var(--admiralty-font-size-0)}}p{font-size:var(--admiralty-font-size-0);line-height:24px;margin-bottom:30px}.intro{font-size:var(--admiralty-font-size-3);line-height:36px;margin-bottom:30px}@media (max-width:1023px){.intro{font-size:var(--admiralty-font-size-2)}}.small{font-size:var(--admiralty-font-size-0)}blockquote{line-height:30px;width:100%;padding:24px 18px;border-left:5px solid var(--admiralty-colour-primary);margin-bottom:30px;background:var(--admiralty-background-colour-tint)}ul{list-style:none}ol a,ul a{font-weight:var(--admiralty-font-weight-normal)}ul li{margin-bottom:12px}ul li:before{content:"■";font-size:var(--admiralty-font-size-0);color:var(--admiralty-colour-primary);vertical-align:text-bottom;margin-right:12px}@media (max-width:1023px){.small{font-size:var(--admiralty-font-size--1);line-height:22px}blockquote{line-height:24px}ul li:before{font-size:var(--admiralty-font-size-0)}}ol{list-style:none;counter-reset:li}ol li:before{content:counter(li) ".";color:var(--admiralty-colour-primary);font-size:var(--admiralty-font-size-0);margin-right:12px}ol li{counter-increment:li;margin-bottom:12px}.white-text {color:var(--admiralty-colour-primary-contrast)}

package/styles/admiralty.bundle.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../src/styles/css/core.scss","../src/styles/css/normalize.scss","../src/styles/utils/a11y.scss","../src/styles/vars/_responsive.scss","../src/styles/utils/responsive.scss","../src/styles/css/typography.scss"],"names":[],"mappings":"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","file":"admiralty.bundle.css","sourcesContent":["@import '../vars/colours';\n@import '../utils/colour-functions';\n// JohnstonITCPro font imported from CDN\n@import url('https://cdn.fonts.net/kit/aa1c2560-9670-43e2-85b0-f27b25f69c56/aa1c2560-9670-43e2-85b0-f27b25f69c56_enhanced.css');\n\n// Reset browser defaults\n* {\n margin: 0;\n padding: 0;\n border: 0;\n}\n\n// Admiralty Font Family\n// -----------------\n\nhtml {\n --admiralty-font-family: 'JohnstonITCPro', Helvetica, sans-serif;\n --admiralty-font-weight: var(--admiralty-font-weight-normal);\n --admiralty-font-size: 18px;\n --admiralty-line-height: 24px;\n}\n\nbody {\n background: var(--admiralty-background-colour);\n color: var(--admiralty-text-colour);\n}\n\n// Admiralty Colours\n// --------------------------------------------------\n// Generates the colour classes and variables based on the\n// colours map\n\n@mixin generate-colour($colour-name) {\n $value: map-get($colours, $colour-name);\n\n $base: map-get($value, base);\n $contrast: map-get($value, contrast);\n $shade: map-get($value, shade);\n $tint: map-get($value, tint);\n\n --admiralty-colour-base: var(--admiralty-colour-#{$colour-name}, #{$base}) !important;\n --admiralty-colour-base-rgb: var(--admiralty-colour-#{$colour-name}-rgb, #{colour-to-rgb-list($base)}) !important;\n --admiralty-colour-contrast: var(--admiralty-colour-#{$colour-name}-contrast, #{$contrast}) !important;\n --admiralty-colour-contrast-rgb: var(--admiralty-colour-#{$colour-name}-contrast-rgb, #{colour-to-rgb-list($contrast)}) !important;\n --admiralty-colour-shade: var(--admiralty-colour-#{$colour-name}-shade, #{$shade}) !important;\n --admiralty-colour-tint: var(--admiralty-colour-#{$colour-name}-tint, #{$tint}) !important;\n}\n\n@each $colour-name, $value in $colours {\n .admiralty-colour-#{$colour-name} {\n @include generate-colour($colour-name);\n }\n}\n","/! normalize.css v8.0.1 \| MIT License \| github.com/necolas/normalize.css /\n\n/* Document\n ========================================================================== /\n\n/\n 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n /\n\nhtml {\n line-height: 1.15; / 1 /\n -webkit-text-size-adjust: 100%; / 2 /\n}\n\n/ Sections\n ========================================================================== /\n\n/\n Remove the margin in all browsers.\n /\n\nbody {\n margin: 0;\n}\n\n/\n Render the `main` element consistently in IE.\n /\n\nmain {\n display: block;\n}\n\n/\n Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n /\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/ Grouping content\n ========================================================================== /\n\n/\n 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n /\n\nhr {\n box-sizing: content-box; / 1 /\n height: 0; / 1 /\n overflow: visible; / 2 /\n}\n\n/\n 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n /\n\npre {\n font-family: monospace, monospace; / 1 /\n font-size: 1em; / 2 /\n}\n\n/ Text-level semantics\n ========================================================================== /\n\n/\n Remove the gray background on active links in IE 10.\n /\n\na {\n background-color: transparent;\n}\n\n/\n 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n /\n\nabbr[title] {\n border-bottom: none; / 1 /\n text-decoration: underline; / 2 /\n text-decoration: underline dotted; / 2 /\n}\n\n/\n Add the correct font weight in Chrome, Edge, and Safari.\n /\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/\n 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n /\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace; / 1 /\n font-size: 1em; / 2 /\n}\n\n/\n Add the correct font size in all browsers.\n /\n\nsmall {\n font-size: 80%;\n}\n\n/\n Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n /\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/ Embedded content\n ========================================================================== /\n\n/\n Remove the border on images inside links in IE 10.\n /\n\nimg {\n border-style: none;\n}\n\n/ Forms\n ========================================================================== /\n\n/\n 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n /\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; / 1 /\n font-size: 100%; / 1 /\n line-height: 1.15; / 1 /\n margin: 0; / 2 /\n}\n\n/\n Show the overflow in IE.\n * 1. Show the overflow in Edge.\n /\n\nbutton,\ninput { / 1 /\n overflow: visible;\n}\n\n/\n Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n /\n\nbutton,\nselect { / 1 /\n text-transform: none;\n}\n\n/\n Correct the inability to style clickable types in iOS and Safari.\n /\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\n/\n Remove the inner border and padding in Firefox.\n /\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/\n Restore the focus styles unset by the previous rule.\n /\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/\n Correct the padding in Firefox.\n /\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/\n 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n /\n\nlegend {\n box-sizing: border-box; / 1 /\n color: inherit; / 2 /\n display: table; / 1 /\n max-width: 100%; / 1 /\n padding: 0; / 3 /\n white-space: normal; / 1 /\n}\n\n/\n Add the correct vertical alignment in Chrome, Firefox, and Opera.\n /\n\nprogress {\n vertical-align: baseline;\n}\n\n/\n Remove the default vertical scrollbar in IE 10+.\n /\n\ntextarea {\n overflow: auto;\n}\n\n/\n 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n /\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box; / 1 /\n padding: 0; / 2 /\n}\n\n/\n Correct the cursor style of increment and decrement buttons in Chrome.\n /\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/\n 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n /\n\n[type=\"search\"] {\n -webkit-appearance: textfield; / 1 /\n outline-offset: -2px; / 2 /\n}\n\n/\n Remove the inner padding in Chrome and Safari on macOS.\n /\n\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/\n 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n /\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; / 1 /\n font: inherit; / 2 /\n}\n\n/ Interactive\n ========================================================================== /\n\n/\n * Add the correct display in Edge, IE 10+, and Firefox.\n /\n\ndetails {\n display: block;\n}\n\n/\n * Add the correct display in all browsers.\n /\n\nsummary {\n display: list-item;\n}\n\n/ Misc\n ========================================================================== /\n\n/\n Add the correct display in IE 10+.\n /\n\ntemplate {\n display: none;\n}\n\n/\n Add the correct display in IE 10.\n /\n\n[hidden] {\n display: none;\n}\n","@import '../vars/colours';\n\n.visually-hidden:not(:focus):not(:active) {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n overflow: hidden !important;\n clip: rect(0 0 0 0) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n border: 0 !important;\n white-space: nowrap !important;\n}\n\n@mixin focus-highlight() {\n outline: 3px solid transparent;\n color: var(--admiralty-text-colour);\n background-color: var(--admiralty-focus-colour);\n box-shadow:\n 0 -2px var(--admiralty-focus-colour),\n 0 4px var(--admiralty-text-colour);\n text-decoration: none;\n}\n","$max-content-width: 1284px;\n\n/ Device Sizes - matching layout breakpoints /\n$device-size-desktop: 1024px;\n$device-size-tablet: 480px;\n$device-size-phone: 0px;\n","@use '../vars/responsive';\n\n@mixin not-desktop() {\n @media (max-width: responsive.$device-size-desktop - 1px) {\n @content;\n }\n}\n\n@mixin desktop-only() {\n @media (min-width: responsive.$device-size-desktop) {\n @content;\n }\n}\n\n@mixin tablet-only() {\n @media (max-width: responsive.$device-size-desktop - 1px) and (min-width: responsive.$device-size-tablet) {\n @content;\n }\n}\n\n@mixin tablet-or-desktop() {\n @media (min-width: responsive.$device-size-tablet + 1px) {\n @content;\n }\n}\n\n@mixin phone-or-tablet() {\n @media (max-width: responsive.$device-size-desktop - 1px) and (min-width: responsive.$device-size-phone) {\n @content;\n }\n}\n\n@mixin phone-only() {\n @media (max-width: responsive.$device-size-tablet - 1px) and (min-width: responsive.$device-size-phone) {\n @content;\n }\n}\n\n.desktop-only {\n @include not-desktop {\n display: none;\n }\n}\n\n.not-desktop {\n @include desktop-only {\n display: none;\n }\n}\n\n.tablet-only {\n @include desktop-only {\n display: none;\n }\n @include phone-only {\n display: none;\n }\n}\n\n.tablet-or-desktop {\n @include phone-only {\n display: none;\n }\n}\n\n.phone-or-tablet {\n @include desktop-only {\n display: none;\n }\n}\n\n.phone-only {\n @include desktop-only {\n display: none;\n }\n @include tablet-only {\n display: none;\n }\n}\n","@use '../utils/a11y';\n@use '../utils/responsive';\n\n$heading-font-weight: var(--admiralty-font-weight-medium);\n$list-item-font-weight: var(--admiralty-font-weight-normal);\n\nhtml {\n font-family: var(--admiralty-font-family);\n font-size: var(--admiralty-font-size);\n line-height: var(--admiralty-line-height);\n font-weight: var(--admiralty-font-weight);\n}\n\na {\n color: var(--admiralty-colour-primary);\n text-underline-offset: 0.15em;\n &:focus {\n outline: 3px solid var(--admiralty-focus-colour);\n outline-offset: 1px;\n @include a11y.focus-highlight;\n }\n &:hover {\n text-decoration-thickness: 0.15em;\n }\n}\n\nh1 {\n color: var(--admiralty-colour-primary);\n font-weight: $heading-font-weight;\n font-size: var(--admiralty-font-size-6); /* OLD: 48px = 3rem, NEW: 2.75rem = 44px /;\n line-height: 60px;\n margin: 0 0 30px 0;\n @include responsive.not-desktop {\n font-size: var(--admiralty-font-size-6); / OLD: 46px = 2.875rem, NEW: 2.75rem = 44px /\n line-height: 54px;\n }\n}\n\nh2 {\n color: var(--admiralty-colour-primary);\n font-weight: $heading-font-weight;\n font-size: var(--admiralty-font-size-3); / OLD: 36px, NEW: 1.75rem = 28px /;\n line-height: 48px;\n margin-bottom: 18px;\n @include responsive.not-desktop {\n font-size: var(--admiralty-font-size-3); / OLD: 34px = 2.125rem, NEW: 1.75rem = 28px /;\n line-height: 42px;\n }\n}\n\nh3,\nh4,\nh5 {\n color: var(--admiralty-colour-primary);\n font-weight: $heading-font-weight;\n font-size: var(--admiralty-font-size-0); / OLD: 21px = 1.313rem, NEW: 1rem = 16px /;\n line-height: 30px;\n margin-bottom: 12px;\n @include responsive.not-desktop {\n font-size: var(--admiralty-font-size-0); / OLD: 20px = 1.25rem, NEW: 1rem = 16px /\n line-height: 30px;\n }\n}\n\nh6 {\n color: var(--admiralty-colour-primary);\n font-weight: $heading-font-weight;\n font-size: var(--admiralty-font-size--1); / OLD: 18px = 1.125rem, NEW 0.875 = 14px /;\n line-height: 24px;\n margin-bottom: 12px;\n @include responsive.not-desktop {\n font-size: var(--admiralty-font-size--1); / OLD: 16px, NEW 0.875 = 14px /\n }\n}\n\np {\n font-size: var(--admiralty-font-size-0); / OLD: 18px = 1.125rem, NEW 1rem = 16px /;\n line-height: 24px;\n margin-bottom: 30px;\n @include responsive.not-desktop {\n font-size: var(--admiralty-font-size-0); / OLD: 16px /;\n }\n}\n\n.intro {\n font-size: var(--admiralty-font-size-3); / OLD: 28px /\n line-height: 36px;\n margin-bottom: 30px;\n @include responsive.not-desktop {\n font-size: var(--admiralty-font-size-2); / OLD: 26px = 1.625rem, NEW: 1.5rem = 24px /\n }\n}\n\n.small {\n font-size: var(--admiralty-font-size-0); / OLD: 16px /\n @include responsive.not-desktop {\n font-size: var(--admiralty-font-size--1); / OLD: 14px /\n line-height: 22px;\n }\n}\n\nblockquote {\n line-height: 30px;\n width: 100%;\n padding: 24px 18px;\n border-left: 5px solid var(--admiralty-colour-primary);\n margin-bottom: 30px;\n background: var(--admiralty-background-colour-tint);\n @include responsive.not-desktop {\n line-height: 24px;\n }\n}\n\nul {\n list-style: none;\n a {\n font-weight: $list-item-font-weight;\n }\n\n li {\n margin-bottom: 12px;\n }\n\n li:before {\n content: '\\25A0';\n font-size: var(--admiralty-font-size-0); / OLD: 18px = 1.125rem, NEW: 1rem = 16px /\n color: var(--admiralty-colour-primary);\n vertical-align: text-bottom;\n margin-right: 12px;\n @include responsive.not-desktop {\n font-size: var(--admiralty-font-size-0); / OLD: 8px = 0.5rem, NEW: 0.688rem = 11px /\n }\n }\n}\n\nol {\n list-style: none;\n counter-reset: li;\n\n a {\n font-weight: $list-item-font-weight;\n }\n\n li:before {\n content: counter(li) '.';\n color: var(--admiralty-colour-primary);\n font-size: var(--admiralty-font-size-0); / OLD: 18px = 1.125rem, NEW: 1rem = 16px */\n margin-right: 12px;\n }\n\n li {\n counter-increment: li;\n margin-bottom: 12px;\n }\n}\n\n.white-text {\n {\n color: var(--admiralty-colour-primary-contrast);\n }\n}\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../src/styles/css/core.scss","../src/styles/css/normalize.scss","../src/styles/utils/a11y.scss","../src/styles/vars/_responsive.scss","../src/styles/utils/responsive.scss","../src/styles/css/typography.scss"],"names":[],"mappings":"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","file":"admiralty.bundle.css","sourcesContent":["@import '../vars/colours';\n@import '../utils/colour-functions';\n// JohnstonITCPro font imported from CDN\n@import url('https://cdn.fonts.net/kit/aa1c2560-9670-43e2-85b0-f27b25f69c56/aa1c2560-9670-43e2-85b0-f27b25f69c56_enhanced.css');\n\n// Reset browser defaults\n* {\n margin: 0;\n padding: 0;\n border: 0;\n}\n\n// Admiralty Font Family\n// -----------------\n\nhtml {\n --admiralty-font-family: 'JohnstonITCPro', Helvetica, sans-serif;\n --admiralty-font-weight: var(--admiralty-font-weight-normal);\n --admiralty-font-size: 18px;\n --admiralty-line-height: 24px;\n}\n\nbody {\n background: var(--admiralty-background-colour);\n color: var(--admiralty-text-colour);\n &:focus {\n color: var(--admiralty-focus-contrast);\n }\n}\n\n// Admiralty Colours\n// --------------------------------------------------\n// Generates the colour classes and variables based on the\n// colours map\n\n@mixin generate-colour($colour-name) {\n $value: map-get($colours, $colour-name);\n\n $base: map-get($value, base);\n $contrast: map-get($value, contrast);\n $shade: map-get($value, shade);\n $tint: map-get($value, tint);\n\n --admiralty-colour-base: var(--admiralty-colour-#{$colour-name}, #{$base}) !important;\n --admiralty-colour-base-rgb: var(--admiralty-colour-#{$colour-name}-rgb, #{colour-to-rgb-list($base)}) !important;\n --admiralty-colour-contrast: var(--admiralty-colour-#{$colour-name}-contrast, #{$contrast}) !important;\n --admiralty-colour-contrast-rgb: var(--admiralty-colour-#{$colour-name}-contrast-rgb, #{colour-to-rgb-list($contrast)}) !important;\n --admiralty-colour-shade: var(--admiralty-colour-#{$colour-name}-shade, #{$shade}) !important;\n --admiralty-colour-tint: var(--admiralty-colour-#{$colour-name}-tint, #{$tint}) !important;\n}\n\n@each $colour-name, $value in $colours {\n .admiralty-colour-#{$colour-name} {\n @include generate-colour($colour-name);\n }\n}\n","/! normalize.css v8.0.1 \| MIT License \| github.com/necolas/normalize.css /\n\n/* Document\n ========================================================================== /\n\n/\n 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n /\n\nhtml {\n line-height: 1.15; / 1 /\n -webkit-text-size-adjust: 100%; / 2 /\n}\n\n/ Sections\n ========================================================================== /\n\n/\n Remove the margin in all browsers.\n /\n\nbody {\n margin: 0;\n}\n\n/\n Render the `main` element consistently in IE.\n /\n\nmain {\n display: block;\n}\n\n/\n Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n /\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/ Grouping content\n ========================================================================== /\n\n/\n 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n /\n\nhr {\n box-sizing: content-box; / 1 /\n height: 0; / 1 /\n overflow: visible; / 2 /\n}\n\n/\n 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n /\n\npre {\n font-family: monospace, monospace; / 1 /\n font-size: 1em; / 2 /\n}\n\n/ Text-level semantics\n ========================================================================== /\n\n/\n Remove the gray background on active links in IE 10.\n /\n\na {\n background-color: transparent;\n}\n\n/\n 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n /\n\nabbr[title] {\n border-bottom: none; / 1 /\n text-decoration: underline; / 2 /\n text-decoration: underline dotted; / 2 /\n}\n\n/\n Add the correct font weight in Chrome, Edge, and Safari.\n /\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/\n 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n /\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace; / 1 /\n font-size: 1em; / 2 /\n}\n\n/\n Add the correct font size in all browsers.\n /\n\nsmall {\n font-size: 80%;\n}\n\n/\n Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n /\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/ Embedded content\n ========================================================================== /\n\n/\n Remove the border on images inside links in IE 10.\n /\n\nimg {\n border-style: none;\n}\n\n/ Forms\n ========================================================================== /\n\n/\n 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n /\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; / 1 /\n font-size: 100%; / 1 /\n line-height: 1.15; / 1 /\n margin: 0; / 2 /\n}\n\n/\n Show the overflow in IE.\n * 1. Show the overflow in Edge.\n /\n\nbutton,\ninput { / 1 /\n overflow: visible;\n}\n\n/\n Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n /\n\nbutton,\nselect { / 1 /\n text-transform: none;\n}\n\n/\n Correct the inability to style clickable types in iOS and Safari.\n /\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\n/\n Remove the inner border and padding in Firefox.\n /\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/\n Restore the focus styles unset by the previous rule.\n /\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/\n Correct the padding in Firefox.\n /\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/\n 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n /\n\nlegend {\n box-sizing: border-box; / 1 /\n color: inherit; / 2 /\n display: table; / 1 /\n max-width: 100%; / 1 /\n padding: 0; / 3 /\n white-space: normal; / 1 /\n}\n\n/\n Add the correct vertical alignment in Chrome, Firefox, and Opera.\n /\n\nprogress {\n vertical-align: baseline;\n}\n\n/\n Remove the default vertical scrollbar in IE 10+.\n /\n\ntextarea {\n overflow: auto;\n}\n\n/\n 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n /\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box; / 1 /\n padding: 0; / 2 /\n}\n\n/\n Correct the cursor style of increment and decrement buttons in Chrome.\n /\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/\n 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n /\n\n[type=\"search\"] {\n -webkit-appearance: textfield; / 1 /\n outline-offset: -2px; / 2 /\n}\n\n/\n Remove the inner padding in Chrome and Safari on macOS.\n /\n\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/\n 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n /\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; / 1 /\n font: inherit; / 2 /\n}\n\n/ Interactive\n ========================================================================== /\n\n/\n * Add the correct display in Edge, IE 10+, and Firefox.\n /\n\ndetails {\n display: block;\n}\n\n/\n * Add the correct display in all browsers.\n /\n\nsummary {\n display: list-item;\n}\n\n/ Misc\n ========================================================================== /\n\n/\n Add the correct display in IE 10+.\n /\n\ntemplate {\n display: none;\n}\n\n/\n Add the correct display in IE 10.\n /\n\n[hidden] {\n display: none;\n}\n","@import '../vars/colours';\n\n.visually-hidden:not(:focus):not(:active) {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n overflow: hidden !important;\n clip: rect(0 0 0 0) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n border: 0 !important;\n white-space: nowrap !important;\n}\n\n@mixin focus-highlight() {\n outline: 3px solid transparent;\n color: var(--admiralty-focus-contrast);\n background-color: var(--admiralty-focus-colour);\n box-shadow:\n 0 -2px var(--admiralty-focus-colour),\n 0 4px var(--admiralty-focus-contrast);\n text-decoration: none;\n}\n","$max-content-width: 1284px;\n\n/ Device Sizes - matching layout breakpoints /\n$device-size-desktop: 1024px;\n$device-size-tablet: 480px;\n$device-size-phone: 0px;\n","@use '../vars/responsive';\n\n@mixin not-desktop() {\n @media (max-width: responsive.$device-size-desktop - 1px) {\n @content;\n }\n}\n\n@mixin desktop-only() {\n @media (min-width: responsive.$device-size-desktop) {\n @content;\n }\n}\n\n@mixin tablet-only() {\n @media (max-width: responsive.$device-size-desktop - 1px) and (min-width: responsive.$device-size-tablet) {\n @content;\n }\n}\n\n@mixin tablet-or-desktop() {\n @media (min-width: responsive.$device-size-tablet + 1px) {\n @content;\n }\n}\n\n@mixin phone-or-tablet() {\n @media (max-width: responsive.$device-size-desktop - 1px) and (min-width: responsive.$device-size-phone) {\n @content;\n }\n}\n\n@mixin phone-only() {\n @media (max-width: responsive.$device-size-tablet - 1px) and (min-width: responsive.$device-size-phone) {\n @content;\n }\n}\n\n.desktop-only {\n @include not-desktop {\n display: none;\n }\n}\n\n.not-desktop {\n @include desktop-only {\n display: none;\n }\n}\n\n.tablet-only {\n @include desktop-only {\n display: none;\n }\n @include phone-only {\n display: none;\n }\n}\n\n.tablet-or-desktop {\n @include phone-only {\n display: none;\n }\n}\n\n.phone-or-tablet {\n @include desktop-only {\n display: none;\n }\n}\n\n.phone-only {\n @include desktop-only {\n display: none;\n }\n @include tablet-only {\n display: none;\n }\n}\n","@use '../utils/a11y';\n@use '../utils/responsive';\n\n$heading-font-weight: var(--admiralty-font-weight-medium);\n$list-item-font-weight: var(--admiralty-font-weight-normal);\n\nhtml {\n font-family: var(--admiralty-font-family);\n font-size: var(--admiralty-font-size);\n line-height: var(--admiralty-line-height);\n font-weight: var(--admiralty-font-weight);\n}\n\na {\n color: var(--admiralty-colour-primary);\n text-underline-offset: 0.15em;\n &:focus {\n outline-offset: 1px;\n @include a11y.focus-highlight;\n }\n &:hover {\n text-decoration-thickness: 0.15em;\n }\n}\n\nh1 {\n color: var(--admiralty-colour-primary);\n font-weight: $heading-font-weight;\n font-size: var(--admiralty-font-size-6); /* OLD: 48px = 3rem, NEW: 2.75rem = 44px /;\n line-height: 60px;\n margin: 0 0 30px 0;\n @include responsive.not-desktop {\n font-size: var(--admiralty-font-size-6); / OLD: 46px = 2.875rem, NEW: 2.75rem = 44px /\n line-height: 54px;\n }\n}\n\nh2 {\n color: var(--admiralty-colour-primary);\n font-weight: $heading-font-weight;\n font-size: var(--admiralty-font-size-3); / OLD: 36px, NEW: 1.75rem = 28px /;\n line-height: 48px;\n margin-bottom: 18px;\n @include responsive.not-desktop {\n font-size: var(--admiralty-font-size-3); / OLD: 34px = 2.125rem, NEW: 1.75rem = 28px /;\n line-height: 42px;\n }\n}\n\nh3,\nh4,\nh5 {\n color: var(--admiralty-colour-primary);\n font-weight: $heading-font-weight;\n font-size: var(--admiralty-font-size-0); / OLD: 21px = 1.313rem, NEW: 1rem = 16px /;\n line-height: 30px;\n margin-bottom: 12px;\n @include responsive.not-desktop {\n font-size: var(--admiralty-font-size-0); / OLD: 20px = 1.25rem, NEW: 1rem = 16px /\n line-height: 30px;\n }\n}\n\nh6 {\n color: var(--admiralty-colour-primary);\n font-weight: $heading-font-weight;\n font-size: var(--admiralty-font-size--1); / OLD: 18px = 1.125rem, NEW 0.875 = 14px /;\n line-height: 24px;\n margin-bottom: 12px;\n @include responsive.not-desktop {\n font-size: var(--admiralty-font-size--1); / OLD: 16px, NEW 0.875 = 14px /\n }\n}\n\np {\n font-size: var(--admiralty-font-size-0); / OLD: 18px = 1.125rem, NEW 1rem = 16px /;\n line-height: 24px;\n margin-bottom: 30px;\n @include responsive.not-desktop {\n font-size: var(--admiralty-font-size-0); / OLD: 16px /;\n }\n}\n\n.intro {\n font-size: var(--admiralty-font-size-3); / OLD: 28px /\n line-height: 36px;\n margin-bottom: 30px;\n @include responsive.not-desktop {\n font-size: var(--admiralty-font-size-2); / OLD: 26px = 1.625rem, NEW: 1.5rem = 24px /\n }\n}\n\n.small {\n font-size: var(--admiralty-font-size-0); / OLD: 16px /\n @include responsive.not-desktop {\n font-size: var(--admiralty-font-size--1); / OLD: 14px /\n line-height: 22px;\n }\n}\n\nblockquote {\n line-height: 30px;\n width: 100%;\n padding: 24px 18px;\n border-left: 5px solid var(--admiralty-colour-primary);\n margin-bottom: 30px;\n background: var(--admiralty-background-colour-tint);\n @include responsive.not-desktop {\n line-height: 24px;\n }\n}\n\nul {\n list-style: none;\n a {\n font-weight: $list-item-font-weight;\n }\n\n li {\n margin-bottom: 12px;\n }\n\n li:before {\n content: '\\25A0';\n font-size: var(--admiralty-font-size-0); / OLD: 18px = 1.125rem, NEW: 1rem = 16px /\n color: var(--admiralty-colour-primary);\n vertical-align: text-bottom;\n margin-right: 12px;\n @include responsive.not-desktop {\n font-size: var(--admiralty-font-size-0); / OLD: 8px = 0.5rem, NEW: 0.688rem = 11px /\n }\n }\n}\n\nol {\n list-style: none;\n counter-reset: li;\n\n a {\n font-weight: $list-item-font-weight;\n }\n\n li:before {\n content: counter(li) '.';\n color: var(--admiralty-colour-primary);\n font-size: var(--admiralty-font-size-0); / OLD: 18px = 1.125rem, NEW: 1rem = 16px */\n margin-right: 12px;\n }\n\n li {\n counter-increment: li;\n margin-bottom: 12px;\n }\n}\n\n.white-text {\n {\n color: var(--admiralty-colour-primary-contrast);\n }\n}\n"]}

package/styles/core.css CHANGED Viewed

@@ -16,6 +16,9 @@ body {
   background: var(--admiralty-background-colour);
   color: var(--admiralty-text-colour);
 }
+body:focus {
+  color: var(--admiralty-focus-contrast);
+}
 .admiralty-colour-primary {
   --admiralty-colour-base: var(--admiralty-colour-primary, #09315b) !important;

package/styles/core.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../src/styles/css/core.scss"],"names":[],"mappings":"AAGQ;AAGR;EACE;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;~~AAyBA~~;EATA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EATA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EATA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EATA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EATA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EATA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EATA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EATA;EACA;EACA;EACA;EACA;EACA","file":"core.css","sourcesContent":["@import '../vars/colours';\n@import '../utils/colour-functions';\n// JohnstonITCPro font imported from CDN\n@import url('https://cdn.fonts.net/kit/aa1c2560-9670-43e2-85b0-f27b25f69c56/aa1c2560-9670-43e2-85b0-f27b25f69c56_enhanced.css');\n\n// Reset browser defaults\n* {\n margin: 0;\n padding: 0;\n border: 0;\n}\n\n// Admiralty Font Family\n// -----------------\n\nhtml {\n --admiralty-font-family: 'JohnstonITCPro', Helvetica, sans-serif;\n --admiralty-font-weight: var(--admiralty-font-weight-normal);\n --admiralty-font-size: 18px;\n --admiralty-line-height: 24px;\n}\n\nbody {\n background: var(--admiralty-background-colour);\n color: var(--admiralty-text-colour);\n}\n\n// Admiralty Colours\n// --------------------------------------------------\n// Generates the colour classes and variables based on the\n// colours map\n\n@mixin generate-colour($colour-name) {\n $value: map-get($colours, $colour-name);\n\n $base: map-get($value, base);\n $contrast: map-get($value, contrast);\n $shade: map-get($value, shade);\n $tint: map-get($value, tint);\n\n --admiralty-colour-base: var(--admiralty-colour-#{$colour-name}, #{$base}) !important;\n --admiralty-colour-base-rgb: var(--admiralty-colour-#{$colour-name}-rgb, #{colour-to-rgb-list($base)}) !important;\n --admiralty-colour-contrast: var(--admiralty-colour-#{$colour-name}-contrast, #{$contrast}) !important;\n --admiralty-colour-contrast-rgb: var(--admiralty-colour-#{$colour-name}-contrast-rgb, #{colour-to-rgb-list($contrast)}) !important;\n --admiralty-colour-shade: var(--admiralty-colour-#{$colour-name}-shade, #{$shade}) !important;\n --admiralty-colour-tint: var(--admiralty-colour-#{$colour-name}-tint, #{$tint}) !important;\n}\n\n@each $colour-name, $value in $colours {\n .admiralty-colour-#{$colour-name} {\n @include generate-colour($colour-name);\n }\n}\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../src/styles/css/core.scss"],"names":[],"mappings":"AAGQ;AAGR;EACE;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AACA;EACE;;;AA0BF;EATA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EATA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EATA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EATA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EATA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EATA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EATA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EATA;EACA;EACA;EACA;EACA;EACA","file":"core.css","sourcesContent":["@import '../vars/colours';\n@import '../utils/colour-functions';\n// JohnstonITCPro font imported from CDN\n@import url('https://cdn.fonts.net/kit/aa1c2560-9670-43e2-85b0-f27b25f69c56/aa1c2560-9670-43e2-85b0-f27b25f69c56_enhanced.css');\n\n// Reset browser defaults\n* {\n margin: 0;\n padding: 0;\n border: 0;\n}\n\n// Admiralty Font Family\n// -----------------\n\nhtml {\n --admiralty-font-family: 'JohnstonITCPro', Helvetica, sans-serif;\n --admiralty-font-weight: var(--admiralty-font-weight-normal);\n --admiralty-font-size: 18px;\n --admiralty-line-height: 24px;\n}\n\nbody {\n background: var(--admiralty-background-colour);\n color: var(--admiralty-text-colour);\n &:focus {\n color: var(--admiralty-focus-contrast);\n }\n}\n\n// Admiralty Colours\n// --------------------------------------------------\n// Generates the colour classes and variables based on the\n// colours map\n\n@mixin generate-colour($colour-name) {\n $value: map-get($colours, $colour-name);\n\n $base: map-get($value, base);\n $contrast: map-get($value, contrast);\n $shade: map-get($value, shade);\n $tint: map-get($value, tint);\n\n --admiralty-colour-base: var(--admiralty-colour-#{$colour-name}, #{$base}) !important;\n --admiralty-colour-base-rgb: var(--admiralty-colour-#{$colour-name}-rgb, #{colour-to-rgb-list($base)}) !important;\n --admiralty-colour-contrast: var(--admiralty-colour-#{$colour-name}-contrast, #{$contrast}) !important;\n --admiralty-colour-contrast-rgb: var(--admiralty-colour-#{$colour-name}-contrast-rgb, #{colour-to-rgb-list($contrast)}) !important;\n --admiralty-colour-shade: var(--admiralty-colour-#{$colour-name}-shade, #{$shade}) !important;\n --admiralty-colour-tint: var(--admiralty-colour-#{$colour-name}-tint, #{$tint}) !important;\n}\n\n@each $colour-name, $value in $colours {\n .admiralty-colour-#{$colour-name} {\n @include generate-colour($colour-name);\n }\n}\n"]}

package/styles/global.bundle.css CHANGED Viewed

@@ -375,12 +375,11 @@ a {
   text-underline-offset: 0.15em;
 }
 a:focus {
-  outline: 3px solid var(--admiralty-focus-colour);
   outline-offset: 1px;
   outline: 3px solid transparent;
-  color: var(--admiralty-text-colour);
+  color: var(--admiralty-focus-contrast);
   background-color: var(--admiralty-focus-colour);
-  box-shadow: 0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-text-colour);
+  box-shadow: 0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-focus-contrast);
   text-decoration: none;
 }
 a:hover {