@oksigenia/access-panel 0.7.0 → 0.7.2

package/dist/web-component.js

@@ -230,29 +230,32 @@ function escapeAttr(s) {
 function positionRules(position) {
   switch (position) {
     case "top-left":
-      return { wrap: "top: 20px; left: 20px;", panel: "top: 80px; left: 20px;" };
+      return { wrap: "top: 20px; left: 20px;", panel: "top: 80px; left: 20px;", reserve: 100 };
     case "top-center":
-      return { wrap: "top: 20px; left: 50%; transform: translateX(-50%);", panel: "top: 80px; left: 50%; transform: translateX(-50%);" };
+      return { wrap: "top: 20px; left: 50%; transform: translateX(-50%);", panel: "top: 80px; left: 50%; transform: translateX(-50%);", reserve: 100 };
     case "top-right":
-      return { wrap: "top: 20px; right: 20px;", panel: "top: 80px; right: 20px;" };
+      return { wrap: "top: 20px; right: 20px;", panel: "top: 80px; right: 20px;", reserve: 100 };
     case "mid-left":
-      return { wrap: "top: 50%; left: 20px; transform: translateY(-50%);", panel: "top: 50%; left: 90px; transform: translateY(-50%);" };
+      return { wrap: "top: 50%; left: 20px; transform: translateY(-50%);", panel: "top: 50%; left: 90px; transform: translateY(-50%);", reserve: 40 };
     case "mid-center":
-      return { wrap: "top: 50%; left: 50%; transform: translate(-50%, -50%);", panel: "top: 50%; left: 50%; transform: translate(-50%, -50%);" };
+      return { wrap: "top: 50%; left: 50%; transform: translate(-50%, -50%);", panel: "top: 50%; left: 50%; transform: translate(-50%, -50%);", reserve: 40 };
     case "mid-right":
-      return { wrap: "top: 50%; right: 20px; transform: translateY(-50%);", panel: "top: 50%; right: 90px; transform: translateY(-50%);" };
+      return { wrap: "top: 50%; right: 20px; transform: translateY(-50%);", panel: "top: 50%; right: 90px; transform: translateY(-50%);", reserve: 40 };
     case "bottom-left":
-      return { wrap: "bottom: 20px; left: 20px;", panel: "bottom: 100px; left: 20px;" };
+      return { wrap: "bottom: 20px; left: 20px;", panel: "bottom: 100px; left: 20px;", reserve: 120 };
     case "bottom-center":
-      return { wrap: "bottom: 20px; left: 50%; transform: translateX(-50%);", panel: "bottom: 100px; left: 50%; transform: translateX(-50%);" };
+      return { wrap: "bottom: 20px; left: 50%; transform: translateX(-50%);", panel: "bottom: 100px; left: 50%; transform: translateX(-50%);", reserve: 120 };
     case "bottom-right":
-      return { wrap: "bottom: 20px; right: 20px;", panel: "bottom: 100px; right: 20px;" };
+      return { wrap: "bottom: 20px; right: 20px;", panel: "bottom: 100px; right: 20px;", reserve: 120 };
   }
 }
+function panelMaxHeight(reserve) {
+  return `max-height: calc(100vh - ${reserve}px); max-height: calc(100dvh - ${reserve}px);`;
+}
 function positionCss(position, mobile) {
   const d = positionRules(position);
   let css = `.oks-access-wrapper { ${d.wrap} }`;
-  css += `@media (min-width: 769px) { .oks-access-panel { ${d.panel} } }`;
+  css += `@media (min-width: 769px) { .oks-access-panel { ${d.panel} ${panelMaxHeight(d.reserve)} } }`;
   if (mobile && mobile !== position) {
     const m = positionRules(mobile);
     css += `@media (max-width: 768px) { .oks-access-wrapper { top: auto; right: auto; bottom: auto; left: auto; transform: none; ${m.wrap} } }`;
@@ -281,8 +284,8 @@ var DEFAULT_STATE = Object.freeze({
   bigTargets: false
 });
 function loadState(key) {
-  if (typeof localStorage === "undefined") return { ...DEFAULT_STATE };
   try {
+    if (typeof localStorage === "undefined") return { ...DEFAULT_STATE };
     const raw = localStorage.getItem(key);
     if (!raw) return { ...DEFAULT_STATE };
     const parsed = JSON.parse(raw);
@@ -293,8 +296,8 @@ function loadState(key) {
   }
 }
 function saveState(key, state) {
-  if (typeof localStorage === "undefined") return;
   try {
+    if (typeof localStorage === "undefined") return;
     const out = {};
     for (const [k, v] of Object.entries(state)) {
       if (typeof v === "number" && v > 0) out[k] = v;
@@ -902,6 +905,7 @@ var PANEL_CSS = `
 }
 .oks-access-panel.is-open { opacity: 1; pointer-events: all; }
 .oks-access-header {
+  flex: 0 0 auto;
   padding: 15px 20px;
   border-bottom: 1px solid #eee;
   display: flex;
@@ -925,7 +929,11 @@ var PANEL_CSS = `
 }
 .oks-access-close:hover { background: #e0e0e0; border-color: #ccc; }
 .oks-access-close svg { width: 24px; height: 24px; stroke-width: 2.5px; }
-.oks-access-content { padding: 0 20px 20px; overflow-y: auto; }
+/* flex:1 1 auto + min-height:0 lets the content scroll inside the 90vh panel.
+   Without min-height:0 a flex child won't shrink below its content, so the
+   header (\xD7) and footer (Reset) get pushed off-screen on short viewports or at
+   high zoom \u2014 the panel becomes impossible to close. */
+.oks-access-content { flex: 1 1 auto; min-height: 0; padding: 0 20px 20px; overflow-y: auto; }
 .oks-access-title {
   margin: 10px 0 5px;
   font-size: 11px;
@@ -1026,6 +1034,7 @@ var PANEL_CSS = `
 .oks-access-opt[data-level="4"] .oks-levels span:nth-child(-n+4) { background: #000; }
 .oks-access-opt:hover .oks-levels span { background: #555; }
 .oks-access-footer {
+  flex: 0 0 auto;
   padding: 12px 20px;
   border-top: 1px solid #eee;
   text-align: center;
@@ -1232,12 +1241,14 @@ body.oks-a11y-bigtargets summary:not(oksigenia-access-panel):not(oksigenia-acces
 }
 `;
 function scopedEffectCss(s) {
-  return `
+  const isRoot = s === "body" || s === "html" || s === ":root";
+  const zoom = isRoot ? "" : `
 ${s}.oks-zoom-1 { font-size: 110% !important; }
 ${s}.oks-zoom-2 { font-size: 120% !important; }
 ${s}.oks-zoom-3 { font-size: 135% !important; }
 ${s}.oks-zoom-4 { font-size: 150% !important; }
-
+`;
+  return `${zoom}
 ${s}.oks-lh-1 * { line-height: 1.6 !important; }
 ${s}.oks-lh-2 * { line-height: 1.9 !important; }
 ${s}.oks-lh-3 * { line-height: 2.2 !important; }