@swisspost/internet-header 1.7.1 → 1.7.3-beta.0

package/dist/collection/components/post-meta-navigation/post-meta-navigation.css

@@ -23,39 +23,15 @@
   font-weight: 300;
   src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff") format("woff");
 }
-*,
-:host,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-:host {
-  font-family: "Frutiger Neue For Post", system-ui, sans-serif;
-}
-
-button {
-  font: inherit;
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  border: 0;
   padding: 0;
-}
-
-img,
-svg {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-@media (forced-colors: active) {
-  svg {
-    color: white;
-  }
-}
-
-.meta-list, .no-list {
-  list-style: none;
-  padding-left: 0;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
 }
 
 .btn-blank {
@@ -65,12 +41,14 @@ svg {
   padding: 0;
 }
 
-.meta-link, .nav-link {
+.nav-link, .meta-link {
+  outline: none;
+  outline-offset: 2px;
+  /* Compatibility with button-group */
   text-decoration: none;
   color: rgba(0, 0, 0, 0.8);
   transition: color 200ms;
   background-color: transparent;
-  border-radius: 0;
   box-shadow: none;
   border: 0;
   margin: 0;
@@ -78,18 +56,75 @@ svg {
   align-items: center;
   gap: 0.5rem;
 }
-.meta-link:hover, .nav-link:hover, .meta-link:focus, .nav-link:focus {
+.nav-link:is(:focus-visible, :focus-within, .pretend-focus), .meta-link:is(:focus-visible, :focus-within, .pretend-focus) {
+  outline: 2px solid var(--post-contrast-color);
+}
+.nav-link:hover, .meta-link:hover, .nav-link:focus, .meta-link:focus {
   color: black;
 }
-.meta-link > svg, .nav-link > svg {
+.nav-link:focus-visible, .meta-link:focus-visible {
+  z-index: 1;
+  position: relative;
+}
+.nav-link > svg, .meta-link > svg {
   width: 1.4em;
   height: 1.4em;
   flex-shrink: 0;
 }
-.meta-link > span, .nav-link > span {
+.nav-link > span, .meta-link > span {
   flex-shrink: 1;
 }
 
+.no-list, .meta-list {
+  list-style: none;
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+*,
+:host,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  font-family: "Frutiger Neue For Post", system-ui, sans-serif;
+}
+
+button {
+  font: inherit;
+  padding: 0;
+}
+
+a,
+button {
+  border-radius: 3px;
+  outline: none;
+  outline-offset: 2px;
+  /* Compatibility with button-group */
+}
+a:is(:focus-visible, :focus-within, .pretend-focus),
+button:is(:focus-visible, :focus-within, .pretend-focus) {
+  outline: 2px solid var(--post-contrast-color);
+  border-radius: 3px;
+  position: relative;
+  z-index: 1;
+}
+
+img,
+svg {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+@media (forced-colors: active) {
+  svg {
+    color: white;
+  }
+}
+
 .box > *:first-child {
   margin-top: 0;
 }
@@ -151,17 +186,6 @@ svg {
   }
 }
 
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  border: 0;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-}
-
 @media (max-width: -0.02px) {
   .hidden-xs {
     display: none;

package/dist/collection/components/post-meta-navigation/post-meta-navigation.js

@@ -6,11 +6,11 @@ export class PostMetaNavigation {
     this.fullWidth = false;
   }
   render() {
-    var _a;
+    var _a, _b;
     if (((_a = state.localizedConfig) === null || _a === void 0 ? void 0 : _a.header.navMeta) === undefined)
       return;
-    const { navMeta } = state.localizedConfig.header;
-    return (h(Host, null, h("div", { class: `meta-container ${this.orientation}${this.fullWidth ? ' full-width' : ''}` }, h("nav", { class: "meta-navigation" }, h("ul", { class: "meta-list" }, navMeta === null || navMeta === void 0 ? void 0 : navMeta.filter(meta => !meta.isHomeLink).map(meta => (h("li", { key: meta.url }, h("a", { class: { 'active': meta.isActive, 'meta-link': true }, target: meta.target, href: meta.url }, h("span", { "aria-hidden": "true" }, meta.text))))))), h("slot", null))));
+    const headerConfig = state.localizedConfig.header;
+    return (h(Host, null, h("div", { class: `meta-container ${this.orientation}${this.fullWidth ? ' full-width' : ''}` }, h("nav", { "aria-label": headerConfig.translations.navMetaAriaLabel, class: "meta-navigation" }, h("ul", { class: "meta-list" }, (_b = headerConfig.navMeta) === null || _b === void 0 ? void 0 : _b.filter(meta => !meta.isHomeLink).map(meta => (h("li", { key: meta.url }, h("a", { class: { 'active': meta.isActive, 'meta-link': true }, target: meta.target, href: meta.url }, h("span", { "aria-hidden": "true" }, meta.text))))))), h("slot", null))));
   }
   static get is() { return "post-meta-navigation"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-meta-navigation/post-meta-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"post-meta-navigation.js","sourceRoot":"","sources":["../../../../src/components/post-meta-navigation/post-meta-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAOzC,MAAM,OAAO,kBAAkB;;;qBAEC,KAAK;;EAEnC,MAAM;;IACJ,IAAI,CAAA,MAAA,KAAK,CAAC,eAAe,0CAAE,MAAM,CAAC,OAAO,MAAK,SAAS;MAAE,OAAO;IAChE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC;IAEjD,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE;QACpF,WAAK,KAAK,EAAC,iBAAiB;UAC1B,UAAI,KAAK,EAAC,WAAW,IAClB,OAAO,aAAP,OAAO,uBAAP,OAAO,CACJ,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,EAChC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACX,UAAI,GAAG,EAAE,IAAI,CAAC,GAAG;YACf,SACE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,EACrD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,GAAG;cAEd,2BAAkB,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,CACzC,CACD,CACN,CAAC,CACD,CACD;QACN,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { state } from '../../data/store';\n\n@Component({\n  tag: 'post-meta-navigation',\n  styleUrl: 'post-meta-navigation.scss',\n  shadow: true,\n})\nexport class PostMetaNavigation {\n  @Prop() orientation: 'horizontal' | 'vertical';\n  @Prop() fullWidth?: boolean = false;\n\n  render() {\n    if (state.localizedConfig?.header.navMeta === undefined) return;\n    const { navMeta } = state.localizedConfig.header;\n\n    return (\n      <Host>\n        <div class={`meta-container ${this.orientation}${this.fullWidth ? ' full-width' : ''}`}>\n          <nav class=\"meta-navigation\">\n            <ul class=\"meta-list\">\n              {navMeta\n                ?.filter(meta => !meta.isHomeLink)\n                .map(meta => (\n                  <li key={meta.url}>\n                    <a\n                      class={{ 'active': meta.isActive, 'meta-link': true }}\n                      target={meta.target}\n                      href={meta.url}\n                    >\n                      <span aria-hidden=\"true\">{meta.text}</span>\n                    </a>\n                  </li>\n                ))}\n            </ul>\n          </nav>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"post-meta-navigation.js","sourceRoot":"","sources":["../../../../src/components/post-meta-navigation/post-meta-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAOzC,MAAM,OAAO,kBAAkB;;;qBAEC,KAAK;;EAEnC,MAAM;;IACJ,IAAI,CAAA,MAAA,KAAK,CAAC,eAAe,0CAAE,MAAM,CAAC,OAAO,MAAK,SAAS;MAAE,OAAO;IAChE,MAAM,YAAY,GAAG,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC;IAElD,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE;QACpF,yBAAiB,YAAY,CAAC,YAAY,CAAC,gBAAgB,EAAE,KAAK,EAAC,iBAAiB;UAClF,UAAI,KAAK,EAAC,WAAW,IAClB,MAAA,YAAY,CAAC,OAAO,0CACjB,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,EAChC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACX,UAAI,GAAG,EAAE,IAAI,CAAC,GAAG;YACf,SACE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,EACrD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,GAAG;cAEd,2BAAkB,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,CACzC,CACD,CACN,CAAC,CACD,CACD;QACN,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { state } from '../../data/store';\n\n@Component({\n  tag: 'post-meta-navigation',\n  styleUrl: 'post-meta-navigation.scss',\n  shadow: true,\n})\nexport class PostMetaNavigation {\n  @Prop() orientation: 'horizontal' | 'vertical';\n  @Prop() fullWidth?: boolean = false;\n\n  render() {\n    if (state.localizedConfig?.header.navMeta === undefined) return;\n    const headerConfig = state.localizedConfig.header;\n\n    return (\n      <Host>\n        <div class={`meta-container ${this.orientation}${this.fullWidth ? ' full-width' : ''}`}>\n          <nav aria-label={headerConfig.translations.navMetaAriaLabel} class=\"meta-navigation\">\n            <ul class=\"meta-list\">\n              {headerConfig.navMeta\n                ?.filter(meta => !meta.isHomeLink)\n                .map(meta => (\n                  <li key={meta.url}>\n                    <a\n                      class={{ 'active': meta.isActive, 'meta-link': true }}\n                      target={meta.target}\n                      href={meta.url}\n                    >\n                      <span aria-hidden=\"true\">{meta.text}</span>\n                    </a>\n                  </li>\n                ))}\n            </ul>\n          </nav>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}