docs: show mobile usecase

.changeset/config.json

@@ -1,9 +1,6 @@
 {
   "$schema": "https://unpkg.com/@changesets/config@2.3.1/schema.json",
-  "changelog": [
-    "@changesets/changelog-github",
-    { "repo": "siemens/ix" }
-  ],
+  "changelog": ["@changesets/changelog-github", { "repo": "siemens/ix" }],
   "commit": false,
   "linked": [],
   "fixed": [
@@ -22,6 +19,7 @@
     "react-test-app",
     "vue-test-app",
     "html-test-app",
+    "ionic-test-app",
     "figma-plugin",
     "documentation"
   ]

.changeset/thick-fireants-worry.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': minor
+---
+
+feat(core): add css safe areas

.gitignore

@@ -152,6 +152,7 @@ yarn-error.log*
 packages/core/components/
 packages/core/hydrate/
 packages/*/dist/
+test-apps/*/dist/
 packages/*/www/
 packages/*/loader/
 packages/*/dist-transpiled/
@@ -164,11 +165,17 @@ packages/*/build/
 packages/core/dist-css
 
 ###
-# @siemens/html-test-app
+# html-test-app
 ###
 
 packages/html-test-app/src/public/additional-theme
 
+###
+# ionic-test-app
+###
+
+packages/ionic-test-app/public/additional-theme
+
 ###
 # documentation
 ###
@@ -180,6 +187,7 @@ packages/documentation/scripts/.typedoc/
 packages/documentation/static/auto-generated/
 packages/documentation/static/figma/
 packages/documentation/static/webcomponent-examples/*
+packages/documentation/static/ionic-preview
 !packages/documentation/static/versioned_examples/*/webcomponent-examples
 
 ###

ix.code-workspace

@@ -44,6 +44,10 @@
       "name": "vue-test-app",
       "path": "./packages/vue-test-app"
     },
+    {
+      "name": "ionic-test-app",
+      "path": "./packages/ionic-test-app"
+    },
     {
       "name": "eslint-config",
       "path": "./packages/eslint-config-ix"

packages/core/component-doc.json

@@ -209,9 +209,15 @@
         }
       ],
       "encapsulation": "shadow",
-      "dependents": [],
+      "dependents": [
+        "ix-playground-internal"
+      ],
       "dependencies": [],
