@milaboratories/uikit 2.10.39 → 2.10.40

package/dist/components/SliderRangeTriple.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderRangeTriple.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/SliderRangeTriple.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, onMounted, reactive, ref, unref, useSlots } from \"vue\";\nimport { useMouseCapture } from \"../composition/useMouseCapture\";\nimport { tapIf } from \"../helpers/functions\";\nimport { clamp } from \"../helpers/math\";\nimport { PlTooltip } from \"./PlTooltip\";\nimport type { SliderMode } from \"../types\";\nimport { useSliderBreakpoints } from \"../composition/useSliderBreakpoints\";\nimport { getErrorMessage } from \"../helpers/error.ts\";\n\ntype ModelType = [number, number, number];\nconst slots = useSlots();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: ModelType;\n    min?: number;\n    max: number;\n    step?: number;\n    label?: string;\n    helper?: string;\n    error?: unknown;\n    mode?: SliderMode;\n    measure?: string;\n    breakpoints?: boolean;\n    disabled?: boolean;\n  }>(),\n  {\n    label: undefined,\n    helper: undefined,\n    error: undefined,\n    min: 0,\n    step: 1,\n    mode: \"text\",\n    measure: \"%\",\n    breakpoints: false,\n    disabled: false,\n  },\n);\n\nconst data = reactive({\n  deltaValue1: 0,\n  deltaValue2: 0,\n  deltaValue3: 0,\n});\n\nconst barRef = ref<HTMLElement>();\nconst thumbRef1 = ref<HTMLElement>();\nconst thumbRef2 = ref<HTMLElement>();\nconst thumbRef3 = ref<HTMLElement>();\n\nconst range = computed(() => props.max - props.min);\n\nconst propsRef = computed(() => props);\n\nconst breakpointsRef = useSliderBreakpoints(propsRef);\n\nconst localValue1 = computed(() =>\n  clamp((props.modelValue[0] ?? 0) + data.deltaValue1, props.min, props.max),\n);\nconst localValue2 = computed(() =>\n  clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max),\n);\nconst localValue3 = computed(() =>\n  clamp((props.modelValue[2] ?? 0) + data.deltaValue3, props.min, props.max),\n);\n\nconst error = computed(() => {\n  const v = props.modelValue as unknown;\n\n  const isValidModel = Array.isArray(v) && v.length === 3 && v.every((it) => Number.isFinite(it));\n\n  if (!isValidModel) {\n    return \"Expected model [number, number, number]\";\n  }\n\n  const errors: string[] = [];\n\n  [...props.modelValue].forEach((v) => {\n    if (v > props.max) {\n      errors.push(`Max model value must be lower than max props ${props.max}.`);\n    }\n    if (v < props.min) {\n      errors.push(\"Min model value must be greater than max props.\");\n    }\n  });\n\n  if (errors.length > 0) {\n    return errors.join(\" \");\n  }\n\n  return getErrorMessage(props.error);\n});\n\nconst position1 = computed(() => {\n  return (localValue1.value - props.min) / range.value;\n});\n\nconst position2 = computed(() => {\n  return (localValue2.value - props.min) / range.value;\n});\n\nconst position3 = computed(() => {\n  return (localValue3.value - props.min) / range.value;\n});\n\nconst leftRight = computed(() => getLeftAndRight());\n\nconst progressStyle = computed(() => ({\n  right: leftRight.value[0] + \"%\",\n  left: 100 - leftRight.value[2] + \"%\",\n}));\n\nconst thumbStyle1 = computed(() => ({\n  right: Math.ceil((1 - position1.value) * 100) + \"%\",\n}));\n\nconst thumbStyle2 = computed(() => ({\n  right: Math.ceil((1 - position2.value) * 100) + \"%\",\n}));\n\nconst thumbStyle3 = computed(() => ({\n  right: Math.ceil((1 - position3.value) * 100) + \"%\",\n}));\n\nuseMouseCapture(thumbRef1, (ev) => {\n  tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n    const { dx } = ev;\n    data.deltaValue1 = (dx / rect.width) * range.value;\n\n    if (thumbRef1.value) {\n      updateDatasetForThumb(thumbRef1.value, props.modelValue[0], data.deltaValue1);\n    }\n\n    if (ev.stop) {\n      setModelValue([round(localValue1.value), round(localValue2.value), round(localValue3.value)]);\n      data.deltaValue1 = 0;\n    }\n  });\n});\n\nuseMouseCapture(thumbRef2, (ev) => {\n  tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n    const { dx } = ev;\n    data.deltaValue2 = (dx / rect.width) * range.value;\n\n    if (thumbRef2.value) {\n      updateDatasetForThumb(thumbRef2.value, props.modelValue[1], data.deltaValue2);\n    }\n\n    if (ev.stop) {\n      setModelValue([round(localValue1.value), round(localValue2.value), round(localValue3.value)]);\n      data.deltaValue2 = 0;\n    }\n  });\n});\n\nuseMouseCapture(thumbRef3, (ev) => {\n  tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n    const { dx } = ev;\n    data.deltaValue3 = (dx / rect.width) * range.value;\n\n    if (thumbRef3.value) {\n      updateDatasetForThumb(thumbRef3.value, props.modelValue[2], data.deltaValue3);\n    }\n\n    if (ev.stop) {\n      setModelValue([round(localValue1.value), round(localValue2.value), round(localValue3.value)]);\n      data.deltaValue3 = 0;\n    }\n  });\n});\n\nfunction updateDatasetForThumb(thumb: HTMLElement, modelVal: number, delta: number) {\n  const value = round(clamp((modelVal ?? 0) + delta, props.min, props.max));\n  thumb.dataset.percent = `${value}${props.measure}`;\n  getHint();\n}\n\nfunction getLeftAndRight() {\n  const point1 = Math.ceil((1 - position1.value) * 100);\n  const point2 = Math.ceil((1 - position2.value) * 100);\n  const point3 = Math.ceil((1 - position3.value) * 100);\n  return [point1, point2, point3].sort((a, b) => a - b);\n}\n\nfunction round(value: number) {\n  const v = clamp(value, props.min, props.max);\n  // This is the same as Math.round(v / props.step) * props.step but here we need this magic to avoid numbers like 3.00000000000000000004\n  return Math.round((v + Number.EPSILON) * (1 / props.step)) / (1 / props.step);\n}\n\nfunction setModelValue(value: ModelType) {\n  emit(\"update:modelValue\", value);\n}\n\nfunction getHint() {\n  const right1 = Number(thumbStyle1.value.right.substring(0, thumbStyle1.value.right.length - 1));\n  const right2 = Number(thumbStyle2.value.right.substring(0, thumbStyle2.value.right.length - 1));\n  const right3 = Number(thumbStyle3.value.right.substring(0, thumbStyle3.value.right.length - 1));\n\n  const arr = [\n    { r: right1, th: thumbRef1 },\n    { r: right2, th: thumbRef2 },\n    { r: right3, th: thumbRef3 },\n  ].sort((a, b) => a.r - b.r);\n\n  if (arr[0].th.value) {\n    arr[0].th.value.dataset.hint = \"high\";\n  }\n  if (arr[1].th.value) {\n    arr[1].th.value.dataset.hint = \"mid\";\n  }\n\n  if (arr[2].th.value) {\n    arr[2].th.value.dataset.hint = \"low\";\n  }\n}\n\nfunction handleKeyPress(e: { code: string; preventDefault(): void }, index: number) {\n  if ([\"ArrowDown\", \"ArrowUp\", \"ArrowRight\", \"ArrowLeft\", \"Enter\"].includes(e.code)) {\n    e.preventDefault();\n  }\n\n  const nextStep =\n    e.code === \"ArrowUp\" || e.code === \"ArrowRight\"\n      ? props.step * 1\n      : e.code === \"ArrowDown\" || e.code === \"ArrowLeft\"\n        ? props.step * -1\n        : 0;\n\n  const arr: ModelType = [...props.modelValue];\n  arr[index] = clamp(arr[index] + nextStep, props.min, props.max);\n  setModelValue(arr);\n  getHint();\n}\n\nonMounted(() => {\n  getHint();\n});\n</script>\n\n<template>\n  <div\n    :class=\"props.disabled ? 'ui-slider__disabled' : undefined\"\n    class=\"ui-slider__envelope ui-slider__triple\"\n  >\n    <div :class=\"`ui-slider__mode-${props.mode}`\" class=\"ui-slider\">\n      <div class=\"ui-slider__wrapper\">\n        <div class=\"ui-slider__label-section\">\n          <label v-if=\"label\" class=\"text-s\">\n            <span>{{ label }}</span>\n            <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n              <template #tooltip>\n                <slot name=\"tooltip\" />\n              </template>\n            </PlTooltip>\n          </label>\n        </div>\n        <div class=\"ui-slider__base\">\n          <div class=\"ui-slider__container\">\n            <div ref=\"barRef\" class=\"ui-slider__bar\">\n              <div class=\"ui-slider__progress\" :style=\"progressStyle\" />\n            </div>\n          </div>\n          <div class=\"ui-slider__container ui-slider__container-thumb\">\n            <template v-if=\"props.breakpoints\">\n              <div\n                v-for=\"(item, index) in breakpointsRef\"\n                :key=\"index\"\n                :style=\"{ right: `${item}%` }\"\n                class=\"ui-slider__thumb-step\"\n              />\n            </template>\n            <div\n              ref=\"thumbRef1\"\n              :style=\"thumbStyle1\"\n              :data-percent=\"props.modelValue[0] + '%'\"\n              class=\"ui-slider__thumb ui-slider__triple-thumb\"\n              r1\n              tabindex=\"0\"\n              @keydown=\"handleKeyPress($event, 0)\"\n            >\n              <div class=\"ui-slider__thumb-focused-contour\" />\n            </div>\n            <div\n              ref=\"thumbRef2\"\n              :style=\"thumbStyle2\"\n              :data-percent=\"props.modelValue[1] + '%'\"\n              class=\"ui-slider__thumb ui-slider__triple-thumb\"\n              r2\n              tabindex=\"0\"\n              @keydown=\"handleKeyPress($event, 1)\"\n            >\n              <div class=\"ui-slider__thumb-focused-contour\" />\n            </div>\n            <div\n              ref=\"thumbRef3\"\n              :style=\"thumbStyle3\"\n              :data-percent=\"props.modelValue[2] + '%'\"\n              class=\"ui-slider__thumb ui-slider__triple-thumb\"\n              r3\n              tabindex=\"0\"\n              @keydown=\"handleKeyPress($event, 2)\"\n            >\n              <div class=\"ui-slider__thumb-focused-contour\" />\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"ui-slider__input-wrapper d-flex\">\n        <!-- {{ props.modelValue }} -->\n        <!-- <InputRange v-if=\"props.mode === 'input'\" v-model=\"inputRange\" class=\"ui-focused-border\" /> -->\n      </div>\n    </div>\n    <!-- <div v-if=\"helper\" class=\"ui-slider__helper\">\n      {{ helper }}\n    </div> -->\n    <div v-if=\"error\" class=\"ui-slider__error\">\n      {{ error }}\n    </div>\n  </div>\n</template>\n\n<style></style>\n"],"mappings":"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"}
+{"version":3,"file":"SliderRangeTriple.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/SliderRangeTriple.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, onMounted, reactive, ref, unref, useSlots } from \"vue\";\nimport { useMouseCapture } from \"../composition/useMouseCapture\";\nimport { tapIf } from \"../helpers/functions\";\nimport { clamp } from \"../helpers/math\";\nimport { PlTooltip } from \"./PlTooltip\";\nimport type { SliderMode } from \"../types\";\nimport { useSliderBreakpoints } from \"../composition/useSliderBreakpoints\";\nimport { getErrorMessage } from \"../helpers/error.ts\";\n\ntype ModelType = [number, number, number];\nconst slots = useSlots();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: ModelType;\n    min?: number;\n    max: number;\n    step?: number;\n    label?: string;\n    helper?: string;\n    error?: unknown;\n    mode?: SliderMode;\n    measure?: string;\n    breakpoints?: boolean;\n    disabled?: boolean;\n  }>(),\n  {\n    label: undefined,\n    helper: undefined,\n    error: undefined,\n    min: 0,\n    step: 1,\n    mode: \"text\",\n    measure: \"%\",\n    breakpoints: false,\n    disabled: false,\n  },\n);\n\nconst data = reactive({\n  deltaValue1: 0,\n  deltaValue2: 0,\n  deltaValue3: 0,\n});\n\nconst barRef = ref<HTMLElement>();\nconst thumbRef1 = ref<HTMLElement>();\nconst thumbRef2 = ref<HTMLElement>();\nconst thumbRef3 = ref<HTMLElement>();\n\nconst range = computed(() => props.max - props.min);\n\nconst propsRef = computed(() => props);\n\nconst breakpointsRef = useSliderBreakpoints(propsRef);\n\nconst localValue1 = computed(() =>\n  clamp((props.modelValue[0] ?? 0) + data.deltaValue1, props.min, props.max),\n);\nconst localValue2 = computed(() =>\n  clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max),\n);\nconst localValue3 = computed(() =>\n  clamp((props.modelValue[2] ?? 0) + data.deltaValue3, props.min, props.max),\n);\n\nconst error = computed(() => {\n  const v = props.modelValue as unknown;\n\n  const isValidModel = Array.isArray(v) && v.length === 3 && v.every((it) => Number.isFinite(it));\n\n  if (!isValidModel) {\n    return \"Expected model [number, number, number]\";\n  }\n\n  const errors: string[] = [];\n\n  [...props.modelValue].forEach((v) => {\n    if (v > props.max) {\n      errors.push(`Max model value must be lower than max props ${props.max}.`);\n    }\n    if (v < props.min) {\n      errors.push(\"Min model value must be greater than max props.\");\n    }\n  });\n\n  if (errors.length > 0) {\n    return errors.join(\" \");\n  }\n\n  return getErrorMessage(props.error);\n});\n\nconst position1 = computed(() => {\n  return (localValue1.value - props.min) / range.value;\n});\n\nconst position2 = computed(() => {\n  return (localValue2.value - props.min) / range.value;\n});\n\nconst position3 = computed(() => {\n  return (localValue3.value - props.min) / range.value;\n});\n\nconst leftRight = computed(() => getLeftAndRight());\n\nconst progressStyle = computed(() => ({\n  right: leftRight.value[0] + \"%\",\n  left: 100 - leftRight.value[2] + \"%\",\n}));\n\nconst thumbStyle1 = computed(() => ({\n  right: Math.ceil((1 - position1.value) * 100) + \"%\",\n}));\n\nconst thumbStyle2 = computed(() => ({\n  right: Math.ceil((1 - position2.value) * 100) + \"%\",\n}));\n\nconst thumbStyle3 = computed(() => ({\n  right: Math.ceil((1 - position3.value) * 100) + \"%\",\n}));\n\nuseMouseCapture(thumbRef1, (ev) => {\n  tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n    const { dx } = ev;\n    data.deltaValue1 = (dx / rect.width) * range.value;\n\n    if (thumbRef1.value) {\n      updateDatasetForThumb(thumbRef1.value, props.modelValue[0], data.deltaValue1);\n    }\n\n    if (ev.stop) {\n      setModelValue([round(localValue1.value), round(localValue2.value), round(localValue3.value)]);\n      data.deltaValue1 = 0;\n    }\n  });\n});\n\nuseMouseCapture(thumbRef2, (ev) => {\n  tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n    const { dx } = ev;\n    data.deltaValue2 = (dx / rect.width) * range.value;\n\n    if (thumbRef2.value) {\n      updateDatasetForThumb(thumbRef2.value, props.modelValue[1], data.deltaValue2);\n    }\n\n    if (ev.stop) {\n      setModelValue([round(localValue1.value), round(localValue2.value), round(localValue3.value)]);\n      data.deltaValue2 = 0;\n    }\n  });\n});\n\nuseMouseCapture(thumbRef3, (ev) => {\n  tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n    const { dx } = ev;\n    data.deltaValue3 = (dx / rect.width) * range.value;\n\n    if (thumbRef3.value) {\n      updateDatasetForThumb(thumbRef3.value, props.modelValue[2], data.deltaValue3);\n    }\n\n    if (ev.stop) {\n      setModelValue([round(localValue1.value), round(localValue2.value), round(localValue3.value)]);\n      data.deltaValue3 = 0;\n    }\n  });\n});\n\nfunction updateDatasetForThumb(thumb: HTMLElement, modelVal: number, delta: number) {\n  const value = round(clamp((modelVal ?? 0) + delta, props.min, props.max));\n  thumb.dataset.percent = `${value}${props.measure}`;\n  getHint();\n}\n\nfunction getLeftAndRight() {\n  const point1 = Math.ceil((1 - position1.value) * 100);\n  const point2 = Math.ceil((1 - position2.value) * 100);\n  const point3 = Math.ceil((1 - position3.value) * 100);\n  return [point1, point2, point3].sort((a, b) => a - b);\n}\n\nfunction round(value: number) {\n  const v = clamp(value, props.min, props.max);\n  // This is the same as Math.round(v / props.step) * props.step but here we need this magic to avoid numbers like 3.00000000000000000004\n  return Math.round((v + Number.EPSILON) * (1 / props.step)) / (1 / props.step);\n}\n\nfunction setModelValue(value: ModelType) {\n  emit(\"update:modelValue\", value);\n}\n\nfunction getHint() {\n  const right1 = Number(thumbStyle1.value.right.substring(0, thumbStyle1.value.right.length - 1));\n  const right2 = Number(thumbStyle2.value.right.substring(0, thumbStyle2.value.right.length - 1));\n  const right3 = Number(thumbStyle3.value.right.substring(0, thumbStyle3.value.right.length - 1));\n\n  const arr = [\n    { r: right1, th: thumbRef1 },\n    { r: right2, th: thumbRef2 },\n    { r: right3, th: thumbRef3 },\n  ].sort((a, b) => a.r - b.r);\n\n  if (arr[0].th.value) {\n    arr[0].th.value.dataset.hint = \"high\";\n  }\n  if (arr[1].th.value) {\n    arr[1].th.value.dataset.hint = \"mid\";\n  }\n\n  if (arr[2].th.value) {\n    arr[2].th.value.dataset.hint = \"low\";\n  }\n}\n\nfunction handleKeyPress(e: { code: string; preventDefault(): void }, index: number) {\n  if ([\"ArrowDown\", \"ArrowUp\", \"ArrowRight\", \"ArrowLeft\", \"Enter\"].includes(e.code)) {\n    e.preventDefault();\n  }\n\n  const nextStep =\n    e.code === \"ArrowUp\" || e.code === \"ArrowRight\"\n      ? props.step * 1\n      : e.code === \"ArrowDown\" || e.code === \"ArrowLeft\"\n        ? props.step * -1\n        : 0;\n\n  const arr: ModelType = [...props.modelValue];\n  arr[index] = clamp(arr[index] + nextStep, props.min, props.max);\n  setModelValue(arr);\n  getHint();\n}\n\nonMounted(() => {\n  getHint();\n});\n</script>\n\n<template>\n  <div\n    :class=\"props.disabled ? 'ui-slider__disabled' : undefined\"\n    class=\"ui-slider__envelope ui-slider__triple\"\n  >\n    <div :class=\"`ui-slider__mode-${props.mode}`\" class=\"ui-slider\">\n      <div class=\"ui-slider__wrapper\">\n        <div class=\"ui-slider__label-section\">\n          <label v-if=\"label\" class=\"text-s\">\n            <span>{{ label }}</span>\n            <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n              <template #tooltip>\n                <slot name=\"tooltip\" />\n              </template>\n            </PlTooltip>\n          </label>\n        </div>\n        <div class=\"ui-slider__base\">\n          <div class=\"ui-slider__container\">\n            <div ref=\"barRef\" class=\"ui-slider__bar\">\n              <div class=\"ui-slider__progress\" :style=\"progressStyle\" />\n            </div>\n          </div>\n          <div class=\"ui-slider__container ui-slider__container-thumb\">\n            <template v-if=\"props.breakpoints\">\n              <div\n                v-for=\"(item, index) in breakpointsRef\"\n                :key=\"index\"\n                :style=\"{ right: `${item}%` }\"\n                class=\"ui-slider__thumb-step\"\n              />\n            </template>\n            <div\n              ref=\"thumbRef1\"\n              :style=\"thumbStyle1\"\n              :data-percent=\"props.modelValue[0] + '%'\"\n              class=\"ui-slider__thumb ui-slider__triple-thumb\"\n              r1\n              tabindex=\"0\"\n              @keydown=\"handleKeyPress($event, 0)\"\n            >\n              <div class=\"ui-slider__thumb-focused-contour\" />\n            </div>\n            <div\n              ref=\"thumbRef2\"\n              :style=\"thumbStyle2\"\n              :data-percent=\"props.modelValue[1] + '%'\"\n              class=\"ui-slider__thumb ui-slider__triple-thumb\"\n              r2\n              tabindex=\"0\"\n              @keydown=\"handleKeyPress($event, 1)\"\n            >\n              <div class=\"ui-slider__thumb-focused-contour\" />\n            </div>\n            <div\n              ref=\"thumbRef3\"\n              :style=\"thumbStyle3\"\n              :data-percent=\"props.modelValue[2] + '%'\"\n              class=\"ui-slider__thumb ui-slider__triple-thumb\"\n              r3\n              tabindex=\"0\"\n              @keydown=\"handleKeyPress($event, 2)\"\n            >\n              <div class=\"ui-slider__thumb-focused-contour\" />\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"ui-slider__input-wrapper d-flex\">\n        <!-- {{ props.modelValue }} -->\n        <!-- <InputRange v-if=\"props.mode === 'input'\" v-model=\"inputRange\" class=\"ui-focused-border\" /> -->\n      </div>\n    </div>\n    <!-- <div v-if=\"helper\" class=\"ui-slider__helper\">\n      {{ helper }}\n    </div> -->\n    <div v-if=\"error\" class=\"ui-slider__error\">\n      {{ error }}\n    </div>\n  </div>\n</template>\n\n<style></style>\n"],"mappings":"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"}

