@ikonai/sdk-react-ui 1.5.0 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikonai/sdk-react-ui",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "type": "module",
   "main": "./index.js",
   "types": "./index.d.ts",

package/theme/ikon-app.css

@@ -158,6 +158,44 @@
     word-break: break-word;
   }
 
+  /* An installed PWA has no reload control the user can reach, so this button is the only way back
+     into the app — sized for a thumb rather than as a secondary affordance. */
+  .ikon-offline-action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 160px;
+    min-height: 44px;
+    margin-top: 12px;
+    padding: 0 20px;
+    background: var(--ikon-bg-solid);
+    border: 1px solid transparent;
+    border-radius: var(--ikon-radius-md);
+    font-family: inherit;
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 1;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+
+  /* Crosswind's preflight resets `button { color: inherit }` unlayered, and an unlayered rule beats
+     a layered one whatever its specificity — so colouring the button itself loses the contrast and
+     paints the label in the chip's text colour on the solid fill. The span is not something the
+     reset targets, which keeps this a normal cascade an app can still override without !important. */
+  .ikon-offline-action-label {
+    color: var(--ikon-text-on-solid);
+  }
+
+  .ikon-offline-action:hover {
+    background: var(--ikon-bg-solid-hover);
+  }
+
+  .ikon-offline-action:focus-visible {
+    outline: 2px solid var(--ikon-focus-ring);
+    outline-offset: 2px;
+  }
+
   @keyframes ikon-fade-in {
     from { opacity: 0; }
     to { opacity: 1; }