-      "dependencyGraph": {},
+      "dependencyGraph": {
+        "ix-playground-internal": [
+          "ix-application"
+        ]
+      },
       "props": [
         {
           "name": "appSwitchConfig",
@@ -397,7 +403,8 @@
       "encapsulation": "shadow",
       "dependents": [
         "ix-basic-navigation",
-        "ix-map-navigation"
+        "ix-map-navigation",
+        "ix-playground-internal"
       ],
       "dependencies": [
         "ix-menu-expand-icon",
@@ -424,6 +431,9 @@
         ],
         "ix-map-navigation": [
           "ix-application-header"
+        ],
+        "ix-playground-internal": [
+          "ix-application-header"
         ]
       },
       "props": [
@@ -1228,6 +1238,7 @@
         "ix-empty-state",
         "ix-menu-about-news",
         "ix-modal-example",
+        "ix-playground-internal",
         "ix-split-button",
         "ix-time-picker",
         "ix-upload"
@@ -1263,6 +1274,9 @@
         "ix-modal-example": [
           "ix-button"
         ],
+        "ix-playground-internal": [
+          "ix-button"
+        ],
         "ix-split-button": [
           "ix-button"
         ],
@@ -9122,7 +9136,9 @@
       "docs": "",
       "docsTags": [],
       "encapsulation": "shadow",
-      "dependents": [],
+      "dependents": [
+        "ix-playground-internal"
+      ],
       "dependencies": [
         "ix-menu-expand-icon",
         "ix-icon-button",
@@ -9146,6 +9162,9 @@
         ],
         "ix-tooltip": [
           "ix-typography"
+        ],
+        "ix-playground-internal": [
+          "ix-menu"
         ]
       },
       "props": [
@@ -11093,9 +11112,15 @@
       "docs": "",
       "docsTags": [],
       "encapsulation": "shadow",
-      "dependents": [],
+      "dependents": [
+        "ix-playground-internal"
+      ],
       "dependencies": [],
-      "dependencyGraph": {},
+      "dependencyGraph": {
+        "ix-playground-internal": [
+          "ix-modal"
+        ]
+      },
       "props": [
         {
           "name": "animation",

packages/core/package.json

@@ -14,6 +14,7 @@
   "module": "dist/index.js",
   "es2015": "dist/esm/index.mjs",
   "es2017": "dist/esm/index.mjs",
+  "jsnext:main": "dist/esm/index.js",
   "types": "dist/types/interfaces.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",

packages/core/scss/_core.scss

@@ -39,6 +39,11 @@
   --bs-font-sans-serif: Siemens Sans, system-ui, -apple-system, 'Segoe UI',
     Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+
+  --ix-safe-area-inset-top: 0rem;
+  --ix-safe-area-inset-right: 0rem;
+  --ix-safe-area-inset-bottom: 0rem;
+  --ix-safe-area-inset-left: 0rem;
 }
 
 body {

packages/core/src/components/application-header/application-header.scss

@@ -6,19 +6,23 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
- @import 'mixins/shadow-dom/component';
- @import 'mixins/break-points';
+@import 'mixins/shadow-dom/component';
+@import 'mixins/break-points';
 
 :host {
   @include ix-component;
 
   display: flex;
-  align-items: center;
+  align-items: flex-end;
+  flex-wrap: nowrap;
   position: relative;
   width: 100%;
-  height: 2.75rem;
-  min-height: 2.75rem;
-  padding: 0 1rem 0 0.625rem;
+  height: calc(2.75rem + var(--ix-safe-area-inset-top, 0rem));
+  min-height: calc(2.75rem + var(--ix-safe-area-inset-top, 0rem));
+  padding-top: 0;
+  padding-right: calc(1rem + var(--ix-safe-area-inset-right, 0rem));
+  padding-bottom: 0.3rem;
+  padding-left: calc(0.625rem + var(--ix-safe-area-inset-left, 0rem));
 
   color: var(--theme-app-header--color);
   background-color: var(--theme-app-header--background);
@@ -40,6 +44,7 @@
     max-width: 50%;
     margin-left: 1.5rem;
     margin-right: 2.5rem;
+    margin-bottom: 0.25rem;
     color: var(--theme-app-header--color);
   }
 
@@ -90,8 +95,6 @@
 }
 
 :host(.breakpoint-sm) {
-  padding-left: 0.625rem;
-
   .logo {
     margin-left: 0.5rem;
   }

packages/core/src/components/application/application.scss

@@ -36,27 +36,47 @@
     overflow: hidden;
   }
 
+  .content-area {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    height: calc(100% - var(--ix-safe-area-inset-bottom, 0px));
+    width: 100%;
+    margin-left: var(--ix-application-menu-margin-left);
+  }
+
   main {
     display: block;
     position: relative;
-    height: 100%;
+    flex-grow: 1;
+
+    width: 100%;
+    padding-bottom: var(--ix-safe-area-inset-bottom);
+    overflow: auto;
+  }
+
+  footer {
+    display: block;
+    position: relative;
     width: 100%;
-    overflow: hidden;
   }
 }
 
 :host(.breakpoint-md) {
-  --ix-application-menu-margin-left: 3.25rem;
+  --ix-application-menu-margin-left: calc(
+    3.25rem + var(--ix-application-menu-safe-area-left, 0rem)
+  );
 
   aside.slotted {
     margin-left: var(--ix-application-menu-margin-left);
   }
 
-  aside.slotted + main {
+  aside.slotted + .content-area {
     margin-left: 0;
   }
 
-  aside:not(.slotted) + main {
+  aside:not(.slotted) + .content-area {
     margin-left: var(--ix-application-menu-margin-left);
   }
 }
@@ -66,5 +86,8 @@
 }
 
 :host(.breakpoint-sm) {
-  --ix-application-menu-margin-left: 0;
+  --ix-application-menu-margin-left: var(
+    --ix-application-menu-safe-area-left,
+    0rem
+  );
 }

packages/core/src/components/application/application.tsx

@@ -183,9 +183,14 @@ export class Application {
               }
             ></slot>
           </aside>
-          <main class="content" onClick={() => this.onContentClick()}>
-            <slot></slot>
-          </main>
+          <div class="content-area">
+            <main class="content" onClick={() => this.onContentClick()}>
+              <slot></slot>
+            </main>
+            <footer class="footer">
+              <slot name="bottom"></slot>
+            </footer>
+          </div>
         </div>
       </Host>
     );

packages/core/src/components/map-navigation/map-navigation.scss

@@ -77,12 +77,12 @@
 
     .map-nav-header-brand {
       background-color: var(--theme-map-navigation-background);
-      display: flex;
-      align-items: center;
+
+      padding-left: $default-space;
+      padding-right: $default-space;
+      padding-bottom: 0.625rem;
       height: 100%;
       width: 100%;
-      padding: 0 $default-space;
-
       --theme-app-header--color: var(--theme-map-navigation-header--color);
       --theme-app-header-logo--color: var(--theme-map-navigation-logo--color);
 

packages/core/src/components/menu/menu.scss

@@ -40,7 +40,6 @@ $menu-expanded-width: 16rem;
     &::-webkit-scrollbar {
       display: none;
     }
-
   }
 
   .show-scrollbar {
@@ -88,11 +87,13 @@ $menu-expanded-width: 16rem;
     display: flex;
     flex-direction: column;
     position: relative;
-    width: 3.25rem;
+    width: calc(3.25rem + var(--ix-application-menu-safe-area-left, 0rem));
     height: 100%;
-    padding-block-end: 1rem;
+    padding-block-end: calc(1rem + var(--ix-safe-area-inset-bottom, 0rem));
     overflow: hidden;
 
+    padding-left: var(--ix-application-menu-safe-area-left, 0rem);
+
     &.expanded {
       box-shadow: var(--theme-navigation--box-shadow);
     }

packages/core/src/components/modal-footer/modal-footer.scss

@@ -12,6 +12,7 @@
   @include ix-component;
   display: flex;
   padding: 0.5rem;
+  padding-bottom: 0rem;
   justify-content: flex-end;
   align-items: center;
   gap: 0.5rem;