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

package/src/components/Tag/tag.scss

@@ -36,6 +36,7 @@ $tag-round-adjustment: 0 !default;
     min-height: calc(#{$tag-height} - 2px);
     max-height: calc(#{$tag-height} - 2px);
     padding: 0 $tag-padding-top;
+    line-height: calc(#{$tag-height} - 2px);
 
     &.#{$ns}-round {
         border-radius: $tag-height * 0.5;
@@ -55,11 +56,12 @@ $tag-round-adjustment: 0 !default;
     }
 
     &.#{$eccgui}-tag--small {
-        min-width: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
-        min-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
-        max-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
+        min-width: calc(#{$tag-height-small} + #{$tag-padding-small});
+        min-height: calc(#{$tag-height-small} + #{$tag-padding-small});
+        max-height: calc(#{$tag-height-small} + #{$tag-padding-small});
         padding: 0 $tag-padding-small;
-        line-height: calc(#{$tag-height-small} - 2px);
+        font-size: calc(#{$eccgui-size-typo-tag} - 1px);
+        line-height: calc(#{$tag-height-small} + #{$tag-padding-small});
 
         &.#{$ns}-round {
             border-radius: $tag-height-small * 0.5;
@@ -75,7 +77,7 @@ $tag-round-adjustment: 0 !default;
         min-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
         max-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
         font-size: $eccgui-size-typo-tag-large;
-        line-height: calc(#{$tag-height-large} - 2px);
+        line-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
 
         &.#{$ns}-round {
             border-radius: $tag-height-large * 0.5;
@@ -137,8 +139,10 @@ $tag-round-adjustment: 0 !default;
 }
 
 .#{$ns}-tag {
+    --eccgui-tag-border-width: 1px;
+
     border-style: solid;
-    border-width: 1px;
+    border-width: var(--eccgui-tag-border-width);
 
     &:not([class*="#{$ns}-intent-"]) {
         --eccgui-tag-bg: #{$tag-default-color};
@@ -151,7 +155,7 @@ $tag-round-adjustment: 0 !default;
             var(--eccgui-tag-bg) var(--eccgui-tag-emfactor),
             eccgui-color-var("identity", "background", "100")
         );
-        border-color: var(--eccgui-tag-border);
+        border-color: eccgui-color-rgba(var(--eccgui-tag-border), calc(0.25 * var(--eccgui-tag-emfactor)));
 
         &.#{$eccgui}-tag--strongeremphasis {
             --eccgui-tag-emfactor: 95%;
@@ -211,7 +215,7 @@ $tag-round-adjustment: 0 !default;
                 var(--eccgui-tag-bg) var(--eccgui-tag-emfactor),
                 eccgui-color-var("identity", "background", "100")
             );
-            border-color: var(--eccgui-tag-border);
+            border-color: eccgui-color-rgba(var(--eccgui-tag-border), calc(0.25 * var(--eccgui-tag-emfactor)));
 
             &.#{$eccgui}-tag--strongeremphasis {
                 --eccgui-tag-emfactor: 100%;
@@ -231,7 +235,7 @@ $tag-round-adjustment: 0 !default;
 
             &[class*="#{$eccgui}-intent--"] {
                 color: eccgui-color-rgba(var(--eccgui-tag-text), var(--eccgui-tag-emfactor));
-                border-color: eccgui-color-rgba(var(--eccgui-tag-border), var(--eccgui-tag-emfactor));
+                border-color: eccgui-color-rgba(var(--eccgui-tag-border), calc(0.25 * var(--eccgui-tag-emfactor)));
             }
 
             &.#{$eccgui}-intent--primary {
@@ -267,3 +271,9 @@ $tag-round-adjustment: 0 !default;
         }
     }
 }
+
+@media print {
+    .#{$eccgui}-tag__item {
+        print-color-adjust: exact;
+    }
+}

package/src/components/TextField/TextArea.tsx

@@ -32,7 +32,7 @@ export interface TextAreaProps extends Omit<BlueprintTextAreaProps, "intent"> {
      * Element to render on right side of text area. Should be not too large.
      * This will update right padding on the text area.
      */
-    rightElement?: JSX.Element;
+    rightElement?: React.JSX.Element;
     /**
      * Add HTML properties to the wrapper element.
      * The element wraps `TextArea` in case of a given `wrapperDivProps`, `leftIcon` or `rightElement` property.

package/src/components/TextField/stories/TextArea.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../.storybook/helpers";
 
-import { Button, IconButton, TextArea } from "./../../../../index";
+import { Button, IconButton, TextArea } from "./../../../components";
 type TextAreaType = typeof TextArea;
 
 export default {

package/src/components/TextField/stories/TextField.stories.tsx

@@ -3,9 +3,7 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../.storybook/helpers";
 import characters from "../../../common/utils/characters";
-import { TextFieldProps } from "../TextField";
-
-import { TextField } from "./../../../../index";
+import { TextField, TextFieldProps } from "../TextField";
 
 export default {
     title: "Forms/TextField",
@@ -61,3 +59,26 @@ const invisibleCharacterWarningProps: TextFieldProps = {
     defaultValue: "Invisible character ->​<-",
 };
 InvisibleCharacterWarning.args = invisibleCharacterWarningProps;
+
+/** Text field showing that emoji (✔️ variation-selector, 👨‍👩‍👧‍👦 ZWJ,  #️⃣ keycap)
+ * are NOT reported as invisible characters, while a genuine ZWS still is. */
+export const InvisibleCharacterWarningWithEmoji = Template.bind({});
+
+const invisibleCharacterWarningWithEmojiProps: TextFieldProps = {
+    ...Default.args,
+    invisibleCharacterWarning: {
+        callback: (codePoints) => {
+            if (codePoints.size) {
+                const codePointsString = [...codePoints]
+                    .map((n) => characters.invisibleZeroWidthCharacters.codePointMap.get(n)?.fullLabel)
+                    .join(", ");
+                alert("Invisible character detected in input string. Code points: " + codePointsString);
+            }
+        },
+        callbackDelay: 500,
+    },
+    onChange: () => {},
+    // ZWS should be flagged; ✔️ 👨‍👩‍👧‍👦 #️⃣ should NOT be flagged
+    defaultValue: "Check\u200B ✔️ 👨‍👩‍👧‍👦 #️⃣",
+};
+InvisibleCharacterWarningWithEmoji.args = invisibleCharacterWarningWithEmojiProps;

package/src/components/TextField/tests/useTextValidation.test.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { act, render } from "@testing-library/react";
+
+import { useTextValidation } from "../useTextValidation";
+
+const HookWrapper: React.FC<{ value: string; callback: jest.Mock; callbackDelay?: number }> = ({
+    value,
+    callback,
+    callbackDelay = 0,
+}) => {
+    useTextValidation({
+        value,
+        onChange: jest.fn(),
+        invisibleCharacterWarning: { callback, callbackDelay },
+    });
+    return null;
+};
+
+describe("useTextValidation", () => {
+    beforeEach(() => {
+        jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+        jest.useRealTimers();
+    });
+
+    /** Render the hook with a controlled value and flush the debounce timer. */
+    const runWithValue = (value: string, callbackDelay = 0) => {
+        const callback = jest.fn();
+        render(<HookWrapper value={value} callback={callback} callbackDelay={callbackDelay} />);
+        act(() => {
+            jest.runAllTimers();
+        });
+        return callback;
+    };
+
+    describe("invisible character detection", () => {
+        it("reports empty set for plain text", () => {
+            const callback = runWithValue("hello world");
+            expect(callback).toHaveBeenCalledWith(new Set());
+        });
+
+        it("detects zero-width space (U+200B)", () => {
+            const callback = runWithValue("hello\u200Bworld");
+            expect(callback).toHaveBeenCalledWith(new Set([0x200b]));
+        });
+
+        it("detects zero-width non-joiner (U+200C)", () => {
+            const callback = runWithValue("hello\u200Cworld");
+            expect(callback).toHaveBeenCalledWith(new Set([0x200c]));
+        });
+    });
+
+    describe("emoji false-positive prevention", () => {
+        it("does not flag ✔️ (base char + variation selector U+FE0F)", () => {
+            const callback = runWithValue("✔️");
+            expect(callback).toHaveBeenCalledWith(new Set());
+        });
+
+        it("does not flag ZWJ sequence emoji 👨‍👩‍👧‍👦", () => {
+            const callback = runWithValue("👨‍👩‍👧‍👦");
+            expect(callback).toHaveBeenCalledWith(new Set());
+        });
+
+        it("does not flag keycap emoji #️⃣", () => {
+            const callback = runWithValue("#️⃣");
+            expect(callback).toHaveBeenCalledWith(new Set());
+        });
+    });
+
+    describe("mixed content", () => {
+        it("detects ZWS while ignoring surrounding emoji", () => {
+            const callback = runWithValue("Check\u200B ✔️👨‍👩‍👧‍#️⃣");
+            expect(callback).toHaveBeenCalledWith(new Set([0x200b]));
+        });
+
+        it("reports empty set for text with only emoji", () => {
+            const callback = runWithValue("✔️ 👨‍👩‍👧‍👦#️⃣");
+            expect(callback).toHaveBeenCalledWith(new Set());
+        });
+    });
+});

package/src/components/TextField/textfield.scss

@@ -103,6 +103,8 @@ $eccgui-map-intent-bgcolors: (
 }
 
 .#{$ns}-input {
+    --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
+
     .#{$ns}-input-group[class*="#{$eccgui}-intent--"] & {
         animation-duration: 1s;
         animation-delay: 0.5s;
@@ -111,16 +113,23 @@ $eccgui-map-intent-bgcolors: (
     @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
         .#{$ns}-input-group.#{$ns}-intent-#{$each-intent} & {
             background-color: eccgui-color-var("semantic", $each-intent, "100");
+
+            --#{$eccgui}-a11y-outline-color: eccgui-color-var("semantic", $each-intent, "900");
+
             animation-name: intent-state-flash-#{$each-intent};
         }
     }
 
     .#{$ns}-input-group.#{$eccgui}-intent--info & {
         @include pt-input-intent($eccgui-color-info-text);
+
+        --#{$eccgui}-a11y-outline-color: #{$eccgui-color-info-text};
     }
 
     .#{$ns}-input-group.#{$eccgui}-intent--accent & {
         @include pt-input-intent($eccgui-color-primary);
+
+        --#{$eccgui}-a11y-outline-color: #{$eccgui-color-primary};
     }
 
     .#{$ns}-input-group.#{$eccgui}-intent--neutral & {
@@ -138,6 +147,10 @@ $eccgui-map-intent-bgcolors: (
 
         text-decoration: line-through $eccgui-color-danger-text 2px;
     }
+
+    &:focus-visible {
+        @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
+    }
 }
 
 .#{$eccgui}-textarea {