package/dist/components/contextMenu/Menu.style.css

@@ -1 +1 @@
-.context-menu[data-v-1bb3001b]{z-index:var(--z-context-menu);background:#fffffff2;border-radius:4px;margin:0;padding:3px 0 4px;font-family:Lucida Grande,sans-serif;font-size:14px;line-height:15px;display:block;position:absolute;top:50px;left:50px;box-shadow:0 8px 15px #00000059}.context-menu[data-v-1bb3001b]:before{content:"";z-index:-1;border:1px solid #00000020;border-radius:4px;display:block;position:absolute;inset:-1px}.context-menu hr[data-v-1bb3001b]{background:#0000001a;border:none;height:1px;margin:6px 1px 5px;padding:0}.context-menu>div[data-v-1bb3001b]{border-top:1px solid #0000;border-bottom:1px solid #0000;padding:0 20px;display:block}.context-menu>div span[data-v-1bb3001b]{vertical-align:2px;-webkit-user-select:none;user-select:none}.context-menu>div[data-v-1bb3001b]:hover{background:linear-gradient(#648bf5 0%,#2866f2 100%);border-top:1px solid #5a82eb;border-bottom:1px solid #1758e7}.context-menu>div[data-v-1bb3001b]:hover:after{color:#fff}
+.context-menu[data-v-1bb3001b]{z-index:var(--z-context-menu);background:#fffffff2;border-radius:4px;margin:0;padding:3px 0 4px;font-family:Lucida Grande,sans-serif;font-size:14px;line-height:15px;display:block;position:absolute;top:50px;left:50px;box-shadow:0 8px 15px #00000059}.context-menu[data-v-1bb3001b]:before{content:"";z-index:-1;border:1px solid #00000020;border-radius:4px;display:block;position:absolute;inset:-1px}.context-menu hr[data-v-1bb3001b]{background:#0000001a;border:none;height:1px;margin:6px 1px 5px;padding:0}.context-menu>div[data-v-1bb3001b]{border-top:1px solid #0000;border-bottom:1px solid #0000;padding:0 20px;display:block}.context-menu>div span[data-v-1bb3001b]{vertical-align:2px;user-select:none}.context-menu>div[data-v-1bb3001b]:hover{background:linear-gradient(#648bf5 0%,#2866f2 100%);border-top:1px solid #5a82eb;border-bottom:1px solid #1758e7}.context-menu>div[data-v-1bb3001b]:hover:after{color:#fff}

package/dist/index.js

@@ -13,6 +13,7 @@ import c from "./components/ContextProvider.js";
 import { animate as l, animateInfinite as u, call as d, delay as f, listToOptions as p, makeEaseInOut as m, makeEaseOut as h, normalizeListOptions as g, randomInt as _, randomString as v, requestTick as y, throttle as b, timeout as x } from "./helpers/utils.js";
 import { useClickOutside as S } from "./composition/useClickOutside.js";
 import C from "./components/PlTooltip/PlTooltip.js";
+import "./components/PlTooltip/index.js";
 import w from "./components/Slider.js";
 import T from "./components/LongText.js";
 import { downloadContent as E } from "./helpers/downloadContent.js";
@@ -23,76 +24,134 @@ import P from "./components/SliderRange.js";
 import F from "./components/SliderRangeTriple.js";
 import { allCssVariables as I } from "./demo-site-data/all-css-variables.js";
 import L from "./components/PlSvg/PlSvg.js";
+import "./components/PlSvg/index.js";
 import R from "./components/PlIcon24/PlIcon24.js";
+import "./components/PlIcon24/index.js";
 import z from "./components/PlLoaderLogo.js";
 import B from "./layout/PlPlaceholder/PlPlaceholder.js";
 import { PL_PLACEHOLDER_TEXTS as V } from "./layout/PlPlaceholder/index.js";
 import H from "./layout/PlBlockPage/PlBlockPage.js";
 import { usePlBlockPageTitleTeleportTarget as U } from "./layout/PlBlockPage/usePlBlockPageTitleTeleportTarget.js";
+import "./layout/PlBlockPage/index.js";
 import W from "./components/PlLoaderCircular/PlLoaderCircular.js";
+import "./components/PlLoaderCircular/index.js";
 import G from "./components/PlSplash/PlSplash.js";
 import K from "./layout/PlContainer/PlContainer.js";
+import "./layout/PlContainer/index.js";
 import q from "./layout/PlGrid/PlGrid.js";
+import "./layout/PlGrid/index.js";
 import J from "./layout/PlRow/PlRow.js";
+import "./layout/PlRow/index.js";
 import Y from "./layout/PlSpacer/PlSpacer.js";
+import "./layout/PlSpacer/index.js";
 import X from "./components/PlIcon16/PlIcon16.js";
+import "./components/PlMaskIcon16/index.js";
 import Z from "./components/PlErrorBoundary/PlErrorBoundary.js";
+import "./components/PlErrorBoundary/index.js";
 import Q from "./components/PlAccordion/PlAccordion.js";
 import ne from "./components/PlSectionSeparator/PlSectionSeparator.js";
+import "./components/PlSectionSeparator/index.js";
 import re from "./components/PlAccordion/PlAccordionSection.js";
+import "./components/PlAccordion/index.js";
 import ie from "./components/PlAlert/PlAlert.js";
+import "./components/PlAlert/index.js";
 import { useLabelNotch as ae } from "./utils/useLabelNotch.js";
+import "./components/PlIcon16/index.js";
+import "./components/PlMaskIcon24/index.js";
 import { useElementPosition as oe } from "./composition/usePosition.js";
 import se from "./utils/DropdownOverlay/DropdownOverlay.js";
+import "./utils/DropdownOverlay/index.js";
 import { useWatchFetch as ce } from "./composition/useWatchFetch.js";
 import le from "./components/PlAutocomplete/PlAutocomplete.js";
+import "./components/PlAutocomplete/index.js";
 import ue from "./components/PlChip/PlChip.js";
+import "./components/PlChip/index.js";
 import de from "./components/PlAutocompleteMulti/PlAutocompleteMulti.js";
+import "./components/PlAutocompleteMulti/index.js";
 import fe from "./components/PlBtnAccent/PlBtnAccent.js";
+import "./components/PlBtnAccent/index.js";
 import pe from "./components/PlBtnDanger/PlBtnDanger.js";
+import "./components/PlBtnDanger/index.js";
 import me from "./components/PlBtnGhost/PlBtnGhost.js";
+import "./components/PlBtnGhost/index.js";
 import he from "./components/PlBtnGroup/PlBtnGroup.js";
+import "./components/PlBtnGroup/index.js";
 import ge from "./components/PlBtnSecondary/PlBtnSecondary.js";
 import _e from "./components/PlBtnLink/PlBtnLink.js";
+import "./components/PlBtnLink/index.js";
 import ve from "./components/PlBtnPrimary/PlBtnPrimary.js";
+import "./components/PlBtnPrimary/index.js";
+import "./components/PlBtnSecondary/index.js";
 import $ from "./components/PlBtnSplit/PlBtnSplit.js";
+import "./components/PlBtnSplit/index.js";
 import ye from "./components/PlCheckbox/PlCheckbox.js";
+import "./components/PlCheckbox/index.js";
 import be from "./components/PlCheckboxGroup/PlCheckboxGroup.js";
+import "./components/PlCheckboxGroup/index.js";
 import xe from "./utils/PlCloseModalBtn.js";
 import Se from "./components/PlDialogModal/PlDialogModal.js";
+import "./components/PlDialogModal/index.js";
 import Ce from "./components/PlDropdown/PlDropdown.js";
+import "./components/PlDropdown/index.js";
 import we from "./components/PlDropdownLegacy/PlDropdownLegacy.js";
+import "./components/PlDropdownLegacy/index.js";
 import Te from "./components/PlDropdownLine/PlDropdownLine.js";
+import "./components/PlDropdownLine/index.js";
 import Ee from "./components/PlDropdownMulti/PlDropdownMulti.js";
+import "./components/PlDropdownMulti/index.js";
 import De from "./components/PlDropdownMultiRef/PlDropdownMultiRef.js";
+import "./components/PlDropdownMultiRef/index.js";
 import Oe from "./components/PlDropdownRef/PlDropdownRef.js";
+import "./components/PlDropdownRef/index.js";
 import ke from "./components/PlEditableTitle/PlEditableTitle.js";
+import "./components/PlEditableTitle/index.js";
 import Ae from "./components/PlElementList/PlElementList.js";
+import "./components/PlElementList/index.js";
 import je from "./components/PlLogView/PlLogView.js";
+import "./components/PlLogView/index.js";
 import Me from "./components/PlNumberField/PlNumberField.js";
+import "./components/PlNumberField/index.js";
 import Ne from "./components/PlProgressBar/PlProgressBar.js";
+import "./components/PlProgressBar/index.js";
 import Pe from "./components/PlProgressCell/PlProgressCell.js";
+import "./components/PlProgressCell/index.js";
 import Fe from "./components/PlSearchField/PlSearchField.js";
+import "./components/PlSearchField/index.js";
 import Ie from "./components/PlSlideModal/PlPureSlideModal.js";
 import Le from "./components/PlSlideModal/PlSlideModal.js";
+import "./components/PlSlideModal/index.js";
+import "./components/PlSplash/index.js";
 import Re from "./components/PlStatusTag/PlStatusTag.js";
+import "./components/PlStatusTag/index.js";
 import ze from "./components/PlTabs/PlTabs.js";
+import "./components/PlTabs/index.js";
 import Be from "./components/PlTextArea/PlTextArea.js";
+import "./components/PlTextArea/index.js";
 import Ve from "./components/PlTextField/PlTextField.js";
+import "./components/PlTextField/index.js";
 import He from "./components/PlToggleSwitch/PlToggleSwitch.js";
+import "./components/PlToggleSwitch/index.js";
 import Ue from "./components/PlFileDialog/PlFileDialog.js";
+import "./components/PlFileDialog/index.js";
 import We from "./components/PlFileInput/PlFileInput.js";
+import "./components/PlFileInput/index.js";
 import Ge from "./components/PlNotificationAlert/PlNotificationAlert.js";
+import "./components/PlNotificationAlert/index.js";
 import Ke from "./components/PlSidebar/PlSidebarGroup.js";
 import qe from "./components/PlSidebar/PlSidebarItem.js";
+import "./components/PlSidebar/index.js";
 import Je from "./components/PlChartHistogram/PlChartHistogram.js";
+import "./components/PlChartHistogram/index.js";
 import Ye from "./components/PlChartStackedBar/PlChartStackedBar.js";
 import Xe from "./components/PlChartStackedBar/PlChartStackedBarCompact.js";
+import "./components/PlChartStackedBar/index.js";
 import Ze from "./components/PlRadio/PlRadio.js";
 import Qe from "./components/PlRadio/PlRadioGroup.js";
+import "./components/PlRadio/index.js";
 import { categoricalColors as $e, magma as et, palettes as tt, viridis as nt } from "./colors/palette.js";
 import { Color as rt } from "./colors/color.js";
 import { Gradient as it, interpolateColor as at, normalizeGradient as ot } from "./colors/gradient.js";
+import "./colors/index.js";
 import { useComponentProp as st } from "./composition/useComponentProp.js";
 import { useConfirm as ct } from "./composition/useConfirm.js";
 import { useDraggable as lt } from "./composition/useDraggable.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["import \"./assets/ui.scss\";\n\n// @TODO review\nimport * as DataTable from \"./components/DataTable\";\nimport ThemeSwitcher from \"./components/ThemeSwitcher.vue\";\n// @TODO review (may be private)\nimport DropdownListItem from \"./components/DropdownListItem.vue\";\n\n// @TODO review\nimport ContextProvider from \"./components/ContextProvider.vue\";\nimport Slider from \"./components/Slider.vue\";\nimport { showContextMenu } from \"./components/contextMenu\";\n// for new version\nimport LongText from \"./components/LongText.vue\";\nimport Scrollable from \"./components/Scrollable.vue\";\nimport SliderRange from \"./components/SliderRange.vue\";\nimport SliderRangeTriple from \"./components/SliderRangeTriple.vue\";\n\nimport { allCssVariables } from \"./demo-site-data/all-css-variables.ts\";\n\n/**\n * Layout components\n */\n\nexport * from \"./layout/PlBlockPage\";\nexport * from \"./layout/PlContainer\";\nexport * from \"./layout/PlGrid\";\nexport * from \"./layout/PlPlaceholder\";\nexport * from \"./layout/PlRow\";\nexport * from \"./layout/PlSpacer\";\n\n/**\n * Components\n */\nexport * from \"./components/PlErrorBoundary\";\n// export * from './components/PlErrorAlert'; // @TODO discuss if we should export it\nexport * from \"./components/PlAccordion\";\nexport * from \"./components/PlAlert\";\nexport * from \"./components/PlAutocomplete\";\nexport * from \"./components/PlAutocompleteMulti\";\nexport * from \"./components/PlBtnAccent\";\nexport * from \"./components/PlBtnDanger\";\nexport * from \"./components/PlBtnGhost\";\nexport * from \"./components/PlBtnGroup\";\nexport * from \"./components/PlBtnLink\";\nexport * from \"./components/PlBtnPrimary\";\nexport * from \"./components/PlBtnSecondary\";\nexport * from \"./components/PlBtnSplit\";\nexport * from \"./components/PlCheckbox\";\nexport * from \"./components/PlCheckboxGroup\";\nexport * from \"./components/PlChip\";\nexport * from \"./components/PlDialogModal\";\nexport * from \"./components/PlDropdown\";\nexport * from \"./components/PlDropdownLegacy\";\nexport * from \"./components/PlDropdownLine\";\nexport * from \"./components/PlDropdownMulti\";\nexport * from \"./components/PlDropdownMultiRef\";\nexport * from \"./components/PlDropdownRef\";\nexport * from \"./components/PlEditableTitle\";\nexport * from \"./components/PlElementList\";\nexport * from \"./components/PlLoaderCircular\";\nexport * from \"./components/PlLogView\";\nexport * from \"./components/PlNumberField\";\nexport * from \"./components/PlProgressBar\";\nexport * from \"./components/PlProgressCell\";\nexport * from \"./components/PlSearchField\";\nexport * from \"./components/PlSectionSeparator\";\nexport * from \"./components/PlSlideModal\";\nexport * from \"./components/PlSplash\";\nexport * from \"./components/PlStatusTag\";\nexport * from \"./components/PlTabs\";\nexport * from \"./components/PlTextArea\";\nexport * from \"./components/PlTextField\";\nexport * from \"./components/PlToggleSwitch\";\nexport * from \"./components/PlTooltip\";\n\nexport * from \"./components/PlFileDialog\";\nexport * from \"./components/PlFileInput\";\nexport * from \"./components/PlNotificationAlert\";\n\nexport * from \"./components/PlSidebar\";\n\nexport * from \"./components/PlIcon16\";\nexport * from \"./components/PlIcon24\";\nexport * from \"./components/PlMaskIcon16\";\nexport * from \"./components/PlMaskIcon24\";\nexport * from \"./components/PlSvg\";\n\nexport * from \"./components/PlChartHistogram\";\nexport * from \"./components/PlChartStackedBar\";\n\nexport * from \"./components/PlRadio\";\n\nexport { default as PlLoaderLogo } from \"./components/PlLoaderLogo.vue\";\n\nexport * from \"./colors\";\n\n/**\n * Usables\n */\nexport { useClickOutside } from \"./composition/useClickOutside\";\nexport { useComponentProp } from \"./composition/useComponentProp\";\nexport { useConfirm } from \"./composition/useConfirm\";\nexport { useDraggable } from \"./composition/useDraggable\";\nexport { useEventListener } from \"./composition/useEventListener\";\nexport { useFormState } from \"./composition/useFormState\";\nexport { useHover } from \"./composition/useHover\";\nexport { useInterval } from \"./composition/useInterval\";\nexport { usePollingQuery } from \"./composition/usePollingQuery\";\nexport { useLocalStorage } from \"./composition/useLocalStorage\";\nexport { useMouse } from \"./composition/useMouse\";\nexport { useMouseCapture } from \"./composition/useMouseCapture\";\nexport { useElementPosition as usePosition } from \"./composition/usePosition\";\nexport { useQuery } from \"./composition/useQuery.ts\";\nexport { useResizeObserver } from \"./composition/useResizeObserver\";\nexport { useScroll } from \"./composition/useScroll\";\nexport { useSortable } from \"./composition/useSortable\";\nexport { useSortable2 } from \"./composition/useSortable2\";\nexport { useTheme } from \"./composition/useTheme\";\n\nexport * from \"./composition/computedCached\";\nexport * from \"./composition/filters\";\nexport * from \"./composition/useWatchFetch\";\nexport * from \"./composition/watchCached\";\n\n/**\n * Utils/Partials\n */\n\nexport * from \"./utils/DropdownOverlay\";\nexport { default as PlCloseModalBtn } from \"./utils/PlCloseModalBtn.vue\";\n\n/**\n * Technical\n * @TODO move it from here maybe\n */\nexport { useLabelNotch } from \"./utils/useLabelNotch.ts\";\n\nexport type * from \"./types\";\n\nexport { icons16, icons24 } from \"./types\";\n\nexport * from \"./helpers/dom\";\n\nexport * from \"./helpers/utils\";\n\n/**\n * @TODO review\n */\nexport { ContextProvider, DataTable, DropdownListItem, Slider, ThemeSwitcher };\n\n// Helpers\nexport { showContextMenu };\n\n// move to new version pl-uikit\nexport { LongText, Scrollable, SliderRange, SliderRangeTriple };\n\n// @todo\nconst DemoData = { allCssVariables: allCssVariables() };\nexport { DemoData };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8JA,IAAM,KAAW,EAAE,iBAAiB,GAAiB,EAAE"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["import \"./assets/ui.scss\";\n\n// @TODO review\nimport * as DataTable from \"./components/DataTable\";\nimport ThemeSwitcher from \"./components/ThemeSwitcher.vue\";\n// @TODO review (may be private)\nimport DropdownListItem from \"./components/DropdownListItem.vue\";\n\n// @TODO review\nimport ContextProvider from \"./components/ContextProvider.vue\";\nimport Slider from \"./components/Slider.vue\";\nimport { showContextMenu } from \"./components/contextMenu\";\n// for new version\nimport LongText from \"./components/LongText.vue\";\nimport Scrollable from \"./components/Scrollable.vue\";\nimport SliderRange from \"./components/SliderRange.vue\";\nimport SliderRangeTriple from \"./components/SliderRangeTriple.vue\";\n\nimport { allCssVariables } from \"./demo-site-data/all-css-variables.ts\";\n\n/**\n * Layout components\n */\n\nexport * from \"./layout/PlBlockPage\";\nexport * from \"./layout/PlContainer\";\nexport * from \"./layout/PlGrid\";\nexport * from \"./layout/PlPlaceholder\";\nexport * from \"./layout/PlRow\";\nexport * from \"./layout/PlSpacer\";\n\n/**\n * Components\n */\nexport * from \"./components/PlErrorBoundary\";\n// export * from './components/PlErrorAlert'; // @TODO discuss if we should export it\nexport * from \"./components/PlAccordion\";\nexport * from \"./components/PlAlert\";\nexport * from \"./components/PlAutocomplete\";\nexport * from \"./components/PlAutocompleteMulti\";\nexport * from \"./components/PlBtnAccent\";\nexport * from \"./components/PlBtnDanger\";\nexport * from \"./components/PlBtnGhost\";\nexport * from \"./components/PlBtnGroup\";\nexport * from \"./components/PlBtnLink\";\nexport * from \"./components/PlBtnPrimary\";\nexport * from \"./components/PlBtnSecondary\";\nexport * from \"./components/PlBtnSplit\";\nexport * from \"./components/PlCheckbox\";\nexport * from \"./components/PlCheckboxGroup\";\nexport * from \"./components/PlChip\";\nexport * from \"./components/PlDialogModal\";\nexport * from \"./components/PlDropdown\";\nexport * from \"./components/PlDropdownLegacy\";\nexport * from \"./components/PlDropdownLine\";\nexport * from \"./components/PlDropdownMulti\";\nexport * from \"./components/PlDropdownMultiRef\";\nexport * from \"./components/PlDropdownRef\";\nexport * from \"./components/PlEditableTitle\";\nexport * from \"./components/PlElementList\";\nexport * from \"./components/PlLoaderCircular\";\nexport * from \"./components/PlLogView\";\nexport * from \"./components/PlNumberField\";\nexport * from \"./components/PlProgressBar\";\nexport * from \"./components/PlProgressCell\";\nexport * from \"./components/PlSearchField\";\nexport * from \"./components/PlSectionSeparator\";\nexport * from \"./components/PlSlideModal\";\nexport * from \"./components/PlSplash\";\nexport * from \"./components/PlStatusTag\";\nexport * from \"./components/PlTabs\";\nexport * from \"./components/PlTextArea\";\nexport * from \"./components/PlTextField\";\nexport * from \"./components/PlToggleSwitch\";\nexport * from \"./components/PlTooltip\";\n\nexport * from \"./components/PlFileDialog\";\nexport * from \"./components/PlFileInput\";\nexport * from \"./components/PlNotificationAlert\";\n\nexport * from \"./components/PlSidebar\";\n\nexport * from \"./components/PlIcon16\";\nexport * from \"./components/PlIcon24\";\nexport * from \"./components/PlMaskIcon16\";\nexport * from \"./components/PlMaskIcon24\";\nexport * from \"./components/PlSvg\";\n\nexport * from \"./components/PlChartHistogram\";\nexport * from \"./components/PlChartStackedBar\";\n\nexport * from \"./components/PlRadio\";\n\nexport { default as PlLoaderLogo } from \"./components/PlLoaderLogo.vue\";\n\nexport * from \"./colors\";\n\n/**\n * Usables\n */\nexport { useClickOutside } from \"./composition/useClickOutside\";\nexport { useComponentProp } from \"./composition/useComponentProp\";\nexport { useConfirm } from \"./composition/useConfirm\";\nexport { useDraggable } from \"./composition/useDraggable\";\nexport { useEventListener } from \"./composition/useEventListener\";\nexport { useFormState } from \"./composition/useFormState\";\nexport { useHover } from \"./composition/useHover\";\nexport { useInterval } from \"./composition/useInterval\";\nexport { usePollingQuery } from \"./composition/usePollingQuery\";\nexport { useLocalStorage } from \"./composition/useLocalStorage\";\nexport { useMouse } from \"./composition/useMouse\";\nexport { useMouseCapture } from \"./composition/useMouseCapture\";\nexport { useElementPosition as usePosition } from \"./composition/usePosition\";\nexport { useQuery } from \"./composition/useQuery.ts\";\nexport { useResizeObserver } from \"./composition/useResizeObserver\";\nexport { useScroll } from \"./composition/useScroll\";\nexport { useSortable } from \"./composition/useSortable\";\nexport { useSortable2 } from \"./composition/useSortable2\";\nexport { useTheme } from \"./composition/useTheme\";\n\nexport * from \"./composition/computedCached\";\nexport * from \"./composition/filters\";\nexport * from \"./composition/useWatchFetch\";\nexport * from \"./composition/watchCached\";\n\n/**\n * Utils/Partials\n */\n\nexport * from \"./utils/DropdownOverlay\";\nexport { default as PlCloseModalBtn } from \"./utils/PlCloseModalBtn.vue\";\n\n/**\n * Technical\n * @TODO move it from here maybe\n */\nexport { useLabelNotch } from \"./utils/useLabelNotch.ts\";\n\nexport type * from \"./types\";\n\nexport { icons16, icons24 } from \"./types\";\n\nexport * from \"./helpers/dom\";\n\nexport * from \"./helpers/utils\";\n\n/**\n * @TODO review\n */\nexport { ContextProvider, DataTable, DropdownListItem, Slider, ThemeSwitcher };\n\n// Helpers\nexport { showContextMenu };\n\n// move to new version pl-uikit\nexport { LongText, Scrollable, SliderRange, SliderRangeTriple };\n\n// @todo\nconst DemoData = { allCssVariables: allCssVariables() };\nexport { DemoData };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8JA,IAAM,KAAW,EAAE,iBAAiB,GAAiB,EAAE"}

package/dist/layout/PlBlockPage/PlBlockPage.vue.css

@@ -1 +1 @@
-._header_19wcy_2{flex-direction:column;gap:2px;margin-block-end:-8px;padding:12px 24px;display:flex;overflow:hidden}._subtitle_19wcy_11{padding-inline-end:28px;display:flex}._subtitle_19wcy_11 input{anchor-name:--pl-block-page-subtitle;field-sizing:content;caret-color:var(--border-color-focus);color:var(--txt-01);letter-spacing:-.2px;text-overflow:ellipsis;border:none;outline:none;max-inline-size:100%;margin-block-end:-4px;padding:0;font-family:Manrope;font-size:20px;font-weight:500;line-height:28px}._subtitle_19wcy_11 input::placeholder{color:var(--txt-03)}._subtitle_19wcy_11 ._editIcon_19wcy_37{visibility:hidden;position-anchor:--pl-block-page-subtitle;position-area:center inline-end;position:fixed;inset-inline-start:4px}:is(._subtitle_19wcy_11:hover,._subtitle_19wcy_11:focus-within) ._editIcon_19wcy_37{visibility:visible}
+._header_19wcy_2{flex-direction:column;gap:2px;margin-block-end:-8px;padding:12px 24px;display:flex;overflow:hidden}._subtitle_19wcy_11{padding-inline-end:28px;display:flex;& input{anchor-name:--pl-block-page-subtitle;field-sizing:content;caret-color:var(--border-color-focus);color:var(--txt-01);letter-spacing:-.2px;text-overflow:ellipsis;border:none;outline:none;max-inline-size:100%;margin-block-end:-4px;padding:0;font-family:Manrope;font-size:20px;font-weight:500;line-height:28px;&::placeholder{color:var(--txt-03)}}& ._editIcon_19wcy_37{visibility:hidden;position-anchor:--pl-block-page-subtitle;position-area:center inline-end;position:fixed;inset-inline-start:4px}&:hover,&:focus-within{& ._editIcon_19wcy_37{visibility:visible}}}

package/dist/layout/PlBlockPage/PlBlockPage.vue2.js

@@ -1,6 +1,7 @@
 import { PlBlockPageTitleTeleportTarget as e } from "./PlBlockPageTitleTeleportTarget.js";
 import './pl-block-page.css';/* empty css              */
 import t from "../../components/PlIcon24/PlIcon24.js";
+import "../../components/PlIcon24/index.js";
 import n from "../PlPlaceholder/PlPlaceholder.js";
 import { PL_PLACEHOLDER_TEXTS as r } from "../PlPlaceholder/index.js";
 import { computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, guardReactiveProps as u, mergeModels as d, normalizeClass as f, normalizeProps as p, normalizeStyle as m, openBlock as h, renderSlot as g, toDisplayString as _, unref as v, useCssModule as y, useModel as b, useSlots as x, useTemplateRef as S, vModelText as C, vShow as w, watchEffect as T, withDirectives as E } from "vue";

package/dist/layout/PlBlockPage/PlBlockPage.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlBlockPage.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/layout/PlBlockPage/PlBlockPage.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Root block page component */\nexport default {\n  name: \"PlBlockPage\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, useCssModule, useSlots, useTemplateRef, watchEffect } from \"vue\";\nimport { PlBlockPageTitleTeleportTarget } from \"./PlBlockPageTitleTeleportTarget\";\nimport \"./pl-block-page.scss\";\nimport { PlIcon24 } from \"../../components/PlIcon24\";\nimport { type PlPlaceholderProps, PL_PLACEHOLDER_TEXTS, PlPlaceholder } from \"../PlPlaceholder\";\n\nconst slots = useSlots();\n\nconst props = defineProps<{\n  /**\n   * Page title (won't be displayed if `title` slot is also provided)\n   */\n  title?: string;\n  /**\n   * Text to display when subtitle is empty\n   */\n  subtitlePlaceholder?: string;\n  /**\n   * If `true` body gutters are removed\n   */\n  noBodyGutters?: boolean;\n  /**\n   * If defined, a loading overlay is displayed on the page body (over all default slot content)\n   */\n  bodyLoading?: PlPlaceholderProps[\"variant\"] | PlPlaceholderProps;\n}>();\n\n/** Page subtitle (editable) */\nconst subtitle = defineModel<string>(\"subtitle\");\n\nconst styles = useCssModule();\n\nconst loadingPlaceholder = computed<PlPlaceholderProps | undefined>(() => {\n  if (typeof props.bodyLoading === \"string\") {\n    return { variant: props.bodyLoading, ...PL_PLACEHOLDER_TEXTS.LOADING };\n  }\n  return props.bodyLoading;\n});\n\nconst teleportTarget = useTemplateRef(\"teleportTarget\");\n\nwatchEffect(() => {\n  PlBlockPageTitleTeleportTarget.value = teleportTarget.value;\n});\n</script>\n\n<template>\n  <div class=\"pl-layout-component pl-block-page\" :class=\"{ noBodyGutters: props.noBodyGutters }\">\n    <div v-if=\"slots.title || props.title\" :class=\"styles.header\">\n      <div class=\"pl-block-page__title\">\n        <div class=\"pl-block-page__title__default\">\n          <span v-if=\"slots.title\"><slot name=\"title\" /></span>\n          <span v-else>{{ props.title }}</span>\n          <slot name=\"after-title\" />\n        </div>\n        <div class=\"pl-block-page__title__append\">\n          <div ref=\"teleportTarget\" class=\"pl-block-page__title__append__teleport\" />\n          <slot name=\"append\" />\n        </div>\n      </div>\n      <div v-if=\"subtitle !== undefined\" :class=\"styles.subtitle\">\n        <input v-model.lazy.trim=\"subtitle\" :placeholder=\"props.subtitlePlaceholder\" />\n        <PlIcon24 :class=\"styles.editIcon\" name=\"edit\" color=\"var(--ic-02)\" />\n      </div>\n    </div>\n    <div v-else />\n    <div class=\"pl-block-page__body\">\n      <PlPlaceholder v-show=\"loadingPlaceholder\" v-bind=\"loadingPlaceholder\" />\n      <div :style=\"{ display: loadingPlaceholder ? 'none' : 'contents' }\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style module>\n.header {\n  display: flex;\n  flex-direction: column;\n  padding: 12px 24px;\n  margin-block-end: -8px;\n  gap: 2px;\n  overflow: hidden;\n}\n\n.subtitle {\n  display: flex;\n  padding-inline-end: 28px;\n\n  input {\n    anchor-name: --pl-block-page-subtitle;\n    field-sizing: content;\n    padding: 0;\n    border: none;\n    outline: none;\n    caret-color: var(--border-color-focus);\n    color: var(--txt-01);\n    font-family: Manrope;\n    font-size: 20px;\n    font-weight: 500;\n    line-height: 28px;\n    letter-spacing: -0.2px;\n    margin-block-end: -4px;\n    max-inline-size: 100%;\n    text-overflow: ellipsis;\n\n    &::placeholder {\n      color: var(--txt-03);\n    }\n  }\n\n  .editIcon {\n    visibility: hidden;\n    position: fixed;\n    position-anchor: --pl-block-page-subtitle;\n    position-area: center inline-end;\n    inset-inline-start: 4px;\n  }\n  &:hover,\n  &:focus-within {\n    .editIcon {\n      visibility: visible;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;CAGE,MAAM;;;;;;;;;;;;EAWR,IAAM,IAAQ,GAAU,EAElB,IAAQ,GAoBR,IAAW,EAAmB,GAAC,WAAW,EAE1C,IAAS,GAAc,EAEvB,IAAqB,QACrB,OAAO,EAAM,eAAgB,WACxB;GAAE,SAAS,EAAM;GAAa,GAAG,EAAqB;GAAS,GAEjE,EAAM,YACb,EAEI,IAAiB,EAAe,iBAAiB;SAEvD,QAAkB;AAChB,KAA+B,QAAQ,EAAe;IACtD,kBAIA,EAyBM,OAAA,EAzBD,OAAK,EAAA,CAAC,qCAAmC,EAAA,eAA0B,EAAM,eAAa,CAAA,CAAA,EAAA,EAAA,CAC9E,EAAA,EAAK,CAAC,SAAS,EAAM,SAAA,GAAA,EAAhC,EAgBM,OAAA;;GAhBkC,OAAK,EAAE,EAAA,EAAM,CAAC,OAAM;MAC1D,EAUM,OAVN,GAUM,CATJ,EAIM,OAJN,GAIM,CAHQ,EAAA,EAAK,CAAC,SAAA,GAAA,EAAlB,EAAqD,QAAA,GAAA,CAA5B,EAAqB,EAAA,QAAA,QAAA,CAAA,CAAA,KAAA,GAAA,EAC9C,EAAqC,QAAA,GAAA,EAArB,EAAM,MAAK,EAAA,EAAA,GAC3B,EAA2B,EAAA,QAAA,cAAA,CAAA,CAAA,EAE7B,EAGM,OAHN,GAGM,CAFJ,EAA2E,OAAA;YAAlE;GAAJ,KAAI;GAAiB,OAAM;iBAChC,EAAsB,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,CAAA,EAGf,EAAA,UAAa,KAAA,iBAAA,GAAA,EAAxB,EAGM,OAAA;;GAH8B,OAAK,EAAE,EAAA,EAAM,CAAC,SAAQ;QACxD,EAA+E,SAAA;4CAA7C,QAAA;GAAG,aAAa,EAAM;;;GAA9B,EAAA;;;IAAX,MAAR;IAAa,MAAb;;OACP,EAAsE,EAAA,EAAA,EAAA;GAA3D,OAAK,EAAE,EAAA,EAAM,CAAC,SAAQ;GAAE,MAAK;GAAO,OAAM;6CAGzD,EAAc,OAAA,EAAA,GACd,EAKM,OALN,GAKM,CAAA,EAJJ,EAAyE,EAAA,EAAA,EAAA,EAAA,EAAtB,EAAA,MAAkB,CAAA,EAAA,MAAA,GAAA,EAAA,CAAA,CAAA,GAA9C,EAAA,MAAkB,CAAA,CAAA,EACzC,EAEM,OAAA,EAFA,OAAK,EAAA,EAAA,SAAa,EAAA,QAAkB,SAAA,YAAA,CAAA,EAAA,EAAA,CACxC,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"PlBlockPage.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/layout/PlBlockPage/PlBlockPage.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Root block page component */\nexport default {\n  name: \"PlBlockPage\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, useCssModule, useSlots, useTemplateRef, watchEffect } from \"vue\";\nimport { PlBlockPageTitleTeleportTarget } from \"./PlBlockPageTitleTeleportTarget\";\nimport \"./pl-block-page.scss\";\nimport { PlIcon24 } from \"../../components/PlIcon24\";\nimport { type PlPlaceholderProps, PL_PLACEHOLDER_TEXTS, PlPlaceholder } from \"../PlPlaceholder\";\n\nconst slots = useSlots();\n\nconst props = defineProps<{\n  /**\n   * Page title (won't be displayed if `title` slot is also provided)\n   */\n  title?: string;\n  /**\n   * Text to display when subtitle is empty\n   */\n  subtitlePlaceholder?: string;\n  /**\n   * If `true` body gutters are removed\n   */\n  noBodyGutters?: boolean;\n  /**\n   * If defined, a loading overlay is displayed on the page body (over all default slot content)\n   */\n  bodyLoading?: PlPlaceholderProps[\"variant\"] | PlPlaceholderProps;\n}>();\n\n/** Page subtitle (editable) */\nconst subtitle = defineModel<string>(\"subtitle\");\n\nconst styles = useCssModule();\n\nconst loadingPlaceholder = computed<PlPlaceholderProps | undefined>(() => {\n  if (typeof props.bodyLoading === \"string\") {\n    return { variant: props.bodyLoading, ...PL_PLACEHOLDER_TEXTS.LOADING };\n  }\n  return props.bodyLoading;\n});\n\nconst teleportTarget = useTemplateRef(\"teleportTarget\");\n\nwatchEffect(() => {\n  PlBlockPageTitleTeleportTarget.value = teleportTarget.value;\n});\n</script>\n\n<template>\n  <div class=\"pl-layout-component pl-block-page\" :class=\"{ noBodyGutters: props.noBodyGutters }\">\n    <div v-if=\"slots.title || props.title\" :class=\"styles.header\">\n      <div class=\"pl-block-page__title\">\n        <div class=\"pl-block-page__title__default\">\n          <span v-if=\"slots.title\"><slot name=\"title\" /></span>\n          <span v-else>{{ props.title }}</span>\n          <slot name=\"after-title\" />\n        </div>\n        <div class=\"pl-block-page__title__append\">\n          <div ref=\"teleportTarget\" class=\"pl-block-page__title__append__teleport\" />\n          <slot name=\"append\" />\n        </div>\n      </div>\n      <div v-if=\"subtitle !== undefined\" :class=\"styles.subtitle\">\n        <input v-model.lazy.trim=\"subtitle\" :placeholder=\"props.subtitlePlaceholder\" />\n        <PlIcon24 :class=\"styles.editIcon\" name=\"edit\" color=\"var(--ic-02)\" />\n      </div>\n    </div>\n    <div v-else />\n    <div class=\"pl-block-page__body\">\n      <PlPlaceholder v-show=\"loadingPlaceholder\" v-bind=\"loadingPlaceholder\" />\n      <div :style=\"{ display: loadingPlaceholder ? 'none' : 'contents' }\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style module>\n.header {\n  display: flex;\n  flex-direction: column;\n  padding: 12px 24px;\n  margin-block-end: -8px;\n  gap: 2px;\n  overflow: hidden;\n}\n\n.subtitle {\n  display: flex;\n  padding-inline-end: 28px;\n\n  input {\n    anchor-name: --pl-block-page-subtitle;\n    field-sizing: content;\n    padding: 0;\n    border: none;\n    outline: none;\n    caret-color: var(--border-color-focus);\n    color: var(--txt-01);\n    font-family: Manrope;\n    font-size: 20px;\n    font-weight: 500;\n    line-height: 28px;\n    letter-spacing: -0.2px;\n    margin-block-end: -4px;\n    max-inline-size: 100%;\n    text-overflow: ellipsis;\n\n    &::placeholder {\n      color: var(--txt-03);\n    }\n  }\n\n  .editIcon {\n    visibility: hidden;\n    position: fixed;\n    position-anchor: --pl-block-page-subtitle;\n    position-area: center inline-end;\n    inset-inline-start: 4px;\n  }\n  &:hover,\n  &:focus-within {\n    .editIcon {\n      visibility: visible;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;CAGE,MAAM;;;;;;;;;;;;EAWR,IAAM,IAAQ,GAAU,EAElB,IAAQ,GAoBR,IAAW,EAAmB,GAAC,WAAW,EAE1C,IAAS,GAAc,EAEvB,IAAqB,QACrB,OAAO,EAAM,eAAgB,WACxB;GAAE,SAAS,EAAM;GAAa,GAAG,EAAqB;GAAS,GAEjE,EAAM,YACb,EAEI,IAAiB,EAAe,iBAAiB;SAEvD,QAAkB;AAChB,KAA+B,QAAQ,EAAe;IACtD,kBAIA,EAyBM,OAAA,EAzBD,OAAK,EAAA,CAAC,qCAAmC,EAAA,eAA0B,EAAM,eAAa,CAAA,CAAA,EAAA,EAAA,CAC9E,EAAA,EAAK,CAAC,SAAS,EAAM,SAAA,GAAA,EAAhC,EAgBM,OAAA;;GAhBkC,OAAK,EAAE,EAAA,EAAM,CAAC,OAAM;MAC1D,EAUM,OAVN,GAUM,CATJ,EAIM,OAJN,GAIM,CAHQ,EAAA,EAAK,CAAC,SAAA,GAAA,EAAlB,EAAqD,QAAA,GAAA,CAA5B,EAAqB,EAAA,QAAA,QAAA,CAAA,CAAA,KAAA,GAAA,EAC9C,EAAqC,QAAA,GAAA,EAArB,EAAM,MAAK,EAAA,EAAA,GAC3B,EAA2B,EAAA,QAAA,cAAA,CAAA,CAAA,EAE7B,EAGM,OAHN,GAGM,CAFJ,EAA2E,OAAA;YAAlE;GAAJ,KAAI;GAAiB,OAAM;iBAChC,EAAsB,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,CAAA,EAGf,EAAA,UAAa,KAAA,iBAAA,GAAA,EAAxB,EAGM,OAAA;;GAH8B,OAAK,EAAE,EAAA,EAAM,CAAC,SAAQ;QACxD,EAA+E,SAAA;4CAA7C,QAAA;GAAG,aAAa,EAAM;;;GAA9B,EAAA;;;IAAX,MAAR;IAAa,MAAb;;OACP,EAAsE,EAAA,EAAA,EAAA;GAA3D,OAAK,EAAE,EAAA,EAAM,CAAC,SAAQ;GAAE,MAAK;GAAO,OAAM;6CAGzD,EAAc,OAAA,EAAA,GACd,EAKM,OALN,GAKM,CAAA,EAJJ,EAAyE,EAAA,EAAA,EAAA,EAAA,EAAtB,EAAA,MAAkB,CAAA,EAAA,MAAA,GAAA,EAAA,CAAA,CAAA,GAA9C,EAAA,MAAkB,CAAA,CAAA,EACzC,EAEM,OAAA,EAFA,OAAK,EAAA,EAAA,SAAa,EAAA,QAAkB,SAAA,YAAA,CAAA,EAAA,EAAA,CACxC,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA"}

package/dist/layout/PlBlockPage/index.js

@@ -0,0 +1,2 @@
+import "./PlBlockPage.js";
+import "./usePlBlockPageTitleTeleportTarget.js";

package/dist/layout/PlContainer/index.js

@@ -0,0 +1 @@
+import "./PlContainer.js";

package/dist/layout/PlGrid/index.js

@@ -0,0 +1 @@
+import "./PlGrid.js";

package/dist/layout/PlPlaceholder/PlPlaceholder.vue.css

@@ -1 +1 @@
-._root_xfknp_2{-webkit-user-select:none;user-select:none;background-color:var(--bg-elevated-01);block-size:100%;inline-size:100%;position:relative}._background_xfknp_10{pointer-events:none;animation-name:_slide_xfknp_1;animation-duration:5s;animation-iteration-count:infinite;position:absolute;inset:0;-webkit-mask:linear-gradient(#0000 35%,#000 40% 60%,#0000 65%) 0 0/100% 300%;mask:linear-gradient(#0000 35%,#000 40% 60%,#0000 65%) 0 0/100% 300%}._background_xfknp_10._table_xfknp_19{background-image:paint(pl-placeholder-table-skeleton)}._background_xfknp_10._graph_xfknp_22{background-image:paint(pl-placeholder-graph-skeleton)}._content_xfknp_27{flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:absolute;inset:0}._text_xfknp_37{-webkit-text-stroke-color:white;-webkit-text-stroke-width:4px;paint-order:stroke;flex-direction:column;align-items:center;gap:4px;display:flex}._title_xfknp_47{color:var(--txt-03);letter-spacing:-.2px;font-size:20px;font-weight:500;line-height:24px}._subtitle_xfknp_55{color:var(--txt-03);font-weight:500;line-height:20px;display:grid}._subtitle_xfknp_55 span{text-align:center;animation-name:_active-subtitle_xfknp_1;animation-duration:calc(6s * sibling-count());animation-iteration-count:infinite;animation-timing-function:steps(sibling-count(), jump-none);visibility:if(style(--pl-placeholder-active-subtitle: sibling-index()): visible; else: hidden;);grid-area:1/1}@keyframes _slide_xfknp_1{0%{-webkit-mask-position:0 100%;mask-position:0 100%}}@keyframes _active-subtitle_xfknp_1{0%{--pl-placeholder-active-subtitle:1}to{--pl-placeholder-active-subtitle:sibling-count()}}@property --pl-placeholder-active-subtitle{syntax:"<number>";inherits:false;initial-value:1}
+._root_xfknp_2{user-select:none;background-color:var(--bg-elevated-01);block-size:100%;inline-size:100%;position:relative}._background_xfknp_10{pointer-events:none;animation-name:_slide_xfknp_1;animation-duration:5s;animation-iteration-count:infinite;position:absolute;inset:0;mask:linear-gradient(#0000 35%,#000 40% 60%,#0000 65%) 0 0/100% 300%;&._table_xfknp_19{background-image:paint(pl-placeholder-table-skeleton)}&._graph_xfknp_22{background-image:paint(pl-placeholder-graph-skeleton)}}._content_xfknp_27{flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:absolute;inset:0}._text_xfknp_37{-webkit-text-stroke-color:white;-webkit-text-stroke-width:4px;paint-order:stroke;flex-direction:column;align-items:center;gap:4px;display:flex}._title_xfknp_47{color:var(--txt-03);letter-spacing:-.2px;font-size:20px;font-weight:500;line-height:24px}._subtitle_xfknp_55{color:var(--txt-03);font-weight:500;line-height:20px;display:grid;& span{text-align:center;animation-name:_active-subtitle_xfknp_1;animation-duration:calc(6s * sibling-count());animation-iteration-count:infinite;animation-timing-function:steps(sibling-count(), jump-none);visibility:if(style(--pl-placeholder-active-subtitle: sibling-index()): visible; else: hidden;);grid-area:1/1}}@keyframes _slide_xfknp_1{0%{mask-position:0 100%}}@keyframes _active-subtitle_xfknp_1{0%{--pl-placeholder-active-subtitle:1}to{--pl-placeholder-active-subtitle:sibling-count()}}@property --pl-placeholder-active-subtitle{syntax:"<number>";inherits:false;initial-value:1}

package/dist/layout/PlRow/index.js

@@ -0,0 +1 @@
+import "./PlRow.js";

package/dist/layout/PlSpacer/index.js

@@ -0,0 +1 @@
+import "./PlSpacer.js";

package/dist/utils/DoubleContour.style.css

@@ -1 +1 @@
-.double-contour.top>div{border-bottom-right-radius:0;border-bottom-left-radius:0}.double-contour.bottom>div{border-top-left-radius:0;border-top-right-radius:0}.double-contour.left>div{border-top-right-radius:0;border-bottom-right-radius:0}.double-contour.right>div{border-top-left-radius:0;border-bottom-left-radius:0}.double-contour.top-left>div{border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.double-contour.top-right>div{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0}.double-contour.bottom-left>div{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0}.double-contour.bottom-right>div{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0}.double-contour.middle>div{border-radius:0}
+.double-contour{&.top>div{border-bottom-right-radius:0;border-bottom-left-radius:0}}.double-contour{&.bottom>div{border-top-left-radius:0;border-top-right-radius:0}}.double-contour{&.left>div{border-top-right-radius:0;border-bottom-right-radius:0}}.double-contour{&.right>div{border-top-left-radius:0;border-bottom-left-radius:0}}.double-contour{&.top-left>div{border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0}}.double-contour{&.top-right>div{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0}}.double-contour{&.bottom-left>div{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0}}.double-contour{&.bottom-right>div{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0}}.double-contour{&.middle>div{border-radius:0}}

package/dist/utils/DropdownOverlay/index.js

@@ -0,0 +1 @@
+import "./DropdownOverlay.js";

package/dist/utils/PlCloseModalBtn.vue.css

@@ -1 +1 @@
-._component_grelk_1{cursor:pointer;border-radius:12px;place-content:center;place-items:center;width:40px;height:40px;display:flex}._component_grelk_1:hover{background-color:var(--btn-sec-hover-grey);transition:all .1s ease-in-out}._component_grelk_1>div{background-color:var(--ic-01);width:24px;height:24px;-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M5.99954%2018L11.9995%2012M11.9995%2012L17.9995%206M11.9995%2012L5.99954%206M11.9995%2012L17.9995%2018'%20stroke='%23110529'%20stroke-width='1.5'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M5.99954%2018L11.9995%2012M11.9995%2012L17.9995%206M11.9995%2012L5.99954%206M11.9995%2012L17.9995%2018'%20stroke='%23110529'%20stroke-width='1.5'/%3e%3c/svg%3e");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:24px;mask-size:24px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
+._component_grelk_1{cursor:pointer;border-radius:12px;place-content:center;place-items:center;width:40px;height:40px;display:flex}._component_grelk_1:hover{background-color:var(--btn-sec-hover-grey);transition:all .1s ease-in-out}._component_grelk_1>div{background-color:var(--ic-01);width:24px;height:24px;mask-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M5.99954%2018L11.9995%2012M11.9995%2012L17.9995%206M11.9995%2012L5.99954%206M11.9995%2012L17.9995%2018'%20stroke='%23110529'%20stroke-width='1.5'/%3e%3c/svg%3e");mask-position:50%;mask-size:24px;mask-repeat:no-repeat}

package/package.json

@@ -1,10 +1,7 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.10.39",
+  "version": "2.10.40",
   "type": "module",
-  "sideEffects": [
-    "**/*.css"
-  ],
   "main": "dist/index.js",
   "exports": {
     ".": {
@@ -34,8 +31,8 @@
     "resize-observer-polyfill": "^1.5.1",
     "sortablejs": "^1.15.6",
     "vue": "^3.5.24",
-    "@platforma-sdk/model": "1.58.11",
-    "@milaboratories/helpers": "1.13.6"
+    "@milaboratories/helpers": "1.13.6",
+    "@platforma-sdk/model": "1.58.11"
   },
   "devDependencies": {
     "@vitest/coverage-istanbul": "^4.0.18",
@@ -43,9 +40,9 @@
     "svgo": "^3.3.2",
     "typescript": "~5.9.3",
     "vitest": "^4.0.18",
-    "@milaboratories/ts-builder": "1.2.13",
-    "@milaboratories/ts-configs": "1.2.2",
-    "@milaboratories/build-configs": "1.5.1"
+    "@milaboratories/build-configs": "1.5.2",
+    "@milaboratories/ts-builder": "1.3.0",
+    "@milaboratories/ts-configs": "1.2.2"
   },
   "scripts": {
     "dev": "ts-builder serve --target browser-lib --build-config ./build.browser-lib.config.js",