poe-svelte-ui-lib 1.90.0 → 1.92.0

package/README.md

@@ -24,7 +24,7 @@
 
 **Компоненты.** Каждый привязывается к одной переменной устройства: `Input`, `Select`, `Switch`, `Slider`, `Button`, `Joystick`, `ProgressBar`, `Graph`, `PeriodChart`, `Table`, `FileAttach`, `VideoViewer`, `TextField`, `Widget`.
 
-**Раскладка.** `Accordion`, `Tabs`, `Divider`, `Carousel`, `Modal`.
+**Раскладка.** `Accordion`, `Tabs`, `Divider`, `Carousel`, `Modal`. У `Accordion` есть необязательный слот `actions` - кнопки справа в заголовке, нажатие на них блок не сворачивает.
 
 **Ядро протоколов** (`poe-svelte-ui-lib/protocols`). Кодирование и разбор пакетов для всех каналов связи с устройством. Работает без Svelte, в том числе под Node.
 
@@ -102,6 +102,10 @@ npm install poe-svelte-ui-lib
 
 Поверхности идут в четыре ступени: фон страницы `--bg-body`, панель `--back-color`, блок внутри панели `--container-color`, поле ввода `--field-color`. Для частых случаев есть готовые классы. `ui-panel` для блока прямо на фоне страницы, `ui-inset` для блока внутри панели.
 
+Текст идёт в три ступени: основной `--font-color`, вторичный `--muted-color`, подсказки `--faint-color`. Все три проходят WCAG AA (не ниже 4,5:1) на любом фоне темы. Текст не делают полупрозрачным (`opacity`), для вторичного текста берут `--muted-color`. Мельче 11px подписи не делают.
+
+Цветной текст пишут через `--red-text`, `--green-text`, `--orange-text` и так далее (классы `text-(--red-text)`), а не через `--red-color`. `--*-color` - это заливки под белый текст. В тёмной теме они тёмные и как текст нечитаемы, а `--*-text` там светлые.
+
 Панели не делают полупрозрачными, на фоне они теряются. Выпадающие меню делают через `ui-panel` с тенью `--elevation-3`.
 
 Стили тегов в приложении пишите только внутри `@layer base`. Правило вне слоя сильнее утилит Tailwind, и подписи в компонентах станут крупнее, чем задумано.

package/dist/Accordion/Accordion.svelte

@@ -13,6 +13,7 @@
     size = { width: 1, height: 1 },
     label = { name: "", class: "text-left", icon: null },
     children,
+    actions,
     image = "",
   }: IAccordionProps = $props()
 
@@ -27,35 +28,41 @@
 >
   <div class="overflow-hidden rounded-[14px] border border-(--hairline-color) bg-(--back-color)">
     <!-- Фон заголовка - мягкий оттенок мастер-цвета (светлый в светлой теме, тёмный в тёмной), текст - мастер-цвет с цветом шрифта 60/40, раскрытое содержимое остаётся на чистом фоне (--back-color). -->
