@shtabapp/ui-kit 1.84.0 → 1.85.0

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [@shtabapp/ui-kit-v1.85.0](https://gitlab.com/mstikharev/shtab-ui-kit/compare/@shtabapp/ui-kit@1.84.0...@shtabapp/ui-kit@1.85.0) (2026-10-28)
+
+### Features
+
+* **list:** строка-кнопка iconOnly для свёрнутого меню (rail) ([301ba86](https://gitlab.com/mstikharev/shtab-ui-kit/commit/301ba864d96df2d6f48f4e8755f1678c01692fb8))
+* **segment-control:** форма rounded ([61177b7](https://gitlab.com/mstikharev/shtab-ui-kit/commit/61177b7f6f44db73e4449191c533a5cca5a496f6))
+
+### Bug Fixes
+
+* **textarea:** шрифт поля 14px, как у SInput и SSelect ([46df9dc](https://gitlab.com/mstikharev/shtab-ui-kit/commit/46df9dc626a259dd3a92043fee9af4cfd1c50968))
+
 ## [@shtabapp/ui-kit-v1.84.0](https://gitlab.com/mstikharev/shtab-ui-kit/compare/@shtabapp/ui-kit@1.83.0...@shtabapp/ui-kit@1.84.0) (2026-10-28)
 
 ### Features

package/dist/{SColorPicker-BMpT38eb.js → SColorPicker-BfJD4dt_.js}

@@ -5,7 +5,7 @@ import { i as s, n as c, r as l, t as u } from "./SButton-n2Zuqh04.js";
 import { s as d } from "./useFloatingOverlay-TxzVisMJ.js";
 import { t as f } from "./SDropdown-aWjZrahp.js";
 import { t as p } from "./SDropdownMenu-2koPU6IG.js";
-import { t as m } from "./SSelect-CGeBR5qb.js";
+import { t as m } from "./SSelect-DM4-PF5I.js";
 import { Fragment as h, computed as g, createBlock as _, createElementBlock as v, createElementVNode as y, createTextVNode as b, createVNode as x, defineComponent as S, mergeModels as C, mergeProps as w, nextTick as T, normalizeClass as E, normalizeStyle as D, onMounted as O, openBlock as k, ref as A, shallowRef as j, toDisplayString as M, toRef as N, unref as P, useModel as F, useTemplateRef as I, vModelText as L, watch as R, withCtx as z, withDirectives as B } from "vue";
 import { ESColorSwatchSize as V, SColorSwatch as ee, useUiKitI18n as H } from "@shtabapp/ui-kit-primitives";
 import { useEventListener as U } from "@vueuse/core";

package/dist/{SColorPicker-BJjZR52T.cjs → SColorPicker-NqSNxcwH.cjs}

@@ -1 +1 @@
-const e=require("./contrastSurfaceTextColor-BRjRzXyZ.cjs"),t=require("./SColorPalette-CqIA4Qtp.cjs"),n=require("./colorValue-Dda7fKd3.cjs"),r=require("./SButton-CZW6Y8Vw.cjs"),i=require("./useFloatingOverlay-CwGCMrig.cjs"),a=require("./SDropdown-B_nsm3Jf.cjs"),o=require("./SDropdownMenu-k9SxaFVH.cjs"),s=require("./SSelect-BG4Wh8N9.cjs");let c=require("vue"),l=require("@shtabapp/ui-kit-primitives"),u=require("@vueuse/core");var d=e=>Math.max(0,Math.min(255,Math.round(e))),f=e=>{let t=e%360;return t<0?t+360:t},p=e=>Math.max(0,Math.min(100,Math.round(e))),m=e=>{let t=e.slice(1);if(t.length===3){let e=t[0],n=t[1],r=t[2];return!e||!n||!r?void 0:`${e}${e}${n}${n}${r}${r}`}if(t.length===6||t.length===8)return t.slice(0,6)},h=e=>{let t=m(e);if(!t)return;let n=Number.parseInt(t.slice(0,2),16),r=Number.parseInt(t.slice(2,4),16),i=Number.parseInt(t.slice(4,6),16);if(!(Number.isNaN(n)||Number.isNaN(r)||Number.isNaN(i)))return{first:n,second:r,third:i}},g=e=>{let t=d(e.first),n=d(e.second),r=d(e.third);return`#${t.toString(16).padStart(2,`0`).toUpperCase()}${n.toString(16).padStart(2,`0`).toUpperCase()}${r.toString(16).padStart(2,`0`).toUpperCase()}`},_=e=>{let t=h(e);if(!t)return;let n=t.first/255,r=t.second/255,i=t.third/255,a=Math.max(n,r,i),o=Math.min(n,r,i),s=a-o,c=0,l=(a+o)/2;s!==0&&(c=a===n?((r-i)/s+(r<i?6:0))*60:a===r?((i-n)/s+2)*60:((n-r)/s+4)*60);let u=0;return s!==0&&(u=l>.5?s/(2-a-o):s/(a+o)),{first:Math.round(c),second:Math.round(u*100),third:Math.round(l*100)}},v=e=>{let t=f(e.first),n=p(e.second)/100,r=p(e.third)/100,i=e=>{let i=(t+e)/30;return d((r-n*Math.min(r,1-r)*Math.max(-1,Math.min(i%2-1,1)))*255)};return g({first:i(0),second:i(8),third:i(4)})},y=t=>{let n=t.toUpperCase(),r=n.startsWith(`#`)?n.slice(1):n;if(!/^[0-9A-F]{3}$/.test(r)&&!/^[0-9A-F]{6}$/.test(r))return;let i=`#${r}`;if(e.n(i))return g(h(i)??{first:0,second:0,third:0})},b=e=>e.slice(1).toUpperCase(),x=e=>{let t=e.first/255,n=e.second/255,r=e.third/255,i=Math.max(t,n,r),a=i-Math.min(t,n,r),o=0;a!==0&&(o=i===t?(n-r)/a%6:i===n?(r-t)/a+2:(t-n)/a+4,o=Math.round(o*60),o<0&&(o+=360));let s=i===0?0:a/i;return{hue:o,saturation:s,value:i}},S=e=>{let t=e.value*e.saturation,n=e.hue/60,r=t*(1-Math.abs(n%2-1)),i=e.value-t,a=0,o=0,s=0;return n>=0&&n<1?(a=t,o=r):n>=1&&n<2?(a=r,o=t):n>=2&&n<3?(o=t,s=r):n>=3&&n<4?(o=r,s=t):n>=4&&n<5?(a=r,s=t):(a=t,s=r),{first:d((a+i)*255),second:d((o+i)*255),third:d((s+i)*255)}},C=e=>{let t=h(e);if(t)return x(t)},w=e=>g(S(e)),T=[t.o.HEX,t.o.RGB,t.o.HSL],E={[t.o.HEX]:`Hex`,[t.o.RGB]:`RGB`,[t.o.HSL]:`HSL`},D=e=>{let t=getComputedStyle(e).backgroundColor.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/);if(!t)return;let n=Number.parseInt(t[1]??`0`,10),r=Number.parseInt(t[2]??`0`,10),i=Number.parseInt(t[3]??`0`,10);return`#${n.toString(16).padStart(2,`0`).toUpperCase()}${r.toString(16).padStart(2,`0`).toUpperCase()}${i.toString(16).padStart(2,`0`).toUpperCase()}`},O=(t,r)=>{if(n.n(t)&&e.n(t))return t;if(r)return D(r)},k=(e,n)=>n===t.o.HEX?b(e):n===t.o.RGB?h(e)??{first:0,second:0,third:0}:_(e)??{first:0,second:0,third:0},A=e=>{let t=Number.parseInt(e,10);if(!Number.isNaN(t))return t},j=(e,n)=>{if(e===t.o.HEX)return typeof n==`string`?y(n):void 0;if(typeof n==`string`)return;if(e===t.o.RGB){let e=g({first:A(String(n.first))??0,second:A(String(n.second))??0,third:A(String(n.third))??0});return h(e)?e:void 0}let r=v({first:A(String(n.first))??0,second:A(String(n.second))??0,third:A(String(n.third))??0});if(r&&_(r))return r},M=17,N=`#000000`,P=e=>e??N,F=({modelValue:e,getEditableHex:t,saturationAreaRef:n,hueSliderRef:r,disabled:i,readonly:a})=>{let o=C(P(t()))??{hue:0,saturation:0,value:0},s=(0,c.ref)(o.hue),l=(0,c.ref)(o.saturation),d=(0,c.ref)(o.value),f=(0,c.ref)(!1),p=(0,c.ref)(!1),m=(0,c.ref)(!1),h=(0,c.shallowRef)(null),g=(0,c.shallowRef)(null),_=(0,c.computed)(()=>w({hue:s.value,saturation:l.value,value:d.value})),v=(0,c.computed)(()=>w({hue:s.value,saturation:1,value:1})),y=e=>{s.value=Math.max(0,Math.min(360,e))},b=(e,t)=>{l.value=Math.max(0,Math.min(1,e)),d.value=Math.max(0,Math.min(1,t))},x=e=>{let t=C(P(e));t&&(f.value=!0,t.saturation>0&&(s.value=t.hue),l.value=t.saturation,d.value=t.value,f.value=!1)},S=()=>{let e=t();e&&e.toUpperCase()!==_.value.toUpperCase()&&x(e)},T=()=>{let n=_.value;t()?.toUpperCase()!==n.toUpperCase()&&(f.value=!0,e.value=n,f.value=!1)};(0,c.watch)([s,l,d],()=>{f.value||T()}),(0,c.watch)(e,()=>{f.value||S()}),(0,c.onMounted)(()=>{(0,c.nextTick)(()=>{E(),D(),S()})});let E=()=>{h.value=n.value?.getBoundingClientRect()??null},D=()=>{g.value=r.value?.getBoundingClientRect()??null},O=(0,c.computed)(()=>{let e=h.value;return e?{transform:`translate3d(calc(${l.value*e.width}px - 50%), calc(${(1-d.value)*e.height}px - 50%), 0)`}:{}}),k=(0,c.computed)(()=>{let e=g.value;return e?{transform:`translate3d(-50%, calc(${s.value/360*e.height}px - 50%), 0)`}:{}}),A=()=>!i.value&&!a.value,j=e=>{let t=h.value;if(!t)return;let n=Math.max(0,Math.min(e.clientX-t.left,t.width)),r=Math.max(0,Math.min(e.clientY-t.top,t.height));b(n/t.width,1-r/t.height)},M=e=>{let t=g.value;t&&y(Math.max(0,Math.min(e.clientY-t.top,t.height))/t.height*360)},N=e=>{A()&&(E(),p.value=!0,j(e),e.currentTarget instanceof HTMLElement&&e.currentTarget.setPointerCapture(e.pointerId))},F=e=>{A()&&(D(),m.value=!0,M(e),e.currentTarget instanceof HTMLElement&&e.currentTarget.setPointerCapture(e.pointerId))},I=()=>{p.value=!1},L=()=>{m.value=!1};return(0,u.useEventListener)(n,`pointermove`,e=>{p.value&&j(e)}),(0,u.useEventListener)(n,`pointerup`,I),(0,u.useEventListener)(n,`pointercancel`,I),(0,u.useEventListener)(n,`lostpointercapture`,I),(0,u.useEventListener)(r,`pointermove`,e=>{m.value&&M(e)}),(0,u.useEventListener)(r,`pointerup`,L),(0,u.useEventListener)(r,`pointercancel`,L),(0,u.useEventListener)(r,`lostpointercapture`,L),{hexColor:_,hueBackground:v,saturationPointerStyle:O,huePointerStyle:k,handleSaturationPointerDown:N,handleHuePointerDown:F,syncFromModelValue:S}},I=e=>{if(!e)return null;let t=e.$el;if(!(t instanceof HTMLElement))return null;let n=t.querySelector(`.s-ui-color-swatch__fill`);return n instanceof HTMLElement?n:null},L={class:`s-ui-color-area__canvas-row`},R=[`aria-label`],z=[`aria-label`,`aria-disabled`],B=(0,c.defineComponent)({__name:`SColorArea`,props:(0,c.mergeModels)({disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1}},{modelValue:{required:!0},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let t=(0,c.useModel)(e,`modelValue`),{t:r}=(0,l.useUiKitI18n)(),i=(0,c.useTemplateRef)(`colorResolutionSwatchRef`),a=(0,c.useTemplateRef)(`saturationAreaRef`),o=(0,c.useTemplateRef)(`hueSliderRef`),s=()=>O(t.value,I(i.value)),u=(0,c.computed)(()=>n.a(t.value)),{hexColor:d,hueBackground:f,saturationPointerStyle:p,huePointerStyle:m,handleSaturationPointerDown:h,handleHuePointerDown:g}=F({modelValue:t,getEditableHex:s,saturationAreaRef:a,hueSliderRef:o,disabled:(0,c.toRef)(()=>e.disabled),readonly:(0,c.toRef)(()=>e.readonly)});return(t,n)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,(0,c.mergeProps)({class:[`s-ui-color-area`,{"s-ui-color-area--disabled":e.disabled,"s-ui-color-area--readonly":e.readonly}]},t.$attrs),[(0,c.createVNode)((0,c.unref)(l.SColorSwatch),{ref_key:`colorResolutionSwatchRef`,ref:i,class:`s-ui-color-area__color-resolution`,color:u.value,size:(0,c.unref)(l.ESColorSwatchSize).SIZE_24,tabindex:`-1`,"aria-hidden":`true`},null,8,[`color`,`size`]),(0,c.createElementVNode)(`div`,L,[(0,c.createElementVNode)(`div`,{ref_key:`saturationAreaRef`,ref:a,class:`s-ui-color-area__canvas`,role:`img`,"aria-label":(0,c.unref)(r)(`colorArea.saturationBrightness`),style:(0,c.normalizeStyle)({"--s-ui-color-area-hue":(0,c.unref)(f)}),onPointerdown:n[0]||=(...e)=>(0,c.unref)(h)&&(0,c.unref)(h)(...e)},[(0,c.createElementVNode)(`div`,{class:`s-ui-color-area__canvas-pointer`,style:(0,c.normalizeStyle)({...(0,c.unref)(p),backgroundColor:(0,c.unref)(d)})},null,4)],44,R),(0,c.createElementVNode)(`div`,{ref_key:`hueSliderRef`,ref:o,class:`s-ui-color-area__hue`,role:`slider`,"aria-label":(0,c.unref)(r)(`colorArea.hue`),"aria-valuemin":`0`,"aria-valuemax":`360`,"aria-disabled":e.disabled||e.readonly,onPointerdown:n[1]||=(...e)=>(0,c.unref)(g)&&(0,c.unref)(g)(...e)},[(0,c.createElementVNode)(`div`,{class:`s-ui-color-area__hue-pointer`,style:(0,c.normalizeStyle)({...(0,c.unref)(m),backgroundColor:(0,c.unref)(f)})},null,4)],40,z)])],16))}}),V={class:`s-ui-color-values__left`},H={class:`s-ui-color-values__format`},U={class:`s-ui-color-values__value-group`},W={class:`s-ui-color-values__inputs`},G={key:0,class:`s-ui-color-values__input-wrap`},K=[`disabled`,`readonly`,`aria-label`],q={class:`s-ui-color-values__input-wrap`},J=[`disabled`,`readonly`,`aria-label`],Y={class:`s-ui-color-values__input-wrap`},X=[`disabled`,`readonly`,`aria-label`],Z={class:`s-ui-color-values__input-wrap`},Q=[`disabled`,`readonly`,`aria-label`],$=(0,c.defineComponent)({__name:`SColorValues`,props:(0,c.mergeModels)({disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},formats:{default:()=>T}},{modelValue:{required:!0},modelModifiers:{},format:{default:t.o.HEX},formatModifiers:{}}),emits:(0,c.mergeModels)([`formatDropdownOpen`,`formatDropdownClose`],[`update:modelValue`,`update:format`]),setup(e,{emit:i}){let{t:a}=(0,l.useUiKitI18n)(),o=(0,c.useModel)(e,`modelValue`),u=(0,c.useModel)(e,`format`),d=i,f=(0,c.useTemplateRef)(`previewSwatchRef`),p=(0,c.ref)(``),m=(0,c.ref)(`0`),h=(0,c.ref)(`0`),g=(0,c.ref)(`0`),_=(0,c.computed)(()=>(e.formats.length>0?e.formats:T).map(e=>({value:e,label:E[e]}))),v=(0,c.computed)(()=>n.a(o.value)),y=(0,c.computed)(()=>O(o.value,I(f.value))),b=(0,c.computed)(()=>u.value===t.o.RGB?a(`colorValues.redChannel`):a(`colorValues.hueChannel`)),x=(0,c.computed)(()=>u.value===t.o.RGB?a(`colorValues.greenChannel`):a(`colorValues.saturationChannel`)),S=(0,c.computed)(()=>u.value===t.o.RGB?a(`colorValues.blueChannel`):a(`colorValues.lightnessChannel`)),C=()=>{let e=y.value;if(!e)return;let n=k(e,u.value);if(u.value===t.o.HEX&&typeof n==`string`){p.value=n;return}typeof n==`object`&&(m.value=String(n.first),h.value=String(n.second),g.value=String(n.third))};(0,c.watch)([o,u,y],()=>{C()}),(0,c.onMounted)(()=>{(0,c.nextTick)(()=>{C()})});let w=()=>{if(e.disabled||e.readonly)return;if(u.value===t.o.HEX){let e=j(t.o.HEX,p.value);e&&(o.value=e),C();return}let n=j(u.value,{first:Number.parseInt(m.value,10),second:Number.parseInt(h.value,10),third:Number.parseInt(g.value,10)});n&&(o.value=n),C()},D=e=>{e.key===`Enter`&&(e.preventDefault(),w())};return(n,i)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,(0,c.mergeProps)({class:[`s-ui-color-values`,{"s-ui-color-values--disabled":e.disabled,"s-ui-color-values--readonly":e.readonly}]},n.$attrs),[(0,c.createElementVNode)(`div`,V,[(0,c.createVNode)((0,c.unref)(l.SColorSwatch),{ref_key:`previewSwatchRef`,ref:f,class:`s-ui-color-values__preview`,color:v.value,size:(0,c.unref)(l.ESColorSwatchSize).SIZE_32,disabled:e.disabled,tabindex:`-1`,"aria-hidden":`true`},null,8,[`color`,`size`,`disabled`]),(0,c.createElementVNode)(`div`,H,[(0,c.createVNode)((0,c.unref)(s.t),{modelValue:u.value,"onUpdate:modelValue":i[0]||=e=>u.value=e,class:`s-ui-color-values__format-select`,options:_.value,disabled:e.disabled,readonly:e.readonly,bordered:!0,clearable:!1,"close-on-select":!0,"fit-viewport":!1,"aria-label":(0,c.unref)(a)(`colorValues.format`),onOpen:i[1]||=e=>d(`formatDropdownOpen`),onClose:i[2]||=e=>d(`formatDropdownClose`)},null,8,[`modelValue`,`options`,`disabled`,`readonly`,`aria-label`])])]),(0,c.createElementVNode)(`div`,U,[(0,c.createVNode)((0,c.unref)(r.t),{class:`s-ui-color-values__pipette`,appearance:(0,c.unref)(r.n).BARE,variant:(0,c.unref)(r.i).NEUTRAL,size:(0,c.unref)(r.r).SMALL,icon:`pipette`,"aria-label":(0,c.unref)(a)(`colorValues.pickColor`),"aria-disabled":`true`,disabled:e.disabled,tabindex:`-1`},null,8,[`appearance`,`variant`,`size`,`aria-label`,`disabled`]),i[9]||=(0,c.createElementVNode)(`span`,{class:`s-ui-color-values__separator`,"aria-hidden":`true`},null,-1),(0,c.createElementVNode)(`div`,W,[u.value===(0,c.unref)(t.o).HEX?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,G,[(0,c.withDirectives)((0,c.createElementVNode)(`input`,{"onUpdate:modelValue":i[3]||=e=>p.value=e,class:`s-ui-color-values__input s-ui-typography-body-14-regular`,type:`text`,inputmode:`text`,spellcheck:`false`,disabled:e.disabled,readonly:e.readonly,"aria-label":(0,c.unref)(a)(`colorValues.hexValue`),onBlur:w,onKeydown:D},null,40,K),[[c.vModelText,p.value]])])):((0,c.openBlock)(),(0,c.createElementBlock)(c.Fragment,{key:1},[(0,c.createElementVNode)(`div`,q,[(0,c.withDirectives)((0,c.createElementVNode)(`input`,{"onUpdate:modelValue":i[4]||=e=>m.value=e,class:`s-ui-color-values__input s-ui-typography-body-14-regular`,type:`text`,inputmode:`numeric`,spellcheck:`false`,disabled:e.disabled,readonly:e.readonly,"aria-label":b.value,onBlur:w,onKeydown:D},null,40,J),[[c.vModelText,m.value]])]),i[7]||=(0,c.createElementVNode)(`span`,{class:`s-ui-color-values__separator`,"aria-hidden":`true`},null,-1),(0,c.createElementVNode)(`div`,Y,[(0,c.withDirectives)((0,c.createElementVNode)(`input`,{"onUpdate:modelValue":i[5]||=e=>h.value=e,class:`s-ui-color-values__input s-ui-typography-body-14-regular`,type:`text`,inputmode:`numeric`,spellcheck:`false`,disabled:e.disabled,readonly:e.readonly,"aria-label":x.value,onBlur:w,onKeydown:D},null,40,X),[[c.vModelText,h.value]])]),i[8]||=(0,c.createElementVNode)(`span`,{class:`s-ui-color-values__separator`,"aria-hidden":`true`},null,-1),(0,c.createElementVNode)(`div`,Z,[(0,c.withDirectives)((0,c.createElementVNode)(`input`,{"onUpdate:modelValue":i[6]||=e=>g.value=e,class:`s-ui-color-values__input s-ui-typography-body-14-regular`,type:`text`,inputmode:`numeric`,spellcheck:`false`,disabled:e.disabled,readonly:e.readonly,"aria-label":S.value,onBlur:w,onKeydown:D},null,40,Q),[[c.vModelText,g.value]])])],64))])])],16))}}),ee={class:`s-ui-color-picker__section`},te={class:`s-ui-color-picker__label`},ne={class:`s-ui-color-picker__section`},re={class:`s-ui-color-picker__label`},ie={class:`s-ui-color-picker__custom-editor`},ae={class:`s-ui-color-picker__custom-actions`},oe=(0,c.defineComponent)({__name:`SColorPicker`,props:(0,c.mergeModels)({disabled:{type:Boolean,default:!1},recommendedColors:{},recentColors:{default:()=>[]}},{modelValue:{},modelModifiers:{}}),emits:(0,c.mergeModels)([`select`,`customEditorOpen`,`customEditorClose`,`formatDropdownOpen`,`formatDropdownClose`],[`update:modelValue`]),setup(e,{emit:n}){let s=(0,c.useModel)(e,`modelValue`),u=n,{t:d}=(0,l.useUiKitI18n)(),f=(0,c.ref)(!1),p=(0,c.ref)(`#526DE3`),m=(0,c.ref)(t.o.HEX),h=(0,c.computed)(()=>e.recommendedColors&&e.recommendedColors.length>0?e.recommendedColors:t.r),g=(0,c.computed)(()=>e.recentColors.length<=17?e.recentColors:e.recentColors.slice(0,17)),_=()=>{if(s.value){p.value=s.value;return}p.value=`#526DE3`},v=e=>{u(`select`,e)},y=()=>{s.value=p.value,u(`select`,p.value),f.value=!1},b=()=>{f.value=!1};return(0,c.watch)(f,(e,t)=>{if(e&&!t){_(),u(`customEditorOpen`);return}!e&&t&&u(`customEditorClose`)}),(n,_)=>((0,c.openBlock)(),(0,c.createBlock)((0,c.unref)(o.t),(0,c.mergeProps)({width:336},n.$attrs),{default:(0,c.withCtx)(()=>[(0,c.createElementVNode)(`div`,{class:(0,c.normalizeClass)([`s-ui-color-picker`,{"s-ui-color-picker--disabled":e.disabled}])},[(0,c.createElementVNode)(`section`,ee,[(0,c.createElementVNode)(`span`,te,(0,c.toDisplayString)((0,c.unref)(d)(`colorPicker.recommendedColors`)),1),(0,c.createVNode)((0,c.unref)(t.t),{modelValue:s.value,"onUpdate:modelValue":_[0]||=e=>s.value=e,class:`s-ui-color-picker__palette`,layout:(0,c.unref)(t.n).GRID,colors:h.value,size:(0,c.unref)(l.ESColorSwatchSize).SIZE_32,disabled:e.disabled,onSelect:v},null,8,[`modelValue`,`layout`,`colors`,`size`,`disabled`])]),(0,c.createElementVNode)(`section`,ne,[(0,c.createElementVNode)(`span`,re,(0,c.toDisplayString)((0,c.unref)(d)(`colorPicker.recentColors`)),1),(0,c.createVNode)((0,c.unref)(t.t),{modelValue:s.value,"onUpdate:modelValue":_[7]||=e=>s.value=e,class:`s-ui-color-picker__palette`,layout:(0,c.unref)(t.n).ROW,colors:g.value,size:(0,c.unref)(l.ESColorSwatchSize).SIZE_32,disabled:e.disabled,onSelect:v},{append:(0,c.withCtx)(()=>[(0,c.createVNode)((0,c.unref)(a.t),{modelValue:f.value,"onUpdate:modelValue":_[6]||=e=>f.value=e,placement:(0,c.unref)(i.s).RIGHT_START,offset:8,shift:!0,flip:!0,disabled:e.disabled,"dismiss-on-click-outside":!0,"dismiss-on-escape":!0},{trigger:(0,c.withCtx)(({toggle:t,triggerProps:n})=>[(0,c.createVNode)((0,c.unref)(r.t),(0,c.mergeProps)(n,{class:`s-ui-color-picker__add-button`,appearance:(0,c.unref)(r.n).OUTLINED,variant:(0,c.unref)(r.i).NEUTRAL,size:(0,c.unref)(r.r).SMALL,icon:`plus`,"aria-label":(0,c.unref)(d)(`colorPicker.addCustomColor`),disabled:e.disabled,onClick:t}),null,16,[`appearance`,`variant`,`size`,`aria-label`,`disabled`,`onClick`])]),content:(0,c.withCtx)(()=>[(0,c.createVNode)((0,c.unref)(o.t),{width:320},{footer:(0,c.withCtx)(()=>[(0,c.createElementVNode)(`div`,ae,[(0,c.createVNode)((0,c.unref)(r.t),{class:`s-ui-color-picker__save-button`,appearance:(0,c.unref)(r.n).MAJOR,variant:(0,c.unref)(r.i).MAIN,size:(0,c.unref)(r.r).SMALL,disabled:e.disabled,onClick:y},{default:(0,c.withCtx)(()=>[(0,c.createTextVNode)((0,c.toDisplayString)((0,c.unref)(d)(`colorPicker.save`)),1)]),_:1},8,[`appearance`,`variant`,`size`,`disabled`]),(0,c.createVNode)((0,c.unref)(r.t),{class:`s-ui-color-picker__cancel-button`,appearance:(0,c.unref)(r.n).MINOR,variant:(0,c.unref)(r.i).NEUTRAL,size:(0,c.unref)(r.r).SMALL,disabled:e.disabled,onClick:b},{default:(0,c.withCtx)(()=>[(0,c.createTextVNode)((0,c.toDisplayString)((0,c.unref)(d)(`colorPicker.cancel`)),1)]),_:1},8,[`appearance`,`variant`,`size`,`disabled`])])]),default:(0,c.withCtx)(()=>[(0,c.createElementVNode)(`div`,ie,[(0,c.createVNode)(B,{modelValue:p.value,"onUpdate:modelValue":_[1]||=e=>p.value=e,disabled:e.disabled},null,8,[`modelValue`,`disabled`]),(0,c.createVNode)($,{modelValue:p.value,"onUpdate:modelValue":_[2]||=e=>p.value=e,format:m.value,"onUpdate:format":_[3]||=e=>m.value=e,disabled:e.disabled,onFormatDropdownOpen:_[4]||=e=>u(`formatDropdownOpen`),onFormatDropdownClose:_[5]||=e=>u(`formatDropdownClose`)},null,8,[`modelValue`,`format`,`disabled`])])]),_:1})]),_:1},8,[`modelValue`,`placement`,`disabled`])]),_:1},8,[`modelValue`,`layout`,`colors`,`size`,`disabled`])])],2)]),_:1},16))}});Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return M}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return $}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return B}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return oe}});
+const e=require("./contrastSurfaceTextColor-BRjRzXyZ.cjs"),t=require("./SColorPalette-CqIA4Qtp.cjs"),n=require("./colorValue-Dda7fKd3.cjs"),r=require("./SButton-CZW6Y8Vw.cjs"),i=require("./useFloatingOverlay-CwGCMrig.cjs"),a=require("./SDropdown-B_nsm3Jf.cjs"),o=require("./SDropdownMenu-k9SxaFVH.cjs"),s=require("./SSelect-BSbEFqAB.cjs");let c=require("vue"),l=require("@shtabapp/ui-kit-primitives"),u=require("@vueuse/core");var d=e=>Math.max(0,Math.min(255,Math.round(e))),f=e=>{let t=e%360;return t<0?t+360:t},p=e=>Math.max(0,Math.min(100,Math.round(e))),m=e=>{let t=e.slice(1);if(t.length===3){let e=t[0],n=t[1],r=t[2];return!e||!n||!r?void 0:`${e}${e}${n}${n}${r}${r}`}if(t.length===6||t.length===8)return t.slice(0,6)},h=e=>{let t=m(e);if(!t)return;let n=Number.parseInt(t.slice(0,2),16),r=Number.parseInt(t.slice(2,4),16),i=Number.parseInt(t.slice(4,6),16);if(!(Number.isNaN(n)||Number.isNaN(r)||Number.isNaN(i)))return{first:n,second:r,third:i}},g=e=>{let t=d(e.first),n=d(e.second),r=d(e.third);return`#${t.toString(16).padStart(2,`0`).toUpperCase()}${n.toString(16).padStart(2,`0`).toUpperCase()}${r.toString(16).padStart(2,`0`).toUpperCase()}`},_=e=>{let t=h(e);if(!t)return;let n=t.first/255,r=t.second/255,i=t.third/255,a=Math.max(n,r,i),o=Math.min(n,r,i),s=a-o,c=0,l=(a+o)/2;s!==0&&(c=a===n?((r-i)/s+(r<i?6:0))*60:a===r?((i-n)/s+2)*60:((n-r)/s+4)*60);let u=0;return s!==0&&(u=l>.5?s/(2-a-o):s/(a+o)),{first:Math.round(c),second:Math.round(u*100),third:Math.round(l*100)}},v=e=>{let t=f(e.first),n=p(e.second)/100,r=p(e.third)/100,i=e=>{let i=(t+e)/30;return d((r-n*Math.min(r,1-r)*Math.max(-1,Math.min(i%2-1,1)))*255)};return g({first:i(0),second:i(8),third:i(4)})},y=t=>{let n=t.toUpperCase(),r=n.startsWith(`#`)?n.slice(1):n;if(!/^[0-9A-F]{3}$/.test(r)&&!/^[0-9A-F]{6}$/.test(r))return;let i=`#${r}`;if(e.n(i))return g(h(i)??{first:0,second:0,third:0})},b=e=>e.slice(1).toUpperCase(),x=e=>{let t=e.first/255,n=e.second/255,r=e.third/255,i=Math.max(t,n,r),a=i-Math.min(t,n,r),o=0;a!==0&&(o=i===t?(n-r)/a%6:i===n?(r-t)/a+2:(t-n)/a+4,o=Math.round(o*60),o<0&&(o+=360));let s=i===0?0:a/i;return{hue:o,saturation:s,value:i}},S=e=>{let t=e.value*e.saturation,n=e.hue/60,r=t*(1-Math.abs(n%2-1)),i=e.value-t,a=0,o=0,s=0;return n>=0&&n<1?(a=t,o=r):n>=1&&n<2?(a=r,o=t):n>=2&&n<3?(o=t,s=r):n>=3&&n<4?(o=r,s=t):n>=4&&n<5?(a=r,s=t):(a=t,s=r),{first:d((a+i)*255),second:d((o+i)*255),third:d((s+i)*255)}},C=e=>{let t=h(e);if(t)return x(t)},w=e=>g(S(e)),T=[t.o.HEX,t.o.RGB,t.o.HSL],E={[t.o.HEX]:`Hex`,[t.o.RGB]:`RGB`,[t.o.HSL]:`HSL`},D=e=>{let t=getComputedStyle(e).backgroundColor.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/);if(!t)return;let n=Number.parseInt(t[1]??`0`,10),r=Number.parseInt(t[2]??`0`,10),i=Number.parseInt(t[3]??`0`,10);return`#${n.toString(16).padStart(2,`0`).toUpperCase()}${r.toString(16).padStart(2,`0`).toUpperCase()}${i.toString(16).padStart(2,`0`).toUpperCase()}`},O=(t,r)=>{if(n.n(t)&&e.n(t))return t;if(r)return D(r)},k=(e,n)=>n===t.o.HEX?b(e):n===t.o.RGB?h(e)??{first:0,second:0,third:0}:_(e)??{first:0,second:0,third:0},A=e=>{let t=Number.parseInt(e,10);if(!Number.isNaN(t))return t},j=(e,n)=>{if(e===t.o.HEX)return typeof n==`string`?y(n):void 0;if(typeof n==`string`)return;if(e===t.o.RGB){let e=g({first:A(String(n.first))??0,second:A(String(n.second))??0,third:A(String(n.third))??0});return h(e)?e:void 0}let r=v({first:A(String(n.first))??0,second:A(String(n.second))??0,third:A(String(n.third))??0});if(r&&_(r))return r},M=17,N=`#000000`,P=e=>e??N,F=({modelValue:e,getEditableHex:t,saturationAreaRef:n,hueSliderRef:r,disabled:i,readonly:a})=>{let o=C(P(t()))??{hue:0,saturation:0,value:0},s=(0,c.ref)(o.hue),l=(0,c.ref)(o.saturation),d=(0,c.ref)(o.value),f=(0,c.ref)(!1),p=(0,c.ref)(!1),m=(0,c.ref)(!1),h=(0,c.shallowRef)(null),g=(0,c.shallowRef)(null),_=(0,c.computed)(()=>w({hue:s.value,saturation:l.value,value:d.value})),v=(0,c.computed)(()=>w({hue:s.value,saturation:1,value:1})),y=e=>{s.value=Math.max(0,Math.min(360,e))},b=(e,t)=>{l.value=Math.max(0,Math.min(1,e)),d.value=Math.max(0,Math.min(1,t))},x=e=>{let t=C(P(e));t&&(f.value=!0,t.saturation>0&&(s.value=t.hue),l.value=t.saturation,d.value=t.value,f.value=!1)},S=()=>{let e=t();e&&e.toUpperCase()!==_.value.toUpperCase()&&x(e)},T=()=>{let n=_.value;t()?.toUpperCase()!==n.toUpperCase()&&(f.value=!0,e.value=n,f.value=!1)};(0,c.watch)([s,l,d],()=>{f.value||T()}),(0,c.watch)(e,()=>{f.value||S()}),(0,c.onMounted)(()=>{(0,c.nextTick)(()=>{E(),D(),S()})});let E=()=>{h.value=n.value?.getBoundingClientRect()??null},D=()=>{g.value=r.value?.getBoundingClientRect()??null},O=(0,c.computed)(()=>{let e=h.value;return e?{transform:`translate3d(calc(${l.value*e.width}px - 50%), calc(${(1-d.value)*e.height}px - 50%), 0)`}:{}}),k=(0,c.computed)(()=>{let e=g.value;return e?{transform:`translate3d(-50%, calc(${s.value/360*e.height}px - 50%), 0)`}:{}}),A=()=>!i.value&&!a.value,j=e=>{let t=h.value;if(!t)return;let n=Math.max(0,Math.min(e.clientX-t.left,t.width)),r=Math.max(0,Math.min(e.clientY-t.top,t.height));b(n/t.width,1-r/t.height)},M=e=>{let t=g.value;t&&y(Math.max(0,Math.min(e.clientY-t.top,t.height))/t.height*360)},N=e=>{A()&&(E(),p.value=!0,j(e),e.currentTarget instanceof HTMLElement&&e.currentTarget.setPointerCapture(e.pointerId))},F=e=>{A()&&(D(),m.value=!0,M(e),e.currentTarget instanceof HTMLElement&&e.currentTarget.setPointerCapture(e.pointerId))},I=()=>{p.value=!1},L=()=>{m.value=!1};return(0,u.useEventListener)(n,`pointermove`,e=>{p.value&&j(e)}),(0,u.useEventListener)(n,`pointerup`,I),(0,u.useEventListener)(n,`pointercancel`,I),(0,u.useEventListener)(n,`lostpointercapture`,I),(0,u.useEventListener)(r,`pointermove`,e=>{m.value&&M(e)}),(0,u.useEventListener)(r,`pointerup`,L),(0,u.useEventListener)(r,`pointercancel`,L),(0,u.useEventListener)(r,`lostpointercapture`,L),{hexColor:_,hueBackground:v,saturationPointerStyle:O,huePointerStyle:k,handleSaturationPointerDown:N,handleHuePointerDown:F,syncFromModelValue:S}},I=e=>{if(!e)return null;let t=e.$el;if(!(t instanceof HTMLElement))return null;let n=t.querySelector(`.s-ui-color-swatch__fill`);return n instanceof HTMLElement?n:null},L={class:`s-ui-color-area__canvas-row`},R=[`aria-label`],z=[`aria-label`,`aria-disabled`],B=(0,c.defineComponent)({__name:`SColorArea`,props:(0,c.mergeModels)({disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1}},{modelValue:{required:!0},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let t=(0,c.useModel)(e,`modelValue`),{t:r}=(0,l.useUiKitI18n)(),i=(0,c.useTemplateRef)(`colorResolutionSwatchRef`),a=(0,c.useTemplateRef)(`saturationAreaRef`),o=(0,c.useTemplateRef)(`hueSliderRef`),s=()=>O(t.value,I(i.value)),u=(0,c.computed)(()=>n.a(t.value)),{hexColor:d,hueBackground:f,saturationPointerStyle:p,huePointerStyle:m,handleSaturationPointerDown:h,handleHuePointerDown:g}=F({modelValue:t,getEditableHex:s,saturationAreaRef:a,hueSliderRef:o,disabled:(0,c.toRef)(()=>e.disabled),readonly:(0,c.toRef)(()=>e.readonly)});return(t,n)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,(0,c.mergeProps)({class:[`s-ui-color-area`,{"s-ui-color-area--disabled":e.disabled,"s-ui-color-area--readonly":e.readonly}]},t.$attrs),[(0,c.createVNode)((0,c.unref)(l.SColorSwatch),{ref_key:`colorResolutionSwatchRef`,ref:i,class:`s-ui-color-area__color-resolution`,color:u.value,size:(0,c.unref)(l.ESColorSwatchSize).SIZE_24,tabindex:`-1`,"aria-hidden":`true`},null,8,[`color`,`size`]),(0,c.createElementVNode)(`div`,L,[(0,c.createElementVNode)(`div`,{ref_key:`saturationAreaRef`,ref:a,class:`s-ui-color-area__canvas`,role:`img`,"aria-label":(0,c.unref)(r)(`colorArea.saturationBrightness`),style:(0,c.normalizeStyle)({"--s-ui-color-area-hue":(0,c.unref)(f)}),onPointerdown:n[0]||=(...e)=>(0,c.unref)(h)&&(0,c.unref)(h)(...e)},[(0,c.createElementVNode)(`div`,{class:`s-ui-color-area__canvas-pointer`,style:(0,c.normalizeStyle)({...(0,c.unref)(p),backgroundColor:(0,c.unref)(d)})},null,4)],44,R),(0,c.createElementVNode)(`div`,{ref_key:`hueSliderRef`,ref:o,class:`s-ui-color-area__hue`,role:`slider`,"aria-label":(0,c.unref)(r)(`colorArea.hue`),"aria-valuemin":`0`,"aria-valuemax":`360`,"aria-disabled":e.disabled||e.readonly,onPointerdown:n[1]||=(...e)=>(0,c.unref)(g)&&(0,c.unref)(g)(...e)},[(0,c.createElementVNode)(`div`,{class:`s-ui-color-area__hue-pointer`,style:(0,c.normalizeStyle)({...(0,c.unref)(m),backgroundColor:(0,c.unref)(f)})},null,4)],40,z)])],16))}}),V={class:`s-ui-color-values__left`},H={class:`s-ui-color-values__format`},U={class:`s-ui-color-values__value-group`},W={class:`s-ui-color-values__inputs`},G={key:0,class:`s-ui-color-values__input-wrap`},K=[`disabled`,`readonly`,`aria-label`],q={class:`s-ui-color-values__input-wrap`},J=[`disabled`,`readonly`,`aria-label`],Y={class:`s-ui-color-values__input-wrap`},X=[`disabled`,`readonly`,`aria-label`],Z={class:`s-ui-color-values__input-wrap`},Q=[`disabled`,`readonly`,`aria-label`],$=(0,c.defineComponent)({__name:`SColorValues`,props:(0,c.mergeModels)({disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},formats:{default:()=>T}},{modelValue:{required:!0},modelModifiers:{},format:{default:t.o.HEX},formatModifiers:{}}),emits:(0,c.mergeModels)([`formatDropdownOpen`,`formatDropdownClose`],[`update:modelValue`,`update:format`]),setup(e,{emit:i}){let{t:a}=(0,l.useUiKitI18n)(),o=(0,c.useModel)(e,`modelValue`),u=(0,c.useModel)(e,`format`),d=i,f=(0,c.useTemplateRef)(`previewSwatchRef`),p=(0,c.ref)(``),m=(0,c.ref)(`0`),h=(0,c.ref)(`0`),g=(0,c.ref)(`0`),_=(0,c.computed)(()=>(e.formats.length>0?e.formats:T).map(e=>({value:e,label:E[e]}))),v=(0,c.computed)(()=>n.a(o.value)),y=(0,c.computed)(()=>O(o.value,I(f.value))),b=(0,c.computed)(()=>u.value===t.o.RGB?a(`colorValues.redChannel`):a(`colorValues.hueChannel`)),x=(0,c.computed)(()=>u.value===t.o.RGB?a(`colorValues.greenChannel`):a(`colorValues.saturationChannel`)),S=(0,c.computed)(()=>u.value===t.o.RGB?a(`colorValues.blueChannel`):a(`colorValues.lightnessChannel`)),C=()=>{let e=y.value;if(!e)return;let n=k(e,u.value);if(u.value===t.o.HEX&&typeof n==`string`){p.value=n;return}typeof n==`object`&&(m.value=String(n.first),h.value=String(n.second),g.value=String(n.third))};(0,c.watch)([o,u,y],()=>{C()}),(0,c.onMounted)(()=>{(0,c.nextTick)(()=>{C()})});let w=()=>{if(e.disabled||e.readonly)return;if(u.value===t.o.HEX){let e=j(t.o.HEX,p.value);e&&(o.value=e),C();return}let n=j(u.value,{first:Number.parseInt(m.value,10),second:Number.parseInt(h.value,10),third:Number.parseInt(g.value,10)});n&&(o.value=n),C()},D=e=>{e.key===`Enter`&&(e.preventDefault(),w())};return(n,i)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,(0,c.mergeProps)({class:[`s-ui-color-values`,{"s-ui-color-values--disabled":e.disabled,"s-ui-color-values--readonly":e.readonly}]},n.$attrs),[(0,c.createElementVNode)(`div`,V,[(0,c.createVNode)((0,c.unref)(l.SColorSwatch),{ref_key:`previewSwatchRef`,ref:f,class:`s-ui-color-values__preview`,color:v.value,size:(0,c.unref)(l.ESColorSwatchSize).SIZE_32,disabled:e.disabled,tabindex:`-1`,"aria-hidden":`true`},null,8,[`color`,`size`,`disabled`]),(0,c.createElementVNode)(`div`,H,[(0,c.createVNode)((0,c.unref)(s.t),{modelValue:u.value,"onUpdate:modelValue":i[0]||=e=>u.value=e,class:`s-ui-color-values__format-select`,options:_.value,disabled:e.disabled,readonly:e.readonly,bordered:!0,clearable:!1,"close-on-select":!0,"fit-viewport":!1,"aria-label":(0,c.unref)(a)(`colorValues.format`),onOpen:i[1]||=e=>d(`formatDropdownOpen`),onClose:i[2]||=e=>d(`formatDropdownClose`)},null,8,[`modelValue`,`options`,`disabled`,`readonly`,`aria-label`])])]),(0,c.createElementVNode)(`div`,U,[(0,c.createVNode)((0,c.unref)(r.t),{class:`s-ui-color-values__pipette`,appearance:(0,c.unref)(r.n).BARE,variant:(0,c.unref)(r.i).NEUTRAL,size:(0,c.unref)(r.r).SMALL,icon:`pipette`,"aria-label":(0,c.unref)(a)(`colorValues.pickColor`),"aria-disabled":`true`,disabled:e.disabled,tabindex:`-1`},null,8,[`appearance`,`variant`,`size`,`aria-label`,`disabled`]),i[9]||=(0,c.createElementVNode)(`span`,{class:`s-ui-color-values__separator`,"aria-hidden":`true`},null,-1),(0,c.createElementVNode)(`div`,W,[u.value===(0,c.unref)(t.o).HEX?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,G,[(0,c.withDirectives)((0,c.createElementVNode)(`input`,{"onUpdate:modelValue":i[3]||=e=>p.value=e,class:`s-ui-color-values__input s-ui-typography-body-14-regular`,type:`text`,inputmode:`text`,spellcheck:`false`,disabled:e.disabled,readonly:e.readonly,"aria-label":(0,c.unref)(a)(`colorValues.hexValue`),onBlur:w,onKeydown:D},null,40,K),[[c.vModelText,p.value]])])):((0,c.openBlock)(),(0,c.createElementBlock)(c.Fragment,{key:1},[(0,c.createElementVNode)(`div`,q,[(0,c.withDirectives)((0,c.createElementVNode)(`input`,{"onUpdate:modelValue":i[4]||=e=>m.value=e,class:`s-ui-color-values__input s-ui-typography-body-14-regular`,type:`text`,inputmode:`numeric`,spellcheck:`false`,disabled:e.disabled,readonly:e.readonly,"aria-label":b.value,onBlur:w,onKeydown:D},null,40,J),[[c.vModelText,m.value]])]),i[7]||=(0,c.createElementVNode)(`span`,{class:`s-ui-color-values__separator`,"aria-hidden":`true`},null,-1),(0,c.createElementVNode)(`div`,Y,[(0,c.withDirectives)((0,c.createElementVNode)(`input`,{"onUpdate:modelValue":i[5]||=e=>h.value=e,class:`s-ui-color-values__input s-ui-typography-body-14-regular`,type:`text`,inputmode:`numeric`,spellcheck:`false`,disabled:e.disabled,readonly:e.readonly,"aria-label":x.value,onBlur:w,onKeydown:D},null,40,X),[[c.vModelText,h.value]])]),i[8]||=(0,c.createElementVNode)(`span`,{class:`s-ui-color-values__separator`,"aria-hidden":`true`},null,-1),(0,c.createElementVNode)(`div`,Z,[(0,c.withDirectives)((0,c.createElementVNode)(`input`,{"onUpdate:modelValue":i[6]||=e=>g.value=e,class:`s-ui-color-values__input s-ui-typography-body-14-regular`,type:`text`,inputmode:`numeric`,spellcheck:`false`,disabled:e.disabled,readonly:e.readonly,"aria-label":S.value,onBlur:w,onKeydown:D},null,40,Q),[[c.vModelText,g.value]])])],64))])])],16))}}),ee={class:`s-ui-color-picker__section`},te={class:`s-ui-color-picker__label`},ne={class:`s-ui-color-picker__section`},re={class:`s-ui-color-picker__label`},ie={class:`s-ui-color-picker__custom-editor`},ae={class:`s-ui-color-picker__custom-actions`},oe=(0,c.defineComponent)({__name:`SColorPicker`,props:(0,c.mergeModels)({disabled:{type:Boolean,default:!1},recommendedColors:{},recentColors:{default:()=>[]}},{modelValue:{},modelModifiers:{}}),emits:(0,c.mergeModels)([`select`,`customEditorOpen`,`customEditorClose`,`formatDropdownOpen`,`formatDropdownClose`],[`update:modelValue`]),setup(e,{emit:n}){let s=(0,c.useModel)(e,`modelValue`),u=n,{t:d}=(0,l.useUiKitI18n)(),f=(0,c.ref)(!1),p=(0,c.ref)(`#526DE3`),m=(0,c.ref)(t.o.HEX),h=(0,c.computed)(()=>e.recommendedColors&&e.recommendedColors.length>0?e.recommendedColors:t.r),g=(0,c.computed)(()=>e.recentColors.length<=17?e.recentColors:e.recentColors.slice(0,17)),_=()=>{if(s.value){p.value=s.value;return}p.value=`#526DE3`},v=e=>{u(`select`,e)},y=()=>{s.value=p.value,u(`select`,p.value),f.value=!1},b=()=>{f.value=!1};return(0,c.watch)(f,(e,t)=>{if(e&&!t){_(),u(`customEditorOpen`);return}!e&&t&&u(`customEditorClose`)}),(n,_)=>((0,c.openBlock)(),(0,c.createBlock)((0,c.unref)(o.t),(0,c.mergeProps)({width:336},n.$attrs),{default:(0,c.withCtx)(()=>[(0,c.createElementVNode)(`div`,{class:(0,c.normalizeClass)([`s-ui-color-picker`,{"s-ui-color-picker--disabled":e.disabled}])},[(0,c.createElementVNode)(`section`,ee,[(0,c.createElementVNode)(`span`,te,(0,c.toDisplayString)((0,c.unref)(d)(`colorPicker.recommendedColors`)),1),(0,c.createVNode)((0,c.unref)(t.t),{modelValue:s.value,"onUpdate:modelValue":_[0]||=e=>s.value=e,class:`s-ui-color-picker__palette`,layout:(0,c.unref)(t.n).GRID,colors:h.value,size:(0,c.unref)(l.ESColorSwatchSize).SIZE_32,disabled:e.disabled,onSelect:v},null,8,[`modelValue`,`layout`,`colors`,`size`,`disabled`])]),(0,c.createElementVNode)(`section`,ne,[(0,c.createElementVNode)(`span`,re,(0,c.toDisplayString)((0,c.unref)(d)(`colorPicker.recentColors`)),1),(0,c.createVNode)((0,c.unref)(t.t),{modelValue:s.value,"onUpdate:modelValue":_[7]||=e=>s.value=e,class:`s-ui-color-picker__palette`,layout:(0,c.unref)(t.n).ROW,colors:g.value,size:(0,c.unref)(l.ESColorSwatchSize).SIZE_32,disabled:e.disabled,onSelect:v},{append:(0,c.withCtx)(()=>[(0,c.createVNode)((0,c.unref)(a.t),{modelValue:f.value,"onUpdate:modelValue":_[6]||=e=>f.value=e,placement:(0,c.unref)(i.s).RIGHT_START,offset:8,shift:!0,flip:!0,disabled:e.disabled,"dismiss-on-click-outside":!0,"dismiss-on-escape":!0},{trigger:(0,c.withCtx)(({toggle:t,triggerProps:n})=>[(0,c.createVNode)((0,c.unref)(r.t),(0,c.mergeProps)(n,{class:`s-ui-color-picker__add-button`,appearance:(0,c.unref)(r.n).OUTLINED,variant:(0,c.unref)(r.i).NEUTRAL,size:(0,c.unref)(r.r).SMALL,icon:`plus`,"aria-label":(0,c.unref)(d)(`colorPicker.addCustomColor`),disabled:e.disabled,onClick:t}),null,16,[`appearance`,`variant`,`size`,`aria-label`,`disabled`,`onClick`])]),content:(0,c.withCtx)(()=>[(0,c.createVNode)((0,c.unref)(o.t),{width:320},{footer:(0,c.withCtx)(()=>[(0,c.createElementVNode)(`div`,ae,[(0,c.createVNode)((0,c.unref)(r.t),{class:`s-ui-color-picker__save-button`,appearance:(0,c.unref)(r.n).MAJOR,variant:(0,c.unref)(r.i).MAIN,size:(0,c.unref)(r.r).SMALL,disabled:e.disabled,onClick:y},{default:(0,c.withCtx)(()=>[(0,c.createTextVNode)((0,c.toDisplayString)((0,c.unref)(d)(`colorPicker.save`)),1)]),_:1},8,[`appearance`,`variant`,`size`,`disabled`]),(0,c.createVNode)((0,c.unref)(r.t),{class:`s-ui-color-picker__cancel-button`,appearance:(0,c.unref)(r.n).MINOR,variant:(0,c.unref)(r.i).NEUTRAL,size:(0,c.unref)(r.r).SMALL,disabled:e.disabled,onClick:b},{default:(0,c.withCtx)(()=>[(0,c.createTextVNode)((0,c.toDisplayString)((0,c.unref)(d)(`colorPicker.cancel`)),1)]),_:1},8,[`appearance`,`variant`,`size`,`disabled`])])]),default:(0,c.withCtx)(()=>[(0,c.createElementVNode)(`div`,ie,[(0,c.createVNode)(B,{modelValue:p.value,"onUpdate:modelValue":_[1]||=e=>p.value=e,disabled:e.disabled},null,8,[`modelValue`,`disabled`]),(0,c.createVNode)($,{modelValue:p.value,"onUpdate:modelValue":_[2]||=e=>p.value=e,format:m.value,"onUpdate:format":_[3]||=e=>m.value=e,disabled:e.disabled,onFormatDropdownOpen:_[4]||=e=>u(`formatDropdownOpen`),onFormatDropdownClose:_[5]||=e=>u(`formatDropdownClose`)},null,8,[`modelValue`,`format`,`disabled`])])]),_:1})]),_:1},8,[`modelValue`,`placement`,`disabled`])]),_:1},8,[`modelValue`,`layout`,`colors`,`size`,`disabled`])])],2)]),_:1},16))}});Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return M}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return $}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return B}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return oe}});

