accessify-widget 0.2.0 → 0.2.1

package/dist/{index-B6b-ij4T.js → index-qmiN2JAz.js}

@@ -4245,6 +4245,25 @@ function html(node, get_value, is_controlled = false, svg = false, mathml = fals
     }
   });
 }
+function to_class(value, hash, directives) {
+  var classname = value == null ? "" : "" + value;
+  return classname === "" ? null : classname;
+}
+function set_class(dom, is_html, value, hash, prev_classes, next_classes) {
+  var prev = dom.__className;
+  if (prev !== value || prev === void 0) {
+    var next_class_name = to_class(value);
+    {
+      if (next_class_name == null) {
+        dom.removeAttribute("class");
+      } else {
+        dom.className = next_class_name;
+      }
+    }
+    dom.__className = value;
+  }
+  return next_classes;
+}
 function select_option(select, value, mounting = false) {
   if (select.multiple) {
     if (value == void 0) {
@@ -5737,26 +5756,16 @@ const locales = {
   })
 };
 const LANGUAGE_OPTIONS = [
+  { code: "de", label: "Deutsch" },
   { code: "en", label: "English" },
-  { code: "zh", label: "中文" },
-  { code: "hi", label: "हिन्दी" },
   { code: "es", label: "Español" },
   { code: "fr", label: "Français" },
-  { code: "ar", label: "العربية" },
-  { code: "bn", label: "বাংলা" },
   { code: "pt", label: "Português" },
-  { code: "ru", label: "Русский" },
-  { code: "ur", label: "اردو" },
-  { code: "id", label: "Bahasa Indonesia" },
-  { code: "de", label: "Deutsch" },
-  { code: "ja", label: "日本語" },
-  { code: "pcm", label: "Naijá" },
-  { code: "mr", label: "मराठी" },
-  { code: "te", label: "తెలుగు" },
   { code: "tr", label: "Türkçe" },
-  { code: "ta", label: "தமிழ்" },
-  { code: "vi", label: "Tiếng Việt" },
-  { code: "ko", label: "한국어" }
+  { code: "ar", label: "العربية" },
+  { code: "zh", label: "中文" },
+  { code: "ja", label: "日本語" },
+  { code: "ru", label: "Русский" }
 ];
 const RTL_LANGS = /* @__PURE__ */ new Set(["ar", "ur"]);
 let currentWidgetLang = "en";
@@ -5805,7 +5814,7 @@ function TriggerButton($$anchor, $$props) {
 delegate(["click"]);
 var root_2$1 = /* @__PURE__ */ from_html(`<option> </option>`);
 var root_1$3 = /* @__PURE__ */ from_html(`<label class="accessify-language-picker"><span class="sr-only"> </span> <span class="accessify-language-icon" aria-hidden="true"></span> <select class="accessify-language-select"></select></label>`);
-var root$4 = /* @__PURE__ */ from_html(`<div class="accessify-header"><div class="accessify-header-copy"><span class="accessify-header-kicker"> </span> <div class="accessify-header-title"><h2> </h2> <p> </p></div></div> <div class="accessify-header-toolbar"><!> <div class="accessify-header-actions"><button class="accessify-header-btn"><!> <span> </span></button> <button class="accessify-header-btn accessify-header-btn--icon"></button></div></div></div>`);
+var root$4 = /* @__PURE__ */ from_html(`<div class="accessify-header"><div class="accessify-header-top"><div class="accessify-header-title"><h2> </h2> <p> </p></div> <button class="accessify-header-btn accessify-header-btn--icon"></button></div> <div class="accessify-header-toolbar"><!> <button class="accessify-header-btn accessify-header-btn--secondary"><!> <span> </span></button></div></div>`);
 function PanelHeader($$anchor, $$props) {
   push($$props, true);
   let lang = prop($$props, "lang", 3, "en");
@@ -5815,29 +5824,29 @@ function PanelHeader($$anchor, $$props) {
   }
   var div = root$4();
   var div_1 = child(div);
-  var span = child(div_1);
-  var text = child(span);
-  var div_2 = sibling(span, 2);
+  var div_2 = child(div_1);
   var h2 = child(div_2);
-  var text_1 = child(h2);
+  var text = child(h2);
   var p = sibling(h2, 2);
-  var text_2 = child(p);
+  var text_1 = child(p);
+  var button = sibling(div_2, 2);
+  html(button, iconClose, true);
   var div_3 = sibling(div_1, 2);
   var node = child(div_3);
   {
     var consequent = ($$anchor2) => {
       var label = root_1$3();
-      var span_1 = child(label);
-      var text_3 = child(span_1);
-      var span_2 = sibling(span_1, 2);
-      html(span_2, iconGlobe, true);
-      var select = sibling(span_2, 2);
+      var span = child(label);
+      var text_2 = child(span);
+      var span_1 = sibling(span, 2);
+      html(span_1, iconGlobe, true);
+      var select = sibling(span_1, 2);
       each(select, 21, () => LANGUAGE_OPTIONS, index, ($$anchor3, option) => {
         var option_1 = root_2$1();
-        var text_4 = child(option_1);
+        var text_3 = child(option_1);
         var option_1_value = {};
         template_effect(() => {
-          set_text(text_4, get(option).label);
+          set_text(text_3, get(option).label);
           if (option_1_value !== (option_1_value = get(option).code)) {
             option_1.value = (option_1.__value = get(option).code) ?? "";
           }
@@ -5848,7 +5857,7 @@ function PanelHeader($$anchor, $$props) {
       init_select(select);
       template_effect(
         ($0, $1) => {
-          set_text(text_3, $0);
+          set_text(text_2, $0);
           set_attribute(select, "aria-label", $1);
           if (select_value !== (select_value = lang())) {
             select.value = (select.__value = lang()) ?? "", select_option(select, lang());
@@ -5866,42 +5875,37 @@ function PanelHeader($$anchor, $$props) {
       if ($$props.onlangchange) $$render(consequent);
     });
   }
-  var div_4 = sibling(node, 2);
-  var button = child(div_4);
-  var node_1 = child(button);
+  var button_1 = sibling(node, 2);
+  var node_1 = child(button_1);
   html(node_1, iconReset);
-  var span_3 = sibling(node_1, 2);
-  var text_5 = child(span_3);
-  var button_1 = sibling(button, 2);
-  html(button_1, iconClose, true);
+  var span_2 = sibling(node_1, 2);
+  var text_4 = child(span_2);
   template_effect(
-    ($0, $1, $2, $3, $4, $5) => {
+    ($0, $1, $2, $3, $4) => {
       set_text(text, $0);
       set_text(text_1, $1);
-      set_text(text_2, $2);
-      set_attribute(button, "aria-label", $3);
-      set_text(text_5, $4);
-      set_attribute(button_1, "aria-label", $5);
+      set_attribute(button, "aria-label", $2);
+      set_attribute(button_1, "aria-label", $3);
+      set_text(text_4, $4);
     },
     [
-      () => t("control.mostUsed", lang()),
       () => t("widget.title", lang()),
       () => t("widget.subtitle", lang()),
+      () => t("widget.close", lang()),
       () => t("widget.reset", lang()),
-      () => t("widget.reset", lang()),
-      () => t("widget.close", lang())
+      () => t("widget.reset", lang())
     ]
   );
   delegated("click", button, function(...$$args) {
-    $$props.onreset?.apply(this, $$args);
+    $$props.onclose?.apply(this, $$args);
   });
   delegated("click", button_1, function(...$$args) {
-    $$props.onclose?.apply(this, $$args);
+    $$props.onreset?.apply(this, $$args);
   });
   append($$anchor, div);
   pop();
 }
-delegate(["change", "click"]);
+delegate(["click", "change"]);
 var root_1$2 = /* @__PURE__ */ from_html(`<button class="accessify-status-reset"> </button>`);
 var root$3 = /* @__PURE__ */ from_html(`<div class="accessify-status" role="status" aria-live="polite"><span class="accessify-status-count"> </span> <!></div>`);
 function StatusBar($$anchor, $$props) {
@@ -6088,9 +6092,9 @@ var root_5 = /* @__PURE__ */ from_html(`<button class="accessify-chip"> </button
 var root_4 = /* @__PURE__ */ from_html(`<article class="accessify-control-card accessify-control-card--text-size"><div class="accessify-control-copy"><span class="accessify-card-icon" aria-hidden="true"></span> <div><h4> </h4> <p> </p></div></div> <div class="accessify-chip-group accessify-chip-group--sizes" role="group"></div></article>`);
 var root_7 = /* @__PURE__ */ from_html(`<button class="accessify-card" role="switch"><div class="accessify-card-top"><span class="accessify-card-icon" aria-hidden="true"></span></div> <span class="accessify-card-label"> </span> <span class="accessify-card-desc"> </span></button>`);
 var root_6 = /* @__PURE__ */ from_html(`<div class="accessify-features"></div>`);
-var root_1$1 = /* @__PURE__ */ from_html(`<section class="accessify-section accessify-section--spotlight"><div class="accessify-section-head"><div><span class="accessify-section-kicker"> </span> <h3> </h3> <p> </p></div></div> <div class="accessify-control-grid"><!> <!></div> <!></section>`);
+var root_1$1 = /* @__PURE__ */ from_html(`<section class="accessify-section accessify-section--priority"><div class="accessify-section-head"><div><h3> </h3> <p> </p></div></div> <div class="accessify-control-grid"><!> <!></div> <!></section>`);
 var root_10 = /* @__PURE__ */ from_html(`<button class="accessify-card" role="switch"><div class="accessify-card-top"><span class="accessify-card-icon" aria-hidden="true"></span></div> <span class="accessify-card-label"> </span> <span class="accessify-card-desc"> </span></button>`);
-var root_9 = /* @__PURE__ */ from_html(`<section class="accessify-section"><div class="accessify-section-head"><div><h3> </h3> <p> </p></div></div> <div class="accessify-features"></div></section>`);
+var root_9 = /* @__PURE__ */ from_html(`<section><div class="accessify-section-head"><div><h3> </h3> <p> </p></div></div> <div class="accessify-features"></div></section>`);
 var root$2 = /* @__PURE__ */ from_html(`<div class="accessify-body"><!> <!></div>`);
 function FeatureGrid($$anchor, $$props) {
   push($$props, true);
@@ -6214,7 +6218,7 @@ function FeatureGrid($$anchor, $$props) {
   const FEATURE_LOADERS = {
     contrast: () => import("./contrast-CqsICAkU.js"),
     "text-size": () => import("./text-size-C6OFhCGi.js"),
-    "keyboard-nav": () => import("./keyboard-nav-YtijlLYi.js"),
+    "keyboard-nav": () => import("./keyboard-nav-DH4qBThF.js"),
     "focus-highlight": () => import("./focus-highlight-CjERyyUF.js"),
     "link-highlight": () => import("./link-highlight-DBGm067Y.js"),
     "reading-guide": () => import("./reading-guide-VT8NciIL.js"),
@@ -6222,10 +6226,10 @@ function FeatureGrid($$anchor, $$props) {
     "animation-stop": () => import("./animation-stop-DXebPS8D.js"),
     "hide-images": () => import("./hide-images-DJwmsV2C.js"),
     "big-cursor": () => import("./big-cursor-B2UKu9dQ.js"),
-    "page-structure": () => import("./page-structure-WFqy5QjQ.js"),
+    "page-structure": () => import("./page-structure-DTBqkrYs.js"),
     tts: () => import("./tts-02b9iV0h.js"),
     "text-simplify": () => import("./text-simplify-CELklw5A.js"),
-    "alt-text": () => import("./alt-text-CrPRUX83.js"),
+    "alt-text": () => import("./alt-text-CgzNGvdT.js"),
     "auto-scan": () => import("./auto-scan-pg-09o7A.js")
   };
   let contrastMode = /* @__PURE__ */ state(proxy(readStoredContrastMode()));
@@ -6367,34 +6371,32 @@ function FeatureGrid($$anchor, $$props) {
       var section_1 = root_1$1();
       var div_1 = child(section_1);
       var div_2 = child(div_1);
-      var span = child(div_2);
-      var text = child(span);
-      var h3 = sibling(span, 2);
-      var text_1 = child(h3);
+      var h3 = child(div_2);
+      var text = child(h3);
       var p = sibling(h3, 2);
-      var text_2 = child(p);
+      var text_1 = child(p);
       var div_3 = sibling(div_1, 2);
       var node_1 = child(div_3);
       {
         var consequent = ($$anchor3) => {
           var article = root_2();
           var div_4 = child(article);
-          var span_1 = child(div_4);
-          html(span_1, () => getIcon("contrast"), true);
-          var div_5 = sibling(span_1, 2);
+          var span = child(div_4);
+          html(span, () => getIcon("contrast"), true);
+          var div_5 = sibling(span, 2);
           var h4 = child(div_5);
-          var text_3 = child(h4);
+          var text_2 = child(h4);
           var p_1 = sibling(h4, 2);
-          var text_4 = child(p_1);
+          var text_3 = child(p_1);
           var div_6 = sibling(div_4, 2);
           each(div_6, 21, () => CONTRAST_MODES, index, ($$anchor4, mode) => {
             var button = root_3();
-            var text_5 = child(button);
+            var text_4 = child(button);
             template_effect(
               ($0) => {
                 set_attribute(button, "data-active", get(contrastMode) === get(mode).id);
                 set_attribute(button, "aria-pressed", get(contrastMode) === get(mode).id);
-                set_text(text_5, $0);
+                set_text(text_4, $0);
               },
               [() => t(get(mode).labelKey, $$props.config.lang)]
             );
@@ -6403,8 +6405,8 @@ function FeatureGrid($$anchor, $$props) {
           });
           template_effect(
             ($0, $1, $2) => {
-              set_text(text_3, $0);
-              set_text(text_4, $1);
+              set_text(text_2, $0);
+              set_text(text_3, $1);
               set_attribute(div_6, "aria-label", $2);
             },
             [
@@ -6425,29 +6427,29 @@ function FeatureGrid($$anchor, $$props) {
         var consequent_1 = ($$anchor3) => {
           var article_1 = root_4();
           var div_7 = child(article_1);
-          var span_2 = child(div_7);
-          html(span_2, () => getIcon("text-size"), true);
-          var div_8 = sibling(span_2, 2);
+          var span_1 = child(div_7);
+          html(span_1, () => getIcon("text-size"), true);
+          var div_8 = sibling(span_1, 2);
           var h4_1 = child(div_8);
-          var text_6 = child(h4_1);
+          var text_5 = child(h4_1);
           var p_2 = sibling(h4_1, 2);
-          var text_7 = child(p_2);
+          var text_6 = child(p_2);
           var div_9 = sibling(div_7, 2);
           each(div_9, 21, () => TEXT_SIZE_PRESETS, index, ($$anchor4, preset) => {
             var button_1 = root_5();
-            var text_8 = child(button_1);
+            var text_7 = child(button_1);
             template_effect(() => {
               set_attribute(button_1, "data-active", get(textSize) === get(preset));
               set_attribute(button_1, "aria-pressed", get(textSize) === get(preset));
-              set_text(text_8, `${get(preset) ?? ""}%`);
+              set_text(text_7, `${get(preset) ?? ""}%`);
             });
             delegated("click", button_1, () => setTextSize(get(preset)));
             append($$anchor4, button_1);
           });
           template_effect(
             ($0, $1, $2) => {
-              set_text(text_6, $0);
-              set_text(text_7, $1);
+              set_text(text_5, $0);
+              set_text(text_6, $1);
               set_attribute(div_9, "aria-label", $2);
             },
             [
@@ -6471,19 +6473,19 @@ function FeatureGrid($$anchor, $$props) {
             const isActive = /* @__PURE__ */ user_derived(() => $$props.activeFeatures.get(get(feature).id) ?? false);
             var button_2 = root_7();
             var div_11 = child(button_2);
-            var span_3 = child(div_11);
-            html(span_3, () => getIcon(get(feature).iconId), true);
-            var span_4 = sibling(div_11, 2);
+            var span_2 = child(div_11);
+            html(span_2, () => getIcon(get(feature).iconId), true);
+            var span_3 = sibling(div_11, 2);
+            var text_8 = child(span_3);
+            var span_4 = sibling(span_3, 2);
             var text_9 = child(span_4);
-            var span_5 = sibling(span_4, 2);
-            var text_10 = child(span_5);
             template_effect(
               ($0, $1, $2) => {
                 set_attribute(button_2, "data-active", get(isActive));
                 set_attribute(button_2, "aria-checked", get(isActive));
                 set_attribute(button_2, "aria-label", $0);
-                set_text(text_9, $1);
-                set_text(text_10, $2);
+                set_text(text_8, $1);
+                set_text(text_9, $2);
               },
               [
                 () => t(get(feature).nameKey, $$props.config.lang),
@@ -6501,13 +6503,11 @@ function FeatureGrid($$anchor, $$props) {
         });
       }
       template_effect(
-        ($0, $1, $2) => {
+        ($0, $1) => {
           set_text(text, $0);
           set_text(text_1, $1);
-          set_text(text_2, $2);
         },
         [
-          () => t("control.mostUsed", $$props.config.lang),
           () => t(SECTIONS[0].labelKey, $$props.config.lang),
           () => t(SECTIONS[0].descKey, $$props.config.lang)
         ]
@@ -6530,27 +6530,27 @@ function FeatureGrid($$anchor, $$props) {
         var div_12 = child(section_2);
         var div_13 = child(div_12);
         var h3_1 = child(div_13);
-        var text_11 = child(h3_1);
+        var text_10 = child(h3_1);
         var p_3 = sibling(h3_1, 2);
-        var text_12 = child(p_3);
+        var text_11 = child(p_3);
         var div_14 = sibling(div_12, 2);
         each(div_14, 21, () => get(features), (feature) => feature.id, ($$anchor4, feature) => {
           const isActive = /* @__PURE__ */ user_derived(() => $$props.activeFeatures.get(get(feature).id) ?? false);
           var button_3 = root_10();
           var div_15 = child(button_3);
-          var span_6 = child(div_15);
-          html(span_6, () => getIcon(get(feature).iconId), true);
-          var span_7 = sibling(div_15, 2);
+          var span_5 = child(div_15);
+          html(span_5, () => getIcon(get(feature).iconId), true);
+          var span_6 = sibling(div_15, 2);
+          var text_12 = child(span_6);
+          var span_7 = sibling(span_6, 2);
           var text_13 = child(span_7);
-          var span_8 = sibling(span_7, 2);
-          var text_14 = child(span_8);
           template_effect(
             ($0, $1, $2) => {
               set_attribute(button_3, "data-active", get(isActive));
               set_attribute(button_3, "aria-checked", get(isActive));
               set_attribute(button_3, "aria-label", $0);
-              set_text(text_13, $1);
-              set_text(text_14, $2);
+              set_text(text_12, $1);
+              set_text(text_13, $2);
             },
             [
               () => t(get(feature).nameKey, $$props.config.lang),
@@ -6563,8 +6563,9 @@ function FeatureGrid($$anchor, $$props) {
         });
         template_effect(
           ($0, $1) => {
-            set_text(text_11, $0);
-            set_text(text_12, $1);
+            set_class(section_2, 1, `accessify-section accessify-section--${get(section).id}`);
+            set_text(text_10, $0);
+            set_text(text_11, $1);
           },
           [
             () => t(get(section).labelKey, $$props.config.lang),
@@ -6836,10 +6837,12 @@ function createWidgetStyles(config2) {
   const isRight = pos.includes("right");
   const isBottom = pos.includes("bottom");
   const z = config2.zIndex || 999999;
+  const panelRadius = isRight ? "28px 0 0 28px" : "0 28px 28px 0";
+  const hiddenTransform = isRight ? "translateX(24px)" : "translateX(-24px)";
   return `
     :host {
       all: initial;
-      font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", "Segoe UI", sans-serif;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
       font-size: 15px;
       line-height: 1.5;
       color-scheme: light dark;
@@ -6859,74 +6862,69 @@ function createWidgetStyles(config2) {
       --space-5: 20px;
       --space-6: 24px;
       --space-7: 32px;
-      --radius-sm: 10px;
-      --radius-md: 16px;
+      --radius-sm: 12px;
+      --radius-md: 18px;
       --radius-lg: 24px;
+      --radius-xl: 28px;
       --radius-pill: 999px;
-      --text-xs: 11px;
-      --text-sm: 13px;
+      --text-xs: 12px;
+      --text-sm: 14px;
       --text-base: 15px;
       --text-lg: 18px;
-      --text-xl: 24px;
+      --text-xl: 26px;
       --font-medium: 500;
       --font-semibold: 600;
       --font-bold: 700;
-      --surface: #f6efe4;
-      --surface-strong: #fffdf9;
-      --surface-muted: #ece4d8;
-      --surface-tint: #e2eee8;
-      --text: #17212b;
-      --text-secondary: #52616f;
-      --border: rgba(23, 33, 43, 0.12);
-      --border-strong: rgba(23, 33, 43, 0.22);
-      --accent: #0f766e;
-      --accent-strong: #0b5c56;
-      --accent-soft: rgba(15, 118, 110, 0.12);
-      --signal: #c97a1e;
-      --signal-soft: rgba(201, 122, 30, 0.14);
+      --surface: #eff4f8;
+      --surface-strong: #ffffff;
+      --surface-muted: #f7f9fc;
+      --surface-tint: #ecf3fb;
+      --text: #152031;
+      --text-secondary: #5c6a79;
+      --border: rgba(21, 32, 49, 0.12);
+      --border-strong: rgba(21, 32, 49, 0.22);
+      --accent: #0e6bd8;
+      --accent-strong: #0a56a7;
+      --accent-soft: rgba(14, 107, 216, 0.1);
       --text-on-accent: #ffffff;
-      --shadow-sm: 0 12px 24px rgba(16, 24, 32, 0.08);
-      --shadow-lg: 0 28px 80px rgba(9, 21, 30, 0.2);
-      --transition-fast: 140ms ease;
-      --transition-normal: 220ms ease;
+      --shadow-sm: 0 14px 32px rgba(15, 23, 42, 0.08);
+      --shadow-lg: 0 28px 72px rgba(15, 23, 42, 0.18);
+      --transition-fast: 160ms ease;
+      --transition-normal: 240ms ease;
     }
 
     @media (prefers-color-scheme: dark) {
       #accessify-mount:not([data-theme="light"]) {
-        --surface: #0f1a22;
-        --surface-strong: #132330;
-        --surface-muted: #1a2b38;
-        --surface-tint: #17323a;
-        --text: #f4f7fa;
-        --text-secondary: #b4c3ce;
-        --border: rgba(244, 247, 250, 0.12);
-        --border-strong: rgba(244, 247, 250, 0.22);
-        --accent: #2dd4bf;
-        --accent-strong: #16b5a1;
-        --accent-soft: rgba(45, 212, 191, 0.12);
-        --signal: #f6ad55;
-        --signal-soft: rgba(246, 173, 85, 0.16);
-        --shadow-sm: 0 12px 24px rgba(0, 0, 0, 0.28);
-        --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.45);
+        --surface: #101a27;
+        --surface-strong: #142233;
+        --surface-muted: #0f1825;
+        --surface-tint: #1a314c;
+        --text: #f5f8fb;
+        --text-secondary: #b3c0cd;
+        --border: rgba(245, 248, 251, 0.12);
+        --border-strong: rgba(245, 248, 251, 0.22);
+        --accent: #49a0ff;
+        --accent-strong: #1c7cde;
+        --accent-soft: rgba(73, 160, 255, 0.16);
+        --shadow-sm: 0 16px 36px rgba(0, 0, 0, 0.24);
+        --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.44);
       }
     }
 
     #accessify-mount[data-theme="dark"] {
-      --surface: #0f1a22;
-      --surface-strong: #132330;
-      --surface-muted: #1a2b38;
-      --surface-tint: #17323a;
-      --text: #f4f7fa;
-      --text-secondary: #b4c3ce;
-      --border: rgba(244, 247, 250, 0.12);
-      --border-strong: rgba(244, 247, 250, 0.22);
-      --accent: #2dd4bf;
-      --accent-strong: #16b5a1;
-      --accent-soft: rgba(45, 212, 191, 0.12);
-      --signal: #f6ad55;
-      --signal-soft: rgba(246, 173, 85, 0.16);
-      --shadow-sm: 0 12px 24px rgba(0, 0, 0, 0.28);
-      --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.45);
+      --surface: #101a27;
+      --surface-strong: #142233;
+      --surface-muted: #0f1825;
+      --surface-tint: #1a314c;
+      --text: #f5f8fb;
+      --text-secondary: #b3c0cd;
+      --border: rgba(245, 248, 251, 0.12);
+      --border-strong: rgba(245, 248, 251, 0.22);
+      --accent: #49a0ff;
+      --accent-strong: #1c7cde;
+      --accent-soft: rgba(73, 160, 255, 0.16);
+      --shadow-sm: 0 16px 36px rgba(0, 0, 0, 0.24);
+      --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.44);
     }
 
     .sr-only {
@@ -6942,7 +6940,7 @@ function createWidgetStyles(config2) {
     }
 
     *:focus-visible {
-      outline: 3px solid var(--signal);
+      outline: 3px solid var(--accent);
       outline-offset: 3px;
       border-radius: 12px;
     }
@@ -6952,99 +6950,88 @@ function createWidgetStyles(config2) {
       ${isBottom ? "bottom: 20px" : "top: 20px"};
       ${isRight ? "right: 20px" : "left: 20px"};
       z-index: ${z};
-      width: 64px;
-      height: 64px;
+      width: 60px;
+      height: 60px;
       border: none;
-      border-radius: 22px;
-      background:
-        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.22), transparent 42%),
-        linear-gradient(145deg, #0f766e 0%, #144f67 55%, #c97a1e 100%);
+      border-radius: 20px;
+      background: linear-gradient(180deg, #1681f2 0%, #0e6bd8 100%);
       color: #ffffff;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
-      box-shadow: 0 18px 42px rgba(12, 36, 46, 0.34);
-      transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
+      box-shadow: 0 18px 36px rgba(14, 107, 216, 0.28);
+      transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
     }
 
     .accessify-trigger:hover {
-      transform: translateY(-2px) scale(1.02);
-      box-shadow: 0 22px 48px rgba(12, 36, 46, 0.42);
-      filter: saturate(1.06);
+      transform: translateY(-1px);
+      box-shadow: 0 20px 40px rgba(14, 107, 216, 0.32);
     }
 
     .accessify-trigger:active {
-      transform: translateY(0) scale(0.98);
+      transform: scale(0.98);
+    }
+
+    .accessify-trigger[aria-expanded="true"] {
+      opacity: 0;
+      pointer-events: none;
+      transform: scale(0.92);
     }
 
     .accessify-trigger svg {
-      width: 30px;
-      height: 30px;
+      width: 28px;
+      height: 28px;
     }
 
     .accessify-panel {
       position: fixed;
-      ${isBottom ? "bottom: 96px" : "top: 96px"};
-      ${isRight ? "right: 20px" : "left: 20px"};
+      top: 0;
+      bottom: 0;
+      ${isRight ? "right: 0" : "left: 0"};
       z-index: ${z - 1};
-      width: 476px;
-      max-height: calc(100vh - 120px);
+      width: min(440px, 100vw);
+      height: 100vh;
       display: flex;
       flex-direction: column;
       overflow: hidden;
-      border-radius: 28px;
-      border: 1px solid var(--border);
-      background:
-        radial-gradient(circle at top right, rgba(201, 122, 30, 0.16), transparent 36%),
-        linear-gradient(180deg, var(--surface-strong) 0%, var(--surface) 100%);
+      border-radius: ${panelRadius};
+      ${isRight ? "border-left" : "border-right"}: 1px solid var(--border);
+      background: linear-gradient(180deg, var(--surface-strong) 0%, var(--surface) 100%);
       color: var(--text);
       box-shadow: var(--shadow-lg);
-      transform-origin: ${isBottom ? "bottom" : "top"} ${isRight ? "right" : "left"};
       transition: opacity var(--transition-normal), transform var(--transition-normal);
-      backdrop-filter: blur(18px);
     }
 
     .accessify-panel[aria-hidden="true"] {
       opacity: 0;
-      transform: scale(0.96) translateY(${isBottom ? "12px" : "-12px"});
+      transform: ${hiddenTransform};
       pointer-events: none;
       display: none;
     }
 
     .accessify-panel[aria-hidden="false"] {
       opacity: 1;
-      transform: scale(1) translateY(0);
+      transform: translateX(0);
     }
 
     .accessify-header {
-      position: relative;
+      position: sticky;
+      top: 0;
+      z-index: 1;
       display: grid;
       gap: var(--space-4);
-      padding: var(--space-5);
-      background:
-        radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), transparent 34%),
-        linear-gradient(145deg, #0f2430 0%, #103e4c 52%, #1a5d4b 100%);
-      color: #f5fbff;
-    }
-
-    .accessify-header-copy {
-      display: grid;
-      gap: var(--space-2);
+      padding: var(--space-6) var(--space-6) var(--space-5);
+      border-bottom: 1px solid var(--border);
+      background: color-mix(in srgb, var(--surface-strong) 94%, transparent);
+      backdrop-filter: blur(16px);
     }
 
-    .accessify-header-kicker {
-      display: inline-flex;
-      align-items: center;
-      width: fit-content;
-      padding: 6px 10px;
-      border-radius: var(--radius-pill);
-      background: rgba(255, 255, 255, 0.12);
-      color: #ffe2b8;
-      font-size: var(--text-xs);
-      font-weight: var(--font-semibold);
-      letter-spacing: 0.06em;
-      text-transform: uppercase;
+    .accessify-header-top {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: var(--space-4);
     }
 
     .accessify-header-title {
@@ -7055,21 +7042,22 @@ function createWidgetStyles(config2) {
     .accessify-header h2 {
       font-size: var(--text-xl);
       font-weight: var(--font-bold);
-      line-height: 1.1;
+      line-height: 1.08;
+      letter-spacing: -0.02em;
+      color: var(--text);
     }
 
     .accessify-header p {
-      color: rgba(245, 251, 255, 0.82);
+      color: var(--text-secondary);
       font-size: var(--text-sm);
       max-width: 34ch;
     }
 
     .accessify-header-toolbar {
-      display: flex;
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
       align-items: center;
       gap: var(--space-3);
-      justify-content: space-between;
-      flex-wrap: wrap;
     }
 
     .accessify-language-picker {
@@ -7077,20 +7065,21 @@ function createWidgetStyles(config2) {
       display: inline-flex;
       align-items: center;
       gap: 10px;
-      min-width: 172px;
+      min-width: 0;
+      min-height: 48px;
       padding: 0 14px;
       border-radius: 16px;
-      border: 1px solid rgba(255, 255, 255, 0.16);
-      background: rgba(10, 23, 29, 0.24);
-      color: #ffffff;
-      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+      border: 1px solid var(--border);
+      background: var(--surface-strong);
+      color: var(--text);
     }
 
     .accessify-language-icon {
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      color: #9ce4da;
+      color: var(--accent-strong);
+      flex-shrink: 0;
     }
 
     .accessify-language-icon svg {
@@ -7103,22 +7092,16 @@ function createWidgetStyles(config2) {
       width: 100%;
       border: none;
       background: transparent;
-      color: #ffffff;
+      color: var(--text);
       padding: 12px 0;
       font-size: var(--text-sm);
       font-weight: var(--font-medium);
       cursor: pointer;
+      min-width: 0;
     }
 
     .accessify-language-select option {
-      color: #17212b;
-    }
-
-    .accessify-header-actions {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      flex-wrap: wrap;
+      color: #152031;
     }
 
     .accessify-header-btn {
@@ -7126,31 +7109,38 @@ function createWidgetStyles(config2) {
       align-items: center;
       justify-content: center;
       gap: 8px;
-      padding: 11px 14px;
-      border: 1px solid rgba(255, 255, 255, 0.16);
+      min-height: 48px;
+      padding: 0 16px;
+      border: 1px solid var(--border);
       border-radius: 16px;
-      background: rgba(10, 23, 29, 0.24);
-      color: #f5fbff;
+      background: var(--surface-strong);
+      color: var(--text);
       cursor: pointer;
       font-size: var(--text-sm);
-      font-weight: var(--font-medium);
-      transition: background var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
+      font-weight: var(--font-semibold);
+      transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
     }
 
     .accessify-header-btn:hover {
-      background: rgba(255, 255, 255, 0.12);
-      border-color: rgba(255, 255, 255, 0.24);
+      background: var(--surface-muted);
+      border-color: var(--border-strong);
       transform: translateY(-1px);
     }
 
+    .accessify-header-btn--secondary {
+      background: var(--surface-muted);
+    }
+
     .accessify-header-btn svg {
       width: 16px;
       height: 16px;
     }
 
     .accessify-header-btn--icon {
-      width: 44px;
+      width: 48px;
+      min-width: 48px;
       padding-inline: 0;
+      flex-shrink: 0;
     }
 
     .accessify-status {
@@ -7158,9 +7148,9 @@ function createWidgetStyles(config2) {
       align-items: center;
       justify-content: space-between;
       gap: var(--space-3);
-      padding: 14px var(--space-5);
+      padding: 14px var(--space-6);
       border-bottom: 1px solid var(--border);
-      background: linear-gradient(180deg, rgba(15, 118, 110, 0.06), transparent);
+      background: linear-gradient(180deg, var(--accent-soft) 0%, transparent 100%);
     }
 
     .accessify-status-count {
@@ -7193,64 +7183,52 @@ function createWidgetStyles(config2) {
     }
 
     .accessify-status-reset:hover {
-      color: var(--signal);
+      color: var(--accent-strong);
     }
 
     .accessify-body {
+      flex: 1 1 auto;
       display: grid;
       gap: var(--space-4);
       padding: var(--space-4);
       overflow-y: auto;
+      overscroll-behavior: contain;
+      background: var(--surface);
     }
 
     .accessify-section {
       display: grid;
       gap: var(--space-4);
-      padding: var(--space-4);
-      border-radius: var(--radius-lg);
+      padding: var(--space-5);
+      border-radius: var(--radius-xl);
       border: 1px solid var(--border);
-      background: rgba(255, 255, 255, 0.32);
+      background: var(--surface-strong);
       box-shadow: var(--shadow-sm);
     }
 
-    .accessify-section--spotlight {
-      background:
-        linear-gradient(180deg, rgba(15, 118, 110, 0.08) 0%, rgba(255, 255, 255, 0.28) 100%);
-      border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
+    .accessify-section--priority {
+      background: linear-gradient(180deg, var(--surface-strong) 0%, var(--surface-muted) 100%);
     }
 
     .accessify-section-head {
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-      gap: var(--space-3);
+      display: grid;
+      gap: 6px;
     }
 
     .accessify-section-head h3 {
       font-size: var(--text-lg);
-      font-weight: var(--font-semibold);
+      font-weight: var(--font-bold);
       line-height: 1.15;
       color: var(--text);
     }
 
     .accessify-section-head p {
-      margin-top: 6px;
       color: var(--text-secondary);
       font-size: var(--text-sm);
+      line-height: 1.45;
       max-width: 46ch;
     }
 
-    .accessify-section-kicker {
-      display: inline-flex;
-      align-items: center;
-      margin-bottom: 8px;
-      color: var(--signal);
-      font-size: var(--text-xs);
-      font-weight: var(--font-semibold);
-      letter-spacing: 0.06em;
-      text-transform: uppercase;
-    }
-
     .accessify-control-grid {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -7259,11 +7237,12 @@ function createWidgetStyles(config2) {
 
     .accessify-control-card {
       display: grid;
-      gap: var(--space-3);
+      gap: var(--space-4);
+      min-height: 176px;
       padding: var(--space-4);
       border-radius: 22px;
       border: 1px solid var(--border);
-      background: var(--surface-strong);
+      background: var(--surface-muted);
     }
 
     .accessify-control-copy {
@@ -7275,7 +7254,7 @@ function createWidgetStyles(config2) {
 
     .accessify-control-copy h4 {
       font-size: var(--text-base);
-      font-weight: var(--font-semibold);
+      font-weight: var(--font-bold);
       color: var(--text);
     }
 
@@ -7283,43 +7262,46 @@ function createWidgetStyles(config2) {
       margin-top: 4px;
       color: var(--text-secondary);
       font-size: var(--text-sm);
+      line-height: 1.45;
     }
 
     .accessify-chip-group {
       display: flex;
       flex-wrap: wrap;
-      gap: 8px;
+      gap: 10px;
     }
 
     .accessify-chip {
-      min-height: 40px;
+      min-height: 42px;
       padding: 0 14px;
-      border-radius: var(--radius-pill);
+      border-radius: 16px;
       border: 1px solid var(--border);
-      background: var(--surface);
+      background: var(--surface-strong);
       color: var(--text);
       cursor: pointer;
       font-size: var(--text-sm);
-      font-weight: var(--font-medium);
-      transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
+      font-weight: var(--font-semibold);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
     }
 
     .accessify-chip:hover {
       transform: translateY(-1px);
       border-color: var(--border-strong);
-      background: var(--surface-strong);
+      background: var(--surface);
     }
 
     .accessify-chip[data-active="true"] {
-      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
+      background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
       color: var(--text-on-accent);
-      border-color: transparent;
-      box-shadow: 0 12px 22px rgba(15, 118, 110, 0.24);
+      border-color: var(--accent);
+      box-shadow: 0 12px 20px rgba(14, 107, 216, 0.2);
     }
 
     .accessify-chip-group--sizes .accessify-chip {
       min-width: 68px;
-      justify-content: center;
     }
 
     .accessify-features {
@@ -7331,13 +7313,13 @@ function createWidgetStyles(config2) {
     .accessify-card {
       position: relative;
       display: grid;
-      gap: 10px;
       align-content: start;
-      min-height: 156px;
+      gap: 12px;
+      min-height: 164px;
       padding: var(--space-4);
-      border-radius: 22px;
+      border-radius: 24px;
       border: 1px solid var(--border);
-      background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
+      background: var(--surface-strong);
       color: var(--text);
       cursor: pointer;
       text-align: left;
@@ -7353,10 +7335,9 @@ function createWidgetStyles(config2) {
     }
 
     .accessify-card[data-active="true"] {
-      border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
-      background:
-        linear-gradient(180deg, rgba(15, 118, 110, 0.08) 0%, rgba(255, 255, 255, 0.18) 100%);
-      box-shadow: 0 18px 32px rgba(15, 118, 110, 0.16);
+      border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
+      background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface-strong) 100%);
+      box-shadow: 0 16px 30px rgba(14, 107, 216, 0.12);
     }
 
     .accessify-card[data-active="true"]::after {
@@ -7364,8 +7345,8 @@ function createWidgetStyles(config2) {
       position: absolute;
       top: 14px;
       right: 14px;
-      width: 20px;
-      height: 20px;
+      width: 22px;
+      height: 22px;
       border-radius: 999px;
       background: var(--accent);
       mask-image: url("data:image/svg+xml,${CHECKMARK_SVG}");
@@ -7389,30 +7370,30 @@ function createWidgetStyles(config2) {
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      width: 44px;
-      height: 44px;
-      border-radius: 16px;
+      width: 52px;
+      height: 52px;
+      border-radius: 18px;
       background: var(--surface-tint);
       color: var(--accent-strong);
-      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
     }
 
     .accessify-card-icon svg {
-      width: 20px;
-      height: 20px;
+      width: 22px;
+      height: 22px;
     }
 
     .accessify-card-label {
-      font-size: var(--text-base);
-      font-weight: var(--font-semibold);
-      line-height: 1.2;
+      font-size: 16px;
+      font-weight: var(--font-bold);
+      line-height: 1.22;
       color: var(--text);
     }
 
     .accessify-card-desc {
       color: var(--text-secondary);
       font-size: var(--text-sm);
-      line-height: 1.45;
+      line-height: 1.5;
     }
 
     .accessify-footer {
@@ -7420,12 +7401,12 @@ function createWidgetStyles(config2) {
       align-items: center;
       justify-content: center;
       gap: var(--space-2);
-      padding: 14px var(--space-5) var(--space-5);
+      padding: 16px var(--space-6) 20px;
       border-top: 1px solid var(--border);
       color: var(--text-secondary);
       font-size: var(--text-xs);
       text-align: center;
-      background: linear-gradient(180deg, transparent, rgba(15, 118, 110, 0.04));
+      background: color-mix(in srgb, var(--surface-strong) 95%, transparent);
     }
 
     .accessify-footer a {
@@ -7445,12 +7426,10 @@ function createWidgetStyles(config2) {
       }
     }
 
-    @media (max-width: 560px) {
+    @media (max-width: 640px) {
       .accessify-panel {
-        width: calc(100vw - 24px);
-        ${isRight ? "right: 12px" : "left: 12px"};
-        ${isBottom ? "bottom: 86px" : "top: 86px"};
-        max-height: calc(100vh - 102px);
+        width: 100vw;
+        border-radius: 0;
       }
 
       .accessify-header,
@@ -7459,6 +7438,18 @@ function createWidgetStyles(config2) {
         padding-inline: var(--space-4);
       }
 
+      .accessify-header {
+        padding-top: var(--space-5);
+      }
+
+      .accessify-header p {
+        max-width: none;
+      }
+
+      .accessify-header-toolbar {
+        grid-template-columns: 1fr;
+      }
+
       .accessify-body {
         padding: var(--space-3);
       }
@@ -7468,6 +7459,7 @@ function createWidgetStyles(config2) {
         grid-template-columns: 1fr;
       }
 
+      .accessify-control-card,
       .accessify-card {
         min-height: 0;
       }
@@ -7475,9 +7467,9 @@ function createWidgetStyles(config2) {
       .accessify-trigger {
         ${isBottom ? "bottom: 16px" : "top: 16px"};
         ${isRight ? "right: 16px" : "left: 16px"};
-        width: 58px;
-        height: 58px;
-        border-radius: 20px;
+        width: 56px;
+        height: 56px;
+        border-radius: 18px;
       }
     }
   `;
@@ -7600,4 +7592,4 @@ export {
   init as i,
   t
 };
-//# sourceMappingURL=index-B6b-ij4T.js.map
+//# sourceMappingURL=index-qmiN2JAz.js.map