@webitel/ui-sdk 26.6.8 → 26.6.10

package/dist/{wt-tabs-DYV1SQZj.js → wt-tabs-BmJsgBhy.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as s, openBlock as a, normalizeClass as o, createElementVNode as r, Fragment as c, renderList as d, renderSlot as u, normalizeProps as f, guardReactiveProps as h, toDisplayString as v, normalizeStyle as m } from "vue";
-import { _ as p } from "./install-CrhatfOO.js";
+import { _ as p } from "./install-DG3Vb8gz.js";
 const _ = {
   name: "WtTabs",
   model: {

package/dist/{wt-tags-input-DNpyTlG_.js → wt-tags-input-qCbdSUeX.js}

@@ -1,7 +1,7 @@
-import { d as O } from "./index-DS0XRFUa.js";
-import { G as h, _ as E, C as S, M as z, H as A, J as B } from "./install-CrhatfOO.js";
-import { resolveComponent as n, resolveDirective as R, createElementBlock as I, openBlock as v, normalizeClass as P, createBlock as p, createCommentVNode as c, createVNode as o, mergeProps as g, withCtx as a, renderSlot as b, normalizeProps as f, guardReactiveProps as $, createTextVNode as d, toDisplayString as r, toHandlers as j, createSlots as q, withDirectives as V, createElementVNode as w, vShow as H, withModifiers as N } from "vue";
-const D = {
+import { d as O } from "./index-CInTafcj.js";
+import { K as h, _ as E, C as S, M as z, L as A, N as B } from "./install-DG3Vb8gz.js";
+import { resolveComponent as n, resolveDirective as R, createElementBlock as I, openBlock as v, normalizeClass as N, createBlock as p, createCommentVNode as c, createVNode as o, mergeProps as g, withCtx as a, renderSlot as b, normalizeProps as f, guardReactiveProps as $, createTextVNode as d, toDisplayString as r, toHandlers as P, createSlots as j, withDirectives as V, createElementVNode as w, vShow as q, withModifiers as D } from "vue";
+const H = {
   props: {
     // validation rules
     v: {
@@ -41,7 +41,7 @@ const D = {
 }, x = {
   name: "WtTagsInput",
   mixins: [
-    D,
+    H,
     A,
     // taggableMixin is used to add custom select values, see [https://my.webitel.com/browse/WTEL-3181
     B
@@ -142,10 +142,10 @@ const D = {
     }
   }
 }, F = { class: "multiselect__loading-wrapper" };
-function G(i, l, e, J, U, u) {
+function K(i, l, e, U, W, u) {
   const y = n("wt-label"), m = n("wt-icon-btn"), L = n("wt-chip"), M = n("wt-loader"), _ = n("vue-multiselect"), k = n("wt-message"), T = R("observe-visibility");
   return v(), I("div", {
-    class: P([{
+    class: N([{
       "wt-tags-input--disabled": i.disabled,
       "wt-tags-input--invalid": i.invalid,
       "wt-tags-input--loading": i.isLoading
@@ -177,7 +177,7 @@ function G(i, l, e, J, U, u) {
       taggable: e.taggable,
       "track-by": e.trackBy,
       class: "wt-tags-input__select"
-    }, j(i.listeners)), q({
+    }, P(i.listeners)), j({
       tag: a(({ option: s, remove: C }) => [
         o(L, { class: "multiselect__custom-tag" }, {
           default: a(() => [
@@ -186,7 +186,7 @@ function G(i, l, e, J, U, u) {
               color: "on-primary",
               icon: "close--filled",
               size: "sm",
-              onClick: (W) => C(s)
+              onClick: (G) => C(s)
             }, null, 8, ["onClick"])
           ], void 0, !0),
           _: 2
@@ -203,14 +203,14 @@ function G(i, l, e, J, U, u) {
           class: "multiselect__select",
           color: "active",
           icon: "arrow-down",
-          onMousedown: N(s, ["prevent", "stop"])
+          onMousedown: D(s, ["prevent", "stop"])
         }, null, 8, ["disabled", "onMousedown"])
       ]),
       beforeList: a(() => [
         V(w("div", F, [
           o(M, { size: "sm" })
         ], 512), [
-          [H, i.isLoading]
+          [q, i.isLoading]
         ])
       ]),
       _: 2
@@ -238,7 +238,7 @@ function G(i, l, e, J, U, u) {
     }, 8, ["color", "variant", "size"])) : c("", !0)
   ], 2);
 }
-const Y = /* @__PURE__ */ E(x, [["render", G], ["__scopeId", "data-v-ded5a365"]]);
+const Y = /* @__PURE__ */ E(x, [["render", K], ["__scopeId", "data-v-ded5a365"]]);
 export {
   Y as default
 };

package/dist/{wt-timepicker-D73auwVG.js → wt-timepicker-ZWMcU2fB.js}

@@ -1,5 +1,5 @@
 import { defineComponent as R, toRefs as O, computed as t, resolveComponent as w, createElementBlock as j, openBlock as d, normalizeClass as A, unref as o, createBlock as r, createCommentVNode as m, createElementVNode as F, mergeProps as G, withCtx as x, renderSlot as J, normalizeProps as K, guardReactiveProps as Q, createTextVNode as y, toDisplayString as B, nextTick as W } from "vue";
-import { B as X, z as Y, C as Z, M as ee, _ as le } from "./install-CrhatfOO.js";
+import { B as X, z as Y, C as Z, M as ee, _ as le } from "./install-DG3Vb8gz.js";
 const ae = { class: "wt-timepicker__wrapper" }, c = 3600, M = 60, te = /* @__PURE__ */ R({
   __name: "wt-timepicker",
   props: {

package/dist/{wt-tree-BPdJBRh5.js → wt-tree-DLBVmW7r.js}

@@ -1,6 +1,6 @@
 import { defineComponent as z, computed as L, ref as J, onMounted as K, watch as Q, resolveComponent as I, createElementBlock as v, openBlock as i, Fragment as x, createElementVNode as D, withDirectives as X, renderSlot as T, createBlock as w, createCommentVNode as b, renderList as A, normalizeClass as M, toDisplayString as O, createVNode as Y, withCtx as W, createSlots as U, normalizeProps as q, guardReactiveProps as F, vShow as Z, unref as N } from "vue";
-import { d as P } from "./index-DS0XRFUa.js";
-import { W as _, _ as R } from "./install-CrhatfOO.js";
+import { d as P } from "./index-CInTafcj.js";
+import { W as _, _ as R } from "./install-DG3Vb8gz.js";
 const ee = { class: "wt-tree-line" }, te = { class: "wt-tree-line__icon-wrapper" }, ae = { class: "wt-tree-line__label typo-body-1" }, le = /* @__PURE__ */ z({
   __name: "wt-tree-line",
   props: {

package/dist/{wt-tree-table-BeyiGp9p.js → wt-tree-table-DrsM7KGN.js}

@@ -1,5 +1,5 @@
-import { computed as C, unref as B, defineComponent as z, ref as M, onMounted as D, resolveComponent as L, createElementBlock as d, openBlock as l, Fragment as $, createElementVNode as u, createCommentVNode as b, normalizeClass as T, renderList as m, renderSlot as p, createBlock as x, createTextVNode as U, toDisplayString as H, createSlots as W, withCtx as I, toRef as O, normalizeStyle as Q, withModifiers as j, createVNode as q } from "vue";
-import { B as G, P as R, Q as J, _ as F, F as X } from "./install-CrhatfOO.js";
+import { computed as C, unref as B, defineComponent as V, ref as D, onMounted as F, resolveComponent as z, createElementBlock as d, openBlock as l, Fragment as $, createElementVNode as u, createCommentVNode as b, normalizeClass as N, renderList as m, renderSlot as p, createBlock as x, createTextVNode as L, toDisplayString as H, createSlots as W, withCtx as T, toRef as J, normalizeStyle as O, withModifiers as j, createVNode as q } from "vue";
+import { B as G, T as R, U as Q, _ as M, J as X } from "./install-DG3Vb8gz.js";
 const Y = ({ headers: e }) => {
   const { t: y } = G();
   return {
@@ -16,7 +16,7 @@ const Y = ({ headers: e }) => {
 }, _ = {
   key: 0,
   class: "wt-tree-table-td__actions typo-body-1"
-}, ee = { class: "wt-tree-table-td__content" }, te = /* @__PURE__ */ z({
+}, ee = { class: "wt-tree-table-td__content" }, te = /* @__PURE__ */ V({
   __name: "wt-tree-table-row",
   props: {
     data: {},
@@ -34,7 +34,7 @@ const Y = ({ headers: e }) => {
     "expanded-collapse"
   ],
   setup(e, { emit: y }) {
-    const a = e, r = y, h = M(!0), N = C(() => a.nestingLevel), A = C(() => a.nestingLevel + 1), P = C(() => a.selectedElements.includes(a.data)), k = () => {
+    const a = e, r = y, h = D(!0), I = C(() => a.nestingLevel), A = C(() => a.nestingLevel + 1), P = C(() => a.selectedElements.includes(a.data)), k = () => {
       h.value = !1, r("expanded-collapse");
     }, g = (c, i = 0) => {
       if (c[a.searchedProp] && i) return !0;
@@ -45,13 +45,13 @@ const Y = ({ headers: e }) => {
       }
       return !1;
     };
-    return D(() => {
+    return F(() => {
       a.searchedProp && g(a.data) && k();
     }), (c, i) => {
-      const f = L("wt-tree-table-row", !0);
+      const f = z("wt-tree-table-row", !0);
       return l(), d($, null, [
         u("tr", {
-          class: T([[{ "wt-tree-table-row--alternate": e.rowPosition % 2 }], "wt-tree-table-row"])
+          class: N([[{ "wt-tree-table-row--alternate": e.rowPosition % 2 }], "wt-tree-table-row"])
         }, [
           (l(!0), d($, null, m(e.dataHeaders, (S, E) => (l(), d("td", {
             key: E,
@@ -59,7 +59,7 @@ const Y = ({ headers: e }) => {
           }, [
             u("div", Z, [
               E ? b("", !0) : (l(), d("div", K, [
-                (l(!0), d($, null, m(N.value, (t) => (l(), d("div", {
+                (l(!0), d($, null, m(I.value, (t) => (l(), d("div", {
                   key: t,
                   class: "wt-tree-table-row__tree-space"
                 }))), 128)),
@@ -71,7 +71,7 @@ const Y = ({ headers: e }) => {
                     select: t
                   }))
                 }, null, 8, ["selected"])) : b("", !0),
-                e.data[e.childrenProp] ? (l(), x(J, {
+                e.data[e.childrenProp] ? (l(), x(Q, {
                   key: 1,
                   icon: h.value ? "tree-expand" : "tree-collapse",
                   onClick: i[1] || (i[1] = (t) => h.value = !h.value)
@@ -81,7 +81,7 @@ const Y = ({ headers: e }) => {
                 index: e.rowPosition,
                 item: e.data
               }, () => [
-                U(H(e.data[S.value]), 1)
+                L(H(e.data[S.value]), 1)
               ], !0)
             ])
           ]))), 128)),
@@ -110,7 +110,7 @@ const Y = ({ headers: e }) => {
             select: t.select
           }))
         }, W({
-          actions: I(({ item: t }) => [
+          actions: T(({ item: t }) => [
             p(c.$slots, "actions", {
               index: e.rowPosition,
               item: t
@@ -120,7 +120,7 @@ const Y = ({ headers: e }) => {
         }, [
           m(e.dataHeaders, (t, o) => ({
             name: t.value,
-            fn: I(({ item: n }) => [
+            fn: T(({ item: n }) => [
               p(c.$slots, t.value, {
                 index: e.rowPosition,
                 item: n
@@ -133,10 +133,10 @@ const Y = ({ headers: e }) => {
       ], 64);
     };
   }
-}), ae = /* @__PURE__ */ F(te, [["__scopeId", "data-v-8381ad70"]]), le = { class: "wt-tree-table wt-scrollbar" }, se = { class: "wt-tree-table-wrapper" }, re = { class: "wt-tree-table-head" }, oe = { class: "wt-tree-table-tr wt-tree-table-tr-head" }, ne = ["onClick"], de = { class: "wt-tree-table-th__text" }, ce = {
+}), ae = /* @__PURE__ */ M(te, [["__scopeId", "data-v-8381ad70"]]), le = { class: "wt-tree-table wt-scrollbar" }, se = { class: "wt-tree-table-wrapper" }, re = { class: "wt-tree-table-head" }, oe = { class: "wt-tree-table-tr wt-tree-table-tr-head" }, ne = ["onClick"], de = { class: "wt-tree-table-th__text" }, ce = {
   key: 0,
   class: "wt-tree-table-th__actions"
-}, ie = { class: "wt-tree-table-th__content" }, ue = { class: "wt-tree-table-body" }, he = /* @__PURE__ */ z({
+}, ie = { class: "wt-tree-table-th__content" }, ue = { class: "wt-tree-table-body" }, he = /* @__PURE__ */ V({
   __name: "wt-tree-table",
   props: {
     headers: {},
@@ -153,7 +153,7 @@ const Y = ({ headers: e }) => {
     "update:selected"
   ],
   setup(e, { emit: y }) {
-    const a = e, r = y, h = (t) => t[a.childrenProp] && Array.isArray(t[a.childrenProp]), N = (t) => {
+    const a = e, r = y, h = (t) => t[a.childrenProp] && Array.isArray(t[a.childrenProp]), I = (t) => {
       const o = [], n = (s) => {
         if (s._isSelected)
           return [
@@ -167,8 +167,8 @@ const Y = ({ headers: e }) => {
         o.push(s), h(s) && s[a.childrenProp].forEach(n);
       };
       return t.forEach(n), o;
-    }, P = C(() => a.selected || N(a.data)), k = C(() => P.value.length === A(a.data).length && A(a.data).length > 0), { tableHeaders: g } = Y({
-      headers: O(a, "headers")
+    }, P = C(() => a.selected || I(a.data)), k = C(() => P.value.length === A(a.data).length && A(a.data).length > 0), { tableHeaders: g } = Y({
+      headers: J(a, "headers")
     }), c = ({ sort: t }) => a.sortable && t !== void 0, i = (t) => {
       if (!c(t)) return;
       const o = X(t.sort);
@@ -194,24 +194,24 @@ const Y = ({ headers: e }) => {
       ) : t._isSelected = !t._isSelected;
     };
     return (t, o) => {
-      const n = L("wt-icon");
+      const n = z("wt-icon");
       return l(), d("div", le, [
         u("table", se, [
           u("thead", re, [
             u("tr", oe, [
               (l(!0), d($, null, m(B(g), (s, v) => (l(), d("th", {
                 key: String(v) + s?.sort,
-                class: T([[
+                class: N([[
                   {
                     "wt-tree-table-th--sortable": c(s)
                   },
                   `wt-tree-table-th--sort-${s.sort}`
                 ], "wt-tree-table-th typo-body-1"]),
-                style: Q(s.width ? `min-width:${s.width}` : ""),
+                style: O(s.width ? `min-width:${s.width}` : ""),
                 onClick: (w) => i(s)
               }, [
                 u("div", {
-                  class: T(["wt-tree-table-th__content", { "wt-tree-table-th__content--selectable": v === 0 && e.selectable }])
+                  class: N(["wt-tree-table-th__content", { "wt-tree-table-th__content--selectable": v === 0 && e.selectable }])
                 }, [
                   v === 0 && e.selectable ? (l(), d("div", {
                     key: 0,
@@ -257,19 +257,19 @@ const Y = ({ headers: e }) => {
               "searched-prop": e.searchedProp,
               "onUpdate:selected": o[1] || (o[1] = (w) => E(w.data, w.select))
             }, W({
-              actions: I(({ item: w }) => [
+              actions: T(({ item: w }) => [
                 p(t.$slots, "actions", { item: w }, void 0, !0)
               ]),
               _: 2
             }, [
               m(B(g), (w, we) => ({
                 name: w.value,
-                fn: I(({ item: V }) => [
+                fn: T(({ item: U }) => [
                   p(t.$slots, w.value, {
                     index: v,
-                    item: V
+                    item: U
                   }, () => [
-                    U(H(V[w.value]), 1)
+                    L(H(U[w.value]), 1)
                   ], !0)
                 ])
               }))
@@ -279,7 +279,7 @@ const Y = ({ headers: e }) => {
       ]);
     };
   }
-}), ve = /* @__PURE__ */ F(he, [["__scopeId", "data-v-721c9bc6"]]);
+}), ve = /* @__PURE__ */ M(he, [["__scopeId", "data-v-721c9bc6"]]);
 export {
   ve as default
 };

package/dist/{wt-type-extension-value-input-Bj7JR6iO.js → wt-type-extension-value-input-PBoLIWfP.js}

@@ -1,9 +1,9 @@
 import { defineComponent as q, mergeModels as I, useModel as T, computed as r, resolveComponent as h, createBlock as P, renderSlot as m, createCommentVNode as $, unref as l, openBlock as S, mergeProps as s, createVNode as c } from "vue";
-import { S as x } from "./contacts-D5U72a9m.js";
-import "./index-C7YsoP7b.js";
+import { S as x } from "./contacts-Ce2Xkpk0.js";
+import "./index-CMFdV-0C.js";
 import "lodash-es";
 import "@aliasedDeps/api-services/axios";
-import { B as N, ah as W, ai as V, aj as E } from "./install-CrhatfOO.js";
+import { B as N, ai as W, aj as V, ak as E } from "./install-DG3Vb8gz.js";
 const a = {
   Text: "string",
   Number: "int32",

package/dist/{wt-vidstack-player-CYokOVIB.js → wt-vidstack-player-Xs3Xo-J8.js}

@@ -1,6 +1,6 @@
 import { defineComponent as ut, inject as se, createElementBlock as yt, openBlock as U, normalizeClass as ie, unref as et, createElementVNode as ht, renderSlot as ft, createVNode as W, computed as Hs, onMounted as Ii, onBeforeUnmount as Vi, createBlock as zt, createCommentVNode as Wt, toDisplayString as Di, createSlots as Fs, withCtx as jt, resolveComponent as Ri, useTemplateRef as Oi, ref as gs, provide as Ni, toRefs as Hi } from "vue";
-import { a as q, c as bt, i as G, b as Ne, d as S, e as lt, f as He, l as N, s as ae, g as Bs, E as Gs, D as L, h as z, o as P, j as Fi, k as f, m as l, n as M, p as Us, q as Bi, r as pe, t as j, V as st, v as w, C as b, S as vt, w as Ot, x as p, y as dt, z as Y, I as Ks, A as Gi, B as Ui, F as at, G as We, H as Qs, J as ys, K as je, L as zs, M as Ct, N as Ye, O as ge, P as Ki, Q as At, R as Qi, U as zi, W as Wi, X as ji, Y as Yi, Z as Xi, _ as Ji, $ as Zi, a0 as ta, a1 as Ws, a2 as T, a3 as I, a4 as ye, a5 as ea, a6 as Nt, a7 as K, a8 as sa, a9 as ia, aa, ab as na, ac as bs, ad as ra, ae as oa, af as v, ag as y, ah as ha, ai as la, T as da, u as ca } from "./useVidstackSrc-6MX1IOwT.js";
-import { T as ua, U as pa, V as ma, X as fa, _ as $t, Q as be, C as Q, Y as ga } from "./install-CrhatfOO.js";
+import { a as q, c as bt, i as G, b as Ne, d as S, e as lt, f as He, l as N, s as ae, g as Bs, E as Gs, D as L, h as z, o as P, j as Fi, k as f, m as l, n as M, p as Us, q as Bi, r as pe, t as j, V as st, v as w, C as b, S as vt, w as Ot, x as p, y as dt, z as Y, I as Ks, A as Gi, B as Ui, F as at, G as We, H as Qs, J as ys, K as je, L as zs, M as Ct, N as Ye, O as ge, P as Ki, Q as At, R as Qi, U as zi, W as Wi, X as ji, Y as Yi, Z as Xi, _ as Ji, $ as Zi, a0 as ta, a1 as Ws, a2 as T, a3 as I, a4 as ye, a5 as ea, a6 as Nt, a7 as K, a8 as sa, a9 as ia, aa, ab as na, ac as bs, ad as ra, ae as oa, af as v, ag as y, ah as ha, ai as la, T as da, u as ca } from "./useVidstackSrc-BDr0pjff.js";
+import { X as ua, Y as pa, Z as ma, $ as fa, _ as $t, U as be, C as Q, a0 as ga } from "./install-DG3Vb8gz.js";
 import { _ as ya } from "./wt-slider.vue_vue_type_script_setup_true_lang-DlaRDHxo.js";
 const js = bt();
 function $() {
@@ -2070,7 +2070,7 @@ class pn {
     return "audio";
   }
   async load(t) {
-    return new (await import("./vidstack-audio-BMocFppz.js")).AudioProvider(this.target, t);
+    return new (await import("./vidstack-audio-CU-RScBZ.js")).AudioProvider(this.target, t);
   }
 }
 class ts {
@@ -2083,7 +2083,7 @@ class ts {
     return "video";
   }
   async load(t) {
-    return new (await import("./vidstack-video-CbSdoKZV.js")).VideoProvider(this.target, t);
+    return new (await import("./vidstack-video-DMVd9jPV.js")).VideoProvider(this.target, t);
   }
 }
 class es extends ts {
@@ -2093,7 +2093,7 @@ class es extends ts {
     return es.supported && We(t);
   }
   async load(t) {
-    return new (await import("./vidstack-hls-COAkdUyc.js")).HLSProvider(this.target, t);
+    return new (await import("./vidstack-hls-DZ_8ee3w.js")).HLSProvider(this.target, t);
   }
 }
 class ss extends ts {
@@ -2103,7 +2103,7 @@ class ss extends ts {
     return ss.supported && je(t);
   }
   async load(t) {
-    return new (await import("./vidstack-dash-C3BuY7GK.js")).DASHProvider(this.target, t);
+    return new (await import("./vidstack-dash-DABZ0hNt.js")).DASHProvider(this.target, t);
   }
 }
 class mn {
@@ -2125,7 +2125,7 @@ class mn {
     return "video";
   }
   async load(t) {
-    return new (await import("./vidstack-vimeo-BEPBgLUA.js")).VimeoProvider(this.target, t);
+    return new (await import("./vidstack-vimeo-D8V_lECY.js")).VimeoProvider(this.target, t);
   }
   async loadPoster(t, e, s) {
     const { resolveVimeoVideoId: i, getVimeoVideoInfo: n } = await import("./vidstack-krOAtKMi-C50BTxmn.js");
@@ -2157,7 +2157,7 @@ class fn {
     return "video";
   }
   async load(t) {
-    return new (await import("./vidstack-youtube-o8duODhC.js")).YouTubeProvider(this.target, t);
+    return new (await import("./vidstack-youtube-ytyeMTdk.js")).YouTubeProvider(this.target, t);
   }
   async loadPoster(t, e, s) {
     const { findYouTubePoster: i, resolveYouTubeVideoId: n } = await import("./vidstack-Dm1xEU9Q-CXHNvShT.js"), r = S(t.src) && n(t.src);
@@ -2625,7 +2625,7 @@ class $n extends Mt {
         throw i.code = "CAST_NOT_AVAILABLE", i;
       }
       if (ne("https://www.gstatic.com"), !this.#v) {
-        const i = await import("./vidstack-D2pY00kU-Ct0S_jAc.js").then((n) => n.v);
+        const i = await import("./vidstack-D2pY00kU-BIiell5z.js").then((n) => n.v);
         this.#v = new i.GoogleCastLoader();
       }
       await this.#v.prompt(this.#s), t && this.#e.queue.enqueue("media-google-cast-request", t);
@@ -8022,7 +8022,7 @@ class qr extends v(HTMLElement, li) {
     if (this.#e?.classList.contains("vds-google-cast"))
       return this.#e;
     const t = document.createElement("div");
-    return t.classList.add("vds-google-cast"), import("./vidstack-D_-9AA6_-CX-CMxXR.js").then(({ insertContent: e }) => {
+    return t.classList.add("vds-google-cast"), import("./vidstack-D_-9AA6_-BKMs63U_.js").then(({ insertContent: e }) => {
       e(t, this.#t.$state);
     }), t;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.6.8",
+	"version": "26.6.10",
 	"private": false,
 	"scripts": {
 		"dev": "npm run docs:dev",

package/src/assets/icons/sprite/index.ts

@@ -144,6 +144,11 @@ import pause from './pause.svg?raw';
 import pauseFilled from './pause--filled.svg?raw';
 import pin from './pin.svg?raw';
 import play from './play.svg?raw';
+import playback050 from './playback-0.50.svg?raw';
+import playback075 from './playback-0.75.svg?raw';
+import playback100 from './playback-1.00.svg?raw';
+import playback150 from './playback-1.50.svg?raw';
+import playback175 from './playback-1.75.svg?raw';
 import playerEnterFullscreen from './player-enter-fullscreen.svg?raw';
 import playerExitFullscreen from './player-exit-fullscreen.svg?raw';
 import plus from './plus.svg?raw';
@@ -378,6 +383,11 @@ export default objCamelToKebab({
 	pause,
 	'pause--filled': pauseFilled,
 	play,
+	'playback-0.50': playback050,
+	'playback-0.75': playback075,
+	'playback-1.00': playback100,
+	'playback-1.50': playback150,
+	'playback-1.75': playback175,
 	table,
 	treeExpand,
 	prompter,

package/src/assets/icons/sprite/playback-0.50.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.59678 7C8.1907 7 8.72217 7.19433 9.18882 7.58322C9.65506 7.97196 10.0226 8.54093 10.2911 9.29025C10.5668 10.0309 10.7054 10.9344 10.7054 11.999C10.7054 13.0638 10.5668 13.9714 10.2911 14.7214C10.0225 15.462 9.65541 16.0279 9.18882 16.4168C8.72217 16.8057 8.1907 17 7.59678 17C7.01019 16.9999 6.47976 16.8055 6.00622 16.4168C5.53957 16.0279 5.1726 15.4621 4.90393 14.7214C4.63526 13.9714 4.5 13.0638 4.5 11.999C4.50003 10.9344 4.63528 10.0309 4.90393 9.29025C5.1725 8.54091 5.53995 7.97195 6.00622 7.58322C6.47976 7.19448 7.01019 7.00015 7.59678 7ZM7.59678 8.56946C7.26473 8.56963 6.9675 8.69359 6.70607 8.94342C6.4516 9.18417 6.25084 9.56002 6.10239 10.0692C5.96103 10.5691 5.88936 11.2122 5.88933 11.999C5.88933 12.7768 5.96099 13.4216 6.10239 13.9308C6.25074 14.4393 6.45194 14.8183 6.70607 15.0682C6.9675 15.3088 7.26473 15.4304 7.59678 15.4305C7.94323 15.4305 8.24479 15.3089 8.49933 15.0682C8.75349 14.8183 8.95134 14.4393 9.09264 13.9308C9.24112 13.4216 9.31606 12.7768 9.31606 11.999C9.31604 11.2123 9.24106 10.5691 9.09264 10.0692C8.95125 9.55998 8.75382 9.18416 8.49933 8.94342C8.24479 8.69342 7.94323 8.56946 7.59678 8.56946Z"/>
+<path d="M19.0651 8.65278H15.8736L15.7108 10.9023H16.424C17.1593 10.9023 17.7496 11.0326 18.1951 11.2918C18.6474 11.5417 18.9769 11.8924 19.182 12.3459C19.3941 12.7903 19.5001 13.3006 19.5001 13.8746C19.5 14.4394 19.394 14.9584 19.182 15.4305C18.9698 15.9026 18.6437 16.2809 18.2054 16.5679C17.7742 16.8549 17.2261 17 16.5616 17C16.0386 16.9999 15.5261 16.9018 15.0243 16.7074C14.5294 16.5037 14.1119 16.2261 13.7726 15.8742L14.3555 14.4714C14.6242 14.7585 14.9503 14.9911 15.3321 15.167C15.7208 15.3428 16.1239 15.4305 16.5409 15.4305C17.0286 15.4305 17.4104 15.2958 17.6861 15.0275C17.9688 14.7591 18.1106 14.3978 18.1107 13.9444C18.1107 13.6388 18.0504 13.3698 17.9302 13.1383C17.8171 12.9069 17.6117 12.7317 17.3147 12.6113C17.0248 12.491 16.6252 12.4292 16.1162 12.4292H14.3245L14.7062 7.13757H19.0651V8.65278Z"/>
+<path d="M12.3389 14.6516C12.5791 14.6516 12.7847 14.7586 12.9544 14.9713C13.124 15.1749 13.2088 15.4529 13.2089 15.8045C13.2089 16.1378 13.124 16.4155 12.9544 16.6377C12.7847 16.8506 12.5793 16.9574 12.3389 16.9574C12.0988 16.9572 11.8943 16.8504 11.7248 16.6377C11.5552 16.4155 11.4703 16.1378 11.4703 15.8045C11.4704 15.4529 11.5552 15.1749 11.7248 14.9713C11.8943 14.7588 12.0989 14.6518 12.3389 14.6516Z"/>
+</svg>

package/src/assets/icons/sprite/playback-0.75.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.22726 7C4.8459 7 5.39848 7.1942 5.88463 7.58268C6.37095 7.97156 6.75557 8.54169 7.03557 9.29167C7.32286 10.0323 7.46526 10.9354 7.46526 12C7.46525 13.0643 7.32273 13.9716 7.03557 14.7214C6.75557 15.4621 6.37095 16.0268 5.88463 16.4157C5.39834 16.8045 4.84614 17 4.22726 17C3.61573 17 3.06354 16.8045 2.56989 16.4157C2.08359 16.0268 1.70048 15.4621 1.42048 14.7214C1.14057 13.9715 1.00002 13.0645 1 12C1 10.9352 1.14048 10.0324 1.42048 9.29167C1.70048 8.54174 2.08359 7.97154 2.56989 7.58268C3.06341 7.19412 3.61596 7.00003 4.22726 7ZM4.22726 8.56901C3.881 8.56905 3.57142 8.69503 3.29883 8.94499C3.03374 9.18573 2.82431 9.56066 2.66964 10.0697C2.52229 10.5696 2.44866 11.213 2.44866 12C2.44867 12.7777 2.52228 13.4211 2.66964 13.9303C2.82437 14.4395 3.0336 14.8197 3.29883 15.0697C3.57139 15.3103 3.88107 15.431 4.22726 15.431C4.58809 15.431 4.90128 15.3101 5.16643 15.0697C5.4317 14.8197 5.63904 14.4396 5.78641 13.9303C5.94111 13.4212 6.01812 12.7776 6.01814 12C6.01814 11.2132 5.94105 10.5696 5.78641 10.0697C5.63904 9.56043 5.43169 9.18572 5.16643 8.94499C4.90117 8.695 4.58832 8.56901 4.22726 8.56901Z"/>
+<path d="M22.5473 8.65365H19.2218L19.053 10.903H19.7942C20.5604 10.903 21.1762 11.0329 21.6403 11.292C22.1119 11.542 22.4548 11.8946 22.6685 12.3483C22.8895 12.7927 23 13.3027 23 13.8766C22.9999 14.441 22.8894 14.9591 22.6685 15.431C22.4475 15.9032 22.1079 16.2833 21.6511 16.5703C21.2017 16.8572 20.6309 17 19.9385 17C19.3934 17 18.8594 16.903 18.3364 16.7087C17.8206 16.505 17.3856 16.2271 17.0319 15.8753L17.6396 14.4723C17.9195 14.7592 18.2579 14.9914 18.6556 15.1673C19.0608 15.3432 19.4822 15.431 19.917 15.431C20.4248 15.4309 20.8222 15.297 21.1094 15.029C21.4041 14.7605 21.5513 14.3987 21.5513 13.945C21.5513 13.6396 21.4893 13.3707 21.3641 13.1393C21.2462 12.908 21.032 12.7323 20.7227 12.612C20.4206 12.4917 20.0038 12.4313 19.4735 12.4313H17.6059L18.0033 7.13997H22.5473V8.65365Z"/>
+<path d="M9.1702 14.653C9.42024 14.6532 9.63353 14.7596 9.81013 14.972C9.98691 15.1756 10.0755 15.4537 10.0756 15.8053C10.0756 16.1387 9.98697 16.4165 9.81013 16.6387C9.63345 16.8514 9.42041 16.9575 9.1702 16.9577C8.91967 16.9577 8.70558 16.8516 8.52874 16.6387C8.35192 16.4165 8.26325 16.1386 8.26325 15.8053C8.26332 15.4537 8.35196 15.1756 8.52874 14.972C8.70552 14.7593 8.91983 14.653 9.1702 14.653Z"/>
+<path d="M16.6805 8.34766L13.6727 16.8617H12.1366L15.0462 8.66829H12.0046V10.3203H10.6664V7.13997H16.6805V8.34766Z"/>
+</svg>

package/src/assets/icons/sprite/playback-1.00.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.2075 16.8624H11.7075V8.6528H10V7.13953H13.2075V16.8624Z"/>
+</svg>

package/src/assets/icons/sprite/playback-1.50.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9492 14.6543C11.2216 14.6543 11.4542 14.759 11.6465 14.9717C11.8387 15.1752 11.9354 15.4533 11.9355 15.8047C11.9355 16.1379 11.8388 16.4175 11.6465 16.6396C11.4542 16.8523 11.2215 16.957 10.9492 16.957C10.6768 16.957 10.4433 16.8524 10.251 16.6396C10.0587 16.4175 9.96289 16.1379 9.96289 15.8047C9.96305 15.4534 10.0589 15.1752 10.251 14.9717C10.4433 14.7588 10.6768 14.6543 10.9492 14.6543Z"/>
+<path d="M18.5156 8.51367H15.1904L15.0215 10.7627H15.7627C16.5287 10.7627 17.1443 10.8933 17.6084 11.1523C18.0799 11.4023 18.423 11.7545 18.6367 12.208C18.8577 12.6523 18.9687 13.1625 18.9688 13.7363C18.9686 14.3007 18.8576 14.8191 18.6367 15.291C18.4157 15.7632 18.076 16.1436 17.6191 16.4307C17.1699 16.7173 16.5992 16.8603 15.9072 16.8604C15.3621 16.8604 14.8277 16.7627 14.3047 16.5684C13.789 16.3647 13.3537 16.0871 13 15.7354L13.6084 14.332C13.8882 14.6189 14.2264 14.8515 14.624 15.0273C15.0293 15.2032 15.451 15.291 15.8857 15.291C16.3933 15.2908 16.791 15.1567 17.0781 14.8887C17.3726 14.6202 17.5195 14.2582 17.5195 13.8047C17.5194 13.4994 17.4572 13.2303 17.332 12.999C17.2141 12.768 17.0004 12.5919 16.6914 12.4717C16.3893 12.3514 15.9717 12.291 15.4414 12.291H13.5742L13.9717 7H18.5156V8.51367Z"/>
+<path d="M8.34277 16.7188H6.7793V8.5127H5V7H8.34277V16.7188Z"/>
+</svg>

package/src/assets/icons/sprite/playback-1.75.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.98145 14.6553C8.25518 14.6554 8.48935 14.7608 8.68262 14.9736C8.87569 15.1771 8.9725 15.4553 8.97266 15.8066C8.97263 16.1399 8.87593 16.4194 8.68262 16.6416C8.48937 16.8543 8.25513 16.9589 7.98145 16.959C7.70756 16.959 7.47265 16.8544 7.2793 16.6416C7.086 16.4194 6.98929 16.1398 6.98926 15.8066C6.98942 15.4554 7.08625 15.1771 7.2793 14.9736C7.47267 14.7607 7.70752 14.6553 7.98145 14.6553Z"/>
+<path d="M5.36035 16.7363H3.78906V8.52832H2V7.01562H5.36035V16.7363Z"/>
+<path d="M21.8809 8.51367H18.5557L18.3867 10.7627H19.1279C19.894 10.7627 20.5095 10.8933 20.9736 11.1523C21.4451 11.4023 21.7883 11.7545 22.002 12.208C22.2229 12.6523 22.3339 13.1625 22.334 13.7363C22.3339 14.3007 22.2228 14.8191 22.002 15.291C21.7809 15.7632 21.4412 16.1436 20.9844 16.4307C20.5351 16.7173 19.9645 16.8603 19.2725 16.8604C18.7274 16.8604 18.1929 16.7627 17.6699 16.5684C17.1542 16.3647 16.7189 16.0871 16.3652 15.7354L16.9736 14.332C17.2535 14.6189 17.5916 14.8515 17.9893 15.0273C18.3945 15.2032 18.8163 15.291 19.251 15.291C19.7585 15.2908 20.1562 15.1567 20.4434 14.8887C20.7378 14.6202 20.8848 14.2582 20.8848 13.8047C20.8847 13.4994 20.8224 13.2303 20.6973 12.999C20.5793 12.768 20.3656 12.5919 20.0566 12.4717C19.7546 12.3514 19.3369 12.291 18.8066 12.291H16.9395L17.3369 7H21.8809V8.51367Z"/>
+<path d="M16.0137 8.20801L13.0059 16.7217H11.4697L14.3799 8.52832H11.3379V10.1807H10V7H16.0137V8.20801Z"/>
+</svg>

package/src/components/_shared/settings-panel/components/speed-settings/speed-settings.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="speed-settings">
+    <div class="speed-settings__controls">
+      <wt-button
+        :size="ComponentSize.SM"
+        :disabled="modelValue <= minSpeed"
+        class="speed-settings__step-button"
+        variant="outlined"
+        color="secondary"
+        @click="handleDecrease"
+      >
+        <template #default>
+          <wt-icon icon="minus" :size="ComponentSize.SM" />
+        </template>
+      </wt-button>
+
+      <span class="speed-settings__label">{{ formattedSpeed }}</span>
+
+      <wt-button
+        :size="ComponentSize.SM"
+        :disabled="modelValue >= maxSpeed"
+        class="speed-settings__step-button"
+        variant="outlined"
+        color="secondary"
+        @click="handleIncrease"
+      >
+        <template #default>
+          <wt-icon icon="plus" :size="ComponentSize.SM" />
+        </template>
+      </wt-button>
+    </div>
+
+    <wt-slider
+      class="speed-settings__slider"
+      :model-value="modelValue"
+      :min="minSpeed"
+      :max="maxSpeed"
+      :step="speedStep"
+      @update:model-value="$emit('update:modelValue', $event)"
+    />
+
+    <div class="speed-settings__presets">
+      <wt-button
+        v-for="speedPreset in speedPresets"
+        :key="speedPreset.speed"
+        :size="ComponentSize.SM"
+        variant="outlined"
+        class="speed-settings__preset-button"
+        color="secondary"
+        @click="$emit('update:modelValue', speedPreset.speed)"
+      >
+        <template #default>
+          <wt-icon :icon="speedPreset.icon" :size="ComponentSize.SM" />
+        </template>
+      </wt-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { WtButton, WtIcon, WtSlider } from '../../../../../components';
+import { ComponentSize } from '../../../../../enums';
+
+interface Props {
+	modelValue?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: 1,
+});
+
+const emit = defineEmits<{
+	'update:modelValue': [
+		value: number,
+	];
+}>();
+
+const minSpeed = 0.25;
+const maxSpeed = 3;
+const speedStep = 0.25;
+const speedPresets = [
+	{
+		speed: 0.5,
+		icon: 'playback-0.50',
+	},
+	{
+		speed: 0.75,
+		icon: 'playback-0.75',
+	},
+	{
+		speed: 1,
+		icon: 'playback-1.00',
+	},
+	{
+		speed: 1.5,
+		icon: 'playback-1.50',
+	},
+	{
+		speed: 1.75,
+		icon: 'playback-1.75',
+	},
+];
+
+const formattedSpeed = computed(() => `${props.modelValue.toFixed(2)}x`);
+
+function handleDecrease() {
+	const decreasedSpeed = parseFloat((props.modelValue - speedStep).toFixed(2));
+	const clampedSpeed = Math.max(minSpeed, decreasedSpeed);
+	emit('update:modelValue', clampedSpeed);
+}
+
+function handleIncrease() {
+	const increasedSpeed = parseFloat((props.modelValue + speedStep).toFixed(2));
+	const clampedSpeed = Math.min(maxSpeed, increasedSpeed);
+	emit('update:modelValue', clampedSpeed);
+}
+</script>
+
+<style scoped>
+.speed-settings {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm);
+  min-width: 192px;
+}
+.speed-settings__step-button {
+  min-width: 0;
+  padding: var(--spacing-xs);
+}
+
+.speed-settings__controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+}
+
+.speed-settings__label {
+  font-weight: 600;
+  font-size: var(--font-size-lg, 1rem);
+  text-align: center;
+  flex: 1;
+}
+
+.speed-settings__slider {
+  width: 100%;
+}
+
+.speed-settings__presets {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--spacing-xs);
+}
+
+.speed-settings__preset-button {
+  min-width: 0;
+  padding: var(--spacing-xs);
+}
+</style>