-    <button
-      class="flex w-full cursor-pointer items-center justify-between gap-3 bg-(--accent-soft) px-4 py-3 text-left text-[color-mix(in_srgb,var(--accent-color)_60%,var(--font-color))] transition-colors duration-150 hover:bg-[color-mix(in_srgb,var(--accent-color)_12%,var(--accent-soft))]"
-      onclick={toggle}
-    >
-      <div class="flex min-w-0 flex-1 items-center gap-3">
-        {#if label?.icon}
-          <span
-            class="flex h-[18px] w-[18px] shrink-0 items-center justify-center text-[color-mix(in_srgb,var(--accent-color)_60%,var(--font-color))] [&_svg]:h-full [&_svg]:w-full"
-          >
-            {#if typeof label?.icon === "string"}
-              {@html label.icon}
-            {:else}
-              {@const IconComponent = label?.icon}
-              <IconComponent />
-            {/if}
-          </span>
-        {/if}
-        <span class={twMerge(`min-w-0 truncate text-[14px] font-semibold`, label.class)}>{label?.name}</span>
-      </div>
-
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="h-[14px] w-[14px] shrink-0 text-[color-mix(in_srgb,var(--accent-color)_60%,var(--font-color))] transition-transform duration-200"
-        style="transform: rotate({isOpen ? 180 : 0}deg)"
-        viewBox="0 0 24 24"
+    <!-- Заголовок: кнопка сворачивания на всю ширину и необязательные кнопки справа (actions) - вне неё, чтобы не сворачивать блок -->
+    <div class="flex w-full items-center bg-(--accent-soft)">
+      <button
+        class="flex min-w-0 flex-1 cursor-pointer items-center justify-between gap-3 px-4 py-3 text-left text-[color-mix(in_srgb,var(--accent-color)_35%,var(--font-color))] transition-colors duration-150 hover:bg-[color-mix(in_srgb,var(--accent-color)_12%,var(--accent-soft))]"
+        onclick={toggle}
       >
-        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 9l6 6 6-6" />
-      </svg>
-    </button>
+        <div class="flex min-w-0 flex-1 items-center gap-3">
+          {#if label?.icon}
+            <span
+              class="flex h-[18px] w-[18px] shrink-0 items-center justify-center text-[color-mix(in_srgb,var(--accent-color)_35%,var(--font-color))] [&_svg]:h-full [&_svg]:w-full"
+            >
+              {#if typeof label?.icon === "string"}
+                {@html label.icon}
+              {:else}
+                {@const IconComponent = label?.icon}
+                <IconComponent />
+              {/if}
+            </span>
+          {/if}
+          <span class={twMerge(`min-w-0 truncate text-[14px] font-semibold`, label.class)}>{label?.name}</span>
+        </div>
+
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-[14px] w-[14px] shrink-0 text-[color-mix(in_srgb,var(--accent-color)_35%,var(--font-color))] transition-transform duration-200"
+          style="transform: rotate({isOpen ? 180 : 0}deg)"
+          viewBox="0 0 24 24"
+        >
+          <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 9l6 6 6-6" />
+        </svg>
+      </button>
+      {#if actions}
+        <div class="flex shrink-0 items-center gap-1 pr-3">{@render actions()}</div>
+      {/if}
+    </div>
 
     {#if isOpen}
       <div

package/dist/Button/Button.svelte

@@ -126,7 +126,7 @@
     {#if content.name?.trim()}
       <span class="truncate">{content.name}</span>
       {#if keyBind.key && keyBind.showHint}
-        <span class="ml-1 text-[11px] font-medium tabular-nums opacity-60">
+        <span class="ml-1 text-[11px] font-medium tabular-nums opacity-80">
           {keyBind.ctrlKey ? "Ctrl+" : ""}{keyBind.shiftKey ? "Shift+" : ""}{keyBind.altKey ? "Alt+" : ""}{keyBind.key}
         </span>
       {/if}

package/dist/CopiedChip.svelte

@@ -8,7 +8,7 @@
 
 {#if show}
   <span
-    class="{className} absolute flex items-center gap-1 rounded-lg bg-(--green-soft) px-2 py-1 text-[11px] font-bold whitespace-nowrap text-(--green-color)"
+    class="{className} absolute flex items-center gap-1 rounded-lg bg-(--green-soft) px-2 py-1 text-[11px] font-bold whitespace-nowrap text-(--green-text)"
     transition:fade={{ duration: 150 }}
   >
     {$T("ui.copied")}

package/dist/Graph/Graph.svelte

@@ -312,7 +312,7 @@
     const { padding, graphWidth, graphHeight, minX, timeSpan, yMin, yMax, getX, getY } = computeGeometry()
 
     /* Сетка в стиле PeriodChart: пунктир цветом --faint-color темы, подписи тем же цветом без прозрачности */
-    const gridColor = getComputedStyle(canvas).getPropertyValue("--faint-color").trim() || "#8b93a1"
+    const gridColor = getComputedStyle(canvas).getPropertyValue("--faint-color").trim() || "#5f6774"
     ctx.strokeStyle = gridColor
     ctx.fillStyle = gridColor
     ctx.lineWidth = 1

package/dist/Input/Input.svelte

@@ -245,6 +245,6 @@
 
   {#if help.regExp && !isValid}
     <!-- Текст ошибки в потоке под полем и только когда поле невалидно: место заранее не резервируется, на соседей не наезжает -->
-    <span class="block text-[12px] font-semibold text-(--red-color)">{$T("ui.invalid_format")}</span>
+    <span class="block text-[12px] font-semibold text-(--red-text)">{$T("ui.invalid_format")}</span>
   {/if}
 </div>

package/dist/PeriodChart/PeriodChart.svelte

@@ -110,7 +110,7 @@
         <!-- Шкала Y: подписи нулевой высоты, центр каждой ровно на своей линии сетки -->
         <div class="flex h-40 shrink-0 flex-col justify-between">
           {#each axis.ticks as tick}
-            <div class="flex h-0 items-center justify-end text-[10px] font-medium text-(--faint-color) tabular-nums">
+            <div class="flex h-0 items-center justify-end text-[11px] font-medium text-(--faint-color) tabular-nums">
               {formatTick(tick)}
             </div>
           {/each}
@@ -152,7 +152,7 @@
 
           <div class="flex w-full gap-1">
             {#each values as _, i}
-              <div class="flex-1 truncate text-center text-[10px] font-bold text-(--faint-color)">
+              <div class="flex-1 truncate text-center text-[11px] font-bold text-(--faint-color)">
                 {i % labelStep === 0 ? barLabel(i) : ""}
               </div>
             {/each}

package/dist/Table/Table.svelte

@@ -263,7 +263,7 @@
   <div class="relative flex h-full w-full flex-col overflow-hidden rounded-[14px] border border-(--hairline-color) bg-(--back-color)">
     <!-- Table Header -->
     <div
-      class="grid border-b border-(--hairline-color) bg-[var(--table-header-color,var(--accent-soft))] text-[11px] font-bold tracking-[0.06em] text-[color-mix(in_srgb,var(--accent-color)_60%,var(--font-color))] uppercase"
+      class="grid border-b border-(--hairline-color) bg-[var(--table-header-color,var(--accent-soft))] text-[11px] font-bold tracking-[0.06em] text-[color-mix(in_srgb,var(--accent-color)_35%,var(--font-color))] uppercase"
       style={`grid-template-columns: ${gridTemplate}; padding-right: ${scrollbarWidth}px;`}
     >
       {#each header as column, index (column)}
@@ -294,7 +294,7 @@
       {#if dataBuffer.clearButton}
         <div class="flex items-center justify-center tracking-normal normal-case">
           <Button
-            componentClass={twMerge("size-7 p-1.5 text-(--muted-color) hover:text-(--red-color)", dataBuffer.clearClass)}
+            componentClass={twMerge("size-7 p-1.5 text-(--muted-color) hover:text-(--red-text)", dataBuffer.clearClass)}
             content={{ icon: ButtonClear, info: { text: $T("common.table.clear"), side: "left" } }}
             onClick={clearBuffer}
           />

package/dist/WidgetFileSystem/WidgetFileSystem.svelte

@@ -58,7 +58,7 @@
   let files = $derived(value?.List ?? [])
   let usedPercent = $derived(total > 0 ? Math.min(100, Math.round((used / total) * 100)) : 0)
   /* Полоса - мастер-цвет виджета; почти заполненную ФС (закачка скоро начнёт падать) выдаёт только процент */
-  let percentColor = $derived(usedPercent >= 90 ? "var(--red-color)" : usedPercent >= 75 ? "var(--orange-color)" : "var(--muted-color)")
+  let percentColor = $derived(usedPercent >= 90 ? "var(--red-text)" : usedPercent >= 75 ? "var(--orange-text)" : "var(--muted-color)")
 
   /* Таблица файлов: путь обрезается «…», размер - уже отформатирован; действия - значки без текста: скачать и удалить (с подтверждением) */
   type FileRow = IWidgetFileSystemFile & { SizeText: string }
@@ -74,7 +74,7 @@
         data: {
           icon: ButtonDelete,
           title: $T("widget.common.delete"),
-          class: "bg-transparent px-0 text-(--red-color) hover:bg-(--red-color)/10",
+          class: "bg-transparent px-0 text-(--red-text) hover:bg-(--red-color)/10",
           onClick: (row: FileRow) => (pendingDelete = row.Name),
         },
       },
@@ -185,7 +185,7 @@
           >
         {/if}
         {#if downloadError}
-          <span class="mt-2 text-[12px] text-(--red-color)" transition:slide={{ duration: 100 }}>{downloadError}</span>
+          <span class="mt-2 text-[12px] text-(--red-text)" transition:slide={{ duration: 100 }}>{downloadError}</span>
         {/if}
       </div>
 
@@ -207,7 +207,7 @@
             </div>
           {/if}
           {#if uploadError}
-            <span class="text-[12px] text-(--red-color)" transition:slide={{ duration: 100 }}>{uploadError}</span>
+            <span class="text-[12px] text-(--red-text)" transition:slide={{ duration: 100 }}>{uploadError}</span>
           {/if}
         </div>
       {/if}

package/dist/WidgetMap/WidgetMap.svelte

@@ -328,7 +328,7 @@
         <div class="flex flex-col items-center justify-center leading-none">
           <div
             class="flex size-8 shrink-0 items-center justify-center [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full
-          {isFresh(board) ? 'text-(--green-color)' : 'text-(--red-color)'}"
+          {isFresh(board) ? 'text-(--green-text)' : 'text-(--red-text)'}"
             style="rotate: {board.heading}deg;"
           >
             {#if markerIcon}
@@ -366,29 +366,29 @@
           <div class="flex items-center gap-1.5">
             <span class="size-2 shrink-0 rounded-full {isFresh(board) ? 'bg-(--green-color)' : 'bg-(--red-color)'}"></span>
             <h6 class="text-sm leading-none font-bold">{board.name}</h6>
-            {#if board.name !== board.group}<span class="text-[0.6rem] font-semibold uppercase opacity-60">{board.group}</span>{/if}
+            {#if board.name !== board.group}<span class="text-[11px] font-semibold uppercase text-(--muted-color)">{board.group}</span>{/if}
           </div>
 
           <div class="grid grid-cols-2 gap-x-3 gap-y-1 rounded-lg bg-(--container-color) p-2 text-xs">
             <div>
-              <p class="text-[0.6rem] font-semibold tracking-wide uppercase opacity-60">Lat / Lon</p>
+              <p class="text-[11px] font-semibold tracking-wide uppercase text-(--muted-color)">Lat / Lon</p>
               <p class="font-medium">{board.lat.toFixed(6)}, {board.lon.toFixed(6)}</p>
             </div>
             <div>
-              <p class="text-[0.6rem] font-semibold tracking-wide uppercase opacity-60">Alt</p>
+              <p class="text-[11px] font-semibold tracking-wide uppercase text-(--muted-color)">Alt</p>
               <p class="font-medium">{board.alt.toFixed(1)} m</p>
             </div>
             <div>
-              <p class="text-[0.6rem] font-semibold tracking-wide uppercase opacity-60">Heading</p>
+              <p class="text-[11px] font-semibold tracking-wide uppercase text-(--muted-color)">Heading</p>
               <p class="font-medium">{board.heading.toFixed(1)}°</p>
             </div>
             <div>
-              <p class="text-[0.6rem] font-semibold tracking-wide uppercase opacity-60">Satellites</p>
+              <p class="text-[11px] font-semibold tracking-wide uppercase text-(--muted-color)">Satellites</p>
               <p class="font-medium">{board.sat}</p>
             </div>
           </div>
 
-          {#if board.sn}<p class="text-center font-mono text-[0.6rem] tracking-wide uppercase">{board.sn}</p>{/if}
+          {#if board.sn}<p class="text-center font-mono text-[11px] tracking-wide uppercase">{board.sn}</p>{/if}
 
           <div class="grid grid-cols-[1fr_auto_1fr] items-center border-t border-(--hairline-color) pt-1">
             <div class="relative flex items-center justify-self-start">
@@ -431,7 +431,7 @@
             </button>
 
             <button
-              class="cursor-pointer justify-self-end rounded-lg border-none bg-transparent p-0.5 text-(--red-color) transition hover:opacity-80"
+              class="cursor-pointer justify-self-end rounded-lg border-none bg-transparent p-0.5 text-(--red-text) transition hover:opacity-80"
               aria-label="Hide"
               title="Hide"
               onclick={() => hideBoard(board.group)}
@@ -503,10 +503,10 @@
           />
           <span
             class="text-[12px] font-semibold tabular-nums {freshCount === 0
-              ? 'text-(--red-color)'
+              ? 'text-(--red-text)'
               : freshCount < groupList.length
                 ? 'text-(--muted-color)'
-                : 'text-(--green-color)'}"
+                : 'text-(--green-text)'}"
             use:hint={{ text: $T("widget.map.hint.boards"), enabled: $hints }}
           >
             {freshCount} / {groupList.length}

package/dist/WidgetMap/mission/MapAgro.svelte

@@ -608,7 +608,7 @@
                     </label>
                   {/each}
                   {#if plan.sprayControl === "none"}
-                    <p class="m-0 text-[12px] text-(--red-color)">{$T("widget.mission.spray.noneWarn")}</p>
+                    <p class="m-0 text-[12px] text-(--red-text)">{$T("widget.mission.spray.noneWarn")}</p>
                   {/if}
                 </div>
                 {#if plan.sprayControl === "servo"}
@@ -660,7 +660,7 @@
                           />°
                         </span>
                         <span class="w-16 text-right font-semibold">{areaText(fieldArea(field, []))}</span>
-                        <button class="cursor-pointer border-none bg-transparent p-0 text-(--red-color)" onclick={() => removeField(i)} aria-label="Delete"
+                        <button class="cursor-pointer border-none bg-transparent p-0 text-(--red-text)" onclick={() => removeField(i)} aria-label="Delete"
                           >✕</button
                         >
                       </span>
@@ -673,7 +673,7 @@
                       <span class="flex items-center gap-2"><span class="size-2.5 rounded-sm bg-[#dc2626]"></span>{$T("widget.mission.hole")} {i + 1}</span>
                       <span class="flex items-center gap-2">
                         <span class="font-semibold">{areaText(fieldArea(hole, []))}</span>
-                        <button class="cursor-pointer border-none bg-transparent p-0 text-(--red-color)" onclick={() => removeHole(i)} aria-label="Delete"
+                        <button class="cursor-pointer border-none bg-transparent p-0 text-(--red-text)" onclick={() => removeHole(i)} aria-label="Delete"
                           >✕</button
                         >
                       </span>
@@ -697,7 +697,7 @@
                   </div>
                 {/if}
                 {#if fields.length || plan.holes.length}
-                  <button class="w-max cursor-pointer border-none bg-transparent p-0 text-[12px] text-(--red-color) underline" onclick={clearAll}>
+                  <button class="w-max cursor-pointer border-none bg-transparent p-0 text-[12px] text-(--red-text) underline" onclick={clearAll}>
                     {$T("widget.mission.clear")}
                   </button>
                 {/if}
@@ -741,7 +741,7 @@
             </div>
           {/if}
           {#if stats?.unreachable}
-            <p class="m-0 text-[12px] text-(--red-color)">{$T("widget.mission.unreachable")}: {stats.unreachable}</p>
+            <p class="m-0 text-[12px] text-(--red-text)">{$T("widget.mission.unreachable")}: {stats.unreachable}</p>
           {/if}
         </div>
       </div>

package/dist/WidgetMap/mission/MapRoute.svelte

@@ -412,8 +412,7 @@
                       onUpdate={(v) => Number.isFinite(Number(v)) && setPoint(i, { speed: Math.min(40, Math.max(0.5, Number(v))) })}
                     />
                     <span class="text-right text-(--muted-color)">{leg ? `${fmt(leg.length, 0)} ${$T("widget.mission.m")}` : "-"}</span>
-                    <button class="cursor-pointer border-none bg-transparent p-0 text-(--red-color)" onclick={() => removePoint(i)} aria-label="Delete"
-                      >✕</button
+                    <button class="cursor-pointer border-none bg-transparent p-0 text-(--red-text)" onclick={() => removePoint(i)} aria-label="Delete">✕</button
                     >
                   </div>
                 {/each}
@@ -426,7 +425,7 @@
               {$T("widget.route.returnHome")}
             </label>
             {#if route.points.length}
-              <button class="w-max cursor-pointer border-none bg-transparent p-0 text-[12px] text-(--red-color) underline" onclick={clearAll}
+              <button class="w-max cursor-pointer border-none bg-transparent p-0 text-[12px] text-(--red-text) underline" onclick={clearAll}
                 >{$T("widget.mission.clear")}</button
               >
             {/if}

package/dist/WidgetPFD/WidgetPFD.svelte

@@ -14,7 +14,16 @@
   import { readPersistedCollapsed, writePersistedCollapsed } from "../widgetCollapse"
   import { createFlightSim } from "../flightSim"
 
-  let { wrapperClass = "", componentClass = "", label = {}, value: deviceValue, limits, isTest = false, collapsed = $bindable(false), persistKey }: IWidgetPFDProps = $props()
+  let {
+    wrapperClass = "",
+    componentClass = "",
+    label = {},
+    value: deviceValue,
+    limits,
+    isTest = false,
+    collapsed = $bindable(false),
+    persistKey,
+  }: IWidgetPFDProps = $props()
 
   /* В режиме имитации данные устройства не учитываются, кадр полёта каждые 50 мс */
   let simValue: IWidgetPFDData | undefined = $state()
@@ -244,7 +253,7 @@
   let ekf = $derived(num(value?.EKF, -1))
   /* Пороги дисперсии EKF - как в Mission Planner: от 0.5 внимание, от 0.8 тревога; неисправный датчик - тревога */
   let navState: "ok" | "warn" | "bad" | "none" = $derived(sensErr > 0 || ekf >= 0.8 ? "bad" : ekf >= 0.5 ? "warn" : ekf >= 0 ? "ok" : "none")
-  const NAV_COLOR = { ok: "var(--green-color)", warn: "var(--orange-color)", bad: "var(--red-color)", none: "var(--faint-color)" }
+  const NAV_COLOR = { ok: "var(--green-text)", warn: "var(--orange-text)", bad: "var(--red-text)", none: "var(--faint-color)" }
 
   /* Сообщения автопилота (STATUSTEXT): новое - по смене MsgSeq, последнее висит 10 с, история из 5 - в подсказке */
   let SEVERITY = $derived(Array.from({ length: 8 }, (_, i) => $T(`pfd.sev.${i}`)))
@@ -455,7 +464,7 @@
   <WidgetHeader icon={PlaneIcon} label={label?.name || $T("pfd.title")} bind:collapsed {hints}>
     {#snippet right()}
       <div class="flex items-center gap-4">
-        <span class="text-[12px] font-semibold tabular-nums {stale ? 'text-(--red-color)' : 'text-(--muted-color)'}">{fmtAge(age)}</span>
+        <span class="text-[12px] font-semibold tabular-nums {stale ? 'text-(--red-text)' : 'text-(--muted-color)'}">{fmtAge(age)}</span>
       </div>
     {/snippet}
   </WidgetHeader>
@@ -474,7 +483,7 @@
         class="flex flex-wrap items-center justify-between gap-x-5 gap-y-1.5 rounded-[10px] border border-(--hairline-color) bg-(--back-color) px-3 py-2 text-[12px] font-semibold tabular-nums"
       >
         <div class="flex min-w-0 items-center gap-2" data-tip="system">
-          <span class="shrink-0 text-[10px] tracking-wide whitespace-nowrap text-(--faint-color) uppercase">{$T("pfd.system")}</span>
+          <span class="shrink-0 text-[11px] tracking-wide whitespace-nowrap text-(--faint-color) uppercase">{$T("pfd.system")}</span>
           <span class="rounded-md px-1.5 py-0.5 {armed ? 'bg-(--red-color) text-white' : 'bg-(--container-color) text-(--muted-color)'}" data-tip="armed"
             >{armed ? "ARMED" : "DISARMED"}</span
           >
@@ -486,21 +495,21 @@
           </span>
         </div>
         <div class="flex min-w-0 items-center gap-2" data-tip="gps">
-          <span class="shrink-0 text-[10px] tracking-wide whitespace-nowrap text-(--faint-color) uppercase">GPS</span>
-          <span class={fix < 3 ? "text-(--orange-color)" : ""}>{FIX[fix] ?? fix} · {$T("pfd.sat", { n: num(value?.Sat) })}</span>
-          {#if hdop >= 0}<span class={hdop > 2 ? "text-(--orange-color)" : ""}>HDOP {fmt(hdop, 2)}</span>{/if}
+          <span class="shrink-0 text-[11px] tracking-wide whitespace-nowrap text-(--faint-color) uppercase">GPS</span>
+          <span class={fix < 3 ? "text-(--orange-text)" : ""}>{FIX[fix] ?? fix} · {$T("pfd.sat", { n: num(value?.Sat) })}</span>
+          {#if hdop >= 0}<span class={hdop > 2 ? "text-(--orange-text)" : ""}>HDOP {fmt(hdop, 2)}</span>{/if}
         </div>
         {#if rssi >= 0 || remRssi >= 0 || drop >= 0}
           <div class="flex min-w-0 items-center gap-2" data-tip="link">
-            <span class="shrink-0 text-[10px] tracking-wide whitespace-nowrap text-(--faint-color) uppercase">{$T("pfd.link")}</span>
-            <span class={Math.min(rssi, remRssi) >= 0 && Math.min(rssi, remRssi) < 30 ? "text-(--red-color)" : ""}
+            <span class="shrink-0 text-[11px] tracking-wide whitespace-nowrap text-(--faint-color) uppercase">{$T("pfd.link")}</span>
+            <span class={Math.min(rssi, remRssi) >= 0 && Math.min(rssi, remRssi) < 30 ? "text-(--red-text)" : ""}
               >{rssi >= 0 ? Math.round(rssi) : "-"} / {remRssi >= 0 ? Math.round(remRssi) : "-"} %</span
             >
-            {#if drop >= 0}<span class={drop > 5 ? "text-(--orange-color)" : ""}>{$T("pfd.link.drop", { v: fmt(drop) })}</span>{/if}
+            {#if drop >= 0}<span class={drop > 5 ? "text-(--orange-text)" : ""}>{$T("pfd.link.drop", { v: fmt(drop) })}</span>{/if}
           </div>
         {/if}
-        <div class="flex items-center gap-2 {battLow ? 'text-(--red-color)' : ''}" data-tip="battery">
-          <span class="shrink-0 text-[10px] tracking-wide whitespace-nowrap text-(--faint-color) uppercase">{$T("pfd.battery")}</span>
+        <div class="flex items-center gap-2 {battLow ? 'text-(--red-text)' : ''}" data-tip="battery">
+          <span class="shrink-0 text-[11px] tracking-wide whitespace-nowrap text-(--faint-color) uppercase">{$T("pfd.battery")}</span>
           <span>{battText}</span>
         </div>
       </div>
@@ -764,7 +773,7 @@
       >
         {#if wp}
           <div class="flex min-w-0 items-center gap-2" data-tip="route">
-            <span class="shrink-0 text-[10px] font-semibold tracking-wide whitespace-nowrap text-(--faint-color) uppercase">{$T("pfd.route")}</span>
+            <span class="shrink-0 text-[11px] font-semibold tracking-wide whitespace-nowrap text-(--faint-color) uppercase">{$T("pfd.route")}</span>
             <span
               ><span style="color:#22d3ee">◆</span>
               {$T("pfd.route.line", { n: wp.num, d: fmtDistance(wp.dist), x: fmtDistance(Math.abs(wp.xte)) })}{eta ? ` · ${eta}` : ""}</span
@@ -773,22 +782,22 @@
         {/if}
         {#if home}
           <div class="flex min-w-0 items-center gap-2" data-tip="home">
-            <span class="shrink-0 text-[10px] font-semibold tracking-wide whitespace-nowrap text-(--faint-color) uppercase">{$T("pfd.home")}</span>
+            <span class="shrink-0 text-[11px] font-semibold tracking-wide whitespace-nowrap text-(--faint-color) uppercase">{$T("pfd.home")}</span>
             <span><span style="color:#22c55e">●</span> {fmtDistance(home.distance)} · {Math.round(home.bearing)}°</span>
           </div>
         {/if}
         {#if track !== null}
           <div class="flex items-center gap-2" data-tip="track">
-            <span class="shrink-0 text-[10px] font-semibold tracking-wide whitespace-nowrap text-(--faint-color) uppercase">{$T("pfd.track")}</span>
+            <span class="shrink-0 text-[11px] font-semibold tracking-wide whitespace-nowrap text-(--faint-color) uppercase">{$T("pfd.track")}</span>
             <span><span style="color:#ec4899">▲</span> {Math.round(track)}°</span>
           </div>
         {/if}
         <div class="flex min-w-0 items-center gap-2" data-tip="position">
-          <span class="shrink-0 text-[10px] font-semibold tracking-wide whitespace-nowrap text-(--faint-color) uppercase">{$T("pfd.position")}</span>
+          <span class="shrink-0 text-[11px] font-semibold tracking-wide whitespace-nowrap text-(--faint-color) uppercase">{$T("pfd.position")}</span>
           <span>{latLonText} · MSL {$T("pfd.u.m", { n: Math.round(altMsl) })}</span>
         </div>
         <div class="flex min-w-0 items-center gap-2" data-tip="air">
-          <span class="shrink-0 text-[10px] font-semibold tracking-wide whitespace-nowrap text-(--faint-color) uppercase">{$T("pfd.air")}</span>
+          <span class="shrink-0 text-[11px] font-semibold tracking-wide whitespace-nowrap text-(--faint-color) uppercase">{$T("pfd.air")}</span>
           <span>{fmt(num(value?.Press))} {$T("pfd.u.hpa")} · {fmt(num(value?.Temp))} °C</span>
         </div>
       </div>

package/dist/WidgetStackInfo/WidgetStackInfo.svelte

@@ -76,17 +76,17 @@
     const text = $T(key)
     return text === key ? (kind === "name" ? code : "") : text
   }
-  const percentColor = (p: number) => (p >= 90 ? "var(--red-color)" : p >= 75 ? "var(--orange-color)" : "var(--muted-color)")
+  const percentColor = (p: number) => (p >= 90 ? "var(--red-text)" : p >= 75 ? "var(--orange-text)" : "var(--muted-color)")
 
   let STATES = $derived(["running", "ready", "blocked", "suspended", "deleted"].map((state) => $T(`widget.stack.state.${state}`)))
-  const stackColor = (bytes: number) => (bytes < warnBytes ? "var(--red-color)" : bytes < warnBytes * 2 ? "var(--orange-color)" : "")
+  const stackColor = (bytes: number) => (bytes < warnBytes ? "var(--red-text)" : bytes < warnBytes * 2 ? "var(--orange-text)" : "")
 
   type TaskRow = { Name: string; StateText: string; Prio: number; CoreText: string; CpuText: string; FreeMinText: string }
   let tasks = $derived([...(value?.Tasks ?? [])].sort((a, b) => a.FreeMin - b.FreeMin))
   let hasCore = $derived(tasks.some((t) => t.Core !== undefined))
   /* Загрузка задачи, % одного ядра с прошлого ответа: от 50 % - оранжевая, от 80 % - красная; IDLE - это свободное время ядра, не подсвечивается */
   let hasCpu = $derived(tasks.some((t) => t.CPU !== undefined))
-  const cpuColor = (cpu: number) => (cpu >= 80 ? "var(--red-color)" : cpu >= 50 ? "var(--orange-color)" : "")
+  const cpuColor = (cpu: number) => (cpu >= 80 ? "var(--red-text)" : cpu >= 50 ? "var(--orange-text)" : "")
   let lowCount = $derived(tasks.filter((t) => t.FreeMin < warnBytes).length)
 
   /* Порядок фиксированный - по возрастанию запаса стека: при автоопросе сортировка кликом сбрасывалась бы каждый ответ */
@@ -202,7 +202,7 @@
           <div class="flex items-baseline justify-between gap-2 text-[12px] text-(--muted-color)">
             <span use:hint={{ text: $T("widget.stack.hint.tasks"), enabled: $hints }}>{$T("widget.stack.tasks", { n: tasks.length })}</span>
             {#if lowCount}
-              <span class="font-semibold text-(--red-color)" use:hint={{ text: $T("widget.stack.hint.low"), enabled: $hints }}
+              <span class="font-semibold text-(--red-text)" use:hint={{ text: $T("widget.stack.hint.low"), enabled: $hints }}
                 >{$T("widget.stack.low", { warn: warnBytes, n: lowCount })}</span
               >
             {/if}

package/dist/WidgetWiFi/WidgetWiFi.svelte

@@ -270,7 +270,7 @@
         class="flex w-full max-w-80 flex-col gap-3 rounded-[16px] border border-(--hairline-color) bg-(--back-color) p-4 shadow-(--elevation-3)"
         transition:scale={{ duration: 150, start: 0.96 }}
       >
-        <div class="flex items-center gap-2 text-(--orange-color)">
+        <div class="flex items-center gap-2 text-(--orange-text)">
           <WarningIcon />
           <h4 class="text-[15px] font-semibold text-(--font-color)">{$T("widget.wifi.ap_confirm_title")}</h4>
         </div>

package/dist/theme.css

@@ -332,8 +332,9 @@
   --hairline-color: rgb(17 24 39 / 0.11);
 
   --font-color: #10141a;
-  --muted-color: #545c6b;
-  --faint-color: #8b93a1;
+  /* Вторичный и подсказочный текст: контраст не ниже 4.8:1 на всех фонах темы (WCAG AA) */
+  --muted-color: #3f4651;
+  --faint-color: #5f6774;
 
   --accent-color: #4175c8;
   --accent-hover: #33599e;
@@ -359,6 +360,17 @@
   --purple-color: #855dd0;
   --pink-color: #c84182;
 
+  /* Цветной текст: в светлой теме - те же цвета, что и заливки (контраст ≥ 4.5:1 на белом) */
+  --gray-text: var(--muted-color);
+  --red-text: var(--red-color);
+  --orange-text: var(--orange-color);
+  --yellow-text: var(--yellow-color);
+  --green-text: var(--green-color);
+  --cyan-text: var(--cyan-color);
+  --blue-text: var(--blue-color);
+  --purple-text: var(--purple-color);
+  --pink-text: var(--pink-color);
+
   /* Мягкие тинты для фонов блоков и подсветки строк */
   --gray-soft: #f0f2f5;
   --red-soft: #fbeae8;
@@ -380,8 +392,9 @@
   --hairline-color: rgb(255 255 255 / 0.1);
 
   --font-color: #e9ebf0;
-  --muted-color: #9ba3b2;
-  --faint-color: #6d7686;
+  /* Вторичный и подсказочный текст: контраст не ниже 5.6:1 на всех фонах темы (WCAG AA) */
+  --muted-color: #b4bbc8;
+  --faint-color: #939cac;
 
   --accent-color: #3863a8;
   --accent-hover: #4a78bf;
@@ -407,6 +420,17 @@
   --purple-color: #754bc3;
   --pink-color: #a8386e;
 
+  /* Цветной текст: тёмные заливки как текст нечитаемы, поэтому светлые оттенки с контрастом ≥ 6:1 на всех фонах темы */
+  --gray-text: var(--muted-color);
+  --red-text: #f2867d;
+  --orange-text: #e6a65c;
+  --yellow-text: #dcc067;
+  --green-text: #5cc896;
+  --cyan-text: #5fc6dc;
+  --blue-text: #83abee;
+  --purple-text: #b49cf2;
+  --pink-text: #f084b8;
+
   --gray-soft: rgb(255 255 255 / 0.06);
   --red-soft: rgb(168 64 56 / 0.18);
   --orange-soft: rgb(130 90 43 / 0.18);

package/dist/types.d.ts

@@ -70,6 +70,7 @@ export interface IAccordionProps {
         icon?: ConstructorOfATypedSvelteComponent | string | null;
     };
     children?: Snippet;
+    actions?: Snippet;
     image?: string;
 }
 export interface IButtonProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.90.0",
+  "version": "1.92.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Oleg-Perevyshin/ElementsUI.git"