package/dist/SList-CmMkLkdG.cjs

@@ -0,0 +1 @@
+const e=require("./useSelectionGroup-NJvi3hNo.cjs"),t=require("./useAriaAttrs-D748yeJ_.cjs"),n=require("./treeKeyboardNavigation-BOz2SVus.cjs"),r=require("./SListItem-CrAnC2MG.cjs");let i=require("vue"),a=require("@shtabapp/ui-kit-primitives"),o=require("@tanstack/vue-virtual");var s=function(e){return e.NONE=`none`,e.TWO_X_SMALL=`2x-small`,e.X_SMALL=`x-small`,e.SMALL=`small`,e.MEDIUM=`medium`,e.X_MEDIUM=`x-medium`,e.LARGE=`large`,e.X_LARGE=`x-large`,e.TWO_X_LARGE=`2x-large`,e}({}),c=s.TWO_X_SMALL,ee={[s.NONE]:`var(--s-ui-space-gap-none)`,[s.TWO_X_SMALL]:`var(--s-ui-space-gap-2x-small)`,[s.X_SMALL]:`var(--s-ui-space-gap-x-small)`,[s.SMALL]:`var(--s-ui-space-gap-small)`,[s.MEDIUM]:`var(--s-ui-space-gap-medium)`,[s.X_MEDIUM]:`var(--s-ui-space-gap-x-medium)`,[s.LARGE]:`var(--s-ui-space-gap-large)`,[s.X_LARGE]:`var(--s-ui-space-gap-x-large)`,[s.TWO_X_LARGE]:`var(--s-ui-space-gap-2x-large)`},l={[s.NONE]:0,[s.TWO_X_SMALL]:2,[s.X_SMALL]:4,[s.SMALL]:8,[s.MEDIUM]:12,[s.X_MEDIUM]:16,[s.LARGE]:20,[s.X_LARGE]:24,[s.TWO_X_LARGE]:32},te=(e,t)=>`s-ui-list-option-${e}-${t}`,u=(e,t)=>{let n=e[t];if(typeof n==`string`)return n},d=(e,t)=>{let n=e[t];return typeof n==`boolean`?n:!1},f=e=>e in a.ESIconName,p=(e,t)=>{let n=e[t];if(typeof n==`string`&&n.length>0&&f(n))return n},ne=[`role`,`aria-multiselectable`],m=[`role`,`aria-multiselectable`,`aria-activedescendant`,`tabindex`],h=[`data-index`],re={key:0,class:`s-ui-list__divider`,"aria-hidden":`true`},ie={key:0,class:`s-ui-list__divider`,"aria-hidden":`true`},ae={key:2,class:`s-ui-list__static`},g=(0,i.defineComponent)({inheritAttrs:!1,__name:`SList`,props:(0,i.mergeModels)({items:{},itemKey:{type:[String,Function],default:`id`},childrenKey:{default:`children`},titleKey:{default:`title`},subtitleKey:{default:`subtitle`},iconLeftKey:{default:`iconLeft`},disabledKey:{default:`disabled`},itemProps:{type:Function},selectionMode:{default:()=>e.n.NONE},mandatory:{type:Boolean,default:!1},virtual:{type:Boolean},gap:{default:()=>c},estimateItemSize:{default:36},overscan:{default:5},endReachedDistance:{default:0},canLoadMore:{type:Function},height:{default:320},maxHeight:{},revealRight:{type:Boolean,default:!1},iconOnly:{type:Boolean,default:!1},expandOnClick:{type:Boolean,default:!1},selectedOnTop:{type:Boolean,default:!1},hasMoreChildrenKey:{},loadingMoreChildrenKeys:{default:()=>[]}},{modelValue:{},modelModifiers:{},selected:{},selectedModifiers:{},expanded:{default:()=>[]},expandedModifiers:{}}),emits:(0,i.mergeModels)([`endReached`,`loadMoreChildren`,`itemClick`],[`update:modelValue`,`update:selected`,`update:expanded`]),setup(s,{expose:c,emit:f}){let g=(0,i.useModel)(s,`modelValue`),_=(0,i.useModel)(s,`selected`),v=(0,i.useModel)(s,`expanded`),y=f,b=(0,i.useSlots)(),{getRootAttrs:x,getAriaAttrs:oe}=t.t(),se=(0,i.useId)(),S=(0,i.useTemplateRef)(`scrollElementRef`),C=(0,i.useTemplateRef)(`listRootElementRef`),w=(0,i.computed)(()=>l[s.gap]),T=(0,i.computed)(()=>s.items!==void 0),E=(0,i.computed)(()=>T.value?s.virtual===void 0?!0:s.virtual:!1),{flatRows:D,toggleExpanded:O}=n.s({items:()=>s.items??[],childrenKey:()=>s.childrenKey,itemKey:()=>s.itemKey,expanded:v,hasMoreChildrenKey:()=>s.hasMoreChildrenKey,selectedOnTop:()=>s.selectedOnTop,selectedKeys:()=>_.value}),{t:ce}=(0,a.useUiKitI18n)(),k=(0,i.computed)(()=>new Set(s.loadingMoreChildrenKeys)),A=(0,i.computed)(()=>ce(`list.loadMore`)),j=e=>e.loadMoreForKey?k.value.has(e.loadMoreForKey):!1,M=(e,t)=>{k.value.has(e)||y(`loadMoreChildren`,{key:e,item:t})},N=e=>{e.loadMoreForKey&&M(e.loadMoreForKey,e.item)},P=e=>({parentKey:e.loadMoreForKey??``,parentItem:e.item,depth:e.depth,loading:j(e),loadMore:()=>{N(e)}}),F=(0,o.useVirtualizer)((0,i.computed)(()=>({count:D.value.length,getScrollElement:()=>S.value,estimateSize:()=>s.estimateItemSize,gap:w.value,overscan:s.overscan}))),I=(0,i.computed)(()=>{if(T.value)return D.value.reduce((e,t)=>(t.divider||e.push(t.key),e),[])}),L=(0,i.computed)(()=>{let e=new Set;for(let t of D.value)!t.loadMoreForKey&&d(t.item,s.disabledKey)&&e.add(t.key);return e}),R=async e=>{if(!E.value)return;let t=D.value.findIndex(t=>t.key===e);t!==-1&&(F.value.scrollToIndex(t,{align:`auto`}),await new Promise(e=>{requestAnimationFrame(()=>{e()})}),await(0,i.nextTick)())},z=e=>te(se,e),B=e.o({modelValue:()=>_.value,onUpdateModelValue:e=>{_.value=e},mode:()=>s.selectionMode,mandatory:()=>s.mandatory,orientation:()=>e.r.VERTICAL,enableTabNavigation:!0,focusMode:()=>E.value?e.t.ACTIVE_DESCENDANT:e.t.DOM,orderedValues:I,isValueDisabled:e=>L.value.has(e),onBeforeFocusItem:async e=>{await R(e)},onFocusGroup:()=>{S.value?.focus()}}),V=(0,i.computed)(()=>T.value&&n.t(D.value)),H=()=>{if(E.value){S.value?.focus();return}C.value?.focus()},U=()=>{B.focusedValue.value=void 0,g.value=void 0;let e=document.activeElement;e instanceof HTMLElement&&e!==S.value&&e.blur(),H()},W=async e=>{E.value&&await R(e)},G=async e=>{if(U(),e.type===`expand`||e.type===`collapse`){O(e.rowKey),B.select(e.rowKey,!1),await W(e.rowKey);return}B.select(e.rowKey,!1),await W(e.rowKey)},le=async(e,t)=>{if(!V.value||e.key!==`ArrowUp`&&e.key!==`ArrowDown`)return!1;let r=n.n(t,_.value),i=n.i(e.key,r,D.value);return i?(e.preventDefault(),U(),B.select(i,!1),await W(i),!0):!1},ue=async(e,t)=>{if(!V.value||e.key!==`ArrowLeft`&&e.key!==`ArrowRight`)return!1;let r=n.n(t,_.value),i=n.r(e.key,r,D.value);return i?(e.preventDefault(),await G(i),!0):!1},K=()=>{if(g.value)return g.value;let e=n.n(``,_.value);if(e)return e;let t=I.value;if(t){for(let e of t)if(!L.value.has(e))return e}},de=()=>K(),fe=async e=>{let t=de();t&&await q(e,t)},pe=[`Enter`,` `,`Spacebar`],me=(e,t)=>{if(!pe.includes(e.key))return!1;let n=D.value.find(e=>e.key===t);return n?.loadMoreForKey?(e.preventDefault(),M(n.loadMoreForKey,n.item),!0):!1},q=async(e,t)=>{me(e,t)||await le(e,t)||await ue(e,t)||(await B.handleItemKeydown(e,t),g.value=B.focusedValue.value,!B.focusedValue.value&&!E.value&&H())},he=async e=>{let t=K();t&&await q(e,t)},ge=async e=>{if(E.value||e.target!==C.value)return;let t=K();t&&await q(e,t)},_e=async()=>{let e=K();if(!e){H();return}await B.focusItem(e,!1)};(0,i.provide)(r.i,{mode:()=>s.selectionMode,isSelected:B.isSelected,selectItem:B.toggle,registerItem:B.registerItem,getItemTabIndex:B.getItemTabIndex,getGroupTabIndex:B.getGroupTabIndex,handleItemKeydown:q,activeKey:()=>g.value,setActiveKey:e=>{g.value=e},isExpanded:e=>v.value.includes(e),toggleExpanded:e=>{if(T.value){O(e);return}let t=new Set(v.value);t.has(e)?t.delete(e):t.add(e),v.value=[...t]},revealRight:()=>s.revealRight,iconOnly:()=>s.iconOnly,expandOnClick:()=>s.expandOnClick,getItemOptionId:e=>{if(E.value)return z(e)},usesActiveDescendantNavigation:()=>E.value,handlesTreeKeyboardNavigation:()=>T.value,itemRole:()=>V.value?r.n.TREEITEM:r.n.OPTION});let ve=(0,i.computed)(()=>F.value.getVirtualItems()),ye=(0,i.computed)(()=>ve.value.flatMap(e=>{let t=D.value[e.index];return t?[{virtualRow:e,flatRow:t}]:[]})),be=(0,i.computed)(()=>F.value.getTotalSize()),xe=(0,i.computed)(()=>({height:`${be.value}px`,position:`relative`,width:`100%`})),J=(0,i.computed)(()=>{let e={};return typeof s.height==`number`?e.height=`${s.height}px`:s.height&&(e.height=s.height),s.maxHeight&&(typeof s.maxHeight==`number`?e.maxHeight=`${s.maxHeight}px`:e.maxHeight=s.maxHeight),e}),Se=(0,i.computed)(()=>({"s-ui-list--virtual":E.value,"s-ui-list--static":!E.value,"s-ui-list--icon-only":s.iconOnly})),Ce=(0,i.computed)(()=>({"--s-ui-list-gap":ee[s.gap]})),Y=(0,i.computed)(()=>({"s-ui-list__scroll--flat":T.value&&!E.value})),X=(0,i.computed)(()=>{if(s.selectionMode===e.n.MULTIPLE)return!0}),Z=(0,i.computed)(()=>V.value?`tree`:`listbox`),we=(0,i.computed)(()=>{if(!E.value)return Z.value}),Te=(0,i.computed)(()=>{if(!E.value)return X.value}),Ee=(0,i.computed)(()=>{if(E.value)return B.getGroupTabIndex()}),De=(0,i.computed)(()=>g.value?g.value:n.n(``,_.value)),Oe=(0,i.computed)(()=>{if(!E.value)return;let e=De.value;if(e)return z(e)});n.a(()=>S.value,{distance:()=>s.endReachedDistance,canLoadMore:()=>s.canLoadMore?.()??!0,onEndReached:()=>{y(`endReached`,{direction:`bottom`})}});let ke=e=>({position:`absolute`,top:0,left:0,width:`100%`,transform:`translateY(${e.start}px)`}),Ae=e=>{e instanceof HTMLElement&&F.value.measureElement(e)},Q=e=>{let t=e.item,n={rowKey:e.key,depth:e.depth,expandable:e.hasChildren,expanded:e.expanded,selected:B.isSelected(e.key),active:g.value===e.key,disabled:d(t,s.disabledKey),title:u(t,s.titleKey),subtitle:u(t,s.subtitleKey),iconLeft:p(t,s.iconLeftKey),revealRight:s.revealRight,onClick:()=>{y(`itemClick`,{key:e.key,item:e.item})}};return s.itemProps?{...n,...s.itemProps(t,e)}:n},$=e=>({...e,revealRight:s.revealRight,toggleExpanded:()=>{O(e.key)}});return c({focusNavigation:_e,handleKeyboardNavigation:he}),(e,t)=>((0,i.openBlock)(),(0,i.createElementBlock)(`div`,(0,i.mergeProps)({ref_key:`listRootElementRef`,ref:C,class:[`s-ui-list`,Se.value],style:Ce.value},E.value?(0,i.unref)(x)():e.$attrs,{role:we.value,"aria-multiselectable":Te.value,tabindex:`-1`,onKeydown:ge}),[T.value&&E.value?((0,i.openBlock)(),(0,i.createElementBlock)(`div`,(0,i.mergeProps)({key:0,ref_key:`scrollElementRef`,ref:S,class:[`s-ui-list__scroll`,Y.value],style:J.value,role:Z.value,"aria-multiselectable":X.value,"aria-activedescendant":Oe.value},(0,i.unref)(oe)(),{tabindex:Ee.value,onKeydown:fe}),[(0,i.createElementVNode)(`div`,{class:`s-ui-list__virtual-panel`,style:(0,i.normalizeStyle)(xe.value)},[((0,i.openBlock)(!0),(0,i.createElementBlock)(i.Fragment,null,(0,i.renderList)(ye.value,t=>((0,i.openBlock)(),(0,i.createElementBlock)(`div`,{key:t.virtualRow.index,class:`s-ui-list__virtual-row`,"data-index":t.virtualRow.index,ref_for:!0,ref:Ae,style:(0,i.normalizeStyle)(ke(t.virtualRow))},[t.flatRow.divider?((0,i.openBlock)(),(0,i.createElementBlock)(`div`,re)):t.flatRow.loadMoreForKey?((0,i.openBlock)(),(0,i.createElementBlock)(i.Fragment,{key:1},[(0,i.unref)(b).loadMore?(0,i.renderSlot)(e.$slots,`loadMore`,(0,i.mergeProps)({key:0,ref_for:!0},P(t.flatRow))):((0,i.openBlock)(),(0,i.createBlock)((0,i.unref)(r.t),{key:1,"row-key":t.flatRow.key,depth:t.flatRow.depth,tiny:``,title:A.value,onClick:e=>N(t.flatRow)},(0,i.createSlots)({_:2},[j(t.flatRow)?{name:`icon-left`,fn:(0,i.withCtx)(()=>[(0,i.createVNode)((0,i.unref)(a.SSpinner),{size:16})]),key:`0`}:void 0]),1032,[`row-key`,`depth`,`title`,`onClick`]))],64)):((0,i.openBlock)(),(0,i.createElementBlock)(i.Fragment,{key:2},[(0,i.unref)(b).item?(0,i.renderSlot)(e.$slots,`item`,(0,i.mergeProps)({key:0,ref_for:!0},$(t.flatRow))):((0,i.openBlock)(),(0,i.createBlock)((0,i.unref)(r.t),(0,i.mergeProps)({key:1,ref_for:!0},Q(t.flatRow)),(0,i.createSlots)({_:2},[(0,i.unref)(b).itemIconLeft?{name:`icon-left`,fn:(0,i.withCtx)(()=>[(0,i.renderSlot)(e.$slots,`itemIconLeft`,(0,i.mergeProps)({ref_for:!0},$(t.flatRow)))]),key:`0`}:void 0,(0,i.unref)(b).itemTitle?{name:`title`,fn:(0,i.withCtx)(()=>[(0,i.renderSlot)(e.$slots,`itemTitle`,(0,i.mergeProps)({ref_for:!0},$(t.flatRow)))]),key:`1`}:void 0,(0,i.unref)(b).itemSubtitle?{name:`subtitle`,fn:(0,i.withCtx)(()=>[(0,i.renderSlot)(e.$slots,`itemSubtitle`,(0,i.mergeProps)({ref_for:!0},$(t.flatRow)))]),key:`2`}:void 0]),1040))],64))],12,h))),128))],4)],16,m)):T.value?((0,i.openBlock)(),(0,i.createElementBlock)(`div`,{key:1,ref_key:`scrollElementRef`,ref:S,class:(0,i.normalizeClass)([`s-ui-list__scroll`,Y.value]),style:(0,i.normalizeStyle)(J.value)},[((0,i.openBlock)(!0),(0,i.createElementBlock)(i.Fragment,null,(0,i.renderList)((0,i.unref)(D),t=>((0,i.openBlock)(),(0,i.createElementBlock)(i.Fragment,{key:t.key},[t.divider?((0,i.openBlock)(),(0,i.createElementBlock)(`div`,ie)):t.loadMoreForKey?((0,i.openBlock)(),(0,i.createElementBlock)(i.Fragment,{key:1},[(0,i.unref)(b).loadMore?(0,i.renderSlot)(e.$slots,`loadMore`,(0,i.mergeProps)({key:0,ref_for:!0},P(t))):((0,i.openBlock)(),(0,i.createBlock)((0,i.unref)(r.t),{key:1,"row-key":t.key,depth:t.depth,tiny:``,title:A.value,onClick:e=>N(t)},(0,i.createSlots)({_:2},[j(t)?{name:`icon-left`,fn:(0,i.withCtx)(()=>[(0,i.createVNode)((0,i.unref)(a.SSpinner),{size:16})]),key:`0`}:void 0]),1032,[`row-key`,`depth`,`title`,`onClick`]))],64)):((0,i.openBlock)(),(0,i.createElementBlock)(i.Fragment,{key:2},[(0,i.unref)(b).item?(0,i.renderSlot)(e.$slots,`item`,(0,i.mergeProps)({key:0,ref_for:!0},$(t))):((0,i.openBlock)(),(0,i.createBlock)((0,i.unref)(r.t),(0,i.mergeProps)({key:1,ref_for:!0},Q(t)),(0,i.createSlots)({_:2},[(0,i.unref)(b).itemIconLeft?{name:`icon-left`,fn:(0,i.withCtx)(()=>[(0,i.renderSlot)(e.$slots,`itemIconLeft`,(0,i.mergeProps)({ref_for:!0},$(t)))]),key:`0`}:void 0,(0,i.unref)(b).itemTitle?{name:`title`,fn:(0,i.withCtx)(()=>[(0,i.renderSlot)(e.$slots,`itemTitle`,(0,i.mergeProps)({ref_for:!0},$(t)))]),key:`1`}:void 0,(0,i.unref)(b).itemSubtitle?{name:`subtitle`,fn:(0,i.withCtx)(()=>[(0,i.renderSlot)(e.$slots,`itemSubtitle`,(0,i.mergeProps)({ref_for:!0},$(t)))]),key:`2`}:void 0]),1040))],64))],64))),128))],6)):((0,i.openBlock)(),(0,i.createElementBlock)(`div`,ae,[(0,i.renderSlot)(e.$slots,`default`)]))],16,ne))}});Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return g}});

