@rio-cloud/uikit-mcp 1.1.9 → 1.1.11

package/dist/docs/start/guidelines/iframe.md

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#/start/guidelines/iframe
-*Captured:* 2026-03-06T10:39:54.972Z
+*Captured:* 2026-04-27T14:57:07.135Z
 
 Web applications can embed smaller SPAs as widgets using an <iframe> to enrich it's functionality provided by other services and teams. This page explains what the parent application (host) and the child application (widget) must do to ensure correct styling, sizing, and communication.
 
@@ -50,6 +50,12 @@ href='https://cdn.rio.cloud/pageLoader/pageLoader.css'
 <script src='https://cdn.rio.cloud/pageLoader/pageLoader.js'></script>
 ```
 
+&lt;link rel='stylesheet' type='text/css' href='https://cdn.rio.cloud/pageLoader/pageLoader.css' /&gt;
+
+&lt;script src='https://cdn.rio.cloud/pageLoader/pageLoader.js'&gt;
+
+&lt;/script&gt;
+
 ## Auto-resizing the iframe (recommended)
 
 For widgets with dynamic height, scrolling inside the iframe often leads to a poor user experience. To avoid nested scrolling, we recommend using iframe-resizer-react from https://www.npmjs.com/package/iframe-resizer-react. This library adapts the iframe height automatically to the widgets content.
@@ -62,6 +68,14 @@ The parent initializes the resizer on the iframe element. Use this if you want t
 import IframeResizer from 'iframe-resizer-react';
 ```
 
+import
+
+from
+
+'iframe-resizer-react'
+
+;
+
 **Child application (widget)**
 
 The widget must include the resizer content script so it can report size changes to the parent.
@@ -70,18 +84,36 @@ The widget must include the resizer content script so it can report size changes
 npm install iframe-resizer --save
 ```
 
+-
+
+--
+
 For more information vist https://github.com/davidjbradshaw/iframe-resizer
 
 ```js
 import iframeResizerContentWindow from 'iframe-resizer/js/iframeResizer.contentWindow';
 ```
 
+import
+
+from
+
+'iframe-resizer/js/iframeResizer.contentWindow'
+
+;
+
 or simply
 
 ```js
 import 'iframe-resizer/js/iframeResizer.contentWindow';
 ```
 
+import
+
+'iframe-resizer/js/iframeResizer.contentWindow'
+
+;
+
 Alternatively, you can add the iframe contentWindow script from a public CDN into yourindex.html
 
 ```html
@@ -92,6 +124,10 @@ src='https://cdn.rio.cloud/libs/iframeResizer/4.2.8/iframeResizer.contentWindow.
 ></script>
 ```
 
+&lt;script defer type='text/javascript' src='https://cdn.rio.cloud/libs/iframeResizer/4.2.8/iframeResizer.contentWindow.min.js' &gt;
+
+&lt;/script&gt;
+
 ### Example: Example 1
 
 
@@ -117,7 +153,7 @@ export default IFrameWidgetExample;
 ```html
 <div class="display-flex justify-content-center">
     <div class="iframe-wrapper width-400">
-        <iframe title="iframe" src="https://menu.rio.cloud" id="iFrameResizer0" scrolling="no" style="overflow: hidden;">
+        <iframe title="iframe" src="https://menu.rio.cloud" id="iFrameResizer0" scrolling="no" style="overflow: hidden; height: 250px;">
         </iframe>
     </div>
 </div>
@@ -243,24 +279,22 @@ import IframeResizer from 'iframe-resizer-react';
 import FrameDialog from '@rio-cloud/rio-uikit/FrameDialog';
 import { PREFIX } from '../../../widgets/WidgetDemo';
 