@@ -151,16 +164,23 @@ $eccgui-map-intent-bgcolors: (
     @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
         &.#{$eccgui}-intent--#{$each-intent} {
             background-color: eccgui-color-var("semantic", $each-intent, "100");
+
+            --#{$eccgui}-a11y-outline-color: eccgui-color-var("semantic", $each-intent, "900");
+
             animation-name: intent-state-flash-#{$each-intent};
         }
     }
 
     &.#{$eccgui}-intent--info {
         @include pt-input-intent($eccgui-color-info-text);
+
+        --#{$eccgui}-a11y-outline-color: #{$eccgui-color-info-text};
     }
 
     &.#{$eccgui}-intent--accent {
         @include pt-input-intent($eccgui-color-primary);
+
+        --#{$eccgui}-a11y-outline-color: #{$eccgui-color-primary};
     }
 
     &.#{$eccgui}-intent--neutral {

package/src/components/TextField/useTextValidation.ts

@@ -44,19 +44,28 @@ export const useTextValidation = <T>({ value, onChange, invisibleCharacterWarnin
         state.current.detectedCodePoints = new Set();
     }, []);
     const detectionRegex = React.useMemo(() => chars.invisibleZeroWidthCharacters.createRegex(), []);
+    const segmenter = React.useMemo(() => new Intl.Segmenter(undefined, { granularity: "grapheme" }), []);
+    const emojiRegex = React.useMemo(() => new RegExp("\\p{Extended_Pictographic}|\\u20E3", "u"), []);
+
     const detectIssues = React.useCallback(
         (value: string): void => {
-            detectionRegex.lastIndex = 0;
-            let matchArray = detectionRegex.exec(value);
-            while (matchArray) {
-                const codePoint = matchArray[0].codePointAt(0);
-                if (codePoint) {
-                    state.current.detectedCodePoints.add(codePoint);
+            for (const { segment } of segmenter.segment(value)) {
+                if (emojiRegex.test(segment)) {
+                    // skip emoji clusters since they legitimately contain variation selectors, ZWJ, tags, etc.
+                } else {
+                    detectionRegex.lastIndex = 0;
+                    let matchArray = detectionRegex.exec(segment);
+                    while (matchArray) {
+                        const codePoint = matchArray[0].codePointAt(0);
+                        if (codePoint) {
+                            state.current.detectedCodePoints.add(codePoint);
+                        }
+                        matchArray = detectionRegex.exec(segment);
+                    }
                 }
-                matchArray = detectionRegex.exec(value);
             }
         },
-        [detectionRegex]
+        [detectionRegex, segmenter, emojiRegex]
     );
     // Checks if the value contains any problematic characters with a small delay.
     const checkValue = React.useCallback(

package/src/components/TextReducer/TextReducer.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { HtmlContentBlock, Markdown, TextReducer } from "../../../index";
+import { Markdown } from "../../cmem/markdown/Markdown";
+import { HtmlContentBlock } from "../Typography";
+
+import { TextReducer } from "./TextReducer";
 
 export default {
     title: "Components/TextReducer",

package/src/components/TextReducer/TextReducer.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {render, RenderResult} from "@testing-library/react";
+import { render, RenderResult } from "@testing-library/react";
 
 import "@testing-library/jest-dom";
 
@@ -9,10 +9,10 @@ import { Default as TextReducerStory } from "./TextReducer.stories";
 describe("TextReducer", () => {
     const textMustExist = (queryByText: RenderResult["queryByText"], text: string) => {
         expect(queryByText(text, { exact: false })).not.toBeNull();
-    }
+    };
     const textMustNotExist = (queryByText: RenderResult["queryByText"], text: string) => {
         expect(queryByText(text, { exact: false })).toBeNull();
-    }
+    };
     it("should display encoded HTML entities by default if they are used in the transformed markup", () => {
         const { queryByText } = render(<TextReducer {...TextReducerStory.args} />);
         textMustExist(queryByText, "&#x27;entities&#x27; &amp; &quot;quotes&quot;");

package/src/components/Toolbar/toolbar.scss

@@ -1,9 +1,8 @@
 .#{$eccgui}-toolbar {
     display: flex;
     flex-flow: row wrap;
-    align-content: center;
+    place-content: center flex-start;
     align-items: center;
-    justify-content: flex-start;
 }
 
 .#{$eccgui}-toolbar--vertical {

package/src/components/Tooltip/Tooltip.test.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import "@testing-library/jest-dom";
 
@@ -45,19 +46,53 @@ describe("Tooltip", () => {
         fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper--placeholder`)[0]);
         checkForPlaceholderClass(container, 1);
         await waitFor(() => {
-            expect(screen.queryAllByText(TooltipStory.args.content)).toHaveLength(0);
             checkForPlaceholderClass(container, 0);
         });
+        expect(screen.queryAllByText(TooltipStory.args.content as string)).toHaveLength(0);
     });
     it("should be displayed on two continues mouse hover when placeholder is used", async () => {
         const { container } = render(<Tooltip {...TooltipStory.args} usePlaceholder={true} />);
         fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
         checkForPlaceholderClass(container, 1);
-        await waitFor(async () => {
-            expect(screen.queryAllByText(TooltipStory.args.content)).toHaveLength(0);
+        await waitFor(() => {
+            checkForPlaceholderClass(container, 0);
+        });
+        expect(screen.queryAllByText(TooltipStory.args.content as string)).toHaveLength(0);
+        fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
+        expect(await screen.findByText(TooltipStory.args.content as string)).toBeVisible();
+    });
+    it("should be displayed on focus when no placeholder is used", async () => {
+        // Blueprint ignores focus events with null relatedTarget (page-refocus guard), so we tab
+        // from a preceding element to produce a non-null relatedTarget.
+        render(
+            <>
+                <button>previous element</button>
+                <Tooltip {...TooltipStory.args} usePlaceholder={false} />
+            </>
+        );
+        const user = userEvent.setup();
+        await user.tab(); // focuses "previous element"
+        await user.tab(); // focuses tooltip target, relatedTarget is non-null → Blueprint opens
+        expect(await screen.findByText(TooltipStory.args.content as string)).toBeVisible();
+    });
+    it("should be displayed after keyboard focus when placeholder is used", async () => {
+        // Use a focusable button child so refocus() can call .focus() on it after the swap.
+        // Tab from a preceding element so relatedTarget is non-null when Blueprint handles focus.
+        const { container } = render(
+            <>
+                <button>previous element</button>
+                <Tooltip {...TooltipStory.args} usePlaceholder={true}>
+                    <button>tooltip target</button>
+                </Tooltip>
+            </>
+        );
+        const user = userEvent.setup();
+        await user.tab(); // focuses "previous element"
+        await user.tab(); // focuses placeholder inner button, triggers focusin swap
+        checkForPlaceholderClass(container, 1);
+        await waitFor(() => {
             checkForPlaceholderClass(container, 0);
-            fireEvent.mouseOver(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
-            expect(await screen.findByText(TooltipStory.args.content)).toBeVisible();
         });
+        expect(await screen.findByText(TooltipStory.args.content as string)).toBeVisible();
     });
 });

package/src/components/Tooltip/Tooltip.tsx

@@ -50,7 +50,7 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
     swapPlaceholderDelay?: number;
 }
 
-export type TooltipSize = "small" | "medium" | "large"
+export type TooltipSize = "small" | "medium" | "large";
 
 export const Tooltip = ({
     children,
@@ -100,15 +100,19 @@ export const Tooltip = ({
                 }, swapDelayTime);
                 if (placeholderRef.current !== null) {
                     const eventType = ev.type === "focusin" ? "focusout" : "mouseleave";
-                    (placeholderRef.current as HTMLElement).addEventListener(eventType, () => {
-                        if (
-                            (eventType === "focusout" && eventMemory.current === "afterfocus") ||
-                            (eventType === "mouseleave" && eventMemory.current === "afterhover")
-                        ) {
-                            eventMemory.current = null;
-                        }
-                        clearTimeout(swapDelay.current as NodeJS.Timeout);
-                    });
+                    const innerFocusTarget = (placeholderRef.current as HTMLElement).querySelector("[tabindex='0']")
+                        ?.children[0];
+                    if (innerFocusTarget) {
+                        (innerFocusTarget as HTMLElement).addEventListener(eventType, () => {
+                            if (
+                                (eventType === "focusout" && eventMemory.current === "afterfocus") ||
+                                (eventType === "mouseleave" && eventMemory.current === "afterhover")
+                            ) {
+                                eventMemory.current = null;
+                            }
+                            clearTimeout(swapDelay.current as NodeJS.Timeout);
+                        });
+                    }
                 }
             };
             (placeholderRef.current as HTMLElement).addEventListener("mouseenter", swap);
@@ -123,7 +127,7 @@ export const Tooltip = ({
         return () => {};
     }, [!!placeholderRef.current]);
 
-    const refocus = React.useCallback((node) => {
+    const refocus = React.useCallback((node:any) => {
         if (eventMemory.current && node) {
             // we do not have a `targetRef` here, so we need to workaround it
             // const target = node.targetRef.current.children[0];

package/src/components/Typography/InlineText.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { TestableComponent } from "../interfaces";
+
+export interface InlineTextProps extends React.HTMLAttributes<HTMLElement>, TestableComponent {
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+}
+
+/**
+ * Forces all children to be displayed as inline content.
+ */
+export const InlineText = ({ className = "", children, ...otherProps }: InlineTextProps) => {
+    return (
+        <div {...otherProps} className={`${eccgui}-typography__inlinetext` + (className ? " " + className : "")}>
+            {children}
+        </div>
+    );
+};
+
+export default InlineText;

package/src/components/Typography/_reset.scss

@@ -7,6 +7,7 @@ select,
 input,
 textarea {
     font-family: inherit;
+    font-size-adjust: inherit;
     border-radius: 0;
 }
 
@@ -27,6 +28,7 @@ button {
 
 svg {
     padding: 0;
+
     // forgotten in reset import but necessary to fix problems when used together with MDL resets
     margin: 0;
     font: inherit;

package/src/components/Typography/index.ts

@@ -2,3 +2,4 @@ export * from "./Highlighter";
 export * from "./HtmlContentBlock";
 export * from "./OverflowText";
 export * from "./WhiteSpaceContainer";
+export * from "./InlineText";

package/src/components/Typography/stories/InlineText.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { InlineText } from "../InlineText";
+
+import overflowTextConfig from "./OverflowText.stories";
+
+const config = {
+    title: "Components/Typography/InlineText",
+    component: InlineText,
+    argTypes: {
+        children: overflowTextConfig.argTypes?.children,
+    },
+} as Meta<typeof InlineText>;
+export default config;
+
+const Template: StoryFn<typeof InlineText> = (args) => <InlineText {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    children: (
+        <div>
+            <div>Block line 1.</div>
+            <div>Block line 2.</div>
+        </div>
+    ),
+};

package/src/components/Typography/typography.scss

@@ -13,6 +13,12 @@ html {
 
 body {
     font-family: $eccgui-font-family-default;
+
+    // User-facing text may contain Unicode symbols (e.g. "★") that fall outside the primary font stack.
+    // Browsers pick different system fallback fonts for such characters, causing glyphs to render at
+    // different optical sizes (smaller in Firefox). font-size-adjust normalises the fallback font size
+    // by matching the primary font's x-height, reducing the visual size discrepancy across browsers.
+    font-size-adjust: from-font;
     font-weight: $eccgui-font-weight-regular;
     text-rendering: optimizelegibility;
     -webkit-font-smoothing: antialiased;
@@ -22,6 +28,11 @@ body {
 code {
     font-family: $eccgui-font-family-monospace;
     font-size: 0.9em;
+
+    .#{$eccgui}-typography__contentblock &,
+    &.#{$eccgui}-typography__text {
+        background-color: $eccgui-color-workspace-background;
+    }
 }
 
 strong {
@@ -63,11 +74,18 @@ mark {
     line-height: $eccgui-size-typo-text-lineheight;
 }
 
-.#{$eccgui}-typography__contentblock.#{$eccgui}-typography--small {
+.#{$eccgui}-typography__contentblock.#{$eccgui}-typography--small,
+.#{$eccgui}-typography--small {
     font-size: $eccgui-size-typo-caption;
     line-height: $eccgui-size-typo-caption-lineheight;
 }
 
+.#{$eccgui}-typography__contentblock.#{$eccgui}-typography--large,
+.#{$eccgui}-typography--large {
+    font-size: $eccgui-size-typo-subtitle;
+    line-height: $eccgui-size-typo-subtitle-lineheight;
+}
+
 h1 {
     .#{$eccgui}-typography__contentblock &,
     &.#{$eccgui}-typography__text {
@@ -223,9 +241,9 @@ table {
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
+    vertical-align: middle;
     overflow-wrap: normal;
     white-space: nowrap;
-    vertical-align: middle;
 }
 
 .#{$eccgui}-typography__overflowtext--inline {
@@ -241,8 +259,8 @@ table {
 }
 
 .#{$eccgui}-typography__overflowtext--ellipsis-reverse {
-    text-align: left;
     text-overflow: ellipsis;
+    text-align: left;
     direction: rtl;
     unicode-bidi: embed;
 
@@ -263,6 +281,22 @@ table {
     }
 }
 
+// InlineText
+
+.#{$eccgui}-typography__inlinetext {
+    display: inline;
+
+    * {
+        display: inline;
+
+        & + * {
+            &::before {
+                content: " ";
+            }
+        }
+    }
+}
+
 // helpers
 
 .#{$eccgui}-typography--nooverflow {