@stoplight/elements-core 7.10.0 → 7.12.0

package/components/Docs/Docs.d.ts

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { ParsedNode } from '../../types';
 import { ReferenceResolver } from '../../utils/ref-resolving/ReferenceResolver';
 import { ExportButtonProps } from './HttpService/ExportButton';
+declare type NodeUnsupportedFn = (err: 'dataEmpty' | 'invalidType' | Error) => void;
 interface BaseDocsProps {
     className?: string;
     uri?: string;
@@ -25,6 +26,7 @@ interface BaseDocsProps {
         compact?: number | boolean;
     };
     nodeHasChanged?: NodeHasChangedFn<React.ReactNode>;
+    nodeUnsupported?: NodeUnsupportedFn;
 }
 export interface DocsProps extends BaseDocsProps {
     nodeType: NodeType;
@@ -39,5 +41,5 @@ export declare const Docs: React.NamedExoticComponent<DocsProps>;
 export interface ParsedDocsProps extends BaseDocsProps {
     node: ParsedNode;
 }
-export declare const ParsedDocs: ({ node, ...commonProps }: ParsedDocsProps) => JSX.Element | null;
+export declare const ParsedDocs: ({ node, nodeUnsupported, ...commonProps }: ParsedDocsProps) => JSX.Element | null;
 export { DocsSkeleton } from './Skeleton';

package/components/MosaicTableOfContents/constants.d.ts

@@ -2,11 +2,19 @@ import { IIconProps } from '@stoplight/mosaic';
 export declare const NODE_TYPE_TITLE_ICON: {
     [nodeType: string]: IIconProps['icon'];
 };
+export declare const NODE_TITLE_ICON: {
+    [nodeTitle: string]: IIconProps['icon'];
+};
 export declare const NODE_TYPE_META_ICON: {
     [nodeType: string]: IIconProps['icon'];
 };
 export declare const NODE_TYPE_ICON_COLOR: {
     model: string;
+    http_service: string;
+    http_operation: string;
+};
+export declare const NODE_TITLE_ICON_COLOR: {
+    Schemas: string;
 };
 export declare const NODE_META_COLOR: {
     get: string;

package/components/MosaicTableOfContents/types.d.ts

@@ -4,6 +4,7 @@ export declare type TableOfContentsProps = {
     Link: CustomLinkComponent;
     maxDepthOpenByDefault?: number;
     externalScrollbar?: boolean;
+    isInResponsiveMode?: boolean;
     onLinkClick?(): void;
 };
 export declare type CustomLinkComponent = React.ComponentType<{

package/index.esm.js

@@ -293,6 +293,11 @@ var faBookOpen = {
   iconName: 'book-open',
   icon: [576, 512, [128366, 128214], "f518", "M144.3 32.04C106.9 31.29 63.7 41.44 18.6 61.29c-11.42 5.026-18.6 16.67-18.6 29.15l0 357.6c0 11.55 11.99 19.55 22.45 14.65c126.3-59.14 219.8 11 223.8 14.01C249.1 478.9 252.5 480 256 480c12.4 0 16-11.38 16-15.98V80.04c0-5.203-2.531-10.08-6.781-13.08C263.3 65.58 216.7 33.35 144.3 32.04zM557.4 61.29c-45.11-19.79-88.48-29.61-125.7-29.26c-72.44 1.312-118.1 33.55-120.9 34.92C306.5 69.96 304 74.83 304 80.04v383.1C304 468.4 307.5 480 320 480c3.484 0 6.938-1.125 9.781-3.328c3.925-3.018 97.44-73.16 223.8-14c10.46 4.896 22.45-3.105 22.45-14.65l.0001-357.6C575.1 77.97 568.8 66.31 557.4 61.29z"]
 };
+var faBullseye = {
+  prefix: 'fas',
+  iconName: 'bullseye',
+  icon: [512, 512, [], "f140", "M288 256C288 273.7 273.7 288 256 288C238.3 288 224 273.7 224 256C224 238.3 238.3 224 256 224C273.7 224 288 238.3 288 256zM112 256C112 176.5 176.5 112 256 112C335.5 112 400 176.5 400 256C400 335.5 335.5 400 256 400C176.5 400 112 335.5 112 256zM256 336C300.2 336 336 300.2 336 256C336 211.8 300.2 176 256 176C211.8 176 176 211.8 176 256C176 300.2 211.8 336 256 336zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 64C149.1 64 64 149.1 64 256C64 362 149.1 448 256 448C362 448 448 362 448 256C448 149.1 362 64 256 64z"]
+};
 var faCircleQuestion = {
   prefix: 'fas',
   iconName: 'circle-question',
@@ -314,6 +319,11 @@ var faCube = {
   iconName: 'cube',
   icon: [512, 512, [], "f1b2", "M234.5 5.709C248.4 .7377 263.6 .7377 277.5 5.709L469.5 74.28C494.1 83.38 512 107.5 512 134.6V377.4C512 404.5 494.1 428.6 469.5 437.7L277.5 506.3C263.6 511.3 248.4 511.3 234.5 506.3L42.47 437.7C17 428.6 0 404.5 0 377.4V134.6C0 107.5 17 83.38 42.47 74.28L234.5 5.709zM256 65.98L82.34 128L256 190L429.7 128L256 65.98zM288 434.6L448 377.4V189.4L288 246.6V434.6z"]
 };
+var faCubes = {
+  prefix: 'fas',
+  iconName: 'cubes',
+  icon: [576, 512, [], "f1b3", "M172.1 40.16L268.1 3.76C280.9-1.089 295.1-1.089 307.9 3.76L403.9 40.16C425.6 48.41 440 69.25 440 92.52V204.7C441.3 205.1 442.6 205.5 443.9 205.1L539.9 242.4C561.6 250.6 576 271.5 576 294.7V413.9C576 436.1 562.9 456.2 542.5 465.1L446.5 507.3C432.2 513.7 415.8 513.7 401.5 507.3L288 457.5L174.5 507.3C160.2 513.7 143.8 513.7 129.5 507.3L33.46 465.1C13.13 456.2 0 436.1 0 413.9V294.7C0 271.5 14.39 250.6 36.15 242.4L132.1 205.1C133.4 205.5 134.7 205.1 136 204.7V92.52C136 69.25 150.4 48.41 172.1 40.16V40.16zM290.8 48.64C289 47.95 286.1 47.95 285.2 48.64L206.8 78.35L287.1 109.5L369.2 78.35L290.8 48.64zM392 210.6V121L309.6 152.6V241.8L392 210.6zM154.8 250.9C153 250.2 150.1 250.2 149.2 250.9L70.81 280.6L152 311.7L233.2 280.6L154.8 250.9zM173.6 455.3L256 419.1V323.2L173.6 354.8V455.3zM342.8 280.6L424 311.7L505.2 280.6L426.8 250.9C425 250.2 422.1 250.2 421.2 250.9L342.8 280.6zM528 413.9V323.2L445.6 354.8V455.3L523.2 421.2C526.1 419.9 528 417.1 528 413.9V413.9z"]
+};
 var faDatabase = {
   prefix: 'fas',
   iconName: 'database',
@@ -2806,9 +2816,11 @@ const ModelExamples = React.memo(({ data, isCollapsible = false }) => {
 const Model = withErrorBoundary(ModelComponent, { recoverableProps: ['data'] });
 
 const Docs = React.memo((_a) => {
+    var _b;
     var { nodeType, nodeData, useNodeForRefResolving = false, refResolver, nodeHasChanged } = _a, commonProps = __rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver", "nodeHasChanged"]);
     const parsedNode = useParsedData(nodeType, nodeData);
     if (!parsedNode) {
+        (_b = commonProps.nodeUnsupported) === null || _b === void 0 ? void 0 : _b.call(commonProps, 'dataEmpty');
         return null;
     }
     let elem = React.createElement(ParsedDocs, Object.assign({ node: parsedNode }, commonProps));
@@ -2818,7 +2830,7 @@ const Docs = React.memo((_a) => {
     return React.createElement(ElementsOptionsProvider, { nodeHasChanged: nodeHasChanged }, elem);
 });
 const ParsedDocs = (_a) => {
-    var { node } = _a, commonProps = __rest(_a, ["node"]);
+    var { node, nodeUnsupported } = _a, commonProps = __rest(_a, ["node", "nodeUnsupported"]);
     switch (node.type) {
         case 'article':
             return React.createElement(Article, Object.assign({ data: node.data }, commonProps));
@@ -2829,6 +2841,7 @@ const ParsedDocs = (_a) => {
         case 'model':
             return React.createElement(Model, Object.assign({ data: node.data }, commonProps));
         default:
+            nodeUnsupported === null || nodeUnsupported === void 0 ? void 0 : nodeUnsupported('invalidType');
             return null;
     }
 };
@@ -3026,12 +3039,22 @@ function useFirstRender() {
 
 const NODE_TYPE_TITLE_ICON = {
     http_service: faCloud,
+    http_operation: faBullseye,
+    model: faCube,
+};
+const NODE_TITLE_ICON = {
+    Schemas: faCubes,
 };
 const NODE_TYPE_META_ICON = {
     model: faCube,
 };
 const NODE_TYPE_ICON_COLOR = {
     model: 'warning',
+    http_service: '#D812EA',
+    http_operation: '#9747FF',
+};
+const NODE_TITLE_ICON_COLOR = {
+    Schemas: 'warning',
 };
 const NODE_META_COLOR = {
     get: 'success',
@@ -3098,7 +3121,7 @@ function isExternalLink(item) {
 
 const ActiveIdContext = React.createContext(undefined);
 const LinkContext = React.createContext(undefined);
-const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefault, externalScrollbar = false, onLinkClick }) => {
+const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefault, externalScrollbar = false, isInResponsiveMode = false, onLinkClick, }) => {
     const container = React.useRef(null);
     const child = React.useRef(null);
     const firstRender = useFirstRender();
@@ -3115,35 +3138,35 @@ const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefaul
             }
         }, 0);
     }, [activeId]);
-    return (React.createElement(Box, { ref: container, w: "full", bg: "canvas-100", overflowY: "auto" },
+    return (React.createElement(Box, { ref: container, w: "full", bg: isInResponsiveMode ? 'canvas' : 'canvas-100', overflowY: "auto" },
         React.createElement(Box, { ref: child, my: 3 },
             React.createElement(LinkContext.Provider, { value: Link },
                 React.createElement(ActiveIdContext.Provider, { value: activeId }, tree.map((item, key) => {
                     if (isDivider(item)) {
-                        return React.createElement(Divider, { key: key, item: item });
+                        return React.createElement(Divider, { key: key, item: item, isInResponsiveMode: isInResponsiveMode });
                     }
-                    return (React.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick }));
+                    return (React.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
                 }))))));
 });
-const Divider = React.memo(({ item }) => {
-    return (React.createElement(Box, { pl: 4, mb: 2, mt: 6, textTransform: "uppercase", fontSize: "sm", lineHeight: "relaxed", letterSpacing: "wide", fontWeight: "bold" }, item.title));
+const Divider = React.memo(({ item, isInResponsiveMode = false }) => {
+    return (React.createElement(Box, { pl: 4, mb: 2, mt: 6, textTransform: "uppercase", fontSize: isInResponsiveMode ? 'lg' : 'sm', lineHeight: "relaxed", letterSpacing: "wide", fontWeight: "bold" }, item.title));
 });
-const GroupItem = React.memo(({ item, depth, maxDepthOpenByDefault, onLinkClick }) => {
+const GroupItem = React.memo(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick }) => {
     if (isExternalLink(item)) {
         return (React.createElement(Box, { as: "a", href: item.url, target: "_blank", rel: "noopener noreferrer", display: "block" },
-            React.createElement(Item, { depth: depth, title: item.title, meta: React.createElement(Box, { as: Icon, icon: ['fas', 'external-link'] }) })));
+            React.createElement(Item, { isInResponsiveMode: isInResponsiveMode, depth: depth, title: item.title, meta: React.createElement(Box, { as: Icon, icon: ['fas', 'external-link'] }) })));
     }
     else if (isGroup(item) || isNodeGroup(item)) {
-        return React.createElement(Group, { depth: depth, item: item, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick });
+        return (React.createElement(Group, { depth: depth, item: item, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
     }
     else if (isNode(item)) {
-        return (React.createElement(Node, { depth: depth, item: item, onLinkClick: onLinkClick, meta: item.meta ? (React.createElement(Box, { color: NODE_META_COLOR[item.meta], textTransform: "uppercase", fontWeight: "medium" }, item.meta)) : (NODE_TYPE_META_ICON[item.type] && (React.createElement(Flex, { alignItems: "center" },
+        return (React.createElement(Node, { depth: depth, isInResponsiveMode: isInResponsiveMode, item: item, onLinkClick: onLinkClick, meta: item.meta ? (React.createElement(Box, { color: NODE_META_COLOR[item.meta], textTransform: "uppercase", fontWeight: "medium" }, item.meta)) : (NODE_TYPE_META_ICON[item.type] && (React.createElement(Flex, { alignItems: "center" },
                 item.version && React.createElement(Version, { value: item.version }),
-                React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_META_ICON[item.type] })))) }));
+                item.type !== 'model' && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_META_ICON[item.type] }))))) }));
     }
     return null;
 });
-const Group = React.memo(({ depth, item, maxDepthOpenByDefault, onLinkClick = () => { } }) => {
+const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick = () => { } }) => {
     const activeId = React.useContext(ActiveIdContext);
     const [isOpen, setIsOpen] = React.useState(() => isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault));
     const hasActive = !!activeId && hasActiveItem(item.items, activeId);
@@ -3171,25 +3194,28 @@ const Group = React.memo(({ depth, item, maxDepthOpenByDefault, onLinkClick = ()
     const showAsActive = hasActive && !isOpen;
     let elem;
     if (isNodeGroup(item)) {
-        elem = (React.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick }));
+        elem = (React.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
     }
     else {
-        elem = React.createElement(Item, { title: item.title, meta: meta, onClick: handleClick, depth: depth, isActive: showAsActive });
+        elem = (React.createElement(Item, { isInResponsiveMode: isInResponsiveMode, title: item.title, meta: meta, onClick: handleClick, depth: depth, isActive: showAsActive, icon: NODE_TITLE_ICON[item.title] && (React.createElement(Box, { as: Icon, color: NODE_TITLE_ICON_COLOR[item.title], icon: NODE_TITLE_ICON[item.title] })) }));
     }
     return (React.createElement(React.Fragment, null,
         elem,
         isOpen &&
             item.items.map((groupItem, key) => {
-                return React.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick });
+                return (React.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
             })));
 });
-const Item = React.memo(({ depth, isActive, id, title, meta, icon, onClick }) => {
-    return (React.createElement(Flex, { id: id, bg: { default: isActive ? 'primary-tint' : 'canvas-100', hover: isActive ? undefined : 'canvas-200' }, cursor: "pointer", pl: 4 + depth * 4, pr: 4, h: "md", align: "center", userSelect: "none", onClick: onClick, title: title },
+const Item = React.memo(({ depth, isActive, id, title, meta, icon, isInResponsiveMode, onClick }) => {
+    return (React.createElement(Flex, { id: id, bg: {
+            default: isInResponsiveMode ? 'canvas' : isActive ? 'primary-tint' : 'canvas-100',
+            hover: isActive ? undefined : 'canvas-200',
+        }, cursor: "pointer", pl: 4 + depth * 4, pr: 4, h: isInResponsiveMode ? 'lg' : 'md', align: "center", userSelect: "none", onClick: onClick, title: title },
         icon,
-        React.createElement(Box, { alignItems: "center", flex: 1, mr: meta ? 1.5 : undefined, ml: icon && 1.5, textOverflow: "truncate" }, title),
-        React.createElement(Flex, { alignItems: "center", fontSize: "xs" }, meta)));
+        React.createElement(Box, { alignItems: "center", flex: 1, mr: meta ? 1.5 : undefined, ml: icon && 1.5, textOverflow: "truncate", fontSize: isInResponsiveMode ? 'lg' : 'base' }, title),
+        React.createElement(Flex, { alignItems: "center", fontSize: isInResponsiveMode ? 'base' : 'xs' }, meta)));
 });
-const Node = React.memo(({ item, depth, meta, showAsActive, onClick, onLinkClick = () => { } }) => {
+const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode, onClick, onLinkClick = () => { } }) => {
     const activeId = React.useContext(ActiveIdContext);
     const isActive = activeId === item.slug || activeId === item.id;
     const LinkComponent = React.useContext(LinkContext);
@@ -3206,7 +3232,7 @@ const Node = React.memo(({ item, depth, meta, showAsActive, onClick, onLinkClick
         }
     };
     return (React.createElement(Box, { as: LinkComponent, to: item.slug, display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
-        React.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, onClick: handleClick })));
+        React.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, isInResponsiveMode: isInResponsiveMode, onClick: handleClick })));
 });
 const Version = ({ value }) => {
     return (React.createElement(Box, { mr: 2 },

package/index.js

@@ -349,6 +349,11 @@ var faBookOpen = {
   iconName: 'book-open',
   icon: [576, 512, [128366, 128214], "f518", "M144.3 32.04C106.9 31.29 63.7 41.44 18.6 61.29c-11.42 5.026-18.6 16.67-18.6 29.15l0 357.6c0 11.55 11.99 19.55 22.45 14.65c126.3-59.14 219.8 11 223.8 14.01C249.1 478.9 252.5 480 256 480c12.4 0 16-11.38 16-15.98V80.04c0-5.203-2.531-10.08-6.781-13.08C263.3 65.58 216.7 33.35 144.3 32.04zM557.4 61.29c-45.11-19.79-88.48-29.61-125.7-29.26c-72.44 1.312-118.1 33.55-120.9 34.92C306.5 69.96 304 74.83 304 80.04v383.1C304 468.4 307.5 480 320 480c3.484 0 6.938-1.125 9.781-3.328c3.925-3.018 97.44-73.16 223.8-14c10.46 4.896 22.45-3.105 22.45-14.65l.0001-357.6C575.1 77.97 568.8 66.31 557.4 61.29z"]
 };
+var faBullseye = {
+  prefix: 'fas',
+  iconName: 'bullseye',
+  icon: [512, 512, [], "f140", "M288 256C288 273.7 273.7 288 256 288C238.3 288 224 273.7 224 256C224 238.3 238.3 224 256 224C273.7 224 288 238.3 288 256zM112 256C112 176.5 176.5 112 256 112C335.5 112 400 176.5 400 256C400 335.5 335.5 400 256 400C176.5 400 112 335.5 112 256zM256 336C300.2 336 336 300.2 336 256C336 211.8 300.2 176 256 176C211.8 176 176 211.8 176 256C176 300.2 211.8 336 256 336zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 64C149.1 64 64 149.1 64 256C64 362 149.1 448 256 448C362 448 448 362 448 256C448 149.1 362 64 256 64z"]
+};
 var faCircleQuestion = {
   prefix: 'fas',
   iconName: 'circle-question',
@@ -370,6 +375,11 @@ var faCube = {
   iconName: 'cube',
   icon: [512, 512, [], "f1b2", "M234.5 5.709C248.4 .7377 263.6 .7377 277.5 5.709L469.5 74.28C494.1 83.38 512 107.5 512 134.6V377.4C512 404.5 494.1 428.6 469.5 437.7L277.5 506.3C263.6 511.3 248.4 511.3 234.5 506.3L42.47 437.7C17 428.6 0 404.5 0 377.4V134.6C0 107.5 17 83.38 42.47 74.28L234.5 5.709zM256 65.98L82.34 128L256 190L429.7 128L256 65.98zM288 434.6L448 377.4V189.4L288 246.6V434.6z"]
 };
+var faCubes = {
+  prefix: 'fas',
+  iconName: 'cubes',
+  icon: [576, 512, [], "f1b3", "M172.1 40.16L268.1 3.76C280.9-1.089 295.1-1.089 307.9 3.76L403.9 40.16C425.6 48.41 440 69.25 440 92.52V204.7C441.3 205.1 442.6 205.5 443.9 205.1L539.9 242.4C561.6 250.6 576 271.5 576 294.7V413.9C576 436.1 562.9 456.2 542.5 465.1L446.5 507.3C432.2 513.7 415.8 513.7 401.5 507.3L288 457.5L174.5 507.3C160.2 513.7 143.8 513.7 129.5 507.3L33.46 465.1C13.13 456.2 0 436.1 0 413.9V294.7C0 271.5 14.39 250.6 36.15 242.4L132.1 205.1C133.4 205.5 134.7 205.1 136 204.7V92.52C136 69.25 150.4 48.41 172.1 40.16V40.16zM290.8 48.64C289 47.95 286.1 47.95 285.2 48.64L206.8 78.35L287.1 109.5L369.2 78.35L290.8 48.64zM392 210.6V121L309.6 152.6V241.8L392 210.6zM154.8 250.9C153 250.2 150.1 250.2 149.2 250.9L70.81 280.6L152 311.7L233.2 280.6L154.8 250.9zM173.6 455.3L256 419.1V323.2L173.6 354.8V455.3zM342.8 280.6L424 311.7L505.2 280.6L426.8 250.9C425 250.2 422.1 250.2 421.2 250.9L342.8 280.6zM528 413.9V323.2L445.6 354.8V455.3L523.2 421.2C526.1 419.9 528 417.1 528 413.9V413.9z"]
+};
 var faDatabase = {
   prefix: 'fas',
   iconName: 'database',
@@ -2862,9 +2872,11 @@ const ModelExamples = React__namespace.memo(({ data, isCollapsible = false }) =>
 const Model = reactErrorBoundary.withErrorBoundary(ModelComponent, { recoverableProps: ['data'] });
 
 const Docs = React__namespace.memo((_a) => {
+    var _b;
     var { nodeType, nodeData, useNodeForRefResolving = false, refResolver, nodeHasChanged } = _a, commonProps = tslib.__rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver", "nodeHasChanged"]);
     const parsedNode = useParsedData(nodeType, nodeData);
     if (!parsedNode) {
+        (_b = commonProps.nodeUnsupported) === null || _b === void 0 ? void 0 : _b.call(commonProps, 'dataEmpty');
         return null;
     }
     let elem = React__namespace.createElement(ParsedDocs, Object.assign({ node: parsedNode }, commonProps));
@@ -2874,7 +2886,7 @@ const Docs = React__namespace.memo((_a) => {
     return React__namespace.createElement(ElementsOptionsProvider, { nodeHasChanged: nodeHasChanged }, elem);
 });
 const ParsedDocs = (_a) => {
-    var { node } = _a, commonProps = tslib.__rest(_a, ["node"]);
+    var { node, nodeUnsupported } = _a, commonProps = tslib.__rest(_a, ["node", "nodeUnsupported"]);
     switch (node.type) {
         case 'article':
             return React__namespace.createElement(Article, Object.assign({ data: node.data }, commonProps));
@@ -2885,6 +2897,7 @@ const ParsedDocs = (_a) => {
         case 'model':
             return React__namespace.createElement(Model, Object.assign({ data: node.data }, commonProps));
         default:
+            nodeUnsupported === null || nodeUnsupported === void 0 ? void 0 : nodeUnsupported('invalidType');
             return null;
     }
 };
@@ -3082,12 +3095,22 @@ function useFirstRender() {
 
 const NODE_TYPE_TITLE_ICON = {
     http_service: faCloud,
+    http_operation: faBullseye,
+    model: faCube,
+};
+const NODE_TITLE_ICON = {
+    Schemas: faCubes,
 };
 const NODE_TYPE_META_ICON = {
     model: faCube,
 };
 const NODE_TYPE_ICON_COLOR = {
     model: 'warning',
+    http_service: '#D812EA',
+    http_operation: '#9747FF',
+};
+const NODE_TITLE_ICON_COLOR = {
+    Schemas: 'warning',
 };
 const NODE_META_COLOR = {
     get: 'success',
@@ -3154,7 +3177,7 @@ function isExternalLink(item) {
 
 const ActiveIdContext = React__namespace.createContext(undefined);
 const LinkContext = React__namespace.createContext(undefined);
-const TableOfContents = React__namespace.memo(({ tree, activeId, Link, maxDepthOpenByDefault, externalScrollbar = false, onLinkClick }) => {
+const TableOfContents = React__namespace.memo(({ tree, activeId, Link, maxDepthOpenByDefault, externalScrollbar = false, isInResponsiveMode = false, onLinkClick, }) => {
     const container = React__namespace.useRef(null);
     const child = React__namespace.useRef(null);
     const firstRender = useFirstRender();
@@ -3171,35 +3194,35 @@ const TableOfContents = React__namespace.memo(({ tree, activeId, Link, maxDepthO
             }
         }, 0);
     }, [activeId]);
-    return (React__namespace.createElement(mosaic.Box, { ref: container, w: "full", bg: "canvas-100", overflowY: "auto" },
+    return (React__namespace.createElement(mosaic.Box, { ref: container, w: "full", bg: isInResponsiveMode ? 'canvas' : 'canvas-100', overflowY: "auto" },
         React__namespace.createElement(mosaic.Box, { ref: child, my: 3 },
             React__namespace.createElement(LinkContext.Provider, { value: Link },
                 React__namespace.createElement(ActiveIdContext.Provider, { value: activeId }, tree.map((item, key) => {
                     if (isDivider(item)) {
-                        return React__namespace.createElement(Divider, { key: key, item: item });
+                        return React__namespace.createElement(Divider, { key: key, item: item, isInResponsiveMode: isInResponsiveMode });
                     }
-                    return (React__namespace.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick }));
+                    return (React__namespace.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
                 }))))));
 });
-const Divider = React__namespace.memo(({ item }) => {
-    return (React__namespace.createElement(mosaic.Box, { pl: 4, mb: 2, mt: 6, textTransform: "uppercase", fontSize: "sm", lineHeight: "relaxed", letterSpacing: "wide", fontWeight: "bold" }, item.title));
+const Divider = React__namespace.memo(({ item, isInResponsiveMode = false }) => {
+    return (React__namespace.createElement(mosaic.Box, { pl: 4, mb: 2, mt: 6, textTransform: "uppercase", fontSize: isInResponsiveMode ? 'lg' : 'sm', lineHeight: "relaxed", letterSpacing: "wide", fontWeight: "bold" }, item.title));
 });
-const GroupItem = React__namespace.memo(({ item, depth, maxDepthOpenByDefault, onLinkClick }) => {
+const GroupItem = React__namespace.memo(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick }) => {
     if (isExternalLink(item)) {
         return (React__namespace.createElement(mosaic.Box, { as: "a", href: item.url, target: "_blank", rel: "noopener noreferrer", display: "block" },
-            React__namespace.createElement(Item, { depth: depth, title: item.title, meta: React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, icon: ['fas', 'external-link'] }) })));
+            React__namespace.createElement(Item, { isInResponsiveMode: isInResponsiveMode, depth: depth, title: item.title, meta: React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, icon: ['fas', 'external-link'] }) })));
     }
     else if (isGroup(item) || isNodeGroup(item)) {
-        return React__namespace.createElement(Group, { depth: depth, item: item, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick });
+        return (React__namespace.createElement(Group, { depth: depth, item: item, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
     }
     else if (isNode(item)) {
-        return (React__namespace.createElement(Node, { depth: depth, item: item, onLinkClick: onLinkClick, meta: item.meta ? (React__namespace.createElement(mosaic.Box, { color: NODE_META_COLOR[item.meta], textTransform: "uppercase", fontWeight: "medium" }, item.meta)) : (NODE_TYPE_META_ICON[item.type] && (React__namespace.createElement(mosaic.Flex, { alignItems: "center" },
+        return (React__namespace.createElement(Node, { depth: depth, isInResponsiveMode: isInResponsiveMode, item: item, onLinkClick: onLinkClick, meta: item.meta ? (React__namespace.createElement(mosaic.Box, { color: NODE_META_COLOR[item.meta], textTransform: "uppercase", fontWeight: "medium" }, item.meta)) : (NODE_TYPE_META_ICON[item.type] && (React__namespace.createElement(mosaic.Flex, { alignItems: "center" },
                 item.version && React__namespace.createElement(Version, { value: item.version }),
-                React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_META_ICON[item.type] })))) }));
+                item.type !== 'model' && (React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_META_ICON[item.type] }))))) }));
     }
     return null;
 });
-const Group = React__namespace.memo(({ depth, item, maxDepthOpenByDefault, onLinkClick = () => { } }) => {
+const Group = React__namespace.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick = () => { } }) => {
     const activeId = React__namespace.useContext(ActiveIdContext);
     const [isOpen, setIsOpen] = React__namespace.useState(() => isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault));
     const hasActive = !!activeId && hasActiveItem(item.items, activeId);
@@ -3227,25 +3250,28 @@ const Group = React__namespace.memo(({ depth, item, maxDepthOpenByDefault, onLin
     const showAsActive = hasActive && !isOpen;
     let elem;
     if (isNodeGroup(item)) {
-        elem = (React__namespace.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick }));
+        elem = (React__namespace.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
     }
     else {
-        elem = React__namespace.createElement(Item, { title: item.title, meta: meta, onClick: handleClick, depth: depth, isActive: showAsActive });
+        elem = (React__namespace.createElement(Item, { isInResponsiveMode: isInResponsiveMode, title: item.title, meta: meta, onClick: handleClick, depth: depth, isActive: showAsActive, icon: NODE_TITLE_ICON[item.title] && (React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, color: NODE_TITLE_ICON_COLOR[item.title], icon: NODE_TITLE_ICON[item.title] })) }));
     }
     return (React__namespace.createElement(React__namespace.Fragment, null,
         elem,
         isOpen &&
             item.items.map((groupItem, key) => {
-                return React__namespace.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick });
+                return (React__namespace.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
             })));
 });
-const Item = React__namespace.memo(({ depth, isActive, id, title, meta, icon, onClick }) => {
-    return (React__namespace.createElement(mosaic.Flex, { id: id, bg: { default: isActive ? 'primary-tint' : 'canvas-100', hover: isActive ? undefined : 'canvas-200' }, cursor: "pointer", pl: 4 + depth * 4, pr: 4, h: "md", align: "center", userSelect: "none", onClick: onClick, title: title },
+const Item = React__namespace.memo(({ depth, isActive, id, title, meta, icon, isInResponsiveMode, onClick }) => {
+    return (React__namespace.createElement(mosaic.Flex, { id: id, bg: {
+            default: isInResponsiveMode ? 'canvas' : isActive ? 'primary-tint' : 'canvas-100',
+            hover: isActive ? undefined : 'canvas-200',
+        }, cursor: "pointer", pl: 4 + depth * 4, pr: 4, h: isInResponsiveMode ? 'lg' : 'md', align: "center", userSelect: "none", onClick: onClick, title: title },
         icon,
-        React__namespace.createElement(mosaic.Box, { alignItems: "center", flex: 1, mr: meta ? 1.5 : undefined, ml: icon && 1.5, textOverflow: "truncate" }, title),
-        React__namespace.createElement(mosaic.Flex, { alignItems: "center", fontSize: "xs" }, meta)));
+        React__namespace.createElement(mosaic.Box, { alignItems: "center", flex: 1, mr: meta ? 1.5 : undefined, ml: icon && 1.5, textOverflow: "truncate", fontSize: isInResponsiveMode ? 'lg' : 'base' }, title),
+        React__namespace.createElement(mosaic.Flex, { alignItems: "center", fontSize: isInResponsiveMode ? 'base' : 'xs' }, meta)));
 });
-const Node = React__namespace.memo(({ item, depth, meta, showAsActive, onClick, onLinkClick = () => { } }) => {
+const Node = React__namespace.memo(({ item, depth, meta, showAsActive, isInResponsiveMode, onClick, onLinkClick = () => { } }) => {
     const activeId = React__namespace.useContext(ActiveIdContext);
     const isActive = activeId === item.slug || activeId === item.id;
     const LinkComponent = React__namespace.useContext(LinkContext);
@@ -3262,7 +3288,7 @@ const Node = React__namespace.memo(({ item, depth, meta, showAsActive, onClick,
         }
     };
     return (React__namespace.createElement(mosaic.Box, { as: LinkComponent, to: item.slug, display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
-        React__namespace.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, onClick: handleClick })));
+        React__namespace.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, isInResponsiveMode: isInResponsiveMode, onClick: handleClick })));
 });
 const Version = ({ value }) => {
     return (React__namespace.createElement(mosaic.Box, { mr: 2 },

package/index.mjs

@@ -293,6 +293,11 @@ var faBookOpen = {
   iconName: 'book-open',
   icon: [576, 512, [128366, 128214], "f518", "M144.3 32.04C106.9 31.29 63.7 41.44 18.6 61.29c-11.42 5.026-18.6 16.67-18.6 29.15l0 357.6c0 11.55 11.99 19.55 22.45 14.65c126.3-59.14 219.8 11 223.8 14.01C249.1 478.9 252.5 480 256 480c12.4 0 16-11.38 16-15.98V80.04c0-5.203-2.531-10.08-6.781-13.08C263.3 65.58 216.7 33.35 144.3 32.04zM557.4 61.29c-45.11-19.79-88.48-29.61-125.7-29.26c-72.44 1.312-118.1 33.55-120.9 34.92C306.5 69.96 304 74.83 304 80.04v383.1C304 468.4 307.5 480 320 480c3.484 0 6.938-1.125 9.781-3.328c3.925-3.018 97.44-73.16 223.8-14c10.46 4.896 22.45-3.105 22.45-14.65l.0001-357.6C575.1 77.97 568.8 66.31 557.4 61.29z"]
 };
+var faBullseye = {
+  prefix: 'fas',
+  iconName: 'bullseye',
+  icon: [512, 512, [], "f140", "M288 256C288 273.7 273.7 288 256 288C238.3 288 224 273.7 224 256C224 238.3 238.3 224 256 224C273.7 224 288 238.3 288 256zM112 256C112 176.5 176.5 112 256 112C335.5 112 400 176.5 400 256C400 335.5 335.5 400 256 400C176.5 400 112 335.5 112 256zM256 336C300.2 336 336 300.2 336 256C336 211.8 300.2 176 256 176C211.8 176 176 211.8 176 256C176 300.2 211.8 336 256 336zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 64C149.1 64 64 149.1 64 256C64 362 149.1 448 256 448C362 448 448 362 448 256C448 149.1 362 64 256 64z"]
+};
 var faCircleQuestion = {
   prefix: 'fas',
   iconName: 'circle-question',
@@ -314,6 +319,11 @@ var faCube = {
   iconName: 'cube',
   icon: [512, 512, [], "f1b2", "M234.5 5.709C248.4 .7377 263.6 .7377 277.5 5.709L469.5 74.28C494.1 83.38 512 107.5 512 134.6V377.4C512 404.5 494.1 428.6 469.5 437.7L277.5 506.3C263.6 511.3 248.4 511.3 234.5 506.3L42.47 437.7C17 428.6 0 404.5 0 377.4V134.6C0 107.5 17 83.38 42.47 74.28L234.5 5.709zM256 65.98L82.34 128L256 190L429.7 128L256 65.98zM288 434.6L448 377.4V189.4L288 246.6V434.6z"]
 };
+var faCubes = {
+  prefix: 'fas',
+  iconName: 'cubes',
+  icon: [576, 512, [], "f1b3", "M172.1 40.16L268.1 3.76C280.9-1.089 295.1-1.089 307.9 3.76L403.9 40.16C425.6 48.41 440 69.25 440 92.52V204.7C441.3 205.1 442.6 205.5 443.9 205.1L539.9 242.4C561.6 250.6 576 271.5 576 294.7V413.9C576 436.1 562.9 456.2 542.5 465.1L446.5 507.3C432.2 513.7 415.8 513.7 401.5 507.3L288 457.5L174.5 507.3C160.2 513.7 143.8 513.7 129.5 507.3L33.46 465.1C13.13 456.2 0 436.1 0 413.9V294.7C0 271.5 14.39 250.6 36.15 242.4L132.1 205.1C133.4 205.5 134.7 205.1 136 204.7V92.52C136 69.25 150.4 48.41 172.1 40.16V40.16zM290.8 48.64C289 47.95 286.1 47.95 285.2 48.64L206.8 78.35L287.1 109.5L369.2 78.35L290.8 48.64zM392 210.6V121L309.6 152.6V241.8L392 210.6zM154.8 250.9C153 250.2 150.1 250.2 149.2 250.9L70.81 280.6L152 311.7L233.2 280.6L154.8 250.9zM173.6 455.3L256 419.1V323.2L173.6 354.8V455.3zM342.8 280.6L424 311.7L505.2 280.6L426.8 250.9C425 250.2 422.1 250.2 421.2 250.9L342.8 280.6zM528 413.9V323.2L445.6 354.8V455.3L523.2 421.2C526.1 419.9 528 417.1 528 413.9V413.9z"]
+};
 var faDatabase = {
   prefix: 'fas',
   iconName: 'database',
@@ -2806,9 +2816,11 @@ const ModelExamples = React.memo(({ data, isCollapsible = false }) => {
 const Model = withErrorBoundary(ModelComponent, { recoverableProps: ['data'] });
 
 const Docs = React.memo((_a) => {
+    var _b;
     var { nodeType, nodeData, useNodeForRefResolving = false, refResolver, nodeHasChanged } = _a, commonProps = __rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver", "nodeHasChanged"]);
     const parsedNode = useParsedData(nodeType, nodeData);
     if (!parsedNode) {
+        (_b = commonProps.nodeUnsupported) === null || _b === void 0 ? void 0 : _b.call(commonProps, 'dataEmpty');
         return null;
     }
     let elem = React.createElement(ParsedDocs, Object.assign({ node: parsedNode }, commonProps));
@@ -2818,7 +2830,7 @@ const Docs = React.memo((_a) => {
     return React.createElement(ElementsOptionsProvider, { nodeHasChanged: nodeHasChanged }, elem);
 });
 const ParsedDocs = (_a) => {
-    var { node } = _a, commonProps = __rest(_a, ["node"]);
+    var { node, nodeUnsupported } = _a, commonProps = __rest(_a, ["node", "nodeUnsupported"]);
     switch (node.type) {
         case 'article':
             return React.createElement(Article, Object.assign({ data: node.data }, commonProps));
@@ -2829,6 +2841,7 @@ const ParsedDocs = (_a) => {
         case 'model':
             return React.createElement(Model, Object.assign({ data: node.data }, commonProps));
         default:
+            nodeUnsupported === null || nodeUnsupported === void 0 ? void 0 : nodeUnsupported('invalidType');
             return null;
     }
 };
@@ -3026,12 +3039,22 @@ function useFirstRender() {
 
 const NODE_TYPE_TITLE_ICON = {
     http_service: faCloud,
+    http_operation: faBullseye,
+    model: faCube,
+};
+const NODE_TITLE_ICON = {
+    Schemas: faCubes,
 };
 const NODE_TYPE_META_ICON = {
     model: faCube,
 };
 const NODE_TYPE_ICON_COLOR = {
     model: 'warning',
+    http_service: '#D812EA',
+    http_operation: '#9747FF',
+};
+const NODE_TITLE_ICON_COLOR = {
+    Schemas: 'warning',
 };
 const NODE_META_COLOR = {
     get: 'success',
@@ -3098,7 +3121,7 @@ function isExternalLink(item) {
 
 const ActiveIdContext = React.createContext(undefined);
 const LinkContext = React.createContext(undefined);
-const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefault, externalScrollbar = false, onLinkClick }) => {
+const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefault, externalScrollbar = false, isInResponsiveMode = false, onLinkClick, }) => {
     const container = React.useRef(null);
     const child = React.useRef(null);
     const firstRender = useFirstRender();
@@ -3115,35 +3138,35 @@ const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefaul
             }
         }, 0);
     }, [activeId]);
-    return (React.createElement(Box, { ref: container, w: "full", bg: "canvas-100", overflowY: "auto" },
+    return (React.createElement(Box, { ref: container, w: "full", bg: isInResponsiveMode ? 'canvas' : 'canvas-100', overflowY: "auto" },
         React.createElement(Box, { ref: child, my: 3 },
             React.createElement(LinkContext.Provider, { value: Link },
                 React.createElement(ActiveIdContext.Provider, { value: activeId }, tree.map((item, key) => {
                     if (isDivider(item)) {
-                        return React.createElement(Divider, { key: key, item: item });
+                        return React.createElement(Divider, { key: key, item: item, isInResponsiveMode: isInResponsiveMode });
                     }
-                    return (React.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick }));
+                    return (React.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
                 }))))));
 });
-const Divider = React.memo(({ item }) => {
-    return (React.createElement(Box, { pl: 4, mb: 2, mt: 6, textTransform: "uppercase", fontSize: "sm", lineHeight: "relaxed", letterSpacing: "wide", fontWeight: "bold" }, item.title));
+const Divider = React.memo(({ item, isInResponsiveMode = false }) => {
+    return (React.createElement(Box, { pl: 4, mb: 2, mt: 6, textTransform: "uppercase", fontSize: isInResponsiveMode ? 'lg' : 'sm', lineHeight: "relaxed", letterSpacing: "wide", fontWeight: "bold" }, item.title));
 });
-const GroupItem = React.memo(({ item, depth, maxDepthOpenByDefault, onLinkClick }) => {
+const GroupItem = React.memo(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick }) => {
     if (isExternalLink(item)) {
         return (React.createElement(Box, { as: "a", href: item.url, target: "_blank", rel: "noopener noreferrer", display: "block" },
-            React.createElement(Item, { depth: depth, title: item.title, meta: React.createElement(Box, { as: Icon, icon: ['fas', 'external-link'] }) })));
+            React.createElement(Item, { isInResponsiveMode: isInResponsiveMode, depth: depth, title: item.title, meta: React.createElement(Box, { as: Icon, icon: ['fas', 'external-link'] }) })));
     }
     else if (isGroup(item) || isNodeGroup(item)) {
-        return React.createElement(Group, { depth: depth, item: item, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick });
+        return (React.createElement(Group, { depth: depth, item: item, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
     }
     else if (isNode(item)) {
-        return (React.createElement(Node, { depth: depth, item: item, onLinkClick: onLinkClick, meta: item.meta ? (React.createElement(Box, { color: NODE_META_COLOR[item.meta], textTransform: "uppercase", fontWeight: "medium" }, item.meta)) : (NODE_TYPE_META_ICON[item.type] && (React.createElement(Flex, { alignItems: "center" },
+        return (React.createElement(Node, { depth: depth, isInResponsiveMode: isInResponsiveMode, item: item, onLinkClick: onLinkClick, meta: item.meta ? (React.createElement(Box, { color: NODE_META_COLOR[item.meta], textTransform: "uppercase", fontWeight: "medium" }, item.meta)) : (NODE_TYPE_META_ICON[item.type] && (React.createElement(Flex, { alignItems: "center" },
                 item.version && React.createElement(Version, { value: item.version }),
-                React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_META_ICON[item.type] })))) }));
+                item.type !== 'model' && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_META_ICON[item.type] }))))) }));
     }
     return null;
 });
-const Group = React.memo(({ depth, item, maxDepthOpenByDefault, onLinkClick = () => { } }) => {
+const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick = () => { } }) => {
     const activeId = React.useContext(ActiveIdContext);
     const [isOpen, setIsOpen] = React.useState(() => isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault));
     const hasActive = !!activeId && hasActiveItem(item.items, activeId);
@@ -3171,25 +3194,28 @@ const Group = React.memo(({ depth, item, maxDepthOpenByDefault, onLinkClick = ()
     const showAsActive = hasActive && !isOpen;
     let elem;
     if (isNodeGroup(item)) {
-        elem = (React.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick }));
+        elem = (React.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
     }
     else {
-        elem = React.createElement(Item, { title: item.title, meta: meta, onClick: handleClick, depth: depth, isActive: showAsActive });
+        elem = (React.createElement(Item, { isInResponsiveMode: isInResponsiveMode, title: item.title, meta: meta, onClick: handleClick, depth: depth, isActive: showAsActive, icon: NODE_TITLE_ICON[item.title] && (React.createElement(Box, { as: Icon, color: NODE_TITLE_ICON_COLOR[item.title], icon: NODE_TITLE_ICON[item.title] })) }));
     }
     return (React.createElement(React.Fragment, null,
         elem,
         isOpen &&
             item.items.map((groupItem, key) => {
-                return React.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick });
+                return (React.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
             })));
 });
-const Item = React.memo(({ depth, isActive, id, title, meta, icon, onClick }) => {
-    return (React.createElement(Flex, { id: id, bg: { default: isActive ? 'primary-tint' : 'canvas-100', hover: isActive ? undefined : 'canvas-200' }, cursor: "pointer", pl: 4 + depth * 4, pr: 4, h: "md", align: "center", userSelect: "none", onClick: onClick, title: title },
+const Item = React.memo(({ depth, isActive, id, title, meta, icon, isInResponsiveMode, onClick }) => {
+    return (React.createElement(Flex, { id: id, bg: {
+            default: isInResponsiveMode ? 'canvas' : isActive ? 'primary-tint' : 'canvas-100',
+            hover: isActive ? undefined : 'canvas-200',
+        }, cursor: "pointer", pl: 4 + depth * 4, pr: 4, h: isInResponsiveMode ? 'lg' : 'md', align: "center", userSelect: "none", onClick: onClick, title: title },
         icon,
-        React.createElement(Box, { alignItems: "center", flex: 1, mr: meta ? 1.5 : undefined, ml: icon && 1.5, textOverflow: "truncate" }, title),
-        React.createElement(Flex, { alignItems: "center", fontSize: "xs" }, meta)));
+        React.createElement(Box, { alignItems: "center", flex: 1, mr: meta ? 1.5 : undefined, ml: icon && 1.5, textOverflow: "truncate", fontSize: isInResponsiveMode ? 'lg' : 'base' }, title),
+        React.createElement(Flex, { alignItems: "center", fontSize: isInResponsiveMode ? 'base' : 'xs' }, meta)));
 });
-const Node = React.memo(({ item, depth, meta, showAsActive, onClick, onLinkClick = () => { } }) => {
+const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode, onClick, onLinkClick = () => { } }) => {
     const activeId = React.useContext(ActiveIdContext);
     const isActive = activeId === item.slug || activeId === item.id;
     const LinkComponent = React.useContext(LinkContext);
@@ -3206,7 +3232,7 @@ const Node = React.memo(({ item, depth, meta, showAsActive, onClick, onLinkClick
         }
     };
     return (React.createElement(Box, { as: LinkComponent, to: item.slug, display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
-        React.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, onClick: handleClick })));
+        React.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, isInResponsiveMode: isInResponsiveMode, onClick: handleClick })));
 });
 const Version = ({ value }) => {
     return (React.createElement(Box, { mr: 2 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "7.10.0",
+  "version": "7.12.0",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",