@dss-kit/ui-kit 1.0.3 → 1.0.4

package/dist/components/controls/Switch/Switch.d.ts

@@ -38,11 +38,15 @@ interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
      */
     variant?: SwitchVariant;
     /**
-     * Заголовок переключателя.
+     * Заголовок переключателя — его доступное имя.
+     * Рендерится внутри `<label>`, поэтому `ReactNode` должен быть строчным
+     * контентом (без `div`, `p` и интерактивных элементов).
+     * Без `title` и `text` передайте `aria-label`.
      */
     title?: string | React.ReactNode;
     /**
-     * Текст переключателя.
+     * Текст переключателя. Вместе с `title` связывается с переключателем
+     * через `aria-describedby`. Ограничения на `ReactNode` те же, что у `title`.
      */
     text?: string | React.ReactNode;
     /**
@@ -73,13 +77,13 @@ interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
     className?: string;
     /** Класс для внешнего `Box`-обёртки над `<label>`. */
     wrapperClassName?: string;
-    /** Класс для контейнера переключателя (`Box` со `switchContainer`). */
+    /** Класс для контейнера переключателя (`<span>` со `switchContainer`). */
     switchContainerClassName?: string;
-    /** Класс для рельса-трека переключателя (`<div>` с `switch`). */
+    /** Класс для рельса-трека переключателя (`<span>` с `switch`). */
     trackClassName?: string;
-    /** Класс для перемещаемой ручки переключателя (`<div>` с `thumb`). */
+    /** Класс для перемещаемой ручки переключателя (`<span>` с `thumb`). */
     thumbClassName?: string;
-    /** Класс для скрытого нативного `<input>`. */
+    /** Класс для визуально скрытого нативного `<input>` поверх трека. */
     inputClassName?: string;
     /** Класс для блока с заголовком/описанием. */
     labelsContainerClassName?: string;

package/dist/components/controls/Switch/Switch.js

