@eccenca/gui-elements 25.0.0 → 25.1.0-changeupgradedtoreact18cmem6639.0

package/src/cmem/react-flow/configuration/graph.ts

@@ -1,8 +1,7 @@
+import { NodeProps } from "react-flow-renderer";
 import { EdgeBezier } from "./../../../extensions/react-flow/edges/EdgeBezier";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
 import { GRAPH_NODE_TYPES } from "./typing";
-//import {ComponentType} from "react";
-//import {NodeProps} from "react-flow-renderer-lts";
 
 const edgeTypes = {
     default: EdgeBezier,
@@ -16,7 +15,7 @@ const edgeTypes = {
     danger: EdgeBezier,
 };
 
-const nodeTypes: Record<GRAPH_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
+const nodeTypes: Record<GRAPH_NODE_TYPES, React.ComponentType<NodeProps>> = {
     default: NodeDefault,
     graph: NodeDefault,
     class: NodeDefault,

package/src/cmem/react-flow/configuration/linking.ts

@@ -2,8 +2,7 @@ import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
 import { StickyNoteNode } from "./../nodes/StickyNoteNode";
 import { LINKING_NODE_TYPES } from "./typing";
-//import {ComponentType} from "react";
-//import {NodeProps} from "react-flow-renderer-lts";
+import {NodeProps} from "react-flow-renderer";
 
 const edgeTypes = {
     default: EdgeStep,
@@ -14,7 +13,7 @@ const edgeTypes = {
     danger: EdgeStep,
 };
 
-const nodeTypes: Record<LINKING_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
+const nodeTypes: Record<LINKING_NODE_TYPES, React.ComponentType<NodeProps>> = {
     default: NodeDefault,
     sourcepath: NodeDefault,
     targetpath: NodeDefault,

package/src/cmem/react-flow/configuration/workflow.ts

@@ -2,8 +2,7 @@ import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
 import { StickyNoteNode } from "./../nodes/StickyNoteNode";
 import { WORKFLOW_NODE_TYPES } from "./typing";
-//import {ComponentType} from "react";
-//import {NodeProps} from "react-flow-renderer-lts";
+import {NodeProps} from "react-flow-renderer";
 
 const edgeTypes = {
     default: EdgeStep,
@@ -12,7 +11,7 @@ const edgeTypes = {
     danger: EdgeStep,
 };
 
-const nodeTypes: Record<WORKFLOW_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
+const nodeTypes: Record<WORKFLOW_NODE_TYPES, React.ComponentType<NodeProps>> = {
     default: NodeDefault,
     dataset: NodeDefault,
     linking: NodeDefault,

package/src/common/Intent/index.ts

@@ -1,6 +1,7 @@
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { Intent as BlueprintIntent } from "@blueprintjs/core";
 
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
 export type IntentBlueprint = BlueprintIntent;
 export const DefinitionsBlueprint = BlueprintIntent;
 

package/src/common/index.ts

@@ -3,7 +3,7 @@ import { decode } from "he";
 import { invisibleZeroWidthCharacters } from "./utils/characters";
 import { colorCalculateDistance } from "./utils/colorCalculateDistance";
 import decideContrastColorValue from "./utils/colorDecideContrastvalue";
-import { getEnabledColorsFromPalette, textToColorHash } from "./utils/colorHash";
+import { getEnabledColorPropertiesFromPalette, getEnabledColorsFromPalette, textToColorHash } from "./utils/colorHash";
 import getColorConfiguration from "./utils/getColorConfiguration";
 import { getScrollParent } from "./utils/getScrollParent";
 import { getGlobalVar, setGlobalVar } from "./utils/globalVars";
@@ -22,6 +22,7 @@ export const utils = {
     setGlobalVar,
     getScrollParent,
     getEnabledColorsFromPalette,
+    getEnabledColorPropertiesFromPalette,
     textToColorHash,
     reduceToText,
     decodeHtmlEntities: decode,

package/src/common/scss/_accessibility-defaults.scss

@@ -0,0 +1,101 @@
+.#{$prefix}--assistive-text,
+.#{$prefix}--visually-hidden {
+    /*
+        originally from ~@carbon/styles/scss/css--helpers
+        but we cannot use it directly because of other included rules there.
+    */
+    position: absolute;
+    visibility: inherit;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    white-space: nowrap;
+    border: 0;
+    clip-path: rect(0, 0, 0, 0);
+}
+
+/*
+    default focus indicator
+*/
+
+:root {
+    --#{$eccgui}-a11y-outline-color: #{eccgui-color-var("layout", "magenta", "900")};
+    --#{$eccgui}-a11y-outline-style: solid;
+    --#{$eccgui}-a11y-outline-width: #{0.25 * $eccgui-size-block-whitespace};
+
+    // shift outline min 2px inside element to have a minimum 2px outline even with hidden overflow
+    --#{$eccgui}-a11y-outline-offset: min(calc(var(--#{$eccgui}-a11y-outline-width) * -0.5), -2px);
+}
+
+@keyframes outline-bounce {
+    0% {
+        outline-width: calc(var(--#{$eccgui}-a11y-outline-width) * 0.5);
+        outline-color: var(--#{$eccgui}-a11y-outline-color);
+        outline-offset: var(--#{$eccgui}-a11y-outline-offset);
+    }
+
+    33.3% {
+        outline-color: var(--#{$eccgui}-a11y-outline-color);
+        outline-offset: calc(var(--#{$eccgui}-a11y-outline-width));
+    }
+
+    66.6% {
+        outline-color: currentcolor;
+        outline-offset: calc(var(--#{$eccgui}-a11y-outline-width) * -2);
+    }
+
+    100% {
+        outline-width: var(--#{$eccgui}-a11y-outline-width);
+        outline-color: var(--#{$eccgui}-a11y-outline-color);
+        outline-offset: var(--#{$eccgui}-a11y-outline-offset);
+    }
+}
+
+@mixin focus-by-keyboard-static {
+    // strong visual focus indication for keyboard devices
+
+    outline: var(--#{$eccgui}-a11y-outline-color) var(--#{$eccgui}-a11y-outline-style)
+        var(--#{$eccgui}-a11y-outline-width);
+    outline-offset: var(--#{$eccgui}-a11y-outline-offset);
+}
+
+@mixin focus-by-keyboard-animation {
+    @media (prefers-reduced-motion: no-preference) {
+        animation: outline-bounce 0.5s;
+    }
+}
+
+.#{$eccgui}-a11y-focus-by-keyboard-animated {
+    @include focus-by-keyboard-static;
+    @include focus-by-keyboard-animation;
+}
+
+.#{$eccgui}-a11y-focus-by-keyboard-static {
+    @include focus-by-keyboard-static;
+
+    animation: none;
+}
+
+@mixin focus-by-pointer {
+    // limited visual focus indication for pointer devices
+
+    outline: transparent none 0;
+    outline-offset: 0;
+}
+
+.#{$eccgui}-a11y-focus-by-pointer {
+    @include focus-by-pointer;
+}
+
+*[tabindex]:not([tabindex^="-"]):focus-visible,
+:focus-visible {
+    @extend .#{$eccgui}-a11y-focus-by-keyboard-animated;
+}
+
+input:focus:not(:focus-visible),
+textarea:focus:not(:focus-visible),
+:focus:not(:focus-visible) {
+    @extend .#{$eccgui}-a11y-focus-by-pointer;
+}

package/src/common/utils/CssCustomProperties.ts

@@ -28,7 +28,7 @@ export default class CssCustomProperties {
 
     // Methods
 
-    customProperties = (props: getCustomPropertiesProps = {}): string[][] | Record<string, string> => {
+    customProperties = (props: getCustomPropertiesProps = {}): [string, string][] | Record<string, string> => {
         // FIXME:
         // in case of performance issues results should get saved at least into intern variables
         // other cache strategies could be also tested
@@ -104,7 +104,9 @@ export default class CssCustomProperties {
             });
     };
 
-    static listCustomProperties = (props: getCustomPropertiesProps = {}): string[][] | Record<string, string> => {
+    static listCustomProperties = (
+        props: getCustomPropertiesProps = {}
+    ): [string, string][] | Record<string, string> => {
         const { removeDashPrefix = true, returnObject = true, filterName = () => true, ...filterProps } = props;
 
         const customProperties = CssCustomProperties.listLocalCssStyleRuleProperties({
@@ -123,6 +125,6 @@ export default class CssCustomProperties {
 
         return returnObject
             ? (Object.fromEntries(customProperties) as Record<string, string>)
-            : (customProperties as string[][]);
+            : (customProperties as [string, string][]);
     };
 }

package/src/common/utils/colorHash.ts

@@ -6,10 +6,10 @@ import { colorCalculateDistance } from "./colorCalculateDistance";
 import CssCustomProperties from "./CssCustomProperties";
 
 type ColorOrFalse = Color | false;
-type ColorWeight = 100 | 300 | 500 | 700 | 900;
-type PaletteGroup = "identity" | "semantic" | "layout" | "extra";
+export type ColorWeight = 100 | 300 | 500 | 700 | 900;
+export type PaletteGroup = "identity" | "semantic" | "layout" | "extra";
 
-interface getEnabledColorsProps {
+export interface getEnabledColorsProps {
     /** Specify the palette groups used to define the set of colors. */
     includePaletteGroup?: PaletteGroup[];
     /** Use only some weights of a color tint. */
@@ -21,20 +21,43 @@ interface getEnabledColorsProps {
 }
 
 const getEnabledColorsFromPaletteCache = new Map<string, Color[]>();
+const getEnabledColorPropertiesFromPaletteCache = new Map<string, [string, string][]>();
 
-export function getEnabledColorsFromPalette({
+export function getEnabledColorsFromPalette(props: getEnabledColorsProps): Color[] {
+    const configId = JSON.stringify({
+        includePaletteGroup: props.includePaletteGroup,
+        includeColorWeight: props.includeColorWeight,
+    });
+
+    if (getEnabledColorsFromPaletteCache.has(configId)) {
+        return getEnabledColorsFromPaletteCache.get(configId)!;
+    }
+
+    const colorPropertiesFromPalette = Object.values(getEnabledColorPropertiesFromPalette(props));
+
+    getEnabledColorsFromPaletteCache.set(
+        configId,
+        colorPropertiesFromPalette.map((color) => {
+            return Color(color[1]);
+        })
+    );
+
+    return getEnabledColorsFromPaletteCache.get(configId)!;
+}
+
+export function getEnabledColorPropertiesFromPalette({
     includePaletteGroup = ["layout"],
     includeColorWeight = [100, 300, 500, 700, 900],
-    // TODO (planned for later): includeMixedColors = false,
+    // (planned for later): includeMixedColors = false,
     minimalColorDistance = COLORMINDISTANCE,
-}: getEnabledColorsProps): Color[] {
+}: getEnabledColorsProps): [string, string][] {
     const configId = JSON.stringify({
         includePaletteGroup,
         includeColorWeight,
     });
 
-    if (getEnabledColorsFromPaletteCache.has(configId)) {
-        return getEnabledColorsFromPaletteCache.get(configId)!;
+    if (getEnabledColorPropertiesFromPaletteCache.has(configId)) {
+        return getEnabledColorPropertiesFromPaletteCache.get(configId)!;
     }
 
     const colorsFromPalette = new CssCustomProperties({
@@ -50,18 +73,18 @@ export function getEnabledColorsFromPalette({
             const weight = parseInt(tint[2], 10) as ColorWeight;
             return includePaletteGroup.includes(group) && includeColorWeight.includes(weight);
         },
-        removeDashPrefix: false,
+        removeDashPrefix: true,
         returnObject: true,
     }).customProperties();
 
-    const colorsFromPaletteValues = Object.values(colorsFromPalette) as string[];
+    const colorsFromPaletteValues = Object.entries(colorsFromPalette) as [string, string][];
 
     const colorsFromPaletteWithEnoughDistance =
         minimalColorDistance > 0
-            ? colorsFromPaletteValues.reduce((enoughDistance: string[], color: string) => {
+            ? colorsFromPaletteValues.reduce((enoughDistance: [string, string][], color: [string, string]) => {
                   if (enoughDistance.includes(color)) {
                       return enoughDistance.filter((checkColor) => {
-                          const distance = colorCalculateDistance({ color1: color, color2: checkColor });
+                          const distance = colorCalculateDistance({ color1: color[1], color2: checkColor[1] });
                           return checkColor === color || (distance && minimalColorDistance <= distance);
                       });
                   } else {
@@ -70,14 +93,9 @@ export function getEnabledColorsFromPalette({
               }, colorsFromPaletteValues)
             : colorsFromPaletteValues;
 
-    getEnabledColorsFromPaletteCache.set(
-        configId,
-        colorsFromPaletteWithEnoughDistance.map((color: string) => {
-            return Color(color);
-        })
-    );
+    getEnabledColorPropertiesFromPaletteCache.set(configId, colorsFromPaletteWithEnoughDistance);
 
-    return getEnabledColorsFromPaletteCache.get(configId)!;
+    return getEnabledColorPropertiesFromPaletteCache.get(configId)!;
 }
 
 function getColorcode(text: string): ColorOrFalse {
@@ -148,7 +166,7 @@ export function textToColorHash({
 }
 
 function stringToIntegerHash(inputString: string): number {
-    /* this function is idempotend, meaning it retrieves the same result for the same input
+    /* this function is idempotent, meaning it retrieves the same result for the same input
     no matter how many times it's called */
     // Convert the string to a hash code
     let hashCode = 0;

package/src/components/Accordion/AccordionItem.tsx

@@ -18,7 +18,7 @@ export interface AccordionItemProps
     /**
      * header of accordion item
      */
-    label: string | JSX.Element;
+    label: string | React.JSX.Element;
     /**
      * use full available width for content
      */

package/src/components/Accordion/Stories/AccordionItem.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Accordion, AccordionItem, HtmlContentBlock } from "../../../../index";
+import { Accordion, AccordionItem, HtmlContentBlock } from "../../../components";
 
 export default {
     title: "Components/Accordion/AccordionItem",

package/src/components/Application/ApplicationSidebarNavigation.tsx

@@ -4,14 +4,17 @@ import { SideNav as CarbonSideNav, SideNavProps as CarbonSideNavProps } from "@c
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface ApplicationSidebarNavigationProps
-    extends Omit<CarbonSideNavProps, "ref" | "defaultExpanded" | "isPersistent" | "isFixedNav" | "isChildOfHeader">,
-        React.HTMLAttributes<HTMLElement> {}
+    extends Omit<CarbonSideNavProps, "ref" | "defaultExpanded" | "isPersistent" | "isFixedNav" | "isChildOfHeader">, React.HTMLAttributes<HTMLElement> {
+            children: React.ReactNode;
+            className?: string;
+        }
 
 export const ApplicationSidebarNavigation = ({
     children,
     className = "",
     ...otherCarbonSideNavProps
 }: ApplicationSidebarNavigationProps) => {
+
     return (
         <CarbonSideNav
             className={`${eccgui}-application__menu__sidebar ${className}`}

package/src/components/Application/ApplicationTitle.tsx

@@ -60,7 +60,13 @@ export const ApplicationTitle = ({
             <span className={`${eccgui}-application__title--content`}>
                 {!!depiction && (
                     <>
-                        <span className={`${eccgui}-application__title--depiction`}>{depiction}</span>
+                        <span className={`${eccgui}-application__title--depiction`}>
+                            {React.isValidElement(depiction)
+                                ? depiction
+                                : depiction instanceof HTMLElement
+                                    ? <>{depiction.outerHTML}</>
+                                    : depiction}
+                        </span>
                     </>
                 )}
                 {!!prefix && (

package/src/components/Application/ApplicationViewability.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import classNames from "classnames";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+type media = "print" | "screen";
+
+interface ApplicationViewabilityShow {
+    /**
+     * Show on media type.
+     * If used, `hide` cannot be set.
+     */
+    show: media;
+    hide?: never;
+}
+
+interface ApplicationViewabilityHide {
+    /**
+     * Hide on media type.
+     * If used, `show` cannot be set.
+     */
+    hide: media;
+    show?: never;
+}
+
+interface ApplicationViewabilityUndecided {
+    /**
+     * Only one child allowed.
+     * Need to process the `className` property.
+     */
+    children: React.ReactElement<{ className?: string }>;
+}
+
+export type ApplicationViewabilityProps = ApplicationViewabilityUndecided &
+    (ApplicationViewabilityShow | ApplicationViewabilityHide);
+
+/**
+ * Sets the viewability of the the contained element regarding media.
+ * Can be used to hide elements, e.g. when the page is printed.
+ */
+export const ApplicationViewability = ({ children, show, hide }: ApplicationViewabilityProps) => {
+    if (!show && !hide) {
+        return children;
+    }
+    if (show === hide) {
+        // eslint-disable-next-line no-console
+        console.warn("`<ApplicationViewability/>` used with same media type for `hide` and `show`.");
+        return children;
+    }
+
+    const enhancedClone = React.cloneElement(children, {
+        className: classNames(children.props.className, {
+            [`${eccgui}-application__hide--${hide}`]: hide,
+            [`${eccgui}-application__show--${show}`]: show,
+        }),
+    });
+
+    return enhancedClone;
+};
+
+export default ApplicationViewability;

package/src/components/Application/_colors.scss

@@ -2,6 +2,7 @@
 @use "sass:list";
 
 :root {
+    // creating css custom properties from palette colors
     @each $palette-group-name, $palette-group-tints in $eccgui-color-palette-light {
         @each $palette-tint-name, $palette-tint-colors in $palette-group-tints {
             @for $i from 1 through list.length($palette-tint-colors) {
@@ -12,4 +13,18 @@
             }
         }
     }
+
+    // set aliases for base colors
+    --#{$eccgui}-color-primary: #{$eccgui-color-primary};
+    --#{$eccgui}-color-primary-contrast: #{$eccgui-color-primary-contrast};
+    --#{$eccgui}-color-accent: #{$eccgui-color-accent};
+    --#{$eccgui}-color-accent-contrast: #{$eccgui-color-accent-contrast};
+    --#{$eccgui}-color-success-foreground: #{$eccgui-color-success-text};
+    --#{$eccgui}-color-success-background: #{$eccgui-color-success-background};
+    --#{$eccgui}-color-info-foreground: #{$eccgui-color-info-text};
+    --#{$eccgui}-color-info-background: #{$eccgui-color-info-background};
+    --#{$eccgui}-color-warning-foreground: #{$eccgui-color-warning-text};
+    --#{$eccgui}-color-warning-background: #{$eccgui-color-warning-background};
+    --#{$eccgui}-color-danger-foreground: #{$eccgui-color-danger-text};
+    --#{$eccgui}-color-danger-background: #{$eccgui-color-danger-background};
 }

package/src/components/Application/_content.scss

@@ -25,3 +25,10 @@ $ui-02: $eccgui-color-workspace-background !default;
 .#{$eccgui}-application__content--railsidebar {
     margin-left: mini-units(8);
 }
+
+@media print {
+    .#{$eccgui}-application__content {
+        padding: $eccgui-size-block-whitespace 0 0 0 !important;
+        margin: 0;
+    }
+}

package/src/components/Application/_header.scss

@@ -52,19 +52,22 @@ $shell-header-icon-03: $eccgui-color-applicationheader-text !default;
 /// Item link
 $shell-header-link: $blue-60 !default;
 
+/// Height
+$shell-header-height: mini-units(8) !default;
+
 // load library sub component
 @import "~@carbon/react/scss/components/ui-shell/header/index";
 
 // tweak original layout
 
 .#{$prefix}--header {
-    height: mini-units(8);
+    height: $shell-header-height;
 }
 
 .#{$prefix}--header__action,
 .#{$prefix}--header__action.#{$prefix}--btn--icon-only {
-    width: mini-units(8);
-    height: mini-units(8);
+    width: $shell-header-height;
+    height: $shell-header-height;
     padding-block-start: 0;
     background-color: transparent;
 
@@ -98,10 +101,10 @@ span.#{$prefix}--header__name {
 .#{$eccgui}-application__title--content {
     display: inline-block;
     overflow: hidden;
+    text-overflow: ellipsis;
     font-size: $eccgui-size-typo-caption;
     font-weight: $eccgui-font-weight-bold;
     line-height: $eccgui-size-typo-caption-lineheight;
-    text-overflow: ellipsis;
     letter-spacing: $eccgui-font-spacing-wide;
     white-space: nowrap;
 }
@@ -122,13 +125,13 @@ span.#{$prefix}--header__name {
         height: auto;
         max-height: mini-units(5);
         padding: 0;
-        margin: mini-units(1.4) 0 mini-units(1.6) 0;
+        margin: mini-units(1.4) 0 mini-units(1.6);
         vertical-align: middle;
     }
 }
 
 .#{$prefix}--header__menu .#{$prefix}--header__menu-item {
-    height: mini-units(8);
+    height: $shell-header-height;
 }
 
 // tweak original colors (as long as config does not work properly)
@@ -190,15 +193,27 @@ a.#{$prefix}--header__menu-item:active {
 }
 
 // $shell-header-focus
-.#{$prefix}--header__action:focus,
-.#{$prefix}--header__action.#{$prefix}--btn--icon-only:focus,
-.#{$prefix}--header__action.#{$prefix}--btn--primary:focus,
-a.#{$prefix}--header__name:focus,
-a.#{$prefix}--header__menu-item:focus {
-    border: none;
-    outline: 1px dotted $shell-header-focus;
-    outline-offset: -1px;
-    box-shadow: none;
+.#{$prefix}--header__action,
+.#{$prefix}--header__action.#{$prefix}--btn--icon-only,
+.#{$prefix}--header__action.#{$prefix}--btn--primary,
+a.#{$prefix}--header__name,
+a.#{$prefix}--header__menu-item {
+    &:focus {
+        @extend .#{$eccgui}-a11y-focus-by-pointer;
+
+        border: none;
+        box-shadow: none;
+    }
+
+    &,
+    .#{$prefix}--popover--open & {
+        &:focus-visible {
+            @extend .#{$eccgui}-a11y-focus-by-keyboard-animated;
+
+            border: none;
+            box-shadow: none;
+        }
+    }
 }
 .#{$prefix}--header__menu-title[aria-expanded="true"] {
     color: $shell-header-focus;
@@ -255,15 +270,24 @@ a.#{$prefix}--header__menu-item:focus > svg {
     // adjust position of all other modal dialogs
 
     .#{$ns}-dialog-container {
-        top: mini-units(8);
-        left: mini-units(8);
-        width: calc(100% - #{mini-units(8)});
-        min-height: calc(100% - #{mini-units(8)});
+        top: $shell-header-height;
+        left: $shell-header-height;
+        width: calc(100% - #{$shell-header-height});
+        min-height: calc(100% - #{$shell-header-height});
     }
 
     .#{$eccgui}-dialog__wrapper {
-        max-width: calc(100vw - #{mini-units(8)} - #{2 * $eccgui-size-block-whitespace});
-        max-height: calc(100vh - #{mini-units(8)} - #{2 * $eccgui-size-block-whitespace});
+        max-width: calc(100vw - #{$shell-header-height} - #{2 * $eccgui-size-block-whitespace});
+        max-height: calc(100vh - #{$shell-header-height} - #{2 * $eccgui-size-block-whitespace});
         margin: 0;
     }
 }
+
+@media print {
+    .#{$eccgui}-application__header {
+        position: relative;
+        & > :not(.#{$eccgui}-workspace__header) {
+            display: none;
+        }
+    }
+}

package/src/components/Application/_sidebar.scss

@@ -28,3 +28,9 @@ $ui-02: $eccgui-color-workspace-background !default;
     padding: $eccgui-size-block-whitespace calc(0.5 * (#{mini-units(8)} - 30px));
     transition: none;
 }
+
+.#{$eccgui}-application__menu__toggler.cds--header__action {
+    &:focus-visible {
+        @extend .#{$eccgui}-a11y-focus-by-keyboard-animated;
+    }
+}

package/src/components/Application/_toolbar.scss

@@ -51,18 +51,18 @@ $shell-panel-focus: $shell-header-focus !default;
 .#{$eccgui}-application__toolbar__panel-backdrop--onleave,
 .#{$eccgui}-application__toolbar__panel-backdrop--onoutsideclick {
     position: fixed;
-    inset: mini-units(8) 0 0 0;
+    inset: mini-units(8) 0 0;
 }
 
 .#{$eccgui}-application__toolbar__panel-backdrop--onoutsideclick {
     top: 0;
 }
 
-// add rules for own class identiiers
+// add rules for own class identifiers
 
 .#{$eccgui}-application__toolbar {
-    flex-basis: auto;
     flex-grow: 0;
+    flex-basis: auto;
 
     .#{$prefix}--popover--bottom-right .#{$prefix}--popover-content {
         // for some reason the original calculation still moves out the tooltip

package/src/components/Application/_viewability.scss

@@ -0,0 +1,13 @@
+@media print {
+    .#{eccgui}-application__hide--print,
+    .#{eccgui}-application__show--screen {
+        display: none !important;
+    }
+}
+
+@media screen {
+    .#{eccgui}-application__hide--screen,
+    .#{eccgui}-application__show--print {
+        display: none !important;
+    }
+}

package/src/components/Application/application.scss

@@ -10,3 +10,4 @@
 // @import '~@carbon/react/scss/components/ui-shell/navigation-menu';
 @import "content";
 @import "dropzone";
+@import "viewability";

package/src/components/Application/index.ts

@@ -8,4 +8,5 @@ export * from "./ApplicationToolbar";
 export * from "./ApplicationToolbarSection";
 export * from "./ApplicationToolbarAction";
 export * from "./ApplicationToolbarPanel";
+export * from "./ApplicationViewability";
 export * from "./helper";