@sevenfold/setto-client 0.19.0 → 0.20.0

package/dist/setto-client.js

@@ -174,9 +174,9 @@ function SettoLanguages({ languages, inline = false }) {
         "aria-expanded": open,
         "aria-haspopup": "listbox",
         "aria-label": `Språk: ${languageName(current)}`,
-        style: triggerStyle,
+        style: inline ? inlineTriggerStyle : floatingTriggerStyle,
         children: [
-          /* @__PURE__ */ jsx(GlobeIcon, {}),
+          /* @__PURE__ */ jsx(LanguagesIcon, {}),
           languageName(current)
         ]
       }
@@ -212,22 +212,26 @@ function AutoLanguageSwitcher({ languages }) {
   if (inlineElsewhere || languages.length < 2) return null;
   return /* @__PURE__ */ jsx(SettoLanguages, { languages });
 }
-function GlobeIcon() {
+function LanguagesIcon() {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
-      width: "15",
-      height: "15",
+      width: "16",
+      height: "16",
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
-      strokeWidth: "1.8",
+      strokeWidth: "1.7",
       strokeLinecap: "round",
       strokeLinejoin: "round",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
-        /* @__PURE__ */ jsx("path", { d: "M3 12h18M12 3c2.4 2.6 3.6 5.6 3.6 9s-1.2 6.4-3.6 9c-2.4-2.6-3.6-5.6-3.6-9S9.6 5.6 12 3z" })
+        /* @__PURE__ */ jsx("path", { d: "M2.2 17.8 6.5 6.8l4.3 11" }),
+        /* @__PURE__ */ jsx("path", { d: "M3.7 14.2h5.6" }),
+        /* @__PURE__ */ jsx("path", { d: "M17.3 3.4 16.2 5.6" }),
+        /* @__PURE__ */ jsx("path", { d: "M12.8 8.2h9" }),
+        /* @__PURE__ */ jsx("path", { d: "M13.6 18.8 21 10.9" }),
+        /* @__PURE__ */ jsx("path", { d: "M14.7 10.9l7.1 7.9" })
       ]
     }
   );
@@ -244,25 +248,36 @@ const inlineWrapStyle = {
   display: "inline-block",
   fontFamily: "inherit"
 };
-const triggerStyle = {
+const triggerBase = {
   display: "inline-flex",
   alignItems: "center",
   gap: 7,
   minHeight: 40,
+  fontSize: 13.5,
+  fontWeight: 500,
+  lineHeight: 1,
+  cursor: "pointer"
+};
+const floatingTriggerStyle = {
+  ...triggerBase,
   padding: "8px 14px",
   borderRadius: 999,
   border: "1px solid rgba(127, 127, 127, 0.32)",
-  // Translucent over whatever the site put behind it, and legible either way.
   background: "rgba(255, 255, 255, 0.82)",
   backdropFilter: "blur(8px)",
   WebkitBackdropFilter: "blur(8px)",
   color: "#1a1a1a",
-  fontSize: 13.5,
-  fontWeight: 500,
-  lineHeight: 1,
-  cursor: "pointer",
   boxShadow: "0 4px 14px rgba(0, 0, 0, 0.12)"
 };
+const inlineTriggerStyle = {
+  ...triggerBase,
+  padding: "8px 6px",
+  border: 0,
+  borderRadius: 8,
+  background: "transparent",
+  color: "inherit",
+  opacity: 0.75
+};
 const listBase = {
   position: "absolute",
   margin: 0,