@@ -1,140 +1,163 @@
-import { jsx as t, jsxs as l } from "react/jsx-runtime";
-import { cx as u } from "@emotion/css";
-import { forwardRef as B, useRef as D, useImperativeHandle as H, useCallback as T, useMemo as k } from "react";
-import q from "../../../assets/svg/switch/fire.svg.js";
-import A from "../../../assets/svg/switch/moon.svg.js";
-import { styles as r } from "./styles.js";
-import { useControlled as G } from "../../../utils/hooks/useControlled.js";
-import { Text as v } from "../../builders/Text/Text.js";
-import { Box as f } from "../../builders/Box/Box.js";
-import { theme as J } from "../../../utils/theme/index.js";
-const { spacing: b } = J, K = B(
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import { cx as o } from "@emotion/css";
+import { forwardRef as q, useId as A, useRef as G, useImperativeHandle as J, useCallback as K, useMemo as I } from "react";
+import L from "../../../assets/svg/switch/fire.svg.js";
+import O from "../../../assets/svg/switch/moon.svg.js";
+import { styles as e } from "./styles.js";
+import { useControlled as Q } from "../../../utils/hooks/useControlled.js";
+import { Text as x } from "../../builders/Text/Text.js";
+import { Box as U } from "../../builders/Box/Box.js";
+import { theme as X } from "../../../utils/theme/index.js";
+const { spacing: Y } = X, Z = q(
   ({
-    title: a,
-    text: i,
-    icon: w,
-    disabled: m,
-    onChange: c,
-    checked: x,
-    defaultValue: d,
-    className: S,
-    wrapperClassName: R,
-    switchContainerClassName: V,
-    trackClassName: j,
-    thumbClassName: C,
-    inputClassName: E,
-    labelsContainerClassName: F,
+    title: c,
+    text: s,
+    icon: B,
+    disabled: d,
+    onChange: n,
+    checked: S,
+    defaultValue: p,
+    className: $,
+    wrapperClassName: j,
+    switchContainerClassName: C,
+    trackClassName: R,
+    thumbClassName: V,
+    inputClassName: D,
+    labelsContainerClassName: E,
     titleClassName: h,
-    textClassName: p,
-    size: I = "md",
-    variant: g = "accent",
+    textClassName: b,
+    size: F = "md",
+    variant: y = "accent",
     reverse: M = !1,
     w: W = "auto",
-    ..._
-  }, $) => {
-    const [o, n] = G(x, d), s = D(null);
-    H(
-      $,
+    "aria-describedby": _,
+    ...g
+  }, z) => {
+    const [l, a] = Q(
+      S,
+      p ?? !1
+    ), N = A(), m = `${N}-title`, u = `${N}-text`, k = !!(c && s), H = [k && u, _].filter(Boolean).join(" ") || void 0, i = G(null);
+    J(
+      z,
       () => ({
         focus: () => {
-          s.current?.focus();
+          i.current?.focus();
         },
         blur: () => {
-          s.current?.blur();
+          i.current?.blur();
         },
         get checked() {
-          return o ?? !1;
+          return l ?? !1;
         },
-        setChecked: (e) => {
-          n(e), c?.(e);
+        setChecked: (r) => {
+          a(r), n?.(r);
         },
         toggle: () => {
-          const e = !o;
-          n(e), c?.(e);
+          const r = !l;
+          a(r), n?.(r);
         },
-        isFocused: () => document.activeElement === s.current,
-        isDisabled: () => m ?? !1,
-        getInputElement: () => s.current,
-        checkValidity: () => s.current?.checkValidity() ?? !0,
+        isFocused: () => document.activeElement === i.current,
+        isDisabled: () => d ?? !1,
+        getInputElement: () => i.current,
+        checkValidity: () => i.current?.checkValidity() ?? !0,
         reset: () => {
-          const e = d ?? !1;
-          n(e), c?.(e);
+          const r = p ?? !1;
+          a(r), n?.(r);
         }
       }),
-      [o, n, c, m, d]
+      [l, a, n, d, p]
     );
-    const z = T(
-      (e) => {
-        n(e.target.checked), c?.(e.target.checked);
+    const T = K(
+      (r) => {
+        a(r.target.checked), n?.(r.target.checked);
       },
-      [c]
-    ), N = k(() => typeof a == "string" ? /* @__PURE__ */ t(
-      v,
+      [n, a]
+    ), v = I(() => c ? typeof c == "string" ? /* @__PURE__ */ t(
+      x,
       {
+        id: m,
+        tag: "span",
         variant: "body-1",
         colorName: "primary",
         fontWeight: "medium",
         className: h,
-        children: a
+        children: c
       }
-    ) : a, [a, h]), y = k(() => typeof i == "string" ? /* @__PURE__ */ t(
-      v,
+    ) : /* @__PURE__ */ t("span", { id: m, children: c }) : null, [c, h, m]), w = I(() => s ? typeof s == "string" ? /* @__PURE__ */ t(
+      x,
       {
+        id: u,
+        tag: "span",
         variant: "body-2",
         colorName: "secondary",
         fontWeight: "regular",
-        className: p,
-        children: i
+        className: b,
+        children: s
       }
-    ) : i, [i, p]);
-    return /* @__PURE__ */ l(f, { row: !0, w: W, gap: b.sm, className: R, children: [
-      /* @__PURE__ */ l(
+    ) : /* @__PURE__ */ t("span", { id: u, children: s }) : null, [s, b, u]);
+    return /* @__PURE__ */ f(U, { row: !0, w: W, gap: Y.sm, className: j, children: [
+      /* @__PURE__ */ f(
         "label",
         {
-          className: u(r.container, S, {
-            [r.disabled]: m,
-            [r.reverse]: M
+          className: o(e.container, $, {
+            [e.disabled]: d,
+            [e.reverse]: M
           }),
           children: [
-            /* @__PURE__ */ l(
-              f,
+            /* @__PURE__ */ f(
+              "span",
               {
-                className: u(
-                  r.switchContainer,
-                  r[`size_${I}`],
-                  r[`variant_${g}`],
-                  V
+                className: o(
+                  e.switchContainer,
+                  e[`size_${F}`],
+                  e[`variant_${y}`],
+                  C
                 ),
                 children: [
                   /* @__PURE__ */ t(
                     "input",
                     {
-                      ref: s,
+                      ref: i,
                       type: "checkbox",
-                      checked: o,
-                      hidden: !0,
-                      onChange: z,
-                      disabled: m,
-                      className: E,
-                      ..._
+                      role: "switch",
+                      checked: l,
+                      onChange: T,
+                      disabled: d,
+                      "aria-labelledby": k && !g["aria-label"] ? m : void 0,
+                      "aria-describedby": H,
+                      className: o(e.input, D),
+                      ...g
                     }
                   ),
-                  /* @__PURE__ */ t("div", { className: u(r.switch, j), children: /* @__PURE__ */ t("div", { className: u(r.thumb, C), children: g === "theme" && (o ? /* @__PURE__ */ t(A, { className: r.moon }) : /* @__PURE__ */ t(q, { className: r.fire })) }) })
+                  /* @__PURE__ */ t(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: o(e.switch, R),
+                      children: /* @__PURE__ */ t("span", { className: o(e.thumb, V), children: y === "theme" && (l ? /* @__PURE__ */ t(O, { className: e.icon }) : /* @__PURE__ */ t(L, { className: e.icon })) })
+                    }
+                  )
                 ]
               }
             ),
-            (N || y) && /* @__PURE__ */ l(f, { gap: b.xs, className: F, children: [
-              N,
-              y
-            ] })
+            (v || w) && /* @__PURE__ */ f(
+              "span",
+              {
+                className: o(e.labelsContainer, E),
+                children: [
+                  v,
+                  w
+                ]
+              }
+            )
           ]
         }
       ),
-      w
+      B
     ] });
   }
 );
-K.displayName = "Switch";
+Z.displayName = "Switch";
 export {
-  K as Switch
+  Z as Switch
 };

package/dist/components/controls/Switch/styles.d.ts

@@ -3,6 +3,7 @@ export declare const styles: {
     disabled: string;
     reverse: string;
     switchContainer: string;
+    input: string;
     variant_accent: string;
     variant_secondary: string;
     variant_positive: string;
@@ -12,6 +13,6 @@ export declare const styles: {
     size_lg: string;
     switch: string;
     thumb: string;
-    moon: string;
-    fire: string;
+    labelsContainer: string;
+    icon: string;
 };

package/dist/components/controls/Switch/styles.js

@@ -1,128 +1,131 @@
-import { css as i } from "@emotion/css";
-import { theme as c } from "../../../utils/theme/index.js";
-const { color: t, cornerRadius: r, height: h, spacing: s, transition: e } = c, l = {
-  container: i({
+import { css as t } from "@emotion/css";
+import { theme as s } from "../../../utils/theme/index.js";
+const { color: i, cornerRadius: h, height: e, spacing: r, transition: c } = s, l = {
+  container: t({
     width: "100%",
     cursor: "pointer",
-    outline: "none",
     userSelect: "none",
     display: "flex",
     justifyContent: "space-between",
-    gap: s.md,
-    "&.disabled": {
-      cursor: "not-allowed",
-      opacity: 0.5
-    },
-    "&.reverse": {
-      flexDirection: "row-reverse"
-    }
+    gap: r.md
   }),
-  disabled: i({
+  disabled: t({
     cursor: "not-allowed",
     opacity: 0.5
   }),
-  reverse: i({
+  reverse: t({
     flexDirection: "row-reverse"
   }),
-  switchContainer: i({
+  switchContainer: t({
+    position: "relative",
+    display: "flex",
+    flexShrink: 0,
+    alignSelf: "flex-start",
     "--width-switch-sm": "34px",
     "--width-switch-md": "40px",
     "--width-switch-lg": "52px",
     "--size-thumb-sm": "18px",
     "--size-thumb-md": "20px",
     "--size-thumb-lg": "28px",
-    "--thumb-translate": "0px",
-    "&:has(input:checked)": {
-      "--thumb-translate": "calc(var(--switch-width) - var(--thumb-width) - 4px)"
-    }
+    // Выключенное состояние у всех вариантов одинаковое
+    "--switch-bg-unchecked": i.fill.bg_tertiary,
+    "--thumb-bg-unchecked": i.fill.bg_primary
   }),
-  // Variant classes — each handles both checked and unchecked states
-  variant_accent: i({
-    "&:has(input:not(:checked))": {
-      "--switch-bg-color": t.fill.bg_tertiary,
-      "--thumb-bg-color": t.fill.bg_primary
-    },
-    "&:has(input:checked)": {
-      "--switch-bg-color": t.fill.accent_primary,
-      "--thumb-bg-color": t.fill.bg_primary
-    }
+  // Нативный input прозрачен и лежит поверх трека: остаётся в tab-порядке и
+  // в дереве доступности, а relative-контейнер не даёт фокусу прокручивать
+  // страницу к случайной точке.
+  input: t({
+    position: "absolute",
+    inset: 0,
+    width: "100%",
+    height: "100%",
+    margin: 0,
+    opacity: 0,
+    cursor: "inherit"
   }),
-  variant_secondary: i({
-    "&:has(input:not(:checked))": {
-      "--switch-bg-color": t.fill.bg_tertiary,
-      "--thumb-bg-color": t.fill.bg_primary
-    },
-    "&:has(input:checked)": {
-      "--switch-bg-color": t.fill.accent_secondary,
-      "--thumb-bg-color": t.fill.accent_primary
-    }
+  // Variant classes — задают цвета включённого состояния
+  variant_accent: t({
+    "--switch-bg-checked": i.fill.accent_primary,
+    "--thumb-bg-checked": i.fill.bg_primary
   }),
-  variant_positive: i({
-    "&:has(input:not(:checked))": {
-      "--switch-bg-color": t.fill.bg_tertiary,
-      "--thumb-bg-color": t.fill.bg_primary
-    },
-    "&:has(input:checked)": {
-      "--switch-bg-color": t.fill.positive_primary,
-      "--thumb-bg-color": t.fill.bg_primary
-    }
+  variant_secondary: t({
+    "--switch-bg-checked": i.fill.accent_secondary,
+    "--thumb-bg-checked": i.fill.accent_primary
   }),
-  variant_theme: i({
-    "&:has(input:not(:checked))": {
-      "--switch-bg-color": t.fill.bg_tertiary,
-      "--thumb-bg-color": t.fill.bg_primary
-    },
-    "&:has(input:checked)": {
-      "--switch-bg-color": t.fill.bg_secondary,
-      "--thumb-bg-color": t.fill.bg_tertiary
-    }
+  variant_positive: t({
+    "--switch-bg-checked": i.fill.positive_primary,
+    "--thumb-bg-checked": i.fill.bg_primary
+  }),
+  variant_theme: t({
+    "--switch-bg-checked": i.fill.bg_secondary,
+    "--thumb-bg-checked": i.fill.bg_tertiary
   }),
   // Size classes
-  size_sm: i({
+  size_sm: t({
     "--switch-width": "var(--width-switch-sm)",
-    "--switch-height": h.switch.sm,
+    "--switch-height": e.switch.sm,
     "--thumb-width": "var(--size-thumb-sm)",
     "--thumb-height": "var(--size-thumb-sm)"
   }),
-  size_md: i({
+  size_md: t({
     "--switch-width": "var(--width-switch-md)",
-    "--switch-height": h.switch.md,
+    "--switch-height": e.switch.md,
     "--thumb-width": "var(--size-thumb-md)",
     "--thumb-height": "var(--size-thumb-md)"
   }),
-  size_lg: i({
+  size_lg: t({
     "--switch-width": "var(--width-switch-lg)",
-    "--switch-height": h.switch.lg,
+    "--switch-height": e.switch.lg,
     "--thumb-width": "var(--size-thumb-lg)",
     "--thumb-height": "var(--size-thumb-lg)"
   }),
-  switch: i({
+  switch: t({
+    "--switch-bg-color": "var(--switch-bg-unchecked)",
+    "--thumb-bg-color": "var(--thumb-bg-unchecked)",
+    "--thumb-translate": "0px",
     width: "var(--switch-width)",
     height: "var(--switch-height)",
-    transition: e.general,
+    transition: c.general,
+    transitionProperty: "background-color",
     display: "flex",
     alignItems: "center",
     padding: 2,
     backgroundColor: "var(--switch-bg-color)",
-    borderRadius: r.xl
+    borderRadius: h.xl,
+    // Прозрачный outline не виден, но в режиме высокой контрастности
+    // (forced-colors) браузер красит его системным цветом — без него фон
+    // трека и ручки заменяется на Canvas и переключатель пропадает.
+    outline: "1px solid transparent",
+    "input:checked + &": {
+      "--switch-bg-color": "var(--switch-bg-checked)",
+      "--thumb-bg-color": "var(--thumb-bg-checked)",
+      "--thumb-translate": "calc(var(--switch-width) - var(--thumb-width) - 4px)"
+    },
+    "input:focus-visible + &": {
+      outline: `2px solid ${i.border.accent_primary}`,
+      outlineOffset: 2
+    }
   }),
-  thumb: i({
+  thumb: t({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     padding: 4,
-    transition: e.general,
+    transition: c.general,
+    transitionProperty: "transform, background-color",
     transform: "translateX(var(--thumb-translate, 0))",
     width: "var(--thumb-width)",
     height: "var(--thumb-height)",
     backgroundColor: "var(--thumb-bg-color)",
-    borderRadius: r.fullRound
+    borderRadius: h.fullRound,
+    outline: "1px solid transparent"
   }),
-  moon: i({
-    width: "100%",
-    height: "100%"
+  labelsContainer: t({
+    display: "flex",
+    flexDirection: "column",
+    gap: r.xs
   }),
-  fire: i({
+  icon: t({
     width: "100%",
     height: "100%"
   })