package/dist/{SList-WUROy6L6.js → SList-T_fgzdb3.js}

@@ -1,7 +1,7 @@
 import { n as e, o as t, r as n, t as r } from "./useSelectionGroup-BCAmPf3R.js";
 import { t as ee } from "./useAriaAttrs-CxGRTeye.js";
 import { a as te, i as ne, n as i, r as re, s as ie, t as ae } from "./treeKeyboardNavigation-SmxTdnDz.js";
-import { i as oe, n as a, t as o } from "./SListItem-BCC_BAUR.js";
+import { i as oe, n as a, t as o } from "./SListItem-CQKZw5Uj.js";
 import { Fragment as s, computed as c, createBlock as l, createElementBlock as u, createElementVNode as se, createSlots as d, createVNode as f, defineComponent as p, mergeModels as m, mergeProps as h, nextTick as ce, normalizeClass as le, normalizeStyle as g, openBlock as _, provide as ue, renderList as de, renderSlot as v, unref as y, useId as fe, useModel as b, useSlots as pe, useTemplateRef as x, withCtx as S } from "vue";
 import { ESIconName as C, SSpinner as me, useUiKitI18n as he } from "@shtabapp/ui-kit-primitives";
 import { useVirtualizer as ge } from "@tanstack/vue-virtual";
