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

package/dist/cjs/admiralty-text-side-bar-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-text-side-bar-item.entry.cjs.js","mappings":"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","names":["h","Host"],"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}
+{"file":"admiralty-text-side-bar-item.entry.cjs.js","mappings":"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","names":["h","Host"],"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/cjs/admiralty-text-side-bar.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2aa80b51.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/cjs/admiralty-text-side-bar.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-text-side-bar.entry.cjs.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,QACEA,gFAAiB,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,IAC7IA,mEACEA,mEAAM,IAAI,EAAC,OAAO,GAAQ,CACvB,EACLA,mEACEA,mEAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,IAAI,CAAC,QAAQ,GAAGA,iBAAK,KAAK,EAAC,MAAM,EAAC,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,EAAC,WAAW,iBAAa,MAAM,GAAG,GAAG,IAAI,CAClG,CACD,EACN;KACH;;;;;;;","names":["h"],"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}
+{"file":"admiralty-text-side-bar.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,wjDAAwjD,CAAC;AAChlD,mCAAe,cAAc;;MCWhB,oBAAoB;;;;wBASH,IAAI;0BAIH,oBAAoB;gCAKd,OAAO;;IAE1C,MAAM;QACJ,QACEA,gFAAiB,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,IAC7IA,mEACEA,mEAAM,IAAI,EAAC,OAAO,GAAQ,CACvB,EACLA,mEACEA,mEAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,IAAI,CAAC,QAAQ,GAAGA,iBAAK,KAAK,EAAC,MAAM,EAAC,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,EAAC,WAAW,iBAAa,MAAM,GAAG,GAAG,IAAI,CAClG,CACD,EACN;KACH;;;;;;;","names":["h"],"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/dist/collection/components/breadcrumb/breadcrumb.css

@@ -34,6 +34,8 @@ a:hover {
 }
 a:focus {
   text-decoration: none;
+  background-color: var(--admiralty-focus-colour);
+  color: var(--admiralty-focus-contrast);
 }
 a.active {
   color: var(--admiralty-colour-primary);

package/dist/collection/components/button/button.css

@@ -109,14 +109,14 @@ button.primary {
 }
 button.primary:focus {
   outline: none;
-  color: var(--admiralty-text-colour);
+  color: var(--admiralty-focus-contrast);
   background-color: var(--admiralty-focus-colour);
   border: none;
-  border-bottom: 4px solid var(--admiralty-text-colour);
+  border-bottom: 4px solid var(--admiralty-focus-contrast);
   padding: var(--admiralty-button-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2));
 }
 button.primary:focus ::slotted(*) {
-  color: var(--admiralty-text-colour) !important;
+  color: var(--admiralty-focus-contrast) !important;
 }
 button.primary:disabled {
   cursor: default;
@@ -195,14 +195,14 @@ button.secondary {
 }
 button.secondary:focus {
   outline: none;
-  color: var(--admiralty-text-colour);
+  color: var(--admiralty-focus-contrast);
   background-color: var(--admiralty-focus-colour);
   border: none;
-  border-bottom: 4px solid var(--admiralty-text-colour);
+  border-bottom: 4px solid var(--admiralty-focus-contrast);
   padding: var(--admiralty-button-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2));
 }
 button.secondary:focus ::slotted(*) {
-  color: var(--admiralty-text-colour) !important;
+  color: var(--admiralty-focus-contrast) !important;
 }
 button.secondary:disabled {
   cursor: default;
@@ -277,14 +277,14 @@ button.warning {
 }
 button.warning:focus {
   outline: none;
-  color: var(--admiralty-text-colour);
+  color: var(--admiralty-focus-contrast);
   background-color: var(--admiralty-focus-colour);
   border: none;
-  border-bottom: 4px solid var(--admiralty-text-colour);
+  border-bottom: 4px solid var(--admiralty-focus-contrast);
   padding: var(--admiralty-button-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2));
 }
 button.warning:focus ::slotted(*) {
-  color: var(--admiralty-text-colour) !important;
+  color: var(--admiralty-focus-contrast) !important;
 }
 button.warning:disabled {
   cursor: default;
@@ -356,14 +356,14 @@ button.text {
 }
 button.text:focus {
   outline: none;
-  color: var(--admiralty-text-colour);
+  color: var(--admiralty-focus-contrast);
   background-color: var(--admiralty-focus-colour);
   border: none;
-  border-bottom: 4px solid var(--admiralty-text-colour);
+  border-bottom: 4px solid var(--admiralty-focus-contrast);
   padding: var(--admiralty-button-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2));
 }
 button.text:focus ::slotted(*) {
-  color: var(--admiralty-text-colour) !important;
+  color: var(--admiralty-focus-contrast) !important;
 }
 button.text:disabled {
   cursor: default;
@@ -394,12 +394,12 @@ button.text:disabled > * {
 }
 button.text:focus {
   border: none;
-  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;
   padding: var(--admiralty-button-text-focus-padding, var(--admiralty-spacing-0));
 }
 button.text:focus ::slotted(*) {
-  color: var(--admiralty-text-colour) !important;
+  color: var(--admiralty-focus-contrast) !important;
 }
 button.text i {
   color: var(--admiralty-colour-primary);
@@ -425,14 +425,14 @@ button.icon {
 }
 button.icon:focus {
   outline: none;
-  color: var(--admiralty-text-colour);
+  color: var(--admiralty-focus-contrast);
   background-color: var(--admiralty-focus-colour);
   border: none;
-  border-bottom: 4px solid var(--admiralty-text-colour);
+  border-bottom: 4px solid var(--admiralty-focus-contrast);
   padding: var(--admiralty-button-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2));
 }
 button.icon:focus ::slotted(*) {
-  color: var(--admiralty-text-colour) !important;
+  color: var(--admiralty-focus-contrast) !important;
 }
 button.icon:disabled {
   cursor: default;
@@ -505,14 +505,14 @@ button.icon-secondary {
 }
 button.icon-secondary:focus {
   outline: none;
-  color: var(--admiralty-text-colour);
+  color: var(--admiralty-focus-contrast);
   background-color: var(--admiralty-focus-colour);
   border: none;
-  border-bottom: 4px solid var(--admiralty-text-colour);
+  border-bottom: 4px solid var(--admiralty-focus-contrast);
   padding: var(--admiralty-button-focus-padding, var(--admiralty-spacing-3) 18px var(--admiralty-spacing-2));
 }
 button.icon-secondary:focus ::slotted(*) {
-  color: var(--admiralty-text-colour) !important;
+  color: var(--admiralty-focus-contrast) !important;
 }
 button.icon-secondary:disabled {
   cursor: default;

package/dist/collection/components/card/card.css

@@ -140,15 +140,15 @@
   display: flex;
   flex-direction: column;
   border: 1px solid var(--admiralty-card-border-colour, var(--admiralty-colour-light));
-  background-color: var(--admiralty-card-background-colour, var(--admiralty-background-colour));
+  background-color: var(--admiralty-card-background-colour);
 }
 .card > h6 {
   font-size: var(--admiralty-card-heading-font-size, var(--admiralty-font-size-0));
   height: 60px;
   line-height: 60px;
-  border: 1px solid var(--admiralty-card-heading-border-colour, var(--admiralty-colour-primary));
+  border: 1px solid var(--admiralty-card-heading-border-colour);
   color: var(--admiralty-card-heading-text-colour, var(--admiralty-colour-primary-contrast));
-  background-color: var(--admiralty-card-heading-colour, var(--admiralty-colour-primary));
+  background-color: var(--admiralty-card-heading-colour);
   margin: var(--admiralty-card-heading-margin, var(--admiralty-spacing-0));
   padding: var(--admiralty-card-heading-padding, var(--admiralty-spacing-0) var(--admiralty-spacing-7));
 }

package/dist/collection/components/colour-block/colour-block.css

@@ -83,7 +83,7 @@
   cursor: pointer;
 }
 .colourBlock .clickAction:focus * {
-  color: var(--admiralty-text-colour) !important;
+  color: var(--admiralty-focus-contrast) !important;
 }
 .colourBlock .clickAction span {
   font-weight: var(--admiralty-colour-block-action-font-weight, var(--admiralty-font-weight-medium));
@@ -97,10 +97,10 @@
   }
 }
 .colourBlock.admiralty-blue {
-  background-color: var(--admiralty-colour-primary);
+  background-color: var(--colour-block-blue-background-colour);
 }
 .colourBlock.admiralty-blue * {
-  color: var(--admiralty-colour-primary-contrast);
+  color: var(--colour-block-blue-text-colour);
 }
 .colourBlock.teal {
   background-color: var(--admiralty-colour-secondary);
@@ -110,8 +110,10 @@
 }
 .colourBlock.bright-blue {
   background-color: var(--admiralty-colour-tertiary);
-  color: var(--admiralty-colour-primary);
+}
+.colourBlock.bright-blue * {
+  color: var(--colour-block-bright-blue-text-colour);
 }
 .colourBlock.bright-blue .clickAction * {
-  color: var(--admiralty-colour-primary);
+  color: var(--colour-block-bright-blue-text-colour);
 }

package/dist/collection/components/expansion/expansion.css

@@ -122,8 +122,11 @@ section.expansion button h3.expansion-heading-right-align {
 }
 section.expansion button:focus {
   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;
+}
+section.expansion button:focus h3 {
+  color: black;
 }

package/dist/collection/components/footer/footer.css

@@ -118,6 +118,11 @@ footer .footer-branding .footer-img a {
 footer .footer-branding .footer-img img {
   height: 100%;
 }
+@media (prefers-color-scheme: dark) {
+  footer img {
+    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg);
+  }
+}
 @media (min-width: 481px) {
   footer .footer-content {
     display: flex;
@@ -240,4 +245,10 @@ footer.footer-compact .footer-content .footer-text p {
   font-style: normal;
   font-weight: var(--admiralty-footer-compact-font-weight, var(--admiralty-font-weight-normal));
   line-height: 1.5rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  footer.footer-compact {
+    opacity: 1;
+  }
 }

package/dist/collection/components/header/header.css

@@ -88,7 +88,7 @@
   border-bottom: 1px solid var(--admiralty-colour-light);
   display: flex;
   flex-direction: row;
-  background-color: var(--admiralty-background-colour);
+  background-color: var(--admiralty-header-background-colour);
   height: 5em;
   min-height: 5em;
   position: relative;
@@ -124,11 +124,16 @@
 }
 .header-branding a.header-logo:focus {
   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;
 }
+@media (prefers-color-scheme: dark) {
+  .header-branding img {
+    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg);
+  }
+}
 .header-branding .vertical-seperator {
   border-right: 1px solid var(--admiralty-colour-light);
   margin: var(--admiralty-header-vertical-separator-margin, var(--admiralty-spacing-0) var(--admiralty-spacing-6));
@@ -200,9 +205,9 @@
 }
 .header-menus .mobile-menu-toggle button:focus {
   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;
   outline: none;
   box-shadow: 0 -4px var(--admiralty-text-colour) inset;
@@ -217,7 +222,7 @@
     top: 100%;
     z-index: 999;
     min-width: 100%;
-    background-color: var(--admiralty-background-colour);
+    background-color: var(--admiralty-header-background-colour);
     border: 1px solid var(--admiralty-colour-light);
   }
 }

package/dist/collection/components/header-menu-item/header-menu-item.css

@@ -76,9 +76,9 @@
 }
 .menu-item .menu-title:focus div {
   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;
 }
 

