@oiz/stzh-components 2.5.0-alpha-carousel → 2.5.0-alpha

package/dist/collection/components/stzh-invert/stzh-invert.stories.js

@@ -29,20 +29,44 @@ const Template = (args) => (
       <stzh-container>
         <stzh-vspace curve="large"></stzh-vspace>
 
-        <stzh-vspace>
+        <stzh-cspace>
           <stzh-richtext>
             <h2>Richtext</h2>
             <blockquote>
               <p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
               <footer>Aenean imperdiet</footer>
             </blockquote>
-            <p>Richtext</p>
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
           </stzh-richtext>
-          <stzh-button label="Button (Primary)"></stzh-button>
-          <stzh-button label="Button (Secondary)" variant="secondary"></stzh-button>
-          <stzh-chip label="Chip (Filter)" variant="filter"></stzh-chip>
-          <stzh-chip label="Chip (Filter, non interactive)" variant="filter" non-interactive></stzh-chip>
-        </stzh-vspace>
+
+          <stzh-heading level="2" with-border>Buttons</stzh-heading>
+          <stzh-vspace>
+            <stzh-hspace>
+              <stzh-button label="Button (Primary)"></stzh-button>
+              <stzh-button label="Button (Primary, Disabled)" disabled></stzh-button>
+            </stzh-hspace>
+            <stzh-hspace>
+              <stzh-button label="Button (Secondary)" variant="secondary"></stzh-button>
+              <stzh-button label="Button (Secondary, Disabled)" variant="secondary" disabled></stzh-button>
+            </stzh-hspace>
+            <stzh-hspace>
+              <stzh-button label="Button (Tertiary)" variant="tertiary"></stzh-button>
+              <stzh-button label="Button (Tertiary, Disabled)" variant="tertiary" disabled></stzh-button>
+            </stzh-hspace>
+          </stzh-vspace>
+
+          <stzh-heading level="2" with-border>Chips</stzh-heading>
+          <stzh-vspace>
+            <stzh-hspace>
+              <stzh-chip label="Chip (Filter)" variant="filter"></stzh-chip>
+              <stzh-chip label="Chip (Filter, Active)" variant="filter" active></stzh-chip>
+              <stzh-chip label="Chip (Filter, Disabled)" variant="filter" disabled></stzh-chip>
+            </stzh-hspace>
+            <stzh-hspace>
+              <stzh-chip label="Chip (Filter, non interactive)" variant="filter" non-interactive></stzh-chip>
+            </stzh-hspace>
+          </stzh-vspace>
+        </stzh-cspace>
 
         <stzh-vspace curve="large"></stzh-vspace>
       </stzh-container>

package/dist/collection/components/stzh-langnav/stzh-langnav.css

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {

package/dist/collection/components/stzh-link/stzh-link.css

@@ -96,18 +96,19 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {
   --color: var(--stzh-link-color);
-  --text-decoration: underline;
+  --text-decoration-line: underline;
   --icon-size: var(--stzh-icon-size-medium);
   --icon-wrapper-height: var(--stzh-link-icon-wrapper-height);
   --hover-color: var(--stzh-link-hover-color);
-  --hover-text-decoration: underline;
+  --hover-text-decoration-line: underline;
   color: var(--color);
   display: inline-block;
-  border-radius: var(--stzh-button-border-radius);
 }
 :host ::slotted(stzh-text) {
   --color: initial;
@@ -152,7 +153,8 @@
   transition: color var(--stzh-base-transition-animation-speed);
   cursor: pointer;
   width: 100%;
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
   background-color: transparent;
   padding: 0;
   border-radius: var(--stzh-button-border-radius);
@@ -174,8 +176,8 @@
   color: var(--hover-color);
 }
 .stzh-link:hover .stzh-link__text {
-  -webkit-text-decoration: var(--hover-text-decoration);
-          text-decoration: var(--hover-text-decoration);
+  -webkit-text-decoration-line: var(--hover-text-decoration-line);
+          text-decoration-line: var(--hover-text-decoration-line);
 }
 .stzh-link__vhidden {
   border: 0;
@@ -203,8 +205,8 @@
   height: var(--icon-wrapper-height);
 }
 .stzh-link__text {
-  -webkit-text-decoration: var(--text-decoration);
-          text-decoration: var(--text-decoration);
+  -webkit-text-decoration-line: var(--text-decoration-line);
+          text-decoration-line: var(--text-decoration-line);
 }
 .stzh-link__icon-wrapper:not(:empty) + .stzh-link__text:not(:empty), .stzh-link__text:not(:empty) + .stzh-link__icon-wrapper:not(:empty) {
   margin-left: var(--stzh-space-xxsmall);

package/dist/collection/components/stzh-link/stzh-link.js

@@ -7,7 +7,15 @@ import { fetchTranslations } from "../../utils/translation-utils";
  */
 export class StzhLink {
   constructor() {
+    this.focusedByInput = false;
+    this.onRootFocus = () => {
+      if (!this.focusedByInput) {
+        this.setFocus();
+      }
+      this.focusedByInput = false;
+    };
     this.onFocus = (event) => {
+      this.focusedByInput = true;
       const focusEvent = new FocusEvent("focus", {
         view: window,
         bubbles: false,
@@ -97,7 +105,7 @@ export class StzhLink {
       [`stzh-link--size-${this.size}`]: !!this.size,
       [`stzh-link--${this.variant}`]: !!this.variant,
     };
-    return (h(Host, null, this.href ?
+    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ?
       h("a", { ref: (el) => (this.link = el), href: this.disabled ? null : this.href, download: this.download, rel: this.rel, target: this.target, class: classes, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-disabled": typeof this.a11yDisabled !== "undefined"
           ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined"
           ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))

package/dist/collection/components/stzh-list/stzh-list.css

@@ -96,6 +96,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {

package/dist/collection/components/stzh-list-item/stzh-list-item.css

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {

package/dist/collection/components/stzh-loader/stzh-loader.css

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 @-webkit-keyframes stzh-loader {

package/dist/collection/components/stzh-loadingbar/stzh-loadingbar.css

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {

package/dist/collection/components/stzh-menu/stzh-menu.css

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host ::slotted(stzh-hr) {

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {
@@ -132,7 +134,8 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
   border: none;
   padding: var(--stzh-space-xsmall) var(--stzh-space-medium);
   padding-left: var(--stzh-space-large);
@@ -141,7 +144,8 @@
   width: 100%;
   height: var(--height);
   line-height: var(--height);
-  transition: all var(--stzh-base-transition-animation-speed);
+  transition-duration: var(--stzh-base-transition-animation-speed);
+  transition-property: color, background-color, border-color;
   cursor: pointer;
   /* Disabled variant */
 }

package/dist/collection/components/stzh-menu-item/stzh-menu-item.js

@@ -5,7 +5,15 @@ import { hasSlot } from "../../utils/utils";
  */
 export class StzhMenuItem {
   constructor() {
+    this.focusedByInput = false;
+    this.onRootFocus = () => {
+      if (!this.focusedByInput) {
+        this.setFocus();
+      }
+      this.focusedByInput = false;
+    };
     this.onFocus = (event) => {
+      this.focusedByInput = true;
       const focusEvent = new FocusEvent("focus", {
         view: window,
         bubbles: false,
@@ -61,7 +69,7 @@ export class StzhMenuItem {
       "stzh-menu-item--is-disabled": this.disabled,
       "stzh-menu-item--is-active": this.active
     };
-    return (h(Host, { role: "menuitem" }, this.href ?
+    return (h(Host, { role: "menuitem", tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ?
       h("a", { ref: (el) => (this.menuItem = el), href: this.disabled ? null : this.href, target: this.target, class: classes, "aria-label": this.a11yLabel, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))
       :
         h("button", { ref: (el) => (this.menuItem = el), class: classes, type: "button", disabled: this.disabled, "aria-label": this.a11yLabel, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))));

package/dist/collection/components/stzh-message/stzh-message.css

@@ -95,12 +95,14 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {
   --background-color: var(--stzh-color-white);
   --icon-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
-  --close-color: var(--stzh-base-lead-color);
+  --close-color: var(--stzh-color-grey70);
   --label-color: var(--stzh-base-color);
   --description-color: var(--stzh-base-color);
   --priority-high-link-color: var(--stzh-base-invert-color);
@@ -125,6 +127,7 @@
   display: flex;
   box-shadow: var(--stzh-box-shadow-message);
   background-color: var(--background-color);
+  border-radius: var(--stzh-button-border-radius);
 }
 @media screen and (min-width: 1024px) {
   .stzh-message {
@@ -211,58 +214,9 @@
 .stzh-message__description:empty + .stzh-message__link {
   margin-top: 0;
 }
-.stzh-message__close {
-  flex-shrink: 0;
-}
-@media screen and (min-width: 600px) {
-  .stzh-message__close {
-    margin-left: var(--stzh-space-small);
-  }
-}
-.stzh-message__close-button {
-  top: var(--stzh-space-medium);
-  right: var(--stzh-space-medium);
+.stzh-message__close[variant=tertiary] {
+  --color: var(--close-color);
   position: absolute;
-  display: flex;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  font-family: inherit;
-  border: none;
-  background: none;
-  padding: var(--stzh-space-xsmall);
-  margin: calc(var(--stzh-space-xsmall) * -1);
-  border-radius: var(--stzh-button-border-radius);
-  cursor: pointer;
-}
-@media screen and (min-width: 1024px) {
-  .stzh-message__close-button {
-    top: var(--stzh-space-large);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-message__close-button {
-    top: var(--stzh-space-xlarge);
-  }
-}
-@media screen and (min-width: 1024px) {
-  .stzh-message__close-button {
-    right: var(--stzh-space-large);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-message__close-button {
-    right: var(--stzh-space-xlarge);
-  }
-}
-@media screen and (min-width: 600px) {
-  .stzh-message__close-button {
-    position: initial;
-    top: initial;
-    right: initial;
-  }
-}
-.stzh-message__close-icon {
-  --size: var(--stzh-icon-size-medium);
-  color: var(--close-color);
+  top: 0;
+  right: 0;
 }

package/dist/collection/components/stzh-message/stzh-message.js

@@ -55,7 +55,7 @@ export class StzhMessage {
         || this.type === 'success' && "checkmark-circle"
         || this.type === 'warning' && "warning"
         || this.type === 'error' && "important-warning" })), h("div", { class: "stzh-message__text-wrapper" }, h("div", { class: "stzh-message__label" }, this.label), h("div", { class: "stzh-message__description" }, this.description ? this.description : h("slot", null)), h("div", { class: "stzh-message__link" }, h("slot", { name: "link" })))), !this.hideClose &&
-      h("div", { class: "stzh-message__close" }, h("button", { class: "stzh-message__close-button", onClick: this.onCloseButtonClick, "aria-label": this.localization.close, type: "button" }, h("stzh-icon", { class: "stzh-message__close-icon", name: "close" }))))));
+      h("stzh-button", { class: "stzh-message__close", onClick: this.onCloseButtonClick, a11yLabel: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close" }))));
   }
   static get is() { return "stzh-message"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-metanav/stzh-metanav.css

@@ -95,22 +95,18 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host ::slotted(stzh-link) .stzh-link {
   font-size: var(--stzh-font-micro-font-size);
   line-height: var(--stzh-font-micro-text-line-height);
   padding: var(--stzh-space-xsmall) var(--stzh-space-small);
-  color: var(--stzh-color-grey61);
-}
-:host ::slotted(stzh-link) .stzh-link:hover {
-  color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
-}
-:host ::slotted(stzh-link) .stzh-link:hover .stzh-link__text {
-  text-decoration: underline;
-}
-:host ::slotted(stzh-link) .stzh-link__text {
-  text-decoration: none;
+  --color: var(--stzh-color-grey61);
+  --text-decoration-line: none;
+  --hover-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+  --hover-text-decoration-line: underline;
 }
 
 .stzh-metanav {

package/dist/collection/components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.css

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 .stzh-microsite-teaserlist__filter {

package/dist/collection/components/stzh-olmap/assets/compass.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="24" viewBox="0 0 16 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.0011 22.5728L13.2809 12.0132H2.72134L8.0011 22.5728Z" fill="#DEDEDE" stroke="#BFBFBF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.99976 1.42721L2.71999 11.9867H13.2795L7.99976 1.42721Z" fill="#D0021B"/>
+<path d="M7.99976 1.42721L2.71999 11.9867H13.2795L7.99976 1.42721Z" stroke="#D0021B" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.99976 1.42721L2.71999 11.9867H13.2795L7.99976 1.42721Z" stroke="black" stroke-opacity="0.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/components/stzh-olmap/stzh-olmap.css

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 stzh-olmap {
@@ -115,6 +117,8 @@ stzh-olmap *,
 stzh-olmap *::before,
 stzh-olmap *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 @media screen and (min-width: 800px) {
   stzh-olmap {
@@ -122,6 +126,11 @@ stzh-olmap *::after {
   }
 }
 
+.stzh-olmap {
+  /* Has no layer control */
+  /* Has no print control */
+  /* Has location control */
+}
 .stzh-olmap__map {
   position: absolute;
   width: 100%;
@@ -141,7 +150,8 @@ stzh-olmap *::after {
 .stzh-olmap .ol-print,
 .stzh-olmap .ol-location,
 .stzh-olmap .ol-zoom-in,
-.stzh-olmap .ol-zoom-out {
+.stzh-olmap .ol-zoom-out,
+.stzh-olmap .ol-rotate-reset {
   font-family: var(--stzh-font-family-light);
   font-weight: var(--stzh-font-weight-light);
   font-style: normal;
@@ -160,20 +170,22 @@ stzh-olmap *::after {
   color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
   transition: all var(--stzh-base-transition-animation-speed) ease;
   background-color: var(--stzh-color-white);
-  width: 2.5rem;
-  height: 2.375rem;
+  width: var(--stzh-form-input-small-height);
+  height: var(--stzh-form-input-small-height);
   cursor: pointer;
 }
 .stzh-olmap .ol-print stzh-icon,
 .stzh-olmap .ol-location stzh-icon,
 .stzh-olmap .ol-zoom-in stzh-icon,
-.stzh-olmap .ol-zoom-out stzh-icon {
+.stzh-olmap .ol-zoom-out stzh-icon,
+.stzh-olmap .ol-rotate-reset stzh-icon {
   --size: var(--stzh-icon-size-small);
 }
 .stzh-olmap .ol-print:hover,
 .stzh-olmap .ol-location:hover,
 .stzh-olmap .ol-zoom-in:hover,
-.stzh-olmap .ol-zoom-out:hover {
+.stzh-olmap .ol-zoom-out:hover,
+.stzh-olmap .ol-rotate-reset:hover {
   color: var(--stzh-color-white);
   background: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
   border-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
@@ -181,9 +193,11 @@ stzh-olmap *::after {
 .stzh-olmap .ol-layer,
 .stzh-olmap .ol-print,
 .stzh-olmap .ol-location,
-.stzh-olmap .ol-zoom {
+.stzh-olmap .ol-zoom,
+.stzh-olmap .ol-rotate-reset {
   position: absolute;
-  right: 0.625rem;
+  right: var(--stzh-space-xsmall);
+  bottom: var(--stzh-space-xsmall);
   box-shadow: var(--stzh-box-shadow-popover);
   border-radius: var(--stzh-form-input-border-radius);
 }
@@ -191,26 +205,27 @@ stzh-olmap *::after {
   .stzh-olmap .ol-layer,
 .stzh-olmap .ol-print,
 .stzh-olmap .ol-location,
-.stzh-olmap .ol-zoom {
-    right: 1.25rem;
+.stzh-olmap .ol-zoom,
+.stzh-olmap .ol-rotate-reset {
+    right: var(--stzh-space-large);
+    bottom: var(--stzh-space-large);
   }
 }
 .stzh-olmap .ol-layer {
-  left: 0.625rem;
-  bottom: 0.625rem;
+  left: var(--stzh-space-xsmall);
   right: auto;
   padding: var(--stzh-space-xxxsmall);
   border: none;
+  cursor: pointer;
 }
 @media screen and (min-width: 800px) {
   .stzh-olmap .ol-layer {
-    left: 1.25rem;
-    bottom: 1.25rem;
+    left: var(--stzh-space-large);
   }
 }
 .stzh-olmap .ol-layer__thumbnail {
-  width: 4.6875rem;
-  height: 4.6875rem;
+  width: 4.75rem;
+  height: 4.75rem;
   display: block;
 }
 .stzh-olmap .ol-layer__text {
@@ -233,12 +248,7 @@ stzh-olmap *::after {
   color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
 .stzh-olmap .ol-location {
-  bottom: calc(3.75rem + 7.125rem + var(--stzh-space-small) * 2);
-}
-@media screen and (min-width: 800px) {
-  .stzh-olmap .ol-location {
-    bottom: calc(4.375rem + 7.125rem + var(--stzh-space-small) * 2);
-  }
+  margin-bottom: calc(var(--stzh-form-input-small-height) * 3 + var(--stzh-space-xsmall) * 2);
 }
 .stzh-olmap .ol-location.active {
   background: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
@@ -246,42 +256,92 @@ stzh-olmap *::after {
   color: var(--stzh-color-white);
 }
 .stzh-olmap .ol-zoom {
-  bottom: calc(3.75rem + 2.375rem + var(--stzh-space-small));
+  margin-bottom: calc(var(--stzh-form-input-small-height) + var(--stzh-space-xsmall));
   background-color: var(--stzh-color-grey13);
 }
-@media screen and (min-width: 800px) {
-  .stzh-olmap .ol-zoom {
-    bottom: calc(4.375rem + 2.375rem + var(--stzh-space-small));
-  }
-}
 .stzh-olmap .ol-zoom-in {
   margin-bottom: 0.0625rem;
 }
-.stzh-olmap .ol-print {
-  bottom: 3.75rem;
+.stzh-olmap .ol-rotate-reset {
+  width: var(--stzh-space-xxlarge);
+  height: var(--stzh-space-xxlarge);
+  border-radius: 50%;
+  box-shadow: none;
+  border: 0.0625rem solid var(--stzh-color-grey13);
+  margin-right: calc((var(--stzh-form-input-small-height) - var(--stzh-space-xxlarge)) / 2);
+  margin-bottom: calc(var(--stzh-form-input-small-height) * 3 + var(--stzh-space-xsmall) * 2);
 }
-@media screen and (min-width: 800px) {
-  .stzh-olmap .ol-print {
-    bottom: 4.375rem;
-  }
+.stzh-olmap .ol-rotate-reset span {
+  border: 0;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+          clip-path: inset(100%);
+  width: 0.0625rem;
+  height: 0.0625rem;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
 }
-.stzh-olmap .ol-rotate,
-.stzh-olmap .ol-attribution {
-  display: none;
+.stzh-olmap .ol-rotate-reset svg {
+  width: 0.99rem;
+  height: 1.32188rem;
+}
+.stzh-olmap .ol-hidden .ol-rotate-reset {
+  opacity: 0;
+}
+.stzh-olmap .ol-compass {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .stzh-olmap .ol-scale-line {
   position: absolute;
-  bottom: 0;
-  right: 0;
-  padding: var(--stzh-space-xxsmall);
-  background: var(--stzh-color-white);
-  border-top-left-radius: var(--stzh-form-input-border-radius);
+  bottom: var(--stzh-space-xsmall);
+  margin-left: calc(4.75rem + var(--stzh-space-xxxsmall) + var(--stzh-space-xsmall));
+  left: var(--stzh-space-xsmall);
+}
+@media screen and (min-width: 800px) {
+  .stzh-olmap .ol-scale-line {
+    bottom: var(--stzh-space-large);
+    left: var(--stzh-space-large);
+  }
 }
 .stzh-olmap .ol-scale-line-inner {
-  font-size: var(--stzh-font-pico-font-size);
-  line-height: var(--stzh-font-pico-text-line-height);
-  border: 0.0625rem solid var(--stzh-color-grey55);
-  border-top: 0;
-  color: var(--stzh-color-grey55);
+  font-size: var(--stzh-font-nano-font-size);
+  line-height: var(--stzh-font-nano-text-line-height);
+  position: relative;
+  color: var(--stzh-color-black);
   text-align: center;
+  filter: drop-shadow(-0.0625rem 0px 0px white) drop-shadow(0.0625rem 0px 0px white) drop-shadow(0px -0.0625rem 0px white) drop-shadow(0px 0.0625rem 0px white);
+}
+.stzh-olmap .ol-scale-line-inner::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 0.28125rem;
+  border: 0.0625rem solid var(--stzh-color-black);
+  border-top: 0;
+}
+.stzh-olmap .ol-attribution {
+  display: none;
+}
+.stzh-olmap--has-no-layer-control .ol-scale-line {
+  margin-left: 0;
+}
+.stzh-olmap--has-no-print-control .ol-zoom {
+  margin-bottom: 0;
+}
+.stzh-olmap--has-no-print-control .ol-rotate-reset {
+  margin-bottom: calc(var(--stzh-form-input-small-height) * 2 + var(--stzh-space-xsmall));
+}
+.stzh-olmap--has-location-control .ol-rotate-reset {
+  margin-bottom: calc(var(--stzh-form-input-small-height) * 4 + var(--stzh-space-xsmall) * 3);
+}
+.stzh-olmap--has-location-control.stzh-olmap--has-no-print-control .ol-location {
+  margin-bottom: calc(var(--stzh-form-input-small-height) * 2 + var(--stzh-space-xsmall));
+}
+.stzh-olmap--has-location-control.stzh-olmap--has-no-print-control .ol-rotate-reset {
+  margin-bottom: calc(var(--stzh-form-input-small-height) * 3 + var(--stzh-space-xsmall) * 2);
 }