@@ -85,6 +85,10 @@ var w = /* @__PURE__ */ function(e) {
 			type: Boolean,
 			default: !1
 		},
+		iconOnly: {
+			type: Boolean,
+			default: !1
+		},
 		expandOnClick: {
 			type: Boolean,
 			default: !1
@@ -258,6 +262,7 @@ var w = /* @__PURE__ */ function(e) {
 				t.has(e) ? t.delete(e) : t.add(e), O.value = [...t];
 			},
 			revealRight: () => p.revealRight,
+			iconOnly: () => p.iconOnly,
 			expandOnClick: () => p.expandOnClick,
 			getItemOptionId: (e) => {
 				if (P.value) return W(e);
@@ -281,7 +286,8 @@ var w = /* @__PURE__ */ function(e) {
 			return typeof p.height == "number" ? e.height = `${p.height}px` : p.height && (e.height = p.height), p.maxHeight && (typeof p.maxHeight == "number" ? e.maxHeight = `${p.maxHeight}px` : e.maxHeight = p.maxHeight), e;
 		}), Xe = c(() => ({
 			"s-ui-list--virtual": P.value,
-			"s-ui-list--static": !P.value
+			"s-ui-list--static": !P.value,
+			"s-ui-list--icon-only": p.iconOnly
 		})), Ze = c(() => ({ "--s-ui-list-gap": _e[p.gap] })), Q = c(() => ({ "s-ui-list__scroll--flat": N.value && !P.value })), Qe = c(() => {
 			if (p.selectionMode === e.MULTIPLE) return !0;
 		}), $e = c(() => K.value ? "tree" : "listbox"), et = c(() => {

package/dist/SListItem-CQKZw5Uj.js

@@ -0,0 +1,246 @@
+import { i as e, n as t, r as n, t as r } from "./SButton-n2Zuqh04.js";
+import { n as i } from "./useSelectLink-2aCIYmF6.js";
+import { Fragment as ee, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, defineComponent as d, guardReactiveProps as f, inject as te, mergeProps as ne, normalizeClass as re, normalizeProps as p, onMounted as ie, openBlock as m, renderSlot as h, shallowRef as ae, toDisplayString as g, unref as _, useSlots as oe, useTemplateRef as se, withModifiers as ce } from "vue";
+import { ESSkeletonType as le, SIcon as ue, SSkeleton as de, useUiKitI18n as fe } from "@shtabapp/ui-kit-primitives";
+//#region src/components/SList/utils/context.ts
+var v = Symbol("sListInjectionKey"), y = /* @__PURE__ */ function(e) {
+	return e.NEUTRAL = "neutral", e.SECONDARY = "secondary", e.MAIN = "main", e.ERROR = "error", e.BILLING = "billing", e;
+}({}), b = /* @__PURE__ */ function(e) {
+	return e.OPTION = "option", e.TREEITEM = "treeitem", e.MENUITEM = "menuitem", e.MENUITEMCHECKBOX = "menuitemcheckbox", e.MENUITEMRADIO = "menuitemradio", e.BUTTON = "button", e.LINK = "link", e.NONE = "none", e;
+}({}), x = new Set([b.OPTION, b.TREEITEM]), S = new Set([b.MENUITEMCHECKBOX, b.MENUITEMRADIO]), C = new Set([
+	b.TREEITEM,
+	b.MENUITEM,
+	b.BUTTON,
+	b.LINK
+]), w = ({ role: e, selected: t }) => ({
+	"aria-selected": x.has(e) && t ? !0 : void 0,
+	"aria-checked": S.has(e) ? t : void 0
+}), T = ({ role: e, expandable: t, expanded: n, loading: r, depth: i }) => ({
+	"aria-expanded": C.has(e) && t && !r ? n : void 0,
+	"aria-level": e === b.TREEITEM ? i + 1 : void 0
+}), E = ({ disabled: e, readonly: t, loading: n }) => ({
+	"aria-disabled": e || t || n ? !0 : void 0,
+	"aria-busy": n ? !0 : void 0
+}), pe = (e) => e.role === b.NONE ? { role: e.role } : {
+	role: e.role,
+	...w(e),
+	...T(e),
+	...E(e)
+}, D = [
+	"id",
+	"tabindex",
+	"title"
+], O = {
+	key: 0,
+	class: "s-ui-list-item__level"
+}, k = { class: "s-ui-list-item__body" }, A = {
+	key: 0,
+	class: "s-ui-list-item__icon-left"
+}, j = { class: "s-ui-list-item__text" }, M = {
+	key: 0,
+	class: "s-ui-list-item__title s-ui-typography-label-14-medium"
+}, N = {
+	key: 1,
+	class: "s-ui-list-item__subtitle s-ui-typography-body-12-regular"
+}, P = {
+	key: 1,
+	class: "s-ui-list-item__title-action"
+}, F = {
+	key: 1,
+	class: "s-ui-list-item__actions"
+}, I = { class: "s-ui-list-item__actions-reveal" }, L = { class: "s-ui-list-item__actions-inner" }, R = {
+	key: 0,
+	class: "s-ui-list-item__trailing"
+}, z = {
+	key: 1,
+	class: "s-ui-list-item__action-end"
+}, B = ".s-ui-list-item__expand, .s-ui-list-item__title-action, .s-ui-list-item__actions", me = 16, he = "a, button, input, select, textarea, [role=\"button\"], [role=\"link\"], [contenteditable=\"true\"]", V = /* @__PURE__ */ d({
+	__name: "SListItem",
+	props: {
+		depth: { default: 0 },
+		hasLevel: {
+			type: Boolean,
+			default: !1
+		},
+		expandable: {
+			type: Boolean,
+			default: !1
+		},
+		expanded: {
+			type: Boolean,
+			default: !1
+		},
+		variant: { default: () => y.NEUTRAL },
+		tiny: {
+			type: Boolean,
+			default: !1
+		},
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		flush: {
+			type: Boolean,
+			default: !1
+		},
+		transparent: {
+			type: Boolean,
+			default: !1
+		},
+		selected: {
+			type: Boolean,
+			default: !1
+		},
+		active: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		iconOnly: {
+			type: Boolean,
+			default: !1
+		},
+		title: {},
+		subtitle: {},
+		iconLeft: {},
+		iconLeftSize: {},
+		rowKey: {},
+		revealRight: { type: Boolean },
+		expandOnClick: { type: Boolean },
+		role: {}
+	},
+	emits: [
+		"click",
+		"toggleExpand",
+		"keydown"
+	],
+	setup(d, { expose: x, emit: S }) {
+		let C = S, w = a(() => ({
+			disabled: d.disabled,
+			readonly: d.readonly
+		})), T = oe(), E = se("listItemElementRef"), V = te(v, null), { t: H } = fe(), U = i({
+			group: () => V,
+			value: () => d.rowKey,
+			el: () => E.value,
+			disabled: () => d.disabled || d.loading,
+			interactive: () => !d.readonly && !d.loading
+		}), ge = a(() => d.variant === y.BILLING && !d.disabled), _e = [
+			"Enter",
+			" ",
+			"Spacebar"
+		], W = a(() => V && d.rowKey ? V.isExpanded(d.rowKey) : d.expanded), ve = a(() => W.value ? H("listItem.collapse") : H("listItem.expand")), G = a(() => U.isInGroup.value ? U.isActive.value : d.selected), ye = a(() => V && d.rowKey ? V.activeKey() === d.rowKey : d.active), K = a(() => d.iconOnly || !!V?.iconOnly()), q = (e) => !K.value && !!e, be = a(() => q(d.expandable || d.depth || d.hasLevel || T.level)), xe = a(() => q(T["title-action"])), J = a(() => q(T.trailing)), Y = a(() => q(T["action-end"])), Se = a(() => J.value || !!T.right || Y.value), Ce = a(() => K.value ? !1 : d.revealRight ? !0 : V ? V.revealRight() : !1), we = a(() => d.expandOnClick ? !0 : V ? V.expandOnClick() : !1), Te = a(() => {
+			if (!(!V || !d.rowKey)) return V.getItemOptionId(d.rowKey);
+		}), X = ae(!1);
+		ie(() => {
+			X.value = !!E.value?.parentElement?.closest("[role=\"menu\"]");
+		});
+		let Z = a(() => d.role ? d.role : V ? V.itemRole() : X.value ? b.MENUITEM : b.BUTTON), Ee = a(() => pe({
+			role: Z.value,
+			selected: G.value,
+			expandable: d.expandable,
+			expanded: W.value,
+			disabled: d.disabled,
+			readonly: d.readonly,
+			loading: d.loading,
+			depth: d.depth
+		})), De = a(() => {
+			if (V?.usesActiveDescendantNavigation()) return -1;
+			if (!(d.disabled || d.readonly || d.loading || Z.value === b.NONE)) return U.tabIndex.value === void 0 ? 0 : U.tabIndex.value;
+		}), Oe = a(() => ({
+			"--s-ui-list-item-depth": String(d.depth),
+			"--s-ui-list-item-icon-size": d.iconLeftSize === void 0 ? void 0 : `${d.iconLeftSize}px`
+		})), ke = a(() => [`s-ui-list-item--variant-${d.variant}`, {
+			"s-ui-list-item--tiny": d.tiny,
+			"s-ui-list-item--compact": d.compact,
+			"s-ui-list-item--flush": d.flush,
+			"s-ui-list-item--transparent": d.transparent,
+			"s-ui-list-item--selected": G.value,
+			"s-ui-list-item--active": ye.value,
+			"s-ui-list-item--disabled": d.disabled,
+			"s-ui-list-item--readonly": d.readonly,
+			"s-ui-list-item--loading": d.loading,
+			"s-ui-list-item--expandable": d.expandable,
+			"s-ui-list-item--reveal-right": Ce.value,
+			"s-ui-list-item--icon-only": K.value
+		}]), Q = () => {
+			if (V && d.rowKey) {
+				V.toggleExpanded(d.rowKey);
+				return;
+			}
+			C("toggleExpand");
+		}, Ae = () => {
+			d.disabled || d.readonly || d.loading || Q();
+		}, $ = (e) => e.target instanceof Element && !!e.target.closest(B) && !!e.target.closest(he), je = (e) => {
+			d.disabled || d.readonly || d.loading || $(e) || (d.expandable && we.value && (V && d.rowKey ? V.toggleExpanded(d.rowKey) : C("toggleExpand")), V && d.rowKey && V.setActiveKey(d.rowKey), U.isInGroup.value && U.handleClick(), C("click", e));
+		}, Me = (e) => !d.expandable || V?.handlesTreeKeyboardNavigation() || e.key !== "ArrowLeft" && e.key !== "ArrowRight" || e.key === "ArrowRight" === W.value ? !1 : (e.preventDefault(), Q(), !0), Ne = (e) => V || U.isInGroup.value || !_e.includes(e.key) || e.target !== E.value ? !1 : (e.preventDefault(), E.value?.click(), !0), Pe = (e) => {
+			d.disabled || d.readonly || d.loading || (!Me(e) && !Ne(e) && U.isInGroup.value && U.handleKeydown(e), C("keydown", e));
+		};
+		return x({ listItemElementRef: E }), (i, a) => (m(), c("div", ne({
+			ref_key: "listItemElementRef",
+			ref: E,
+			id: Te.value,
+			class: ["s-ui-list-item", ke.value],
+			style: Oe.value,
+			tabindex: De.value,
+			title: K.value ? d.title : void 0
+		}, Ee.value, {
+			onClick: je,
+			onKeydown: Pe
+		}), [d.loading ? (m(), o(_(de), {
+			key: 0,
+			type: _(le).S_LIST_ITEM
+		}, null, 8, ["type"])) : (m(), c(ee, { key: 1 }, [
+			be.value ? (m(), c("div", O, [h(i.$slots, "level", {}, () => [d.expandable ? (m(), o(_(r), {
+				key: 0,
+				class: re(["s-ui-list-item__expand", { "s-ui-list-item__expand--expanded": W.value }]),
+				appearance: _(t).BARE,
+				variant: _(e).NEUTRAL,
+				size: _(n).SMALL,
+				icon: "chevronMiniRight",
+				disabled: d.disabled || d.readonly,
+				tabindex: -1,
+				"aria-label": ve.value,
+				onClick: ce(Ae, ["stop"])
+			}, null, 8, [
+				"class",
+				"appearance",
+				"variant",
+				"size",
+				"disabled",
+				"aria-label"
+			])) : s("", !0)])])) : s("", !0),
+			l("div", k, [
+				d.iconLeft || _(T)["icon-left"] ? (m(), c("div", A, [h(i.$slots, "icon-left", {}, () => [d.iconLeft ? (m(), o(_(ue), {
+					key: 0,
+					name: d.iconLeft,
+					size: d.iconLeftSize ?? me,
+					billing: ge.value
+				}, null, 8, [
+					"name",
+					"size",
+					"billing"
+				])) : s("", !0)])])) : s("", !0),
+				l("div", j, [d.title || _(T).title ? (m(), c("span", M, [h(i.$slots, "title", {}, () => [u(g(d.title), 1)])])) : s("", !0), d.subtitle || _(T).subtitle ? (m(), c("span", N, [h(i.$slots, "subtitle", {}, () => [u(g(d.subtitle), 1)])])) : s("", !0)]),
+				xe.value ? (m(), c("div", P, [h(i.$slots, "title-action", p(f(w.value)))])) : s("", !0)
+			]),
+			Se.value ? (m(), c("div", F, [l("div", I, [l("div", L, [
+				J.value ? (m(), c("div", R, [h(i.$slots, "trailing", p(f(w.value)))])) : s("", !0),
+				h(i.$slots, "right", p(f(w.value))),
+				Y.value ? (m(), c("div", z, [h(i.$slots, "action-end", p(f(w.value)))])) : s("", !0)
+			])])])) : s("", !0)
+		], 64))], 16, D));
+	}
+});
+//#endregion
+export { v as i, b as n, y as r, V as t };

package/dist/SListItem-CrAnC2MG.cjs

@@ -0,0 +1 @@
+const e=require("./SButton-CZW6Y8Vw.cjs"),t=require("./useSelectLink-DZIAhQ2J.cjs");let n=require("vue"),r=require("@shtabapp/ui-kit-primitives");var i=Symbol(`sListInjectionKey`),a=function(e){return e.NEUTRAL=`neutral`,e.SECONDARY=`secondary`,e.MAIN=`main`,e.ERROR=`error`,e.BILLING=`billing`,e}({}),o=function(e){return e.OPTION=`option`,e.TREEITEM=`treeitem`,e.MENUITEM=`menuitem`,e.MENUITEMCHECKBOX=`menuitemcheckbox`,e.MENUITEMRADIO=`menuitemradio`,e.BUTTON=`button`,e.LINK=`link`,e.NONE=`none`,e}({}),s=new Set([o.OPTION,o.TREEITEM]),c=new Set([o.MENUITEMCHECKBOX,o.MENUITEMRADIO]),l=new Set([o.TREEITEM,o.MENUITEM,o.BUTTON,o.LINK]),u=({role:e,selected:t})=>({"aria-selected":s.has(e)&&t?!0:void 0,"aria-checked":c.has(e)?t:void 0}),d=({role:e,expandable:t,expanded:n,loading:r,depth:i})=>({"aria-expanded":l.has(e)&&t&&!r?n:void 0,"aria-level":e===o.TREEITEM?i+1:void 0}),f=({disabled:e,readonly:t,loading:n})=>({"aria-disabled":e||t||n?!0:void 0,"aria-busy":n?!0:void 0}),p=e=>e.role===o.NONE?{role:e.role}:{role:e.role,...u(e),...d(e),...f(e)},m=[`id`,`tabindex`,`title`],h={key:0,class:`s-ui-list-item__level`},g={class:`s-ui-list-item__body`},_={key:0,class:`s-ui-list-item__icon-left`},v={class:`s-ui-list-item__text`},y={key:0,class:`s-ui-list-item__title s-ui-typography-label-14-medium`},b={key:1,class:`s-ui-list-item__subtitle s-ui-typography-body-12-regular`},x={key:1,class:`s-ui-list-item__title-action`},S={key:1,class:`s-ui-list-item__actions`},C={class:`s-ui-list-item__actions-reveal`},w={class:`s-ui-list-item__actions-inner`},T={key:0,class:`s-ui-list-item__trailing`},ee={key:1,class:`s-ui-list-item__action-end`},E=`.s-ui-list-item__expand, .s-ui-list-item__title-action, .s-ui-list-item__actions`,D=16,O=`a, button, input, select, textarea, [role="button"], [role="link"], [contenteditable="true"]`,k=(0,n.defineComponent)({__name:`SListItem`,props:{depth:{default:0},hasLevel:{type:Boolean,default:!1},expandable:{type:Boolean,default:!1},expanded:{type:Boolean,default:!1},variant:{default:()=>a.NEUTRAL},tiny:{type:Boolean,default:!1},compact:{type:Boolean,default:!1},flush:{type:Boolean,default:!1},transparent:{type:Boolean,default:!1},selected:{type:Boolean,default:!1},active:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},iconOnly:{type:Boolean,default:!1},title:{},subtitle:{},iconLeft:{},iconLeftSize:{},rowKey:{},revealRight:{type:Boolean},expandOnClick:{type:Boolean},role:{}},emits:[`click`,`toggleExpand`,`keydown`],setup(s,{expose:c,emit:l}){let u=l,d=(0,n.computed)(()=>({disabled:s.disabled,readonly:s.readonly})),f=(0,n.useSlots)(),k=(0,n.useTemplateRef)(`listItemElementRef`),A=(0,n.inject)(i,null),{t:j}=(0,r.useUiKitI18n)(),M=t.n({group:()=>A,value:()=>s.rowKey,el:()=>k.value,disabled:()=>s.disabled||s.loading,interactive:()=>!s.readonly&&!s.loading}),N=(0,n.computed)(()=>s.variant===a.BILLING&&!s.disabled),P=[`Enter`,` `,`Spacebar`],F=(0,n.computed)(()=>A&&s.rowKey?A.isExpanded(s.rowKey):s.expanded),I=(0,n.computed)(()=>F.value?j(`listItem.collapse`):j(`listItem.expand`)),L=(0,n.computed)(()=>M.isInGroup.value?M.isActive.value:s.selected),R=(0,n.computed)(()=>A&&s.rowKey?A.activeKey()===s.rowKey:s.active),z=(0,n.computed)(()=>s.iconOnly||!!A?.iconOnly()),B=e=>!z.value&&!!e,V=(0,n.computed)(()=>B(s.expandable||s.depth||s.hasLevel||f.level)),te=(0,n.computed)(()=>B(f[`title-action`])),H=(0,n.computed)(()=>B(f.trailing)),U=(0,n.computed)(()=>B(f[`action-end`])),W=(0,n.computed)(()=>H.value||!!f.right||U.value),G=(0,n.computed)(()=>z.value?!1:s.revealRight?!0:A?A.revealRight():!1),K=(0,n.computed)(()=>s.expandOnClick?!0:A?A.expandOnClick():!1),q=(0,n.computed)(()=>{if(!(!A||!s.rowKey))return A.getItemOptionId(s.rowKey)}),J=(0,n.shallowRef)(!1);(0,n.onMounted)(()=>{J.value=!!k.value?.parentElement?.closest(`[role="menu"]`)});let Y=(0,n.computed)(()=>s.role?s.role:A?A.itemRole():J.value?o.MENUITEM:o.BUTTON),X=(0,n.computed)(()=>p({role:Y.value,selected:L.value,expandable:s.expandable,expanded:F.value,disabled:s.disabled,readonly:s.readonly,loading:s.loading,depth:s.depth})),Z=(0,n.computed)(()=>{if(A?.usesActiveDescendantNavigation())return-1;if(!(s.disabled||s.readonly||s.loading||Y.value===o.NONE))return M.tabIndex.value===void 0?0:M.tabIndex.value}),Q=(0,n.computed)(()=>({"--s-ui-list-item-depth":String(s.depth),"--s-ui-list-item-icon-size":s.iconLeftSize===void 0?void 0:`${s.iconLeftSize}px`})),ne=(0,n.computed)(()=>[`s-ui-list-item--variant-${s.variant}`,{"s-ui-list-item--tiny":s.tiny,"s-ui-list-item--compact":s.compact,"s-ui-list-item--flush":s.flush,"s-ui-list-item--transparent":s.transparent,"s-ui-list-item--selected":L.value,"s-ui-list-item--active":R.value,"s-ui-list-item--disabled":s.disabled,"s-ui-list-item--readonly":s.readonly,"s-ui-list-item--loading":s.loading,"s-ui-list-item--expandable":s.expandable,"s-ui-list-item--reveal-right":G.value,"s-ui-list-item--icon-only":z.value}]),$=()=>{if(A&&s.rowKey){A.toggleExpanded(s.rowKey);return}u(`toggleExpand`)},re=()=>{s.disabled||s.readonly||s.loading||$()},ie=e=>e.target instanceof Element&&!!e.target.closest(E)&&!!e.target.closest(O),ae=e=>{s.disabled||s.readonly||s.loading||ie(e)||(s.expandable&&K.value&&(A&&s.rowKey?A.toggleExpanded(s.rowKey):u(`toggleExpand`)),A&&s.rowKey&&A.setActiveKey(s.rowKey),M.isInGroup.value&&M.handleClick(),u(`click`,e))},oe=e=>!s.expandable||A?.handlesTreeKeyboardNavigation()||e.key!==`ArrowLeft`&&e.key!==`ArrowRight`||e.key===`ArrowRight`===F.value?!1:(e.preventDefault(),$(),!0),se=e=>A||M.isInGroup.value||!P.includes(e.key)||e.target!==k.value?!1:(e.preventDefault(),k.value?.click(),!0),ce=e=>{s.disabled||s.readonly||s.loading||(!oe(e)&&!se(e)&&M.isInGroup.value&&M.handleKeydown(e),u(`keydown`,e))};return c({listItemElementRef:k}),(t,i)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,(0,n.mergeProps)({ref_key:`listItemElementRef`,ref:k,id:q.value,class:[`s-ui-list-item`,ne.value],style:Q.value,tabindex:Z.value,title:z.value?s.title:void 0},X.value,{onClick:ae,onKeydown:ce}),[s.loading?((0,n.openBlock)(),(0,n.createBlock)((0,n.unref)(r.SSkeleton),{key:0,type:(0,n.unref)(r.ESSkeletonType).S_LIST_ITEM},null,8,[`type`])):((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,{key:1},[V.value?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,h,[(0,n.renderSlot)(t.$slots,`level`,{},()=>[s.expandable?((0,n.openBlock)(),(0,n.createBlock)((0,n.unref)(e.t),{key:0,class:(0,n.normalizeClass)([`s-ui-list-item__expand`,{"s-ui-list-item__expand--expanded":F.value}]),appearance:(0,n.unref)(e.n).BARE,variant:(0,n.unref)(e.i).NEUTRAL,size:(0,n.unref)(e.r).SMALL,icon:`chevronMiniRight`,disabled:s.disabled||s.readonly,tabindex:-1,"aria-label":I.value,onClick:(0,n.withModifiers)(re,[`stop`])},null,8,[`class`,`appearance`,`variant`,`size`,`disabled`,`aria-label`])):(0,n.createCommentVNode)(``,!0)])])):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`div`,g,[s.iconLeft||(0,n.unref)(f)[`icon-left`]?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,_,[(0,n.renderSlot)(t.$slots,`icon-left`,{},()=>[s.iconLeft?((0,n.openBlock)(),(0,n.createBlock)((0,n.unref)(r.SIcon),{key:0,name:s.iconLeft,size:s.iconLeftSize??D,billing:N.value},null,8,[`name`,`size`,`billing`])):(0,n.createCommentVNode)(``,!0)])])):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`div`,v,[s.title||(0,n.unref)(f).title?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,y,[(0,n.renderSlot)(t.$slots,`title`,{},()=>[(0,n.createTextVNode)((0,n.toDisplayString)(s.title),1)])])):(0,n.createCommentVNode)(``,!0),s.subtitle||(0,n.unref)(f).subtitle?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,b,[(0,n.renderSlot)(t.$slots,`subtitle`,{},()=>[(0,n.createTextVNode)((0,n.toDisplayString)(s.subtitle),1)])])):(0,n.createCommentVNode)(``,!0)]),te.value?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,x,[(0,n.renderSlot)(t.$slots,`title-action`,(0,n.normalizeProps)((0,n.guardReactiveProps)(d.value)))])):(0,n.createCommentVNode)(``,!0)]),W.value?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,S,[(0,n.createElementVNode)(`div`,C,[(0,n.createElementVNode)(`div`,w,[H.value?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,T,[(0,n.renderSlot)(t.$slots,`trailing`,(0,n.normalizeProps)((0,n.guardReactiveProps)(d.value)))])):(0,n.createCommentVNode)(``,!0),(0,n.renderSlot)(t.$slots,`right`,(0,n.normalizeProps)((0,n.guardReactiveProps)(d.value))),U.value?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,ee,[(0,n.renderSlot)(t.$slots,`action-end`,(0,n.normalizeProps)((0,n.guardReactiveProps)(d.value)))])):(0,n.createCommentVNode)(``,!0)])])])):(0,n.createCommentVNode)(``,!0)],64))],16,m))}});Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return k}});