package/dist/collection/components/header-profile/header-profile.css

@@ -110,9 +110,9 @@
   }
   .header-profile button:focus span, .header-profile button:focus div {
     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;
   }
   .header-profile:hover {
@@ -191,9 +191,9 @@
   }
   .header-profile .sub-menu-item:focus span {
     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;
   }
 }

package/dist/collection/components/header-sub-menu-item/header-sub-menu-item.css

@@ -82,9 +82,9 @@
 }
 .header-sub-menu-item:focus span {
   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;
 }
 @media (min-width: 1024px) {

package/dist/collection/components/radio/radio.css

@@ -98,8 +98,7 @@
   border: 2px solid var(--admiralty-disabled-colour);
 }
 .admiralty-radio input:focus {
-  outline: 4px solid var(--admiralty-focus-colour);
-  outline-offset: 0;
+  border-color: var(--admiralty-focus-colour);
   border-width: 3.5px;
 }
 .admiralty-radio label {

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

@@ -108,8 +108,8 @@ section.expansion button:hover {
 }
 section.expansion button:focus {
   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;
 }

package/dist/collection/components/tab-group/tab-group.css

@@ -119,9 +119,9 @@ hr {
 }
 .headers .heading:focus, .headers .heading.active:focus {
   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;
   box-shadow: 0px -4px var(--admiralty-text-colour) inset;
 }
@@ -131,6 +131,7 @@ hr {
   box-shadow: unset;
 }
 .headers .heading.active {
-  background-color: var(--admiralty-colour-primary);
-  color: var(--admiralty-colour-primary-contrast);
+  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;
 }

package/dist/collection/components/text-side-bar/text-side-bar.css

@@ -63,12 +63,17 @@
   border-right: 1px solid var(--admiralty-text-side-bar-right-border, var(--admiralty-colour-light));
 }
 