-const IFrameWidgetExample = React.memo(() => {
-    return (
-        <>
-            <div className='iframe-wrapper'>
-                <IframeResizer
-                    id='widgetDialogFrame'
-                    src={`${window.location.origin}${window.location.pathname}#widgetDemo`}
-                    className='unstyled width-100pct'
-                    style={{ width: '1px', minWidth: '100%' }}
-                />
-            </div>
-            <FrameDialog
-                eventPrefix={PREFIX}
-                getSourceFrame={() => document.getElementById('widgetDialogFrame') as HTMLIFrameElement}
+const IFrameWidgetExample = React.memo(() => (
+    <>
+        <div className='iframe-wrapper'>
+            <IframeResizer
+                id='widgetDialogFrame'
+                src={`${window.location.origin}${window.location.pathname}#widgetDemo`}
+                className='unstyled width-100pct'
+                style={{ width: '1px', minWidth: '100%' }}
             />
-        </>
-    );
-});
+        </div>
+        <FrameDialog
+            eventPrefix={PREFIX}
+            getSourceFrame={() => document.getElementById('widgetDialogFrame') as HTMLIFrameElement}
+        />
+    </>
+));
 
 export default IFrameWidgetExample;
 

package/dist/docs/start/guidelines/obfuscate-data.md

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#/start/guidelines/obfuscate-data
-*Captured:* 2026-03-06T10:39:54.841Z
+*Captured:* 2026-04-27T14:57:05.999Z
 
 This demo demonstrates how sensitive data marked with the data-pii="visible" attribute can be obfuscated directly in the frontend.
 
@@ -11,6 +11,8 @@ This demo demonstrates how sensitive data marked with the data-pii="visible" att
 
 You can enable the feature either by using the keyboard shortcut Ctrl / CMD + Shift + U or by adding the data-hide-pii="shuffle" attribute to the <html> element.
 
+Ctrl / CMD+Shift+U
+
 Pressing the shortcut once will shuffle the data. Pressing it again will apply a text mask. If you want to enforce one variant on page load, you can add data-hide-pii="shuffle" or data-hide-pii="mask" to the <html> element. By pressing the shortcut a third time, the original value will be visible again.
 
 Dynamically added elements will immediately be obfuscated as long as the HTML attribute is available.
@@ -27,4 +29,24 @@ Dynamically added elements will immediately be obfuscated as long as the HTML at
 - Screenshot or recording safety, ensuring you don’t leak PII in support sessions or analytics.
 - QA/testing, to verify UI behavior without showing live customer data.
 
-> Tip: Use the "Load more" button to dynamically reveal additional obfuscated employees.
+Toggle PII Obfuscation
+
+> Tip: Use the "Load more" button to dynamically reveal additional obfuscated employees.
+
+| Company | Employee | Email | Phone | Status |
+| --- | --- | --- | --- | --- |
+| Smart Lions Inc. | Simon Fuchsler | simon.fuchsler@smart-lions-inc.com | +49 1234 23456789 | Called in sick |
+
+Smart Lions Inc.
+
+Simon Fuchsler
+
+simon.fuchsler@smart-lions-inc.com
+
++49 1234 23456789
+
+called in sick
+
+1/5Load more
+
+EmployeeEmailPhoneStatuscalled in sick

package/dist/docs/start/guidelines/print-css.md

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#/start/guidelines/print-css
-*Captured:* 2026-03-06T10:39:54.600Z
+*Captured:* 2026-04-27T14:57:05.976Z
 
 The UIKIT supports simple print stylings in order to have printable content. Those print styles are supposed to do basic printing and should not replace server side PDF`s.
 
@@ -13,8 +13,12 @@ The UIKIT supports simple print stylings in order to have printable content. Tho
 
 A lot of our utility classes are available for different breakpoints and are already marked with aRESPONSIVElabel.
 
+Responsive
+
 Now those classes also are available forPRINT media queries.Example: display-inline-lsdisplay-block-print
 
+print
+
 Do not forget to include the needed print css file. See "How to" for more information.
 
 ## Print area
@@ -29,8 +33,18 @@ ApplicationLayoutSidebarin combination with the class print-area to one of them
 </body>
 ```
 
+<body class="printable-content">
+
+<div class="ApplicationLayoutSidebar print-area">
+
+</div>
+
+</body>
+
 We suggest to add the class temporarily (1 second) when clicking a button and then trigger window.print()
 
 ## Print content
 
-By adding the class non-printable to any element, you can hide it while printing.
+By adding the class non-printable to any element, you can hide it while printing.
+
+Print this page

package/dist/docs/start/guidelines/spinner.md

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#/start/guidelines/spinner
-*Captured:* 2026-03-06T10:39:56.777Z
+*Captured:* 2026-04-27T14:57:08.207Z
 
 There are various approaches when it comes to loading data and showing the user the different stages of the loading process.