package/dist/{SSegmentControl-Bjech2v4.js → SSegmentControl-BQ8fg3m-.js}

@@ -8,15 +8,17 @@ import { useResizeObserver as R } from "@vueuse/core";
 //#region src/components/SSegmentControl/SSegmentControl.types.ts
 var z = /* @__PURE__ */ function(e) {
 	return e.SMALL = "small", e.MEDIUM = "medium", e;
-}({}), B = Symbol("SSegmentControl"), V = {
+}({}), B = /* @__PURE__ */ function(e) {
+	return e.DEFAULT = "default", e.ROUNDED = "rounded", e;
+}({}), V = Symbol("SSegmentControl"), H = {
 	key: 0,
 	class: "s-ui-segment-control__icon",
 	"aria-hidden": "true"
-}, H = /* @__PURE__ */ v({
+}, U = /* @__PURE__ */ v({
 	__name: "SSegmentControlItem",
 	props: { item: {} },
 	setup(e) {
-		let t = y(B, null), n = {
+		let t = y(V, null), n = {
 			[z.SMALL]: "s-ui-typography-label-12-medium",
 			[z.MEDIUM]: "s-ui-typography-label-14-medium"
 		}, r = {
@@ -43,7 +45,7 @@ var z = /* @__PURE__ */ function(e) {
 			"s-ui-segment-control__item--selected": w.value,
 			"s-ui-segment-control__item--icon-only": !!e.item.iconOnly,
 			"s-ui-segment-control__item--link": s(e.item.link)
-		})), H = f(() => ({
+		})), B = f(() => ({
 			...o(E.value, { replace: e.item.replace }),
 			disabled: O.value && b.value ? !0 : void 0,
 			"aria-disabled": !O.value && b.value ? !0 : void 0
@@ -68,7 +70,7 @@ var z = /* @__PURE__ */ function(e) {
 			role: "radio",
 			class: ["s-ui-segment-control__item", R.value],
 			type: O.value ? "button" : void 0
-		}, H.value, {
+		}, B.value, {
 			"aria-checked": w.value ? "true" : "false",
 			"aria-label": F.value,
 			tabindex: U.value,
@@ -76,7 +78,7 @@ var z = /* @__PURE__ */ function(e) {
 			onClick: G,
 			onKeydown: W
 		}), {
-			default: I(() => [e.item.icon ? (T(), h("span", V, [_(M(L), {
+			default: I(() => [e.item.icon ? (T(), h("span", H, [_(M(L), {
 				name: e.item.icon,
 				size: d.value
 			}, null, 8, ["name", "size"])])) : m("", !0), e.item.label && !e.item.iconOnly ? (T(), h("span", {
@@ -93,14 +95,14 @@ var z = /* @__PURE__ */ function(e) {
 			"name"
 		]));
 	}
-}), U = ".s-ui-segment-control__item", W = ({ trackEl: e, activeIndex: t, itemCount: n }) => {
+}), W = ".s-ui-segment-control__item", G = ({ trackEl: e, activeIndex: t, itemCount: n }) => {
 	let r = D(u()), i = () => {
 		let n = j(e), i = j(t);
 		if (!n || i < 0) {
 			r.value = u();
 			return;
 		}
-		let a = n.querySelectorAll(U).item(i);
+		let a = n.querySelectorAll(W).item(i);
 		if (!(a instanceof HTMLElement)) {
 			r.value = u();
 			return;
@@ -124,11 +126,12 @@ var z = /* @__PURE__ */ function(e) {
 		}),
 		updateMetrics: i
 	};
-}, G = ["aria-disabled"], K = /* @__PURE__ */ v({
+}, K = ["aria-disabled"], q = /* @__PURE__ */ v({
 	__name: "SSegmentControl",
 	props: /*@__PURE__*/ b({
 		items: {},
 		size: { default: () => z.MEDIUM },
+		shape: { default: () => B.DEFAULT },
 		fullWidth: {
 			type: Boolean,
 			default: !1
@@ -158,7 +161,7 @@ var z = /* @__PURE__ */ function(e) {
 			orientation: r.HORIZONTAL,
 			loop: !0
 		});
-		E(B, {
+		E(V, {
 			mode: () => t.SINGLE,
 			isSelected: l.isSelected,
 			selectItem: l.select,
@@ -170,7 +173,7 @@ var z = /* @__PURE__ */ function(e) {
 			name: () => i.name,
 			size: () => i.size
 		});
-		let { indicatorStyle: u } = W({
+		let { indicatorStyle: u } = G({
 			trackEl: () => c.value,
 			activeIndex: f(() => {
 				let e = i.items.findIndex((e) => l.isSelected(e.value));
@@ -179,6 +182,7 @@ var z = /* @__PURE__ */ function(e) {
 			itemCount: () => i.items.length
 		}), m = f(() => ({
 			[`s-ui-segment-control--size-${i.size}`]: !0,
+			[`s-ui-segment-control--shape-${i.shape}`]: !0,
 			"s-ui-segment-control--full-width": i.fullWidth,
 			"s-ui-segment-control--disabled": i.disabled
 		})), _ = (e, t) => `${String(e.value)}-${t}`, v = () => {
@@ -198,11 +202,11 @@ var z = /* @__PURE__ */ function(e) {
 			class: "s-ui-segment-control__indicator",
 			style: w(M(u)),
 			"aria-hidden": "true"
-		}, null, 4), (T(!0), h(d, null, O(i.items, (e, t) => (T(), p(H, {
+		}, null, 4), (T(!0), h(d, null, O(i.items, (e, t) => (T(), p(U, {
 			key: _(e, t),
 			item: e
-		}, null, 8, ["item"]))), 128))], 16, G));
+		}, null, 8, ["item"]))), 128))], 16, K));
 	}
 });
 //#endregion
-export { z as n, K as t };
+export { B as n, z as r, q as t };

package/dist/SSegmentControl-jPA19SVO.cjs

@@ -0,0 +1 @@
+const e=require("./useSelectionGroup-NJvi3hNo.cjs"),t=require("./useSelectLink-DZIAhQ2J.cjs"),n=require("./useLink-1LLWpdDZ.cjs"),r=require("./getIndicatorMetricsPercent-CFGy_nB8.cjs");let i=require("vue"),a=require("@shtabapp/ui-kit-primitives"),o=require("@vueuse/core");var s=function(e){return e.SMALL=`small`,e.MEDIUM=`medium`,e}({}),c=function(e){return e.DEFAULT=`default`,e.ROUNDED=`rounded`,e}({}),l=Symbol(`SSegmentControl`),u={key:0,class:`s-ui-segment-control__icon`,"aria-hidden":`true`},d=(0,i.defineComponent)({__name:`SSegmentControlItem`,props:{item:{}},setup(e){let r=(0,i.inject)(l,null),o={[s.SMALL]:`s-ui-typography-label-12-medium`,[s.MEDIUM]:`s-ui-typography-label-14-medium`},c={[s.SMALL]:16,[s.MEDIUM]:20},d=(0,i.computed)(()=>r?(0,i.toValue)(r.size):s.MEDIUM),f=(0,i.computed)(()=>o[d.value]),p=(0,i.computed)(()=>c[d.value]),m=(0,i.useTemplateRef)(`itemRootRef`),h=n.t(()=>e.item.link,()=>e.item.exact,()=>e.item.replace);t.t({isRouterLink:h.isRouterLink,isActive:h.isActive,group:()=>r,value:()=>e.item.value});let g=(0,i.computed)(()=>!!(r&&(0,i.toValue)(r.disabled))||!!e.item.disabled),_=t.n({group:()=>r,value:()=>e.item.value,el:m,disabled:g}),v=(0,i.computed)(()=>h.isRouterLink.value?h.isActive.value:_.isActive.value),y=h.linkPresentation,b=(0,i.computed)(()=>{let e=y.value;return e.mode===`none`?`button`:e.rootTag}),x=(0,i.computed)(()=>b.value===`button`),S=(0,i.computed)(()=>{if(r)return(0,i.toValue)(r.name)}),C=(0,i.computed)(()=>e.item.ariaLabel?e.item.ariaLabel:e.item.iconOnly?e.item.label:void 0),w=(0,i.computed)(()=>({"s-ui-segment-control__item--selected":v.value,"s-ui-segment-control__item--icon-only":!!e.item.iconOnly,"s-ui-segment-control__item--link":n.r(e.item.link)})),T=(0,i.computed)(()=>({...n.n(y.value,{replace:e.item.replace}),disabled:x.value&&g.value?!0:void 0,"aria-disabled":!x.value&&g.value?!0:void 0})),E=(0,i.computed)(()=>g.value?-1:_.tabIndex.value??-1),D=e=>{if(!g.value){if(h.isRouterLink.value&&(e.key===`Enter`||e.key===` `||e.key===`Spacebar`)){e.preventDefault(),h.navigate();return}_.handleKeydown(e)}},O=e=>{if(g.value){e.preventDefault(),e.stopPropagation();return}h.isRouterLink.value||_.handleClick()};return(t,n)=>((0,i.openBlock)(),(0,i.createBlock)((0,i.resolveDynamicComponent)(b.value),(0,i.mergeProps)({ref_key:`itemRootRef`,ref:m,role:`radio`,class:[`s-ui-segment-control__item`,w.value],type:x.value?`button`:void 0},T.value,{"aria-checked":v.value?`true`:`false`,"aria-label":C.value,tabindex:E.value,name:x.value?S.value:void 0,onClick:O,onKeydown:D}),{default:(0,i.withCtx)(()=>[e.item.icon?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,u,[(0,i.createVNode)((0,i.unref)(a.SIcon),{name:e.item.icon,size:p.value},null,8,[`name`,`size`])])):(0,i.createCommentVNode)(``,!0),e.item.label&&!e.item.iconOnly?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,{key:1,class:(0,i.normalizeClass)([`s-ui-segment-control__label`,f.value])},(0,i.toDisplayString)(e.item.label),3)):(0,i.createCommentVNode)(``,!0)]),_:1},16,[`class`,`type`,`aria-checked`,`aria-label`,`tabindex`,`name`]))}}),f=`.s-ui-segment-control__item`,p=({trackEl:e,activeIndex:t,itemCount:n})=>{let a=(0,i.ref)(r.t()),s=()=>{let n=(0,i.toValue)(e),o=(0,i.toValue)(t);if(!n||o<0){a.value=r.t();return}let s=n.querySelectorAll(f).item(o);if(!(s instanceof HTMLElement)){a.value=r.t();return}a.value=r.n(n,s)};return(0,o.useResizeObserver)(e,()=>{s()}),(0,i.watch)(()=>[(0,i.toValue)(t),(0,i.toValue)(n)],async()=>{await(0,i.nextTick)(),s()},{immediate:!0}),{indicatorStyle:(0,i.computed)(()=>{let{left:e,top:t,width:n,height:r}=a.value;return!n||!r?{opacity:`0`}:{opacity:`1`,left:`${e}%`,top:`${t}%`,width:`${n}%`,height:`${r}%`}}),updateMetrics:s}},m=[`aria-disabled`],h=(0,i.defineComponent)({__name:`SSegmentControl`,props:(0,i.mergeModels)({items:{},size:{default:()=>s.MEDIUM},shape:{default:()=>c.DEFAULT},fullWidth:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},mandatory:{type:Boolean,default:!0},name:{}},{modelValue:{},modelModifiers:{}}),emits:(0,i.mergeModels)([`change`],[`update:modelValue`]),setup(t,{emit:n}){let r=(0,i.useModel)(t,`modelValue`),a=n,o=(0,i.useTemplateRef)(`trackRef`),s=e.o({modelValue:()=>r.value,onUpdateModelValue:t=>{e.i(t)&&(r.value=t,a(`change`,t))},mode:e.n.SINGLE,mandatory:()=>t.mandatory,orientation:e.r.HORIZONTAL,loop:!0});(0,i.provide)(l,{mode:()=>e.n.SINGLE,isSelected:s.isSelected,selectItem:s.select,registerItem:s.registerItem,getItemTabIndex:s.getItemTabIndex,getGroupTabIndex:s.getGroupTabIndex,handleItemKeydown:s.handleItemKeydown,disabled:()=>t.disabled,name:()=>t.name,size:()=>t.size});let{indicatorStyle:c}=p({trackEl:()=>o.value,activeIndex:(0,i.computed)(()=>{let e=t.items.findIndex(e=>s.isSelected(e.value));return e>=0?e:0}),itemCount:()=>t.items.length}),u=(0,i.computed)(()=>({[`s-ui-segment-control--size-${t.size}`]:!0,[`s-ui-segment-control--shape-${t.shape}`]:!0,"s-ui-segment-control--full-width":t.fullWidth,"s-ui-segment-control--disabled":t.disabled})),f=(e,t)=>`${String(e.value)}-${t}`,h=()=>{if(r.value!==void 0&&r.value!==null)return;let e=t.items.find(e=>!e.disabled);e&&(r.value=e.value)};return(0,i.watch)(()=>t.items,()=>{h()},{immediate:!0}),(e,n)=>((0,i.openBlock)(),(0,i.createElementBlock)(`div`,(0,i.mergeProps)({ref_key:`trackRef`,ref:o,class:[`s-ui-segment-control`,u.value],role:`radiogroup`,"aria-disabled":t.disabled||void 0},e.$attrs),[(0,i.createElementVNode)(`span`,{class:`s-ui-segment-control__indicator`,style:(0,i.normalizeStyle)((0,i.unref)(c)),"aria-hidden":`true`},null,4),((0,i.openBlock)(!0),(0,i.createElementBlock)(i.Fragment,null,(0,i.renderList)(t.items,(e,t)=>((0,i.openBlock)(),(0,i.createBlock)(d,{key:f(e,t),item:e},null,8,[`item`]))),128))],16,m))}});Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return h}});