+@media (prefers-color-scheme: dark) {
+  :host {
+    color-scheme: dark;
+  }
+}
 nav {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: 100%;
-  background-color: var(--admiralty-colour-primary-contrast);
+  background-color: var(--admiralty-header-background-colour);
 }
 
 ul {

package/dist/collection/components/text-side-bar-item/text-side-bar-item.css

@@ -87,6 +87,7 @@ li:before {
   flex: 1;
   display: flex;
   flex-flow: column;
+  background-color: var(--admiralty-header-background-colour);
 }
 .expandable-item .expandable-item-button {
   display: inline-flex;
@@ -94,7 +95,7 @@ li:before {
   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;
+  background-color: var(--admiralty-header-background-colour);
   cursor: pointer;
   padding: 0.3rem 0.5rem;
   overflow-wrap: break-word;
@@ -107,19 +108,21 @@ li:before {
 }
 .expandable-item .expandable-item-button:focus-visible, .expandable-item .expandable-item-button.active:focus-visible {
   outline: none;
-  box-shadow: inset 0 -4px 0 0 var(--admiralty-colour-primary);
-  background-color: var(--admiralty-focus-colour);
+  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 .expandable-item-button.active {
   font-weight: 500;
-  background-color: var(--admiralty-colour-primary);
-  color: var(--admiralty-colour-primary-contrast);
+  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 .expandable-item-button:active {
   background-color: var(--admiralty-focus-colour);
-  color: var(--admiralty-colour-primary);
-  box-shadow: inset 0 -4px 0 0 var(--admiralty-colour-primary);
+  color: var(--admiralty-focus-contrast);
+  box-shadow: inset 0 -4px 0 0 var(--admiralty-focus-contrast);
 }
 .expandable-item .expandable-item-button .slot {
   line-height: 2.5rem;
@@ -167,17 +170,19 @@ li:before {
 }
 .text-link:focus-visible, .text-link.active:focus-visible {
   outline: none;
-  box-shadow: inset 0 -4px 0 0 var(--admiralty-colour-primary);
-  background-color: var(--admiralty-focus-colour);
+  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 {
   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);
+  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:active {
   background-color: var(--admiralty-focus-colour);
-  color: var(--admiralty-colour-primary);
-  box-shadow: inset 0 -4px 0 0 var(--admiralty-colour-primary);
+  color: var(--admiralty-focus-contrast);
+  box-shadow: inset 0 -4px 0 0 var(--admiralty-focus-contrast);
 }

package/dist/components/admiralty-breadcrumb.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-7dd465c9.js';
 import { d as defineCustomElement$2 } from './p-9bd9f5c0.js';
 
-const breadcrumbCss = ".sc-admiralty-breadcrumb-h{display:flex;align-items:center}.breadcrumb-icon.sc-admiralty-breadcrumb{margin:var(--admiralty-breadcrumb-icon-margin, var(--admiralty-spacing-0) var(--admiralty-spacing-2));font-size:var(--admiralty-breadcrumb-icon-font-size, var(--admiralty-font-size--2));color:var(--admiralty-colour-primary)}a.sc-admiralty-breadcrumb{display:inline-block;font-size:var(--admiralty-breadcrumb-font-size, var(--admiralty-font-size--1));font-weight:var(--admiralty-breadcrumb-font-weight, var(--admiralty-font-weight-normal));text-decoration:none;color:var(--admiralty-text-colour);margin:var(--admiralty-breadcrumb-href-margin, var(--admiralty-spacing-2) var(--admiralty-spacing-1))}a.sc-admiralty-breadcrumb:hover{color:var(--admiralty-colour-primary);text-decoration:underline;text-underline-offset:0.15em;text-decoration-thickness:0.15em}a.sc-admiralty-breadcrumb:focus{text-decoration:none}a.active.sc-admiralty-breadcrumb{color:var(--admiralty-colour-primary);font-weight:var(--admiralty-breadcrumb-font-weight-active, var(--admiralty-font-weight-medium))}";
+const breadcrumbCss = ".sc-admiralty-breadcrumb-h{display:flex;align-items:center}.breadcrumb-icon.sc-admiralty-breadcrumb{margin:var(--admiralty-breadcrumb-icon-margin, var(--admiralty-spacing-0) var(--admiralty-spacing-2));font-size:var(--admiralty-breadcrumb-icon-font-size, var(--admiralty-font-size--2));color:var(--admiralty-colour-primary)}a.sc-admiralty-breadcrumb{display:inline-block;font-size:var(--admiralty-breadcrumb-font-size, var(--admiralty-font-size--1));font-weight:var(--admiralty-breadcrumb-font-weight, var(--admiralty-font-weight-normal));text-decoration:none;color:var(--admiralty-text-colour);margin:var(--admiralty-breadcrumb-href-margin, var(--admiralty-spacing-2) var(--admiralty-spacing-1))}a.sc-admiralty-breadcrumb:hover{color:var(--admiralty-colour-primary);text-decoration:underline;text-underline-offset:0.15em;text-decoration-thickness:0.15em}a.sc-admiralty-breadcrumb:focus{text-decoration:none;background-color:var(--admiralty-focus-colour);color:var(--admiralty-focus-contrast)}a.active.sc-admiralty-breadcrumb{color:var(--admiralty-colour-primary);font-weight:var(--admiralty-breadcrumb-font-weight-active, var(--admiralty-font-weight-medium))}";
 const AdmiraltyBreadcrumbStyle0 = breadcrumbCss;
 
 const BreadcrumbComponent = /*@__PURE__*/ proxyCustomElement(class BreadcrumbComponent extends H {

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

@@ -1 +1 @@
-{"file":"admiralty-breadcrumb.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,qjCAAqjC,CAAC;AAC5kC,kCAAe,aAAa;;MCMf,mBAAmB;;;;sBAMb,KAAK;;;;IAatB,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,CAAC,IAAI,CAAC,KAAK,IAAI,uEAAgB,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,2BAA2B,GAAkB,EAC1G,0DAAG,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,GAAG,IACvD,8DAAa,CACX,CACC,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=admiralty-breadcrumb&encapsulation=scoped","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@import \"breadcrumb.vars\";\n\n:host {\n  display: flex;\n  align-items: center;\n}\n\n.breadcrumb-icon {\n  margin: $breadcrumb-icon-margin;\n  font-size: $breadcrumb-icon-font-size;\n  color: $breadcrumb-separator-colour;\n}\n\na {\n  display: inline-block;\n  font-size: $breadcrumb-font-size;\n  font-weight: $breadcrumb-font-weight;\n  text-decoration: none;\n  color: $breadcrumb-font-colour;\n  margin: $breadcrumb-href-margin;\n\n  &:hover {\n    color: $breadcrumb-font-colour-hover;\n    text-decoration: underline;\n    text-underline-offset: 0.15em;\n    text-decoration-thickness: 0.15em;\n  }\n\n  &:focus {\n    text-decoration: none;\n  }\n\n  &.active {\n    color: $breadcrumb-font-colour-active;\n    font-weight: $breadcrumb-font-weight-active;\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  scoped: true,\n})\nexport class BreadcrumbComponent {\n  /**\n   * When `true` the breadcrumb will by styled to show that it is the\n   * currently active breadcrumb. Defaults to `true` for the\n   * last breadcrumb if it is not set on any.\n   */\n  @Prop() active = false;\n\n  /**\n   * @internal\n   * When set to `true` the breadcrumb will not be prefixed with a chevron.\n   */\n  @Prop() first!: boolean;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   */\n  @Prop() href: string | undefined;\n\n  render() {\n    return (\n      <Host>\n        {!this.first && <admiralty-icon class=\"breadcrumb-icon\" name=\"arrow-forward-ios-rounded\"></admiralty-icon>}\n        <a class={{ active: this.active }} href={this.href || '#'}>\n          <slot></slot>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"admiralty-breadcrumb.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,0oCAA0oC,CAAC;AACjqC,kCAAe,aAAa;;MCMf,mBAAmB;;;;sBAMb,KAAK;;;;IAatB,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,CAAC,IAAI,CAAC,KAAK,IAAI,uEAAgB,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,2BAA2B,GAAkB,EAC1G,0DAAG,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,GAAG,IACvD,8DAAa,CACX,CACC,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=admiralty-breadcrumb&encapsulation=scoped","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@import \"breadcrumb.vars\";\n\n:host {\n  display: flex;\n  align-items: center;\n}\n\n.breadcrumb-icon {\n  margin: $breadcrumb-icon-margin;\n  font-size: $breadcrumb-icon-font-size;\n  color: $breadcrumb-separator-colour;\n}\n\na {\n  display: inline-block;\n  font-size: $breadcrumb-font-size;\n  font-weight: $breadcrumb-font-weight;\n  text-decoration: none;\n  color: $breadcrumb-font-colour;\n  margin: $breadcrumb-href-margin;\n\n  &:hover {\n    color: $breadcrumb-font-colour-hover;\n    text-decoration: underline;\n    text-underline-offset: 0.15em;\n    text-decoration-thickness: 0.15em;\n  }\n\n  &:focus {\n    text-decoration: none;\n    background-color: $focus-background-colour;\n    color: $focus-text-colour;\n  }\n\n  &.active {\n    color: $breadcrumb-font-colour-active;\n    font-weight: $breadcrumb-font-weight-active;\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  scoped: true,\n})\nexport class BreadcrumbComponent {\n  /**\n   * When `true` the breadcrumb will by styled to show that it is the\n   * currently active breadcrumb. Defaults to `true` for the\n   * last breadcrumb if it is not set on any.\n   */\n  @Prop() active = false;\n\n  /**\n   * @internal\n   * When set to `true` the breadcrumb will not be prefixed with a chevron.\n   */\n  @Prop() first!: boolean;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   */\n  @Prop() href: string | undefined;\n\n  render() {\n    return (\n      <Host>\n        {!this.first && <admiralty-icon class=\"breadcrumb-icon\" name=\"arrow-forward-ios-rounded\"></admiralty-icon>}\n        <a class={{ active: this.active }} href={this.href || '#'}>\n          <slot></slot>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/admiralty-button.js

@@ -1,4 +1,4 @@
-import { B as ButtonComponent, d as defineCustomElement$1 } from './p-a208e1b2.js';
+import { B as ButtonComponent, d as defineCustomElement$1 } from './p-241ed50c.js';
 
 const AdmiraltyButton = ButtonComponent;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/admiralty-card.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-7dd465c9.js';
 
-const cardCss = ".visually-hidden.sc-admiralty-card: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-card{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-card{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-card{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-card{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-card{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-card{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-card{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-card{display:none}}.visually-hidden.sc-admiralty-card: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-card{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-card{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-card{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-card{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-card{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-card{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-card{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-card{display:none}}.card.sc-admiralty-card{display:flex;flex-direction:column;border:1px solid var(--admiralty-card-border-colour, var(--admiralty-colour-light));background-color:var(--admiralty-card-background-colour, var(--admiralty-background-colour))}.card.sc-admiralty-card>h6.sc-admiralty-card{font-size:var(--admiralty-card-heading-font-size, var(--admiralty-font-size-0));height:60px;line-height:60px;border:1px solid var(--admiralty-card-heading-border-colour, var(--admiralty-colour-primary));color:var(--admiralty-card-heading-text-colour, var(--admiralty-colour-primary-contrast));background-color:var(--admiralty-card-heading-colour, var(--admiralty-colour-primary));margin:var(--admiralty-card-heading-margin, var(--admiralty-spacing-0));padding:var(--admiralty-card-heading-padding, var(--admiralty-spacing-0) var(--admiralty-spacing-7))}@media (max-width: 1023px){.card.sc-admiralty-card>h6.sc-admiralty-card{padding:var(--admiralty-card-heading-not-desktop-padding, var(--admiralty-spacing-0) var(--admiralty-spacing-4));height:48px;line-height:48px}}.card.sc-admiralty-card>div.sc-admiralty-card{border-top:none;flex-grow:1;padding:var(--admiralty-card-padding, 30px)}@media (max-width: 1023px){.card.sc-admiralty-card>div.sc-admiralty-card{padding:var(--admiralty-card-not-desktop-padding, var(--admiralty-spacing-6) 18px)}}";
+const cardCss = ".visually-hidden.sc-admiralty-card: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-card{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-card{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-card{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-card{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-card{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-card{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-card{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-card{display:none}}.visually-hidden.sc-admiralty-card: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-card{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-card{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-card{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-card{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-card{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-card{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-card{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-card{display:none}}.card.sc-admiralty-card{display:flex;flex-direction:column;border:1px solid var(--admiralty-card-border-colour, var(--admiralty-colour-light));background-color:var(--admiralty-card-background-colour)}.card.sc-admiralty-card>h6.sc-admiralty-card{font-size:var(--admiralty-card-heading-font-size, var(--admiralty-font-size-0));height:60px;line-height:60px;border:1px solid var(--admiralty-card-heading-border-colour);color:var(--admiralty-card-heading-text-colour, var(--admiralty-colour-primary-contrast));background-color:var(--admiralty-card-heading-colour);margin:var(--admiralty-card-heading-margin, var(--admiralty-spacing-0));padding:var(--admiralty-card-heading-padding, var(--admiralty-spacing-0) var(--admiralty-spacing-7))}@media (max-width: 1023px){.card.sc-admiralty-card>h6.sc-admiralty-card{padding:var(--admiralty-card-heading-not-desktop-padding, var(--admiralty-spacing-0) var(--admiralty-spacing-4));height:48px;line-height:48px}}.card.sc-admiralty-card>div.sc-admiralty-card{border-top:none;flex-grow:1;padding:var(--admiralty-card-padding, 30px)}@media (max-width: 1023px){.card.sc-admiralty-card>div.sc-admiralty-card{padding:var(--admiralty-card-not-desktop-padding, var(--admiralty-spacing-6) 18px)}}";
 const AdmiraltyCardStyle0 = cardCss;
 
 const CardComponent = /*@__PURE__*/ proxyCustomElement(class CardComponent extends H {

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

@@ -1 +1 @@
-{"file":"admiralty-card.js","mappings":";;AAAA,MAAM,OAAO,GAAG,8vGAA8vG,CAAC;AAC/wG,4BAAe,OAAO;;MCMT,aAAa;;;;;;IAMxB,MAAM;QACJ,QACE,gEAAS,KAAK,EAAC,MAAM,IAClB,IAAI,CAAC,OAAO,GAAG,cAAK,IAAI,CAAC,OAAO,CAAM,GAAG,IAAI,EAC9C,8DACE,8DAAa,CACT,CACE,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/card/card.scss?tag=admiralty-card&encapsulation=scoped","src/components/card/card.tsx"],"sourcesContent":["@import 'card.vars';\n@import '../../styles/vars/globals';\n\n.card {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid $card-border-colour;\n  background-color: $card-background-colour;\n\n  & > h6 {\n    font-size: $card-heading-font-size;\n    height: 60px;\n    line-height: 60px;\n    border: 1px solid $card-heading-border-colour;\n    color: $card-heading-text-colour;\n    background-color: $card-heading-colour;\n    margin: $card-heading-margin;\n    padding: $card-heading-padding;\n\n    @include not-desktop {\n      padding: $card-heading-not-desktop-padding;\n      height: 48px;\n      line-height: 48px;\n    }\n  }\n\n  & > div {\n    border-top: none;\n    flex-grow: 1;\n    padding: $card-padding;\n    @include not-desktop {\n      padding: $card-padding-not-desktop;\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-card',\n  styleUrl: 'card.scss',\n  scoped: true,\n})\nexport class CardComponent {\n  /**\n   * The title of the card.\n   */\n  @Prop() heading: string;\n\n  render() {\n    return (\n      <section class=\"card\">\n        {this.heading ? <h6>{this.heading}</h6> : null}\n        <div>\n          <slot></slot>\n        </div>\n      </section>\n    );\n  }\n}\n"],"version":3}
+{"file":"admiralty-card.js","mappings":";;AAAA,MAAM,OAAO,GAAG,wpGAAwpG,CAAC;AACzqG,4BAAe,OAAO;;MCMT,aAAa;;;;;;IAMxB,MAAM;QACJ,QACE,gEAAS,KAAK,EAAC,MAAM,IAClB,IAAI,CAAC,OAAO,GAAG,cAAK,IAAI,CAAC,OAAO,CAAM,GAAG,IAAI,EAC9C,8DACE,8DAAa,CACT,CACE,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/card/card.scss?tag=admiralty-card&encapsulation=scoped","src/components/card/card.tsx"],"sourcesContent":["@import 'card.vars';\n@import '../../styles/vars/globals';\n\n.card {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid $card-border-colour;\n  background-color: $card-background-colour;\n\n  & > h6 {\n    font-size: $card-heading-font-size;\n    height: 60px;\n    line-height: 60px;\n    border: 1px solid $card-heading-border-colour;\n    color: $card-heading-text-colour;\n    background-color: $card-heading-colour;\n    margin: $card-heading-margin;\n    padding: $card-heading-padding;\n\n    @include not-desktop {\n      padding: $card-heading-not-desktop-padding;\n      height: 48px;\n      line-height: 48px;\n    }\n  }\n\n  & > div {\n    border-top: none;\n    flex-grow: 1;\n    padding: $card-padding;\n    @include not-desktop {\n      padding: $card-padding-not-desktop;\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-card',\n  styleUrl: 'card.scss',\n  scoped: true,\n})\nexport class CardComponent {\n  /**\n   * The title of the card.\n   */\n  @Prop() heading: string;\n\n  render() {\n    return (\n      <section class=\"card\">\n        {this.heading ? <h6>{this.heading}</h6> : null}\n        <div>\n          <slot></slot>\n        </div>\n      </section>\n    );\n  }\n}\n"],"version":3}