@milaboratories/uikit 2.15.36 → 2.15.38

package/dist/components/PlNumberField/PlNumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlNumberField.js","names":[],"sources":["../../../src/components/PlNumberField/PlNumberField.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Number input field with increment/decrement buttons, validation, and min/max constraints.\n *\n * @example\n * <PlNumberField v-model=\"price\" :step=\"0.01\" :min-value=\"0\" label=\"Price\" />\n *\n * @example\n * <PlNumberField\n *   v-model=\"evenNumber\"\n *   :validate=\"(v) => v % 2 !== 0 ? 'Number must be even' : undefined\"\n *   label=\"Even Number\"\n * />\n */\nexport default {\n  name: \"PlNumberField\",\n};\n</script>\n\n<script\n  setup\n  lang=\"ts\"\n  generic=\"\n    R extends true | false,\n    V extends undefined | number,\n    C extends Exclude<V, [R] extends [true] ? undefined : never>\n  \"\n>\nimport \"./pl-number-field.scss\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport type { BooleanProp, BooleanPropUnless } from \"../../utils/booleanProps\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport { computed, ref, useSlots, watch } from \"vue\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { tryParseNumber, numberToDecimalString, validateNumber } from \"./parseNumber\";\n\nconst modelValue = defineModel<V>({ required: true });\n\nconst emit = defineEmits<{\n  blur: [value: V];\n  focus: [value: V];\n  enter: [value: V];\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /** If `true`, the field is required and will show an error if left empty. */\n    required?: BooleanProp<R>;\n    /** Label on the top border of the field, empty by default */\n    label?: string;\n    /** Input placeholder, empty by default */\n    placeholder?: string;\n    /** Step for increment/decrement buttons, 1 by default */\n    step?: number;\n    /** If defined - show an error if value is lower  */\n    minValue?: number;\n    /** If defined - show an error if value is higher */\n    maxValue?: number;\n    /** Input is disabled if true */\n    disabled?: boolean;\n    /** If true - remove buttons on the right */\n    disableSteps?: boolean;\n    /** Error message that shows always when it's provided, without other checks */\n    errorMessage?: string;\n    /** Additional validity check for input value that must return an error text if failed */\n    validate?: (v: number) => string | undefined;\n    /** If `true`, shows a clear button that resets value to `undefined`. If a function, calls it to get the reset value. */\n    clearable?: BooleanPropUnless<R> | (() => C);\n    /** Makes some of corners not rounded */\n    groupPosition?:\n      | \"top\"\n      | \"bottom\"\n      | \"left\"\n      | \"right\"\n      | \"top-left\"\n      | \"top-right\"\n      | \"bottom-left\"\n      | \"bottom-right\"\n      | \"middle\";\n  }>(),\n  { step: 1 },\n);\n\nconst slots = useSlots();\n\nconst rootRef = ref<HTMLElement>();\n\nuseLabelNotch(rootRef);\n\nconst displayText = ref(numberToDecimalString(modelValue.value));\n\n// Sync display when model changes externally (parent, increment/decrement).\n// Skip if the current input already represents the same value.\nwatch(modelValue, (newVal) => {\n  const parsed = tryParseNumber(displayText.value);\n  if (parsed.value === newVal) return;\n  displayText.value = numberToDecimalString(newVal);\n});\n\nfunction handleInput(event: Event) {\n  const input = event.target as HTMLInputElement;\n  displayText.value = input.value;\n\n  const result = tryParseNumber(input.value);\n  if (result.value !== undefined) {\n    modelValue.value = result.value as V;\n  }\n}\n\n// On Enter or blur: if parseable, replace display with canonical decimal string.\n// Converts exponential (1e-5) to plain form (0.00001).\nfunction commitValue() {\n  const text = displayText.value.trim();\n  const result = tryParseNumber(text);\n\n  // Empty or partial (-, ., -.) → clear display and reset model for non-required fields\n  if (text === \"\" || (result.value === undefined && result.error === undefined)) {\n    displayText.value = \"\";\n    if (!props.required) {\n      modelValue.value = undefined as V;\n    }\n    return;\n  }\n\n  if (result.value !== undefined) {\n    modelValue.value = result.value as V;\n    displayText.value = numberToDecimalString(result.value);\n  }\n}\n\nconst error = computed(() => {\n  if (props.errorMessage) return props.errorMessage;\n\n  const result = tryParseNumber(displayText.value);\n  if (result.error) return result.error;\n  if (result.value !== undefined) {\n    return validateNumber(result.value, props);\n  }\n\n  if (props.required && displayText.value.trim() === \"\") {\n    return \"Value is required\";\n  }\n\n  return undefined;\n});\n\nconst canShowClearable = computed(\n  () =>\n    props.clearable &&\n    (modelValue.value !== undefined || displayText.value.trim() !== \"\") &&\n    !props.disabled,\n);\n\nfunction clear() {\n  if (typeof props.clearable === \"function\") {\n    modelValue.value = props.clearable();\n    displayText.value = numberToDecimalString(modelValue.value);\n  } else {\n    modelValue.value = undefined as V;\n    displayText.value = \"\";\n  }\n}\n\nconst isIncrementDisabled = computed(() => {\n  if (error.value) return true;\n  return (\n    props.maxValue !== undefined &&\n    modelValue.value !== undefined &&\n    modelValue.value >= props.maxValue\n  );\n});\n\nconst isDecrementDisabled = computed(() => {\n  if (error.value) return true;\n  return (\n    props.minValue !== undefined &&\n    modelValue.value !== undefined &&\n    modelValue.value <= props.minValue\n  );\n});\n\nconst multiplier = computed(() => 10 ** (props.step.toString().split(\".\").at(1)?.length ?? 0));\n\nfunction increment() {\n  if (isIncrementDisabled.value) return;\n\n  let nV: number;\n  if (modelValue.value === undefined) {\n    nV = props.minValue ?? 0;\n  } else {\n    nV =\n      ((modelValue.value || 0) * multiplier.value + props.step * multiplier.value) /\n      multiplier.value;\n  }\n\n  modelValue.value = (props.maxValue !== undefined ? Math.min(props.maxValue, nV) : nV) as V;\n}\n\nfunction decrement() {\n  if (isDecrementDisabled.value) return;\n\n  let nV: number;\n  if (modelValue.value === undefined) {\n    nV = 0;\n  } else {\n    nV =\n      ((modelValue.value || 0) * multiplier.value - props.step * multiplier.value) /\n      multiplier.value;\n  }\n\n  modelValue.value = (props.minValue !== undefined ? Math.max(props.minValue, nV) : nV) as V;\n}\n\nfunction handleBlur() {\n  commitValue();\n  emit(\"blur\", modelValue.value);\n}\n\nfunction handleFocus() {\n  emit(\"focus\", modelValue.value);\n}\n\nfunction handleKeyDown(e: KeyboardEvent) {\n  if (e.code === \"Enter\") {\n    commitValue();\n    emit(\"enter\", modelValue.value);\n  }\n\n  if ([\"ArrowDown\", \"ArrowUp\"].includes(e.code)) {\n    e.preventDefault();\n  }\n\n  if (!props.disableSteps && e.code === \"ArrowUp\") {\n    increment();\n  }\n\n  if (!props.disableSteps && e.code === \"ArrowDown\") {\n    decrement();\n  }\n}\n\n// Prevent selecting beyond input content on triple-click etc.\nfunction handleMousedown(ev: MouseEvent) {\n  if (ev.detail > 1) {\n    ev.preventDefault();\n  }\n}\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"{ error: !!error, disabled: disabled }\"\n    class=\"pl-number-field d-flex-column\"\n    @keydown=\"handleKeyDown\"\n  >\n    <div class=\"pl-number-field__main-wrapper d-flex\">\n      <DoubleContour class=\"pl-number-field__contour\" :group-position=\"groupPosition\" />\n      <div class=\"pl-number-field__wrapper flex-grow d-flex flex-align-center\">\n        <label v-if=\"label\" class=\"text-description\">\n          {{ label }}\n          <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <input\n          ref=\"inputRef\"\n          type=\"text\"\n          inputmode=\"numeric\"\n          :value=\"displayText\"\n          :disabled=\"disabled\"\n          :placeholder=\"placeholder\"\n          class=\"text-s flex-grow\"\n          @input=\"handleInput\"\n          @focusout=\"handleBlur\"\n          @focusin=\"handleFocus\"\n        />\n        <PlIcon16\n          v-if=\"canShowClearable\"\n          class=\"pl-number-field__clearable\"\n          name=\"delete-clear\"\n          @click.stop=\"clear\"\n        />\n      </div>\n      <div\n        v-if=\"!props.disableSteps\"\n        class=\"pl-number-field__icons d-flex-column\"\n        @mousedown=\"handleMousedown\"\n      >\n        <div\n          :class=\"{ disabled: isIncrementDisabled }\"\n          class=\"pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center\"\n          @click=\"increment\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M8 4.93933L13.5303 10.4697L12.4697 11.5303L8 7.06065L3.53033 11.5303L2.46967 10.4697L8 4.93933Z\"\n              fill=\"#110529\"\n            />\n          </svg>\n        </div>\n        <div\n          :class=\"{ disabled: isDecrementDisabled }\"\n          class=\"pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center\"\n          @click=\"decrement\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2.46967 6.53033L3.53033 5.46967L8 9.93934L12.4697 5.46967L13.5303 6.53033L8 12.0607L2.46967 6.53033Z\"\n              fill=\"#110529\"\n            />\n          </svg>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"error\" class=\"pl-number-field__error\">\n      {{ error }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlNumberField.js","names":[],"sources":["../../../src/components/PlNumberField/PlNumberField.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Number input field with increment/decrement buttons, validation, and min/max constraints.\n *\n * @example\n * <PlNumberField v-model=\"price\" :step=\"0.01\" :min-value=\"0\" label=\"Price\" />\n *\n * @example\n * <PlNumberField\n *   v-model=\"evenNumber\"\n *   :validate=\"(v) => v % 2 !== 0 ? 'Number must be even' : undefined\"\n *   label=\"Even Number\"\n * />\n */\nexport default {\n  name: \"PlNumberField\",\n};\n</script>\n\n<script\n  setup\n  lang=\"ts\"\n  generic=\"\n    R extends true | false,\n    V extends undefined | number,\n    C extends Exclude<V, [R] extends [true] ? undefined : never>\n  \"\n>\nimport \"./pl-number-field.scss\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport type { BooleanProp, BooleanPropUnless } from \"../../utils/booleanProps\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport { computed, ref, useSlots, watch } from \"vue\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { tryParseNumber, numberToDecimalString, validateNumber } from \"./parseNumber\";\n\nconst modelValue = defineModel<V>({ required: true });\n\nconst emit = defineEmits<{\n  blur: [value: V];\n  focus: [value: V];\n  enter: [value: V];\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /** If `true`, the field is required and will show an error if left empty. */\n    required?: BooleanProp<R>;\n    /** Label on the top border of the field, empty by default */\n    label?: string;\n    /** Input placeholder, empty by default */\n    placeholder?: string;\n    /** Step for increment/decrement buttons, 1 by default */\n    step?: number;\n    /** If defined - show an error if value is lower  */\n    minValue?: number;\n    /** If defined - show an error if value is higher */\n    maxValue?: number;\n    /** Input is disabled if true */\n    disabled?: boolean;\n    /** If true - remove buttons on the right */\n    disableSteps?: boolean;\n    /** Error message that shows always when it's provided, without other checks */\n    errorMessage?: string;\n    /** Additional validity check for input value that must return an error text if failed */\n    validate?: (v: number) => string | undefined;\n    /** If `true`, shows a clear button that resets value to `undefined`. If a function, calls it to get the reset value. */\n    clearable?: BooleanPropUnless<R> | (() => C);\n    /** Makes some of corners not rounded */\n    groupPosition?:\n      | \"top\"\n      | \"bottom\"\n      | \"left\"\n      | \"right\"\n      | \"top-left\"\n      | \"top-right\"\n      | \"bottom-left\"\n      | \"bottom-right\"\n      | \"middle\";\n  }>(),\n  { step: 1 },\n);\n\nconst slots = useSlots();\n\nconst rootRef = ref<HTMLElement>();\n\nuseLabelNotch(rootRef);\n\nconst displayText = ref(numberToDecimalString(modelValue.value));\n\n// Sync display when model changes externally (parent, increment/decrement).\n// Skip if the current input already represents the same value.\nwatch(modelValue, (newVal) => {\n  const parsed = tryParseNumber(displayText.value);\n  if (parsed.value === newVal) return;\n  displayText.value = numberToDecimalString(newVal);\n});\n\nfunction handleInput(event: Event) {\n  const input = event.target as HTMLInputElement;\n  displayText.value = input.value;\n\n  const result = tryParseNumber(input.value);\n  if (result.value !== undefined) {\n    modelValue.value = result.value as V;\n  }\n}\n\n// On Enter or blur: if parseable, replace display with canonical decimal string.\n// Converts exponential (1e-5) to plain form (0.00001).\nfunction commitValue() {\n  const text = displayText.value.trim();\n  const result = tryParseNumber(text);\n\n  // Empty or partial (-, ., -.) → clear display and reset model for non-required fields\n  if (text === \"\" || (result.value === undefined && result.error === undefined)) {\n    displayText.value = \"\";\n    if (!props.required) {\n      modelValue.value = undefined as V;\n    }\n    return;\n  }\n\n  if (result.value !== undefined) {\n    modelValue.value = result.value as V;\n    displayText.value = numberToDecimalString(result.value);\n  }\n}\n\nconst error = computed(() => {\n  if (props.errorMessage) return props.errorMessage;\n\n  const result = tryParseNumber(displayText.value);\n  if (result.error) return result.error;\n  if (result.value !== undefined) {\n    return validateNumber(result.value, props);\n  }\n\n  if (props.required && displayText.value.trim() === \"\") {\n    return \"Value is required\";\n  }\n\n  return undefined;\n});\n\nconst canShowClearable = computed(\n  () =>\n    props.clearable &&\n    (modelValue.value !== undefined || displayText.value.trim() !== \"\") &&\n    !props.disabled,\n);\n\nfunction clear() {\n  if (typeof props.clearable === \"function\") {\n    modelValue.value = props.clearable();\n    displayText.value = numberToDecimalString(modelValue.value);\n  } else {\n    modelValue.value = undefined as V;\n    displayText.value = \"\";\n  }\n}\n\nconst isIncrementDisabled = computed(() => {\n  if (error.value) return true;\n  return (\n    props.maxValue !== undefined &&\n    modelValue.value !== undefined &&\n    modelValue.value >= props.maxValue\n  );\n});\n\nconst isDecrementDisabled = computed(() => {\n  if (error.value) return true;\n  return (\n    props.minValue !== undefined &&\n    modelValue.value !== undefined &&\n    modelValue.value <= props.minValue\n  );\n});\n\nconst multiplier = computed(() => 10 ** (props.step.toString().split(\".\").at(1)?.length ?? 0));\n\nfunction increment() {\n  if (isIncrementDisabled.value) return;\n\n  let nV: number;\n  if (modelValue.value === undefined) {\n    nV = props.minValue ?? 0;\n  } else {\n    nV =\n      ((modelValue.value || 0) * multiplier.value + props.step * multiplier.value) /\n      multiplier.value;\n  }\n\n  modelValue.value = (props.maxValue !== undefined ? Math.min(props.maxValue, nV) : nV) as V;\n}\n\nfunction decrement() {\n  if (isDecrementDisabled.value) return;\n\n  let nV: number;\n  if (modelValue.value === undefined) {\n    nV = 0;\n  } else {\n    nV =\n      ((modelValue.value || 0) * multiplier.value - props.step * multiplier.value) /\n      multiplier.value;\n  }\n\n  modelValue.value = (props.minValue !== undefined ? Math.max(props.minValue, nV) : nV) as V;\n}\n\nfunction handleBlur() {\n  commitValue();\n  emit(\"blur\", modelValue.value);\n}\n\nfunction handleFocus() {\n  emit(\"focus\", modelValue.value);\n}\n\nfunction handleKeyDown(e: KeyboardEvent) {\n  if (e.code === \"Enter\") {\n    commitValue();\n    emit(\"enter\", modelValue.value);\n  }\n\n  if ([\"ArrowDown\", \"ArrowUp\"].includes(e.code)) {\n    e.preventDefault();\n  }\n\n  if (!props.disableSteps && e.code === \"ArrowUp\") {\n    increment();\n  }\n\n  if (!props.disableSteps && e.code === \"ArrowDown\") {\n    decrement();\n  }\n}\n\n// Prevent selecting beyond input content on triple-click etc.\nfunction handleMousedown(ev: MouseEvent) {\n  if (ev.detail > 1) {\n    ev.preventDefault();\n  }\n}\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"{ error: !!error, disabled: disabled }\"\n    class=\"pl-number-field d-flex-column\"\n    data-testid=\"pl-number-field\"\n    @keydown=\"handleKeyDown\"\n  >\n    <div class=\"pl-number-field__main-wrapper d-flex\">\n      <DoubleContour class=\"pl-number-field__contour\" :group-position=\"groupPosition\" />\n      <div class=\"pl-number-field__wrapper flex-grow d-flex flex-align-center\">\n        <label v-if=\"label\" class=\"text-description\" data-testid=\"pl-number-field-label\">\n          {{ label }}\n          <PlTooltip\n            v-if=\"slots.tooltip\"\n            class=\"info\"\n            position=\"top\"\n            data-testid=\"pl-number-field-tooltip\"\n          >\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <input\n          ref=\"inputRef\"\n          type=\"text\"\n          inputmode=\"numeric\"\n          :value=\"displayText\"\n          :disabled=\"disabled\"\n          :placeholder=\"placeholder\"\n          class=\"text-s flex-grow\"\n          data-testid=\"pl-number-field-input\"\n          @input=\"handleInput\"\n          @focusout=\"handleBlur\"\n          @focusin=\"handleFocus\"\n        />\n        <PlIcon16\n          v-if=\"canShowClearable\"\n          class=\"pl-number-field__clearable\"\n          data-testid=\"pl-number-field-clear\"\n          name=\"delete-clear\"\n          @click.stop=\"clear\"\n        />\n      </div>\n      <div\n        v-if=\"!props.disableSteps\"\n        class=\"pl-number-field__icons d-flex-column\"\n        data-testid=\"pl-number-field-steps\"\n        @mousedown=\"handleMousedown\"\n      >\n        <div\n          :class=\"{ disabled: isIncrementDisabled }\"\n          class=\"pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center\"\n          data-testid=\"pl-number-field-increment\"\n          @click=\"increment\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M8 4.93933L13.5303 10.4697L12.4697 11.5303L8 7.06065L3.53033 11.5303L2.46967 10.4697L8 4.93933Z\"\n              fill=\"#110529\"\n            />\n          </svg>\n        </div>\n        <div\n          :class=\"{ disabled: isDecrementDisabled }\"\n          class=\"pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center\"\n          data-testid=\"pl-number-field-decrement\"\n          @click=\"decrement\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2.46967 6.53033L3.53033 5.46967L8 9.93934L12.4697 5.46967L13.5303 6.53033L8 12.0607L2.46967 6.53033Z\"\n              fill=\"#110529\"\n            />\n          </svg>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"error\" class=\"pl-number-field__error\" data-testid=\"pl-number-field-error\">\n      {{ error }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/PlNumberField/PlNumberField.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlNumberField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlNumberField/PlNumberField.vue"],"names":[],"mappings":"AAsVA,OAAO,wBAAwB,CAAC;AAEhC,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAQ/E;;;;;;;;;;;;GAYG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY,GACd,CAAC,SAAS,IAAI,GAAG,KAAK,EACtB,CAAC,SAAS,SAAS,GAAG,MAAM,EAC5B,CAAC,SAAS,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,SAAS,GAAG,KAAK,CAAC,EAE/D,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAsbO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QA3apD,6EAA6E;mBAClE,WAAW,CAAC,CAAC,CAAC;QACzB,6DAA6D;gBACrD,MAAM;QACd,0CAA0C;sBAC5B,MAAM;QACpB,yDAAyD;eAClD,MAAM;QACb,oDAAoD;mBACzC,MAAM;QACjB,oDAAoD;mBACzC,MAAM;QACjB,gCAAgC;mBACrB,OAAO;QAClB,4CAA4C;uBAC7B,OAAO;QACtB,+EAA+E;uBAChE,MAAM;QACrB,yFAAyF;mBAC9E,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS;QAC5C,wHAAwH;oBAC5G,iBAAiB,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC5C,wCAAwC;wBAEpC,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,QAAQ;;oBA8KJ,CAAC;;;;;;KA6N8E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;kBAXG,CAAC,KAAK,IAAiB,KAAK,GAAG;;UAatC,gKAAoC;EAEvC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;AACzF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"PlNumberField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlNumberField/PlNumberField.vue"],"names":[],"mappings":"AAiWA,OAAO,wBAAwB,CAAC;AAEhC,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAQ/E;;;;;;;;;;;;GAYG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY,GACd,CAAC,SAAS,IAAI,GAAG,KAAK,EACtB,CAAC,SAAS,SAAS,GAAG,MAAM,EAC5B,CAAC,SAAS,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,SAAS,GAAG,KAAK,CAAC,EAE/D,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAicO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QAtbpD,6EAA6E;mBAClE,WAAW,CAAC,CAAC,CAAC;QACzB,6DAA6D;gBACrD,MAAM;QACd,0CAA0C;sBAC5B,MAAM;QACpB,yDAAyD;eAClD,MAAM;QACb,oDAAoD;mBACzC,MAAM;QACjB,oDAAoD;mBACzC,MAAM;QACjB,gCAAgC;mBACrB,OAAO;QAClB,4CAA4C;uBAC7B,OAAO;QACtB,+EAA+E;uBAChE,MAAM;QACrB,yFAAyF;mBAC9E,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS;QAC5C,wHAAwH;oBAC5G,iBAAiB,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC5C,wCAAwC;wBAEpC,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,QAAQ;;oBA8KJ,CAAC;;;;;;KAwO8E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;kBAXG,CAAC,KAAK,IAAiB,KAAK,GAAG;;UAatC,gKAAoC;EAEvC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;AACzF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/components/PlNumberField/PlNumberField.vue2.js

@@ -10,14 +10,16 @@ import { computed as s, createBlock as c, createCommentVNode as l, createElement
 //#region src/components/PlNumberField/PlNumberField.vue?vue&type=script&setup=true&lang.ts
 var D = { class: "pl-number-field__main-wrapper d-flex" }, O = { class: "pl-number-field__wrapper flex-grow d-flex flex-align-center" }, k = {
 	key: 0,
-	class: "text-description"
+	class: "text-description",
+	"data-testid": "pl-number-field-label"
 }, A = [
 	"value",
 	"disabled",
 	"placeholder"
 ], j = {
 	key: 0,
-	class: "pl-number-field__error"
+	class: "pl-number-field__error",
+	"data-testid": "pl-number-field-error"
 }, M = /* @__PURE__ */ m({
 	name: "PlNumberField",
 	props: /* @__PURE__ */ h({
@@ -103,6 +105,7 @@ var D = { class: "pl-number-field__main-wrapper d-flex" }, O = { class: "pl-numb
 				error: !!B.value,
 				disabled: m.disabled
 			}, "pl-number-field d-flex-column"]),
+			"data-testid": "pl-number-field",
 			onKeydown: X
 		}, [d("div", D, [
 			p(n, {
@@ -113,7 +116,8 @@ var D = { class: "pl-number-field__main-wrapper d-flex" }, O = { class: "pl-numb
 				m.label ? (_(), u("label", k, [f(b(m.label) + " ", 1), x(F).tooltip ? (_(), c(x(e), {
 					key: 0,
 					class: "info",
-					position: "top"
+					position: "top",
+					"data-testid": "pl-number-field-tooltip"
 				}, {
 					tooltip: T(() => [y(r.$slots, "tooltip")]),
 					_: 3
@@ -126,6 +130,7 @@ var D = { class: "pl-number-field__main-wrapper d-flex" }, O = { class: "pl-numb
 					disabled: m.disabled,
 					placeholder: m.placeholder,
 					class: "text-s flex-grow",
+					"data-testid": "pl-number-field-input",
 					onInput: R,
 					onFocusout: J,
 					onFocusin: Y
@@ -133,6 +138,7 @@ var D = { class: "pl-number-field__main-wrapper d-flex" }, O = { class: "pl-numb
 				V.value ? (_(), c(x(t), {
 					key: 1,
 					class: "pl-number-field__clearable",
+					"data-testid": "pl-number-field-clear",
 					name: "delete-clear",
 					onClick: E(H, ["stop"])
 				})) : l("", !0)
@@ -140,9 +146,11 @@ var D = { class: "pl-number-field__main-wrapper d-flex" }, O = { class: "pl-numb
 			P.disableSteps ? l("", !0) : (_(), u("div", {
 				key: 0,
 				class: "pl-number-field__icons d-flex-column",
+				"data-testid": "pl-number-field-steps",
 				onMousedown: Z
 			}, [d("div", {
 				class: g([{ disabled: U.value }, "pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center"]),
+				"data-testid": "pl-number-field-increment",
 				onClick: K
 			}, [...i[0] ||= [d("svg", {
 				xmlns: "http://www.w3.org/2000/svg",
@@ -157,6 +165,7 @@ var D = { class: "pl-number-field__main-wrapper d-flex" }, O = { class: "pl-numb
 				fill: "#110529"
 			})], -1)]], 2), d("div", {
 				class: g([{ disabled: W.value }, "pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center"]),
+				"data-testid": "pl-number-field-decrement",
 				onClick: q
 			}, [...i[1] ||= [d("svg", {
 				xmlns: "http://www.w3.org/2000/svg",

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

@@ -1 +1 @@
-{"version":3,"file":"PlNumberField.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlNumberField/PlNumberField.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Number input field with increment/decrement buttons, validation, and min/max constraints.\n *\n * @example\n * <PlNumberField v-model=\"price\" :step=\"0.01\" :min-value=\"0\" label=\"Price\" />\n *\n * @example\n * <PlNumberField\n *   v-model=\"evenNumber\"\n *   :validate=\"(v) => v % 2 !== 0 ? 'Number must be even' : undefined\"\n *   label=\"Even Number\"\n * />\n */\nexport default {\n  name: \"PlNumberField\",\n};\n</script>\n\n<script\n  setup\n  lang=\"ts\"\n  generic=\"\n    R extends true | false,\n    V extends undefined | number,\n    C extends Exclude<V, [R] extends [true] ? undefined : never>\n  \"\n>\nimport \"./pl-number-field.scss\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport type { BooleanProp, BooleanPropUnless } from \"../../utils/booleanProps\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport { computed, ref, useSlots, watch } from \"vue\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { tryParseNumber, numberToDecimalString, validateNumber } from \"./parseNumber\";\n\nconst modelValue = defineModel<V>({ required: true });\n\nconst emit = defineEmits<{\n  blur: [value: V];\n  focus: [value: V];\n  enter: [value: V];\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /** If `true`, the field is required and will show an error if left empty. */\n    required?: BooleanProp<R>;\n    /** Label on the top border of the field, empty by default */\n    label?: string;\n    /** Input placeholder, empty by default */\n    placeholder?: string;\n    /** Step for increment/decrement buttons, 1 by default */\n    step?: number;\n    /** If defined - show an error if value is lower  */\n    minValue?: number;\n    /** If defined - show an error if value is higher */\n    maxValue?: number;\n    /** Input is disabled if true */\n    disabled?: boolean;\n    /** If true - remove buttons on the right */\n    disableSteps?: boolean;\n    /** Error message that shows always when it's provided, without other checks */\n    errorMessage?: string;\n    /** Additional validity check for input value that must return an error text if failed */\n    validate?: (v: number) => string | undefined;\n    /** If `true`, shows a clear button that resets value to `undefined`. If a function, calls it to get the reset value. */\n    clearable?: BooleanPropUnless<R> | (() => C);\n    /** Makes some of corners not rounded */\n    groupPosition?:\n      | \"top\"\n      | \"bottom\"\n      | \"left\"\n      | \"right\"\n      | \"top-left\"\n      | \"top-right\"\n      | \"bottom-left\"\n      | \"bottom-right\"\n      | \"middle\";\n  }>(),\n  { step: 1 },\n);\n\nconst slots = useSlots();\n\nconst rootRef = ref<HTMLElement>();\n\nuseLabelNotch(rootRef);\n\nconst displayText = ref(numberToDecimalString(modelValue.value));\n\n// Sync display when model changes externally (parent, increment/decrement).\n// Skip if the current input already represents the same value.\nwatch(modelValue, (newVal) => {\n  const parsed = tryParseNumber(displayText.value);\n  if (parsed.value === newVal) return;\n  displayText.value = numberToDecimalString(newVal);\n});\n\nfunction handleInput(event: Event) {\n  const input = event.target as HTMLInputElement;\n  displayText.value = input.value;\n\n  const result = tryParseNumber(input.value);\n  if (result.value !== undefined) {\n    modelValue.value = result.value as V;\n  }\n}\n\n// On Enter or blur: if parseable, replace display with canonical decimal string.\n// Converts exponential (1e-5) to plain form (0.00001).\nfunction commitValue() {\n  const text = displayText.value.trim();\n  const result = tryParseNumber(text);\n\n  // Empty or partial (-, ., -.) → clear display and reset model for non-required fields\n  if (text === \"\" || (result.value === undefined && result.error === undefined)) {\n    displayText.value = \"\";\n    if (!props.required) {\n      modelValue.value = undefined as V;\n    }\n    return;\n  }\n\n  if (result.value !== undefined) {\n    modelValue.value = result.value as V;\n    displayText.value = numberToDecimalString(result.value);\n  }\n}\n\nconst error = computed(() => {\n  if (props.errorMessage) return props.errorMessage;\n\n  const result = tryParseNumber(displayText.value);\n  if (result.error) return result.error;\n  if (result.value !== undefined) {\n    return validateNumber(result.value, props);\n  }\n\n  if (props.required && displayText.value.trim() === \"\") {\n    return \"Value is required\";\n  }\n\n  return undefined;\n});\n\nconst canShowClearable = computed(\n  () =>\n    props.clearable &&\n    (modelValue.value !== undefined || displayText.value.trim() !== \"\") &&\n    !props.disabled,\n);\n\nfunction clear() {\n  if (typeof props.clearable === \"function\") {\n    modelValue.value = props.clearable();\n    displayText.value = numberToDecimalString(modelValue.value);\n  } else {\n    modelValue.value = undefined as V;\n    displayText.value = \"\";\n  }\n}\n\nconst isIncrementDisabled = computed(() => {\n  if (error.value) return true;\n  return (\n    props.maxValue !== undefined &&\n    modelValue.value !== undefined &&\n    modelValue.value >= props.maxValue\n  );\n});\n\nconst isDecrementDisabled = computed(() => {\n  if (error.value) return true;\n  return (\n    props.minValue !== undefined &&\n    modelValue.value !== undefined &&\n    modelValue.value <= props.minValue\n  );\n});\n\nconst multiplier = computed(() => 10 ** (props.step.toString().split(\".\").at(1)?.length ?? 0));\n\nfunction increment() {\n  if (isIncrementDisabled.value) return;\n\n  let nV: number;\n  if (modelValue.value === undefined) {\n    nV = props.minValue ?? 0;\n  } else {\n    nV =\n      ((modelValue.value || 0) * multiplier.value + props.step * multiplier.value) /\n      multiplier.value;\n  }\n\n  modelValue.value = (props.maxValue !== undefined ? Math.min(props.maxValue, nV) : nV) as V;\n}\n\nfunction decrement() {\n  if (isDecrementDisabled.value) return;\n\n  let nV: number;\n  if (modelValue.value === undefined) {\n    nV = 0;\n  } else {\n    nV =\n      ((modelValue.value || 0) * multiplier.value - props.step * multiplier.value) /\n      multiplier.value;\n  }\n\n  modelValue.value = (props.minValue !== undefined ? Math.max(props.minValue, nV) : nV) as V;\n}\n\nfunction handleBlur() {\n  commitValue();\n  emit(\"blur\", modelValue.value);\n}\n\nfunction handleFocus() {\n  emit(\"focus\", modelValue.value);\n}\n\nfunction handleKeyDown(e: KeyboardEvent) {\n  if (e.code === \"Enter\") {\n    commitValue();\n    emit(\"enter\", modelValue.value);\n  }\n\n  if ([\"ArrowDown\", \"ArrowUp\"].includes(e.code)) {\n    e.preventDefault();\n  }\n\n  if (!props.disableSteps && e.code === \"ArrowUp\") {\n    increment();\n  }\n\n  if (!props.disableSteps && e.code === \"ArrowDown\") {\n    decrement();\n  }\n}\n\n// Prevent selecting beyond input content on triple-click etc.\nfunction handleMousedown(ev: MouseEvent) {\n  if (ev.detail > 1) {\n    ev.preventDefault();\n  }\n}\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"{ error: !!error, disabled: disabled }\"\n    class=\"pl-number-field d-flex-column\"\n    @keydown=\"handleKeyDown\"\n  >\n    <div class=\"pl-number-field__main-wrapper d-flex\">\n      <DoubleContour class=\"pl-number-field__contour\" :group-position=\"groupPosition\" />\n      <div class=\"pl-number-field__wrapper flex-grow d-flex flex-align-center\">\n        <label v-if=\"label\" class=\"text-description\">\n          {{ label }}\n          <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <input\n          ref=\"inputRef\"\n          type=\"text\"\n          inputmode=\"numeric\"\n          :value=\"displayText\"\n          :disabled=\"disabled\"\n          :placeholder=\"placeholder\"\n          class=\"text-s flex-grow\"\n          @input=\"handleInput\"\n          @focusout=\"handleBlur\"\n          @focusin=\"handleFocus\"\n        />\n        <PlIcon16\n          v-if=\"canShowClearable\"\n          class=\"pl-number-field__clearable\"\n          name=\"delete-clear\"\n          @click.stop=\"clear\"\n        />\n      </div>\n      <div\n        v-if=\"!props.disableSteps\"\n        class=\"pl-number-field__icons d-flex-column\"\n        @mousedown=\"handleMousedown\"\n      >\n        <div\n          :class=\"{ disabled: isIncrementDisabled }\"\n          class=\"pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center\"\n          @click=\"increment\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M8 4.93933L13.5303 10.4697L12.4697 11.5303L8 7.06065L3.53033 11.5303L2.46967 10.4697L8 4.93933Z\"\n              fill=\"#110529\"\n            />\n          </svg>\n        </div>\n        <div\n          :class=\"{ disabled: isDecrementDisabled }\"\n          class=\"pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center\"\n          @click=\"decrement\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2.46967 6.53033L3.53033 5.46967L8 9.93934L12.4697 5.46967L13.5303 6.53033L8 12.0607L2.46967 6.53033Z\"\n              fill=\"#110529\"\n            />\n          </svg>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"error\" class=\"pl-number-field__error\">\n      {{ error }}\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"PlNumberField.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlNumberField/PlNumberField.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Number input field with increment/decrement buttons, validation, and min/max constraints.\n *\n * @example\n * <PlNumberField v-model=\"price\" :step=\"0.01\" :min-value=\"0\" label=\"Price\" />\n *\n * @example\n * <PlNumberField\n *   v-model=\"evenNumber\"\n *   :validate=\"(v) => v % 2 !== 0 ? 'Number must be even' : undefined\"\n *   label=\"Even Number\"\n * />\n */\nexport default {\n  name: \"PlNumberField\",\n};\n</script>\n\n<script\n  setup\n  lang=\"ts\"\n  generic=\"\n    R extends true | false,\n    V extends undefined | number,\n    C extends Exclude<V, [R] extends [true] ? undefined : never>\n  \"\n>\nimport \"./pl-number-field.scss\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport type { BooleanProp, BooleanPropUnless } from \"../../utils/booleanProps\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport { computed, ref, useSlots, watch } from \"vue\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { tryParseNumber, numberToDecimalString, validateNumber } from \"./parseNumber\";\n\nconst modelValue = defineModel<V>({ required: true });\n\nconst emit = defineEmits<{\n  blur: [value: V];\n  focus: [value: V];\n  enter: [value: V];\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /** If `true`, the field is required and will show an error if left empty. */\n    required?: BooleanProp<R>;\n    /** Label on the top border of the field, empty by default */\n    label?: string;\n    /** Input placeholder, empty by default */\n    placeholder?: string;\n    /** Step for increment/decrement buttons, 1 by default */\n    step?: number;\n    /** If defined - show an error if value is lower  */\n    minValue?: number;\n    /** If defined - show an error if value is higher */\n    maxValue?: number;\n    /** Input is disabled if true */\n    disabled?: boolean;\n    /** If true - remove buttons on the right */\n    disableSteps?: boolean;\n    /** Error message that shows always when it's provided, without other checks */\n    errorMessage?: string;\n    /** Additional validity check for input value that must return an error text if failed */\n    validate?: (v: number) => string | undefined;\n    /** If `true`, shows a clear button that resets value to `undefined`. If a function, calls it to get the reset value. */\n    clearable?: BooleanPropUnless<R> | (() => C);\n    /** Makes some of corners not rounded */\n    groupPosition?:\n      | \"top\"\n      | \"bottom\"\n      | \"left\"\n      | \"right\"\n      | \"top-left\"\n      | \"top-right\"\n      | \"bottom-left\"\n      | \"bottom-right\"\n      | \"middle\";\n  }>(),\n  { step: 1 },\n);\n\nconst slots = useSlots();\n\nconst rootRef = ref<HTMLElement>();\n\nuseLabelNotch(rootRef);\n\nconst displayText = ref(numberToDecimalString(modelValue.value));\n\n// Sync display when model changes externally (parent, increment/decrement).\n// Skip if the current input already represents the same value.\nwatch(modelValue, (newVal) => {\n  const parsed = tryParseNumber(displayText.value);\n  if (parsed.value === newVal) return;\n  displayText.value = numberToDecimalString(newVal);\n});\n\nfunction handleInput(event: Event) {\n  const input = event.target as HTMLInputElement;\n  displayText.value = input.value;\n\n  const result = tryParseNumber(input.value);\n  if (result.value !== undefined) {\n    modelValue.value = result.value as V;\n  }\n}\n\n// On Enter or blur: if parseable, replace display with canonical decimal string.\n// Converts exponential (1e-5) to plain form (0.00001).\nfunction commitValue() {\n  const text = displayText.value.trim();\n  const result = tryParseNumber(text);\n\n  // Empty or partial (-, ., -.) → clear display and reset model for non-required fields\n  if (text === \"\" || (result.value === undefined && result.error === undefined)) {\n    displayText.value = \"\";\n    if (!props.required) {\n      modelValue.value = undefined as V;\n    }\n    return;\n  }\n\n  if (result.value !== undefined) {\n    modelValue.value = result.value as V;\n    displayText.value = numberToDecimalString(result.value);\n  }\n}\n\nconst error = computed(() => {\n  if (props.errorMessage) return props.errorMessage;\n\n  const result = tryParseNumber(displayText.value);\n  if (result.error) return result.error;\n  if (result.value !== undefined) {\n    return validateNumber(result.value, props);\n  }\n\n  if (props.required && displayText.value.trim() === \"\") {\n    return \"Value is required\";\n  }\n\n  return undefined;\n});\n\nconst canShowClearable = computed(\n  () =>\n    props.clearable &&\n    (modelValue.value !== undefined || displayText.value.trim() !== \"\") &&\n    !props.disabled,\n);\n\nfunction clear() {\n  if (typeof props.clearable === \"function\") {\n    modelValue.value = props.clearable();\n    displayText.value = numberToDecimalString(modelValue.value);\n  } else {\n    modelValue.value = undefined as V;\n    displayText.value = \"\";\n  }\n}\n\nconst isIncrementDisabled = computed(() => {\n  if (error.value) return true;\n  return (\n    props.maxValue !== undefined &&\n    modelValue.value !== undefined &&\n    modelValue.value >= props.maxValue\n  );\n});\n\nconst isDecrementDisabled = computed(() => {\n  if (error.value) return true;\n  return (\n    props.minValue !== undefined &&\n    modelValue.value !== undefined &&\n    modelValue.value <= props.minValue\n  );\n});\n\nconst multiplier = computed(() => 10 ** (props.step.toString().split(\".\").at(1)?.length ?? 0));\n\nfunction increment() {\n  if (isIncrementDisabled.value) return;\n\n  let nV: number;\n  if (modelValue.value === undefined) {\n    nV = props.minValue ?? 0;\n  } else {\n    nV =\n      ((modelValue.value || 0) * multiplier.value + props.step * multiplier.value) /\n      multiplier.value;\n  }\n\n  modelValue.value = (props.maxValue !== undefined ? Math.min(props.maxValue, nV) : nV) as V;\n}\n\nfunction decrement() {\n  if (isDecrementDisabled.value) return;\n\n  let nV: number;\n  if (modelValue.value === undefined) {\n    nV = 0;\n  } else {\n    nV =\n      ((modelValue.value || 0) * multiplier.value - props.step * multiplier.value) /\n      multiplier.value;\n  }\n\n  modelValue.value = (props.minValue !== undefined ? Math.max(props.minValue, nV) : nV) as V;\n}\n\nfunction handleBlur() {\n  commitValue();\n  emit(\"blur\", modelValue.value);\n}\n\nfunction handleFocus() {\n  emit(\"focus\", modelValue.value);\n}\n\nfunction handleKeyDown(e: KeyboardEvent) {\n  if (e.code === \"Enter\") {\n    commitValue();\n    emit(\"enter\", modelValue.value);\n  }\n\n  if ([\"ArrowDown\", \"ArrowUp\"].includes(e.code)) {\n    e.preventDefault();\n  }\n\n  if (!props.disableSteps && e.code === \"ArrowUp\") {\n    increment();\n  }\n\n  if (!props.disableSteps && e.code === \"ArrowDown\") {\n    decrement();\n  }\n}\n\n// Prevent selecting beyond input content on triple-click etc.\nfunction handleMousedown(ev: MouseEvent) {\n  if (ev.detail > 1) {\n    ev.preventDefault();\n  }\n}\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"{ error: !!error, disabled: disabled }\"\n    class=\"pl-number-field d-flex-column\"\n    data-testid=\"pl-number-field\"\n    @keydown=\"handleKeyDown\"\n  >\n    <div class=\"pl-number-field__main-wrapper d-flex\">\n      <DoubleContour class=\"pl-number-field__contour\" :group-position=\"groupPosition\" />\n      <div class=\"pl-number-field__wrapper flex-grow d-flex flex-align-center\">\n        <label v-if=\"label\" class=\"text-description\" data-testid=\"pl-number-field-label\">\n          {{ label }}\n          <PlTooltip\n            v-if=\"slots.tooltip\"\n            class=\"info\"\n            position=\"top\"\n            data-testid=\"pl-number-field-tooltip\"\n          >\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <input\n          ref=\"inputRef\"\n          type=\"text\"\n          inputmode=\"numeric\"\n          :value=\"displayText\"\n          :disabled=\"disabled\"\n          :placeholder=\"placeholder\"\n          class=\"text-s flex-grow\"\n          data-testid=\"pl-number-field-input\"\n          @input=\"handleInput\"\n          @focusout=\"handleBlur\"\n          @focusin=\"handleFocus\"\n        />\n        <PlIcon16\n          v-if=\"canShowClearable\"\n          class=\"pl-number-field__clearable\"\n          data-testid=\"pl-number-field-clear\"\n          name=\"delete-clear\"\n          @click.stop=\"clear\"\n        />\n      </div>\n      <div\n        v-if=\"!props.disableSteps\"\n        class=\"pl-number-field__icons d-flex-column\"\n        data-testid=\"pl-number-field-steps\"\n        @mousedown=\"handleMousedown\"\n      >\n        <div\n          :class=\"{ disabled: isIncrementDisabled }\"\n          class=\"pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center\"\n          data-testid=\"pl-number-field-increment\"\n          @click=\"increment\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M8 4.93933L13.5303 10.4697L12.4697 11.5303L8 7.06065L3.53033 11.5303L2.46967 10.4697L8 4.93933Z\"\n              fill=\"#110529\"\n            />\n          </svg>\n        </div>\n        <div\n          :class=\"{ disabled: isDecrementDisabled }\"\n          class=\"pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center\"\n          data-testid=\"pl-number-field-decrement\"\n          @click=\"decrement\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2.46967 6.53033L3.53033 5.46967L8 9.93934L12.4697 5.46967L13.5303 6.53033L8 12.0607L2.46967 6.53033Z\"\n              fill=\"#110529\"\n            />\n          </svg>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"error\" class=\"pl-number-field__error\" data-testid=\"pl-number-field-error\">\n      {{ error }}\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/PlProgressBar/PlProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlProgressBar.js","names":[],"sources":["../../../src/components/PlProgressBar/PlProgressBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    loading: boolean;\n    progress: number;\n    completeMessage: string;\n  }>(),\n  { progress: 0, completeMessage: \"Completed\" },\n);\n\nconst readyMsg = computed(() => (props.progress === 100 ? props.completeMessage : \"\"));\n</script>\n\n<template>\n  <div v-if=\"loading\" class=\"ui-progress-bar\">\n    <div class=\"ui-progress-bar__indicator\" :style=\"{ width: progress + '%' }\" />\n    <div class=\"ui-progress-bar__messages d-flex align-center pl-6 pr-6\">\n      <div class=\"ui-progress-bar__message flex-grow-1\">{{ readyMsg }}</div>\n      <div class=\"ui-progress-bar__percent\">{{ progress + \"%\" }}</div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlProgressBar.js","names":[],"sources":["../../../src/components/PlProgressBar/PlProgressBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    loading: boolean;\n    progress: number;\n    completeMessage: string;\n  }>(),\n  { progress: 0, completeMessage: \"Completed\" },\n);\n\nconst readyMsg = computed(() => (props.progress === 100 ? props.completeMessage : \"\"));\n</script>\n\n<template>\n  <div v-if=\"loading\" data-testid=\"pl-progress-bar\" class=\"ui-progress-bar\">\n    <div\n      data-testid=\"pl-progress-bar-indicator\"\n      class=\"ui-progress-bar__indicator\"\n      :style=\"{ width: progress + '%' }\"\n    />\n    <div class=\"ui-progress-bar__messages d-flex align-center pl-6 pr-6\">\n      <div data-testid=\"pl-progress-bar-message\" class=\"ui-progress-bar__message flex-grow-1\">\n        {{ readyMsg }}\n      </div>\n      <div data-testid=\"pl-progress-bar-percent\" class=\"ui-progress-bar__percent\">\n        {{ progress + \"%\" }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/PlProgressBar/PlProgressBar.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlProgressBar.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlProgressBar/PlProgressBar.vue"],"names":[],"mappings":"AA6BA,KAAK,WAAW,GAAG;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AA4DJ,QAAA,MAAM,YAAY;cA9DJ,MAAM;qBACC,MAAM;6EAgEzB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"PlProgressBar.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlProgressBar/PlProgressBar.vue"],"names":[],"mappings":"AAqCA,KAAK,WAAW,GAAG;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AAgEJ,QAAA,MAAM,YAAY;cAlEJ,MAAM;qBACC,MAAM;6EAoEzB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/PlProgressBar/PlProgressBar.vue2.js

@@ -2,8 +2,15 @@ import { computed as e, createCommentVNode as t, createElementBlock as n, create
 //#region src/components/PlProgressBar/PlProgressBar.vue?vue&type=script&setup=true&lang.ts
 var c = {
 	key: 0,
+	"data-testid": "pl-progress-bar",
 	class: "ui-progress-bar"
-}, l = { class: "ui-progress-bar__messages d-flex align-center pl-6 pr-6" }, u = { class: "ui-progress-bar__message flex-grow-1" }, d = { class: "ui-progress-bar__percent" }, f = /* @__PURE__ */ i({
+}, l = { class: "ui-progress-bar__messages d-flex align-center pl-6 pr-6" }, u = {
+	"data-testid": "pl-progress-bar-message",
+	class: "ui-progress-bar__message flex-grow-1"
+}, d = {
+	"data-testid": "pl-progress-bar-percent",
+	class: "ui-progress-bar__percent"
+}, f = /* @__PURE__ */ i({
 	__name: "PlProgressBar",
 	props: {
 		loading: { type: Boolean },
@@ -13,6 +20,7 @@ var c = {
 	setup(i) {
 		let f = i, p = e(() => f.progress === 100 ? f.completeMessage : "");
 		return (e, f) => i.loading ? (o(), n("div", c, [r("div", {
+			"data-testid": "pl-progress-bar-indicator",
 			class: "ui-progress-bar__indicator",
 			style: a({ width: i.progress + "%" })
 		}, null, 4), r("div", l, [r("div", u, s(p.value), 1), r("div", d, s(i.progress + "%"), 1)])])) : t("", !0);

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

@@ -1 +1 @@
-{"version":3,"file":"PlProgressBar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlProgressBar/PlProgressBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    loading: boolean;\n    progress: number;\n    completeMessage: string;\n  }>(),\n  { progress: 0, completeMessage: \"Completed\" },\n);\n\nconst readyMsg = computed(() => (props.progress === 100 ? props.completeMessage : \"\"));\n</script>\n\n<template>\n  <div v-if=\"loading\" class=\"ui-progress-bar\">\n    <div class=\"ui-progress-bar__indicator\" :style=\"{ width: progress + '%' }\" />\n    <div class=\"ui-progress-bar__messages d-flex align-center pl-6 pr-6\">\n      <div class=\"ui-progress-bar__message flex-grow-1\">{{ readyMsg }}</div>\n      <div class=\"ui-progress-bar__percent\">{{ progress + \"%\" }}</div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAGA,IAAM,IAAQ,GASR,IAAW,QAAgB,EAAM,aAAa,MAAM,EAAM,kBAAkB,GAAI;mBAIzE,EAAA,WAAA,GAAA,EAAX,EAMM,OANN,GAMM,CALJ,EAA6E,OAAA;GAAxE,OAAM;GAA8B,OAAK,EAAA,EAAA,OAAW,EAAA,WAAQ,KAAA,CAAA;eACjE,EAGM,OAHN,GAGM,CAFJ,EAAsE,OAAtE,GAAsE,EAAjB,EAAA,MAAQ,EAAA,EAAA,EAC7D,EAAgE,OAAhE,GAAgE,EAAvB,EAAA,WAAQ,IAAA,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA"}
+{"version":3,"file":"PlProgressBar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlProgressBar/PlProgressBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    loading: boolean;\n    progress: number;\n    completeMessage: string;\n  }>(),\n  { progress: 0, completeMessage: \"Completed\" },\n);\n\nconst readyMsg = computed(() => (props.progress === 100 ? props.completeMessage : \"\"));\n</script>\n\n<template>\n  <div v-if=\"loading\" data-testid=\"pl-progress-bar\" class=\"ui-progress-bar\">\n    <div\n      data-testid=\"pl-progress-bar-indicator\"\n      class=\"ui-progress-bar__indicator\"\n      :style=\"{ width: progress + '%' }\"\n    />\n    <div class=\"ui-progress-bar__messages d-flex align-center pl-6 pr-6\">\n      <div data-testid=\"pl-progress-bar-message\" class=\"ui-progress-bar__message flex-grow-1\">\n        {{ readyMsg }}\n      </div>\n      <div data-testid=\"pl-progress-bar-percent\" class=\"ui-progress-bar__percent\">\n        {{ progress + \"%\" }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAGA,IAAM,IAAQ,GASR,IAAW,QAAgB,EAAM,aAAa,MAAM,EAAM,kBAAkB,GAAI;mBAIzE,EAAA,WAAA,GAAA,EAAX,EAcM,OAdN,GAcM,CAbJ,EAIE,OAAA;GAHA,eAAY;GACZ,OAAM;GACL,OAAK,EAAA,EAAA,OAAW,EAAA,WAAQ,KAAA,CAAA;eAE3B,EAOM,OAPN,GAOM,CANJ,EAEM,OAFN,GAEM,EADD,EAAA,MAAQ,EAAA,EAAA,EAEb,EAEM,OAFN,GAEM,EADD,EAAA,WAAQ,IAAA,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA"}

package/dist/components/PlProgressCell/PlProgressCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlProgressCell.js","names":[],"sources":["../../../src/components/PlProgressCell/PlProgressCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"./pl-progress-cell.scss\";\nimport { computed } from \"vue\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport type { PlProgressCellProps } from \"./types\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\n\nconst props = withDefaults(defineProps<PlProgressCellProps>(), {\n  stage: \"not_started\",\n  step: \"\", // main text (left)\n  progressString: \"\", // appended text on the right side (right)\n  progress: undefined,\n  error: undefined,\n});\n\nconst canShowWhiteBg = computed(() => props.stage !== \"not_started\");\n\nconst currentProgress = computed(() =>\n  props.stage === \"done\" ? 100 : Math.min(100, props.progress || 0),\n);\n\nconst canShowInfinityLoader = computed(\n  () =>\n    props.progress === undefined &&\n    props.stage !== \"done\" &&\n    props.stage !== \"not_started\" &&\n    !props.error,\n);\n</script>\n\n<template>\n  <div\n    :class=\"{\n      'progress-cell': true,\n      'progress-cell__white-bg': canShowWhiteBg,\n      error,\n      'not-started': props.stage === 'not_started',\n    }\"\n  >\n    <div v-if=\"canShowInfinityLoader\" class=\"progress-cell__infinity-loader\">\n      <div class=\"progress-cell__infinity-gradient\" />\n    </div>\n    <div\n      v-if=\"!canShowInfinityLoader && !error\"\n      class=\"progress-cell__indicator\"\n      :style=\"{ width: currentProgress + '%' }\"\n    />\n    <div class=\"progress-cell__body\">\n      <div class=\"progress-cell__stage text-s\">\n        {{ error ? getErrorMessage(error) : step }}\n      </div>\n      <div class=\"progress-cell__percentage text-s d-flex align-center justify-end\">\n        <PlMaskIcon24 v-if=\"error\" name=\"error\" />\n        <template v-if=\"!error\">\n          {{ progressString }}\n        </template>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlProgressCell.js","names":[],"sources":["../../../src/components/PlProgressCell/PlProgressCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"./pl-progress-cell.scss\";\nimport { computed } from \"vue\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport type { PlProgressCellProps } from \"./types\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\n\nconst props = withDefaults(defineProps<PlProgressCellProps>(), {\n  stage: \"not_started\",\n  step: \"\", // main text (left)\n  progressString: \"\", // appended text on the right side (right)\n  progress: undefined,\n  error: undefined,\n});\n\nconst canShowWhiteBg = computed(() => props.stage !== \"not_started\");\n\nconst currentProgress = computed(() =>\n  props.stage === \"done\" ? 100 : Math.min(100, props.progress || 0),\n);\n\nconst canShowInfinityLoader = computed(\n  () =>\n    props.progress === undefined &&\n    props.stage !== \"done\" &&\n    props.stage !== \"not_started\" &&\n    !props.error,\n);\n</script>\n\n<template>\n  <div\n    data-testid=\"pl-progress-cell\"\n    :class=\"{\n      'progress-cell': true,\n      'progress-cell__white-bg': canShowWhiteBg,\n      error,\n      'not-started': props.stage === 'not_started',\n    }\"\n  >\n    <div\n      v-if=\"canShowInfinityLoader\"\n      data-testid=\"pl-progress-cell-infinity-loader\"\n      class=\"progress-cell__infinity-loader\"\n    >\n      <div class=\"progress-cell__infinity-gradient\" />\n    </div>\n    <div\n      v-if=\"!canShowInfinityLoader && !error\"\n      data-testid=\"pl-progress-cell-indicator\"\n      class=\"progress-cell__indicator\"\n      :style=\"{ width: currentProgress + '%' }\"\n    />\n    <div class=\"progress-cell__body\">\n      <div data-testid=\"pl-progress-cell-stage\" class=\"progress-cell__stage text-s\">\n        {{ error ? getErrorMessage(error) : step }}\n      </div>\n      <div\n        data-testid=\"pl-progress-cell-percentage\"\n        class=\"progress-cell__percentage text-s d-flex align-center justify-end\"\n      >\n        <PlMaskIcon24 v-if=\"error\" data-testid=\"pl-progress-cell-error-icon\" name=\"error\" />\n        <template v-if=\"!error\">\n          {{ progressString }}\n        </template>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/PlProgressCell/PlProgressCell.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlProgressCell.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlProgressCell/PlProgressCell.vue"],"names":[],"mappings":"AA+DA,OAAO,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAwHnD,QAAA,MAAM,YAAY;;;;;;6EAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"PlProgressCell.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlProgressCell/PlProgressCell.vue"],"names":[],"mappings":"AAwEA,OAAO,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AA+HnD,QAAA,MAAM,YAAY;;;;;;6EAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/PlProgressCell/PlProgressCell.vue2.js

@@ -6,8 +6,15 @@ import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a
 //#region src/components/PlProgressCell/PlProgressCell.vue?vue&type=script&setup=true&lang.ts
 var h = {
 	key: 0,
+	"data-testid": "pl-progress-cell-infinity-loader",
 	class: "progress-cell__infinity-loader"
-}, g = { class: "progress-cell__body" }, _ = { class: "progress-cell__stage text-s" }, v = { class: "progress-cell__percentage text-s d-flex align-center justify-end" }, y = /* @__PURE__ */ l({
+}, g = { class: "progress-cell__body" }, _ = {
+	"data-testid": "pl-progress-cell-stage",
+	class: "progress-cell__stage text-s"
+}, v = {
+	"data-testid": "pl-progress-cell-percentage",
+	class: "progress-cell__percentage text-s d-flex align-center justify-end"
+}, y = /* @__PURE__ */ l({
 	__name: "PlProgressCell",
 	props: {
 		stage: { default: "not_started" },
@@ -18,20 +25,25 @@ var h = {
 	},
 	setup(l) {
 		let y = l, b = r(() => y.stage !== "not_started"), x = r(() => y.stage === "done" ? 100 : Math.min(100, y.progress || 0)), S = r(() => y.progress === void 0 && y.stage !== "done" && y.stage !== "not_started" && !y.error);
-		return (r, C) => (f(), o("div", { class: u({
-			"progress-cell": !0,
-			"progress-cell__white-bg": b.value,
-			error: l.error,
-			"not-started": y.stage === "not_started"
-		}) }, [
+		return (r, C) => (f(), o("div", {
+			"data-testid": "pl-progress-cell",
+			class: u({
+				"progress-cell": !0,
+				"progress-cell__white-bg": b.value,
+				error: l.error,
+				"not-started": y.stage === "not_started"
+			})
+		}, [
 			S.value ? (f(), o("div", h, [...C[0] ||= [s("div", { class: "progress-cell__infinity-gradient" }, null, -1)]])) : a("", !0),
 			!S.value && !l.error ? (f(), o("div", {
 				key: 1,
+				"data-testid": "pl-progress-cell-indicator",
 				class: "progress-cell__indicator",
 				style: d({ width: x.value + "%" })
 			}, null, 4)) : a("", !0),
 			s("div", g, [s("div", _, p(l.error ? m(e)(l.error) : l.step), 1), s("div", v, [l.error ? (f(), i(m(t), {
 				key: 0,
+				"data-testid": "pl-progress-cell-error-icon",
 				name: "error"
 			})) : a("", !0), l.error ? a("", !0) : (f(), o(n, { key: 1 }, [c(p(l.progressString), 1)], 64))])])
 		], 2));

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

@@ -1 +1 @@
-{"version":3,"file":"PlProgressCell.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlProgressCell/PlProgressCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"./pl-progress-cell.scss\";\nimport { computed } from \"vue\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport type { PlProgressCellProps } from \"./types\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\n\nconst props = withDefaults(defineProps<PlProgressCellProps>(), {\n  stage: \"not_started\",\n  step: \"\", // main text (left)\n  progressString: \"\", // appended text on the right side (right)\n  progress: undefined,\n  error: undefined,\n});\n\nconst canShowWhiteBg = computed(() => props.stage !== \"not_started\");\n\nconst currentProgress = computed(() =>\n  props.stage === \"done\" ? 100 : Math.min(100, props.progress || 0),\n);\n\nconst canShowInfinityLoader = computed(\n  () =>\n    props.progress === undefined &&\n    props.stage !== \"done\" &&\n    props.stage !== \"not_started\" &&\n    !props.error,\n);\n</script>\n\n<template>\n  <div\n    :class=\"{\n      'progress-cell': true,\n      'progress-cell__white-bg': canShowWhiteBg,\n      error,\n      'not-started': props.stage === 'not_started',\n    }\"\n  >\n    <div v-if=\"canShowInfinityLoader\" class=\"progress-cell__infinity-loader\">\n      <div class=\"progress-cell__infinity-gradient\" />\n    </div>\n    <div\n      v-if=\"!canShowInfinityLoader && !error\"\n      class=\"progress-cell__indicator\"\n      :style=\"{ width: currentProgress + '%' }\"\n    />\n    <div class=\"progress-cell__body\">\n      <div class=\"progress-cell__stage text-s\">\n        {{ error ? getErrorMessage(error) : step }}\n      </div>\n      <div class=\"progress-cell__percentage text-s d-flex align-center justify-end\">\n        <PlMaskIcon24 v-if=\"error\" name=\"error\" />\n        <template v-if=\"!error\">\n          {{ progressString }}\n        </template>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAOA,IAAM,IAAQ,GAQR,IAAiB,QAAe,EAAM,UAAU,cAAc,EAE9D,IAAkB,QACtB,EAAM,UAAU,SAAS,MAAM,KAAK,IAAI,KAAK,EAAM,YAAY,EAAE,CAClE,EAEK,IAAwB,QAE1B,EAAM,aAAa,KAAA,KACnB,EAAM,UAAU,UAChB,EAAM,UAAU,iBAChB,CAAC,EAAM,MACV;yBAIC,EA2BM,OAAA,EA1BH,OAAK,EAAA;;8BAAkE,EAAA;UAAsB,EAAA;kBAA4B,EAAM,UAAK;;GAO1H,EAAA,SAAA,GAAA,EAAX,EAEM,OAFN,GAEM,CAAA,GAAA,AAAA,EAAA,OAAA,CADJ,EAAgD,OAAA,EAA3C,OAAM,oCAAkC,EAAA,MAAA,GAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;IAGtC,EAAA,SAAqB,CAAK,EAAA,SAAA,GAAA,EADnC,EAIE,OAAA;;IAFA,OAAM;IACL,OAAK,EAAA,EAAA,OAAW,EAAA,QAAe,KAAA,CAAA;;GAElC,EAUM,OAVN,GAUM,CATJ,EAEM,OAFN,GAEM,EADD,EAAA,QAAQ,EAAA,EAAe,CAAC,EAAA,MAAK,GAAI,EAAA,KAAI,EAAA,EAAA,EAE1C,EAKM,OALN,GAKM,CAJgB,EAAA,SAAA,GAAA,EAApB,EAA0C,EAAA,EAAA,EAAA;;IAAf,MAAK;oBACf,EAAA,QACE,EAAA,IAAA,GAAA,IADF,GAAA,EAAjB,EAEW,GAAA,EAAA,KAAA,GAAA,EAAA,CAAA,EAAA,EADN,EAAA,eAAc,EAAA,EAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"PlProgressCell.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlProgressCell/PlProgressCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"./pl-progress-cell.scss\";\nimport { computed } from \"vue\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport type { PlProgressCellProps } from \"./types\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\n\nconst props = withDefaults(defineProps<PlProgressCellProps>(), {\n  stage: \"not_started\",\n  step: \"\", // main text (left)\n  progressString: \"\", // appended text on the right side (right)\n  progress: undefined,\n  error: undefined,\n});\n\nconst canShowWhiteBg = computed(() => props.stage !== \"not_started\");\n\nconst currentProgress = computed(() =>\n  props.stage === \"done\" ? 100 : Math.min(100, props.progress || 0),\n);\n\nconst canShowInfinityLoader = computed(\n  () =>\n    props.progress === undefined &&\n    props.stage !== \"done\" &&\n    props.stage !== \"not_started\" &&\n    !props.error,\n);\n</script>\n\n<template>\n  <div\n    data-testid=\"pl-progress-cell\"\n    :class=\"{\n      'progress-cell': true,\n      'progress-cell__white-bg': canShowWhiteBg,\n      error,\n      'not-started': props.stage === 'not_started',\n    }\"\n  >\n    <div\n      v-if=\"canShowInfinityLoader\"\n      data-testid=\"pl-progress-cell-infinity-loader\"\n      class=\"progress-cell__infinity-loader\"\n    >\n      <div class=\"progress-cell__infinity-gradient\" />\n    </div>\n    <div\n      v-if=\"!canShowInfinityLoader && !error\"\n      data-testid=\"pl-progress-cell-indicator\"\n      class=\"progress-cell__indicator\"\n      :style=\"{ width: currentProgress + '%' }\"\n    />\n    <div class=\"progress-cell__body\">\n      <div data-testid=\"pl-progress-cell-stage\" class=\"progress-cell__stage text-s\">\n        {{ error ? getErrorMessage(error) : step }}\n      </div>\n      <div\n        data-testid=\"pl-progress-cell-percentage\"\n        class=\"progress-cell__percentage text-s d-flex align-center justify-end\"\n      >\n        <PlMaskIcon24 v-if=\"error\" data-testid=\"pl-progress-cell-error-icon\" name=\"error\" />\n        <template v-if=\"!error\">\n          {{ progressString }}\n        </template>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAOA,IAAM,IAAQ,GAQR,IAAiB,QAAe,EAAM,UAAU,cAAc,EAE9D,IAAkB,QACtB,EAAM,UAAU,SAAS,MAAM,KAAK,IAAI,KAAK,EAAM,YAAY,EAAE,CAClE,EAEK,IAAwB,QAE1B,EAAM,aAAa,KAAA,KACnB,EAAM,UAAU,UAChB,EAAM,UAAU,iBAChB,CAAC,EAAM,MACV;yBAIC,EAoCM,OAAA;GAnCJ,eAAY;GACX,OAAK,EAAA;;+BAAkE,EAAA;WAAsB,EAAA;mBAA4B,EAAM,UAAK;;;GAQ7H,EAAA,SAAA,GAAA,EADR,EAMM,OANN,GAMM,CAAA,GAAA,AAAA,EAAA,OAAA,CADJ,EAAgD,OAAA,EAA3C,OAAM,oCAAkC,EAAA,MAAA,GAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;IAGtC,EAAA,SAAqB,CAAK,EAAA,SAAA,GAAA,EADnC,EAKE,OAAA;;IAHA,eAAY;IACZ,OAAM;IACL,OAAK,EAAA,EAAA,OAAW,EAAA,QAAe,KAAA,CAAA;;GAElC,EAaM,OAbN,GAaM,CAZJ,EAEM,OAFN,GAEM,EADD,EAAA,QAAQ,EAAA,EAAe,CAAC,EAAA,MAAK,GAAI,EAAA,KAAI,EAAA,EAAA,EAE1C,EAQM,OARN,GAQM,CAJgB,EAAA,SAAA,GAAA,EAApB,EAAoF,EAAA,EAAA,EAAA;;IAAzD,eAAY;IAA8B,MAAK;oBACzD,EAAA,QACE,EAAA,IAAA,GAAA,IADF,GAAA,EAAjB,EAEW,GAAA,EAAA,KAAA,GAAA,EAAA,CAAA,EAAA,EADN,EAAA,eAAc,EAAA,EAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA"}

package/dist/components/PlRadio/PlRadio.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlRadio.js","names":[],"sources":["../../../src/components/PlRadio/PlRadio.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M\">\nimport { inject } from \"vue\";\nimport { radioGroupModelKey, radioGroupNameKey } from \"./keys\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars -- used by the props documentation\nimport type PlRadioGroup from \"./PlRadioGroup.vue\";\n\nconst standaloneModel = defineModel<M>();\n\nconst { name: standaloneName, ...props } = defineProps<{\n  /** Used to group multiple radio controls. Will be ignored if this component is a descendant of a {@link PlRadioGroup}. */\n  name?: string;\n  /** Value that goes into `v-model`. */\n  value?: M;\n  /** Whether the radio control is disabled. */\n  disabled?: boolean;\n}>();\n\ndefineSlots<{\n  /** Label of the radio control. */\n  default?(): unknown;\n}>();\n\nconst name = inject(radioGroupNameKey, standaloneName);\nconst model = inject<typeof standaloneModel>(radioGroupModelKey, standaloneModel);\n</script>\n\n<template>\n  <label :class=\"$style.container\">\n    <input v-model=\"model\" :class=\"$style.input\" type=\"radio\" :name v-bind=\"props\" />\n    <span :class=\"$style.label\"><slot /></span>\n  </label>\n</template>\n\n<style module>\n.container {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px;\n  border-radius: 6px;\n  transition: all 200ms ease-in-out;\n  color: var(--txt-01);\n  user-select: none;\n  &:hover:not(:has(:disabled)) {\n    background: var(--btn-sec-hover-grey);\n  }\n  &:has(:disabled) {\n    color: var(--dis-01);\n  }\n}\n\n.input {\n  appearance: none;\n  position: relative;\n  block-size: 24px;\n  aspect-ratio: 1;\n  margin: 0;\n  border-radius: 50%;\n  outline: 2px solid transparent;\n  color: inherit;\n  transition: inherit;\n  &:focus {\n    outline-color: var(--border-color-focus);\n  }\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 2px;\n    border-radius: 50%;\n    border: 2px solid;\n  }\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: 7.5px;\n    border-radius: 50%;\n    background-color: currentColor;\n    scale: 0;\n    transition: inherit;\n  }\n  &:checked::after {\n    scale: 1;\n  }\n}\n\n.label {\n  padding-inline: 4px;\n  line-height: calc(20 / 14);\n  font-weight: 500;\n  text-box: trim-both cap alphabetic;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlRadio.js","names":[],"sources":["../../../src/components/PlRadio/PlRadio.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M\">\nimport { inject } from \"vue\";\nimport { radioGroupModelKey, radioGroupNameKey } from \"./keys\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars -- used by the props documentation\nimport type PlRadioGroup from \"./PlRadioGroup.vue\";\n\nconst standaloneModel = defineModel<M>();\n\nconst { name: standaloneName, ...props } = defineProps<{\n  /** Used to group multiple radio controls. Will be ignored if this component is a descendant of a {@link PlRadioGroup}. */\n  name?: string;\n  /** Value that goes into `v-model`. */\n  value?: M;\n  /** Whether the radio control is disabled. */\n  disabled?: boolean;\n}>();\n\ndefineSlots<{\n  /** Label of the radio control. */\n  default?(): unknown;\n}>();\n\nconst name = inject(radioGroupNameKey, standaloneName);\nconst model = inject<typeof standaloneModel>(radioGroupModelKey, standaloneModel);\n</script>\n\n<template>\n  <label :class=\"$style.container\" data-testid=\"pl-radio\">\n    <input\n      v-model=\"model\"\n      :class=\"$style.input\"\n      type=\"radio\"\n      :name\n      data-testid=\"pl-radio-input\"\n      v-bind=\"props\"\n    />\n    <span :class=\"$style.label\" data-testid=\"pl-radio-label\"><slot /></span>\n  </label>\n</template>\n\n<style module>\n.container {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px;\n  border-radius: 6px;\n  transition: all 200ms ease-in-out;\n  color: var(--txt-01);\n  user-select: none;\n  &:hover:not(:has(:disabled)) {\n    background: var(--btn-sec-hover-grey);\n  }\n  &:has(:disabled) {\n    color: var(--dis-01);\n  }\n}\n\n.input {\n  appearance: none;\n  position: relative;\n  block-size: 24px;\n  aspect-ratio: 1;\n  margin: 0;\n  border-radius: 50%;\n  outline: 2px solid transparent;\n  color: inherit;\n  transition: inherit;\n  &:focus {\n    outline-color: var(--border-color-focus);\n  }\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 2px;\n    border-radius: 50%;\n    border: 2px solid;\n  }\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: 7.5px;\n    border-radius: 50%;\n    background-color: currentColor;\n    scale: 0;\n    transition: inherit;\n  }\n  &:checked::after {\n    scale: 1;\n  }\n}\n\n.label {\n  padding-inline: 4px;\n  line-height: calc(20 / 14);\n  font-weight: 500;\n  text-box: trim-both cap alphabetic;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlRadio/PlRadio.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlRadio.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlRadio/PlRadio.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M\">\nimport { inject } from \"vue\";\nimport { radioGroupModelKey, radioGroupNameKey } from \"./keys\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars -- used by the props documentation\nimport type PlRadioGroup from \"./PlRadioGroup.vue\";\n\nconst standaloneModel = defineModel<M>();\n\nconst { name: standaloneName, ...props } = defineProps<{\n  /** Used to group multiple radio controls. Will be ignored if this component is a descendant of a {@link PlRadioGroup}. */\n  name?: string;\n  /** Value that goes into `v-model`. */\n  value?: M;\n  /** Whether the radio control is disabled. */\n  disabled?: boolean;\n}>();\n\ndefineSlots<{\n  /** Label of the radio control. */\n  default?(): unknown;\n}>();\n\nconst name = inject(radioGroupNameKey, standaloneName);\nconst model = inject<typeof standaloneModel>(radioGroupModelKey, standaloneModel);\n</script>\n\n<template>\n  <label :class=\"$style.container\">\n    <input v-model=\"model\" :class=\"$style.input\" type=\"radio\" :name v-bind=\"props\" />\n    <span :class=\"$style.label\"><slot /></span>\n  </label>\n</template>\n\n<style module>\n.container {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px;\n  border-radius: 6px;\n  transition: all 200ms ease-in-out;\n  color: var(--txt-01);\n  user-select: none;\n  &:hover:not(:has(:disabled)) {\n    background: var(--btn-sec-hover-grey);\n  }\n  &:has(:disabled) {\n    color: var(--dis-01);\n  }\n}\n\n.input {\n  appearance: none;\n  position: relative;\n  block-size: 24px;\n  aspect-ratio: 1;\n  margin: 0;\n  border-radius: 50%;\n  outline: 2px solid transparent;\n  color: inherit;\n  transition: inherit;\n  &:focus {\n    outline-color: var(--border-color-focus);\n  }\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 2px;\n    border-radius: 50%;\n    border: 2px solid;\n  }\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: 7.5px;\n    border-radius: 50%;\n    background-color: currentColor;\n    scale: 0;\n    transition: inherit;\n  }\n  &:checked::after {\n    scale: 1;\n  }\n}\n\n.label {\n  padding-inline: 4px;\n  line-height: calc(20 / 14);\n  font-weight: 500;\n  text-box: trim-both cap alphabetic;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlRadio.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlRadio/PlRadio.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M\">\nimport { inject } from \"vue\";\nimport { radioGroupModelKey, radioGroupNameKey } from \"./keys\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars -- used by the props documentation\nimport type PlRadioGroup from \"./PlRadioGroup.vue\";\n\nconst standaloneModel = defineModel<M>();\n\nconst { name: standaloneName, ...props } = defineProps<{\n  /** Used to group multiple radio controls. Will be ignored if this component is a descendant of a {@link PlRadioGroup}. */\n  name?: string;\n  /** Value that goes into `v-model`. */\n  value?: M;\n  /** Whether the radio control is disabled. */\n  disabled?: boolean;\n}>();\n\ndefineSlots<{\n  /** Label of the radio control. */\n  default?(): unknown;\n}>();\n\nconst name = inject(radioGroupNameKey, standaloneName);\nconst model = inject<typeof standaloneModel>(radioGroupModelKey, standaloneModel);\n</script>\n\n<template>\n  <label :class=\"$style.container\" data-testid=\"pl-radio\">\n    <input\n      v-model=\"model\"\n      :class=\"$style.input\"\n      type=\"radio\"\n      :name\n      data-testid=\"pl-radio-input\"\n      v-bind=\"props\"\n    />\n    <span :class=\"$style.label\" data-testid=\"pl-radio-label\"><slot /></span>\n  </label>\n</template>\n\n<style module>\n.container {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px;\n  border-radius: 6px;\n  transition: all 200ms ease-in-out;\n  color: var(--txt-01);\n  user-select: none;\n  &:hover:not(:has(:disabled)) {\n    background: var(--btn-sec-hover-grey);\n  }\n  &:has(:disabled) {\n    color: var(--dis-01);\n  }\n}\n\n.input {\n  appearance: none;\n  position: relative;\n  block-size: 24px;\n  aspect-ratio: 1;\n  margin: 0;\n  border-radius: 50%;\n  outline: 2px solid transparent;\n  color: inherit;\n  transition: inherit;\n  &:focus {\n    outline-color: var(--border-color-focus);\n  }\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 2px;\n    border-radius: 50%;\n    border: 2px solid;\n  }\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: 7.5px;\n    border-radius: 50%;\n    background-color: currentColor;\n    scale: 0;\n    transition: inherit;\n  }\n  &:checked::after {\n    scale: 1;\n  }\n}\n\n.label {\n  padding-inline: 4px;\n  line-height: calc(20 / 14);\n  font-weight: 500;\n  text-box: trim-both cap alphabetic;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlRadio/PlRadio.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlRadio.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlRadio/PlRadio.vue"],"names":[],"mappings":"AAoGA,QAAA,MAAM,YAAY,GAAK,CAAC,EACvB,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WA6EO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QAzEtD,0HAA0H;eACnH,MAAM;QACb,sCAAsC;gBAC9B,CAAC;QACT,6CAA6C;mBAClC,OAAO;;qBAgBP,CAAC;;;KAoD6E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;QAhET,kCAAkC;oBACtB,OAAO;;;EAmEjB,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"PlRadio.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlRadio/PlRadio.vue"],"names":[],"mappings":"AA2GA,QAAA,MAAM,YAAY,GAAK,CAAC,EACvB,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAgFO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QA5EtD,0HAA0H;eACnH,MAAM;QACb,sCAAsC;gBAC9B,CAAC;QACT,6CAA6C;mBAClC,OAAO;;qBAgBP,CAAC;;;KAuD6E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;QAnET,kCAAkC;oBACtB,OAAO;;;EAsEjB,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/components/PlRadio/PlRadio.vue2.js

@@ -14,12 +14,19 @@ var _ = ["name"], v = /* @__PURE__ */ a({
 	emits: ["update:modelValue"],
 	setup(a) {
 		let c = m(a, "modelValue"), v = i(a, ["name"]), y = o(t, a.name), b = o(e, c);
-		return (e, t) => (d(), n("label", { class: u(e.$style.container) }, [g(r("input", l({
+		return (e, t) => (d(), n("label", {
+			class: u(e.$style.container),
+			"data-testid": "pl-radio"
+		}, [g(r("input", l({
 			"onUpdate:modelValue": t[0] ||= (e) => s(b) ? b.value = e : null,
 			class: e.$style.input,
 			type: "radio",
-			name: p(y)
-		}, v), null, 16, _), [[h, p(b)]]), r("span", { class: u(e.$style.label) }, [f(e.$slots, "default")], 2)], 2));
+			name: p(y),
+			"data-testid": "pl-radio-input"
+		}, v), null, 16, _), [[h, p(b)]]), r("span", {
+			class: u(e.$style.label),
+			"data-testid": "pl-radio-label"
+		}, [f(e.$slots, "default")], 2)], 2));
 	}
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"PlRadio.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlRadio/PlRadio.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M\">\nimport { inject } from \"vue\";\nimport { radioGroupModelKey, radioGroupNameKey } from \"./keys\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars -- used by the props documentation\nimport type PlRadioGroup from \"./PlRadioGroup.vue\";\n\nconst standaloneModel = defineModel<M>();\n\nconst { name: standaloneName, ...props } = defineProps<{\n  /** Used to group multiple radio controls. Will be ignored if this component is a descendant of a {@link PlRadioGroup}. */\n  name?: string;\n  /** Value that goes into `v-model`. */\n  value?: M;\n  /** Whether the radio control is disabled. */\n  disabled?: boolean;\n}>();\n\ndefineSlots<{\n  /** Label of the radio control. */\n  default?(): unknown;\n}>();\n\nconst name = inject(radioGroupNameKey, standaloneName);\nconst model = inject<typeof standaloneModel>(radioGroupModelKey, standaloneModel);\n</script>\n\n<template>\n  <label :class=\"$style.container\">\n    <input v-model=\"model\" :class=\"$style.input\" type=\"radio\" :name v-bind=\"props\" />\n    <span :class=\"$style.label\"><slot /></span>\n  </label>\n</template>\n\n<style module>\n.container {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px;\n  border-radius: 6px;\n  transition: all 200ms ease-in-out;\n  color: var(--txt-01);\n  user-select: none;\n  &:hover:not(:has(:disabled)) {\n    background: var(--btn-sec-hover-grey);\n  }\n  &:has(:disabled) {\n    color: var(--dis-01);\n  }\n}\n\n.input {\n  appearance: none;\n  position: relative;\n  block-size: 24px;\n  aspect-ratio: 1;\n  margin: 0;\n  border-radius: 50%;\n  outline: 2px solid transparent;\n  color: inherit;\n  transition: inherit;\n  &:focus {\n    outline-color: var(--border-color-focus);\n  }\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 2px;\n    border-radius: 50%;\n    border: 2px solid;\n  }\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: 7.5px;\n    border-radius: 50%;\n    background-color: currentColor;\n    scale: 0;\n    transition: inherit;\n  }\n  &:checked::after {\n    scale: 1;\n  }\n}\n\n.label {\n  padding-inline: 4px;\n  line-height: calc(20 / 14);\n  font-weight: 500;\n  text-box: trim-both cap alphabetic;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;EAMA,IAAM,IAAkB,EAAc,GAAA,aAAE,EAElC,IAAqC,EAAA,GAAA,CAAA,OAAA,CAOvC,EAOE,IAAO,EAAO,GAAmB,EAAA,KAAe,EAChD,IAAQ,EAA+B,GAAoB,EAAgB;yBAI/E,EAGQ,SAAA,EAHA,OAAK,EAAEA,EAAAA,OAAO,UAAS,EAAA,EAAA,CAAA,EAC7B,EAAiF,SAAjF,EAAiF;mDAA5D,QAAA,IAAA;GAAG,OAAOA,EAAAA,OAAO;GAAO,MAAK;GAAS,MAAA,EAAA,EAAI;KAAS,EAAK,EAAA,MAAA,IAAA,EAAA,EAAA,CAAA,CAAA,GAA7D,EAAA,EAAK,CAAA,CAAA,CAAA,EACrB,EAA2C,QAAA,EAApC,OAAK,EAAEA,EAAAA,OAAO,MAAK,EAAA,EAAA,CAAE,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"PlRadio.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlRadio/PlRadio.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M\">\nimport { inject } from \"vue\";\nimport { radioGroupModelKey, radioGroupNameKey } from \"./keys\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars -- used by the props documentation\nimport type PlRadioGroup from \"./PlRadioGroup.vue\";\n\nconst standaloneModel = defineModel<M>();\n\nconst { name: standaloneName, ...props } = defineProps<{\n  /** Used to group multiple radio controls. Will be ignored if this component is a descendant of a {@link PlRadioGroup}. */\n  name?: string;\n  /** Value that goes into `v-model`. */\n  value?: M;\n  /** Whether the radio control is disabled. */\n  disabled?: boolean;\n}>();\n\ndefineSlots<{\n  /** Label of the radio control. */\n  default?(): unknown;\n}>();\n\nconst name = inject(radioGroupNameKey, standaloneName);\nconst model = inject<typeof standaloneModel>(radioGroupModelKey, standaloneModel);\n</script>\n\n<template>\n  <label :class=\"$style.container\" data-testid=\"pl-radio\">\n    <input\n      v-model=\"model\"\n      :class=\"$style.input\"\n      type=\"radio\"\n      :name\n      data-testid=\"pl-radio-input\"\n      v-bind=\"props\"\n    />\n    <span :class=\"$style.label\" data-testid=\"pl-radio-label\"><slot /></span>\n  </label>\n</template>\n\n<style module>\n.container {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px;\n  border-radius: 6px;\n  transition: all 200ms ease-in-out;\n  color: var(--txt-01);\n  user-select: none;\n  &:hover:not(:has(:disabled)) {\n    background: var(--btn-sec-hover-grey);\n  }\n  &:has(:disabled) {\n    color: var(--dis-01);\n  }\n}\n\n.input {\n  appearance: none;\n  position: relative;\n  block-size: 24px;\n  aspect-ratio: 1;\n  margin: 0;\n  border-radius: 50%;\n  outline: 2px solid transparent;\n  color: inherit;\n  transition: inherit;\n  &:focus {\n    outline-color: var(--border-color-focus);\n  }\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 2px;\n    border-radius: 50%;\n    border: 2px solid;\n  }\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: 7.5px;\n    border-radius: 50%;\n    background-color: currentColor;\n    scale: 0;\n    transition: inherit;\n  }\n  &:checked::after {\n    scale: 1;\n  }\n}\n\n.label {\n  padding-inline: 4px;\n  line-height: calc(20 / 14);\n  font-weight: 500;\n  text-box: trim-both cap alphabetic;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;EAMA,IAAM,IAAkB,EAAc,GAAA,aAAE,EAElC,IAAqC,EAAA,GAAA,CAAA,OAAA,CAOvC,EAOE,IAAO,EAAO,GAAmB,EAAA,KAAe,EAChD,IAAQ,EAA+B,GAAoB,EAAgB;yBAI/E,EAUQ,SAAA;GAVA,OAAK,EAAEA,EAAAA,OAAO,UAAS;GAAE,eAAY;QAC3C,EAOE,SAPF,EAOE;mDANc,QAAA,IAAA;GACb,OAAOA,EAAAA,OAAO;GACf,MAAK;GACJ,MAAA,EAAA,EAAI;GACL,eAAY;KACJ,EAAK,EAAA,MAAA,IAAA,EAAA,EAAA,CAAA,CAAA,GALJ,EAAA,EAAK,CAAA,CAAA,CAAA,EAOhB,EAAwE,QAAA;GAAjE,OAAK,EAAEA,EAAAA,OAAO,MAAK;GAAE,eAAY;MAAiB,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA"}

package/dist/components/PlRadio/PlRadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlRadioGroup.js","names":[],"sources":["../../../src/components/PlRadio/PlRadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M\">\nimport { provide } from \"vue\";\nimport { radioGroupModelKey, radioGroupNameKey } from \"./keys\";\nimport PlRadio from \"./PlRadio.vue\";\n\ntype RadioGroupOption = {\n  label: string;\n  value: M;\n  disabled?: boolean;\n};\n\nconst model = defineModel<M>();\n\nconst props = defineProps<{\n  /** Name of the radio group. */\n  name?: string;\n  /**\n   * List of available options.\n   * Renders a list of {@link PlRadio} components before the {@link slots.default | default} slot.\n   */\n  options?: Readonly<RadioGroupOption[]>;\n  /** Function to get option's unique key. Use if default mechanism (key = index) is unstable. */\n  keyExtractor?: (value: M, index: number) => PropertyKey;\n}>();\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars -- used by the props documentation\nconst slots = defineSlots<{\n  /**\n   * Can be anything, but usually an array of {@link PlRadio} components.\n   * If {@link props.options|options} are provided, they will be rendered before this slot.\n   */\n  default?(): unknown;\n  /** Label of the radio group. */\n  label?(): unknown;\n}>();\n\nconst keyExtractor = props.keyExtractor ?? ((_, i) => i);\n\nprovide(radioGroupNameKey, props.name);\nprovide(radioGroupModelKey, model);\n</script>\n\n<template>\n  <fieldset :class=\"$style.container\">\n    <legend :class=\"$style.label\">\n      <slot name=\"label\" />\n    </legend>\n    <PlRadio\n      v-for=\"(option, i) in options\"\n      :key=\"keyExtractor(option.value, i)\"\n      :value=\"option.value\"\n      :disabled=\"option.disabled\"\n    >\n      {{ option.label }}\n    </PlRadio>\n    <slot />\n  </fieldset>\n</template>\n\n<style module>\n.container {\n  margin: 0;\n  padding: 0;\n  border: none;\n}\n.label {\n  margin-block-end: 12px;\n  padding: 0;\n  color: var(--txt-01);\n  line-height: calc(20 / 14);\n  font-weight: 500;\n  text-box: trim-both cap alphabetic;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlRadioGroup.js","names":[],"sources":["../../../src/components/PlRadio/PlRadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M\">\nimport { provide } from \"vue\";\nimport { radioGroupModelKey, radioGroupNameKey } from \"./keys\";\nimport PlRadio from \"./PlRadio.vue\";\n\ntype RadioGroupOption = {\n  label: string;\n  value: M;\n  disabled?: boolean;\n};\n\nconst model = defineModel<M>();\n\nconst props = defineProps<{\n  /** Name of the radio group. */\n  name?: string;\n  /**\n   * List of available options.\n   * Renders a list of {@link PlRadio} components before the {@link slots.default | default} slot.\n   */\n  options?: Readonly<RadioGroupOption[]>;\n  /** Function to get option's unique key. Use if default mechanism (key = index) is unstable. */\n  keyExtractor?: (value: M, index: number) => PropertyKey;\n}>();\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars -- used by the props documentation\nconst slots = defineSlots<{\n  /**\n   * Can be anything, but usually an array of {@link PlRadio} components.\n   * If {@link props.options|options} are provided, they will be rendered before this slot.\n   */\n  default?(): unknown;\n  /** Label of the radio group. */\n  label?(): unknown;\n}>();\n\nconst keyExtractor = props.keyExtractor ?? ((_, i) => i);\n\nprovide(radioGroupNameKey, props.name);\nprovide(radioGroupModelKey, model);\n</script>\n\n<template>\n  <fieldset :class=\"$style.container\" data-testid=\"pl-radio-group\">\n    <legend :class=\"$style.label\" data-testid=\"pl-radio-group-label\">\n      <slot name=\"label\" />\n    </legend>\n    <PlRadio\n      v-for=\"(option, i) in options\"\n      :key=\"keyExtractor(option.value, i)\"\n      :value=\"option.value\"\n      :disabled=\"option.disabled\"\n      data-testid=\"pl-radio-group-option\"\n    >\n      {{ option.label }}\n    </PlRadio>\n    <slot />\n  </fieldset>\n</template>\n\n<style module>\n.container {\n  margin: 0;\n  padding: 0;\n  border: none;\n}\n.label {\n  margin-block-end: 12px;\n  padding: 0;\n  color: var(--txt-01);\n  line-height: calc(20 / 14);\n  font-weight: 500;\n  text-box: trim-both cap alphabetic;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlRadio/PlRadioGroup.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlRadioGroup.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlRadio/PlRadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M\">\nimport { provide } from \"vue\";\nimport { radioGroupModelKey, radioGroupNameKey } from \"./keys\";\nimport PlRadio from \"./PlRadio.vue\";\n\ntype RadioGroupOption = {\n  label: string;\n  value: M;\n  disabled?: boolean;\n};\n\nconst model = defineModel<M>();\n\nconst props = defineProps<{\n  /** Name of the radio group. */\n  name?: string;\n  /**\n   * List of available options.\n   * Renders a list of {@link PlRadio} components before the {@link slots.default | default} slot.\n   */\n  options?: Readonly<RadioGroupOption[]>;\n  /** Function to get option's unique key. Use if default mechanism (key = index) is unstable. */\n  keyExtractor?: (value: M, index: number) => PropertyKey;\n}>();\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars -- used by the props documentation\nconst slots = defineSlots<{\n  /**\n   * Can be anything, but usually an array of {@link PlRadio} components.\n   * If {@link props.options|options} are provided, they will be rendered before this slot.\n   */\n  default?(): unknown;\n  /** Label of the radio group. */\n  label?(): unknown;\n}>();\n\nconst keyExtractor = props.keyExtractor ?? ((_, i) => i);\n\nprovide(radioGroupNameKey, props.name);\nprovide(radioGroupModelKey, model);\n</script>\n\n<template>\n  <fieldset :class=\"$style.container\">\n    <legend :class=\"$style.label\">\n      <slot name=\"label\" />\n    </legend>\n    <PlRadio\n      v-for=\"(option, i) in options\"\n      :key=\"keyExtractor(option.value, i)\"\n      :value=\"option.value\"\n      :disabled=\"option.disabled\"\n    >\n      {{ option.label }}\n    </PlRadio>\n    <slot />\n  </fieldset>\n</template>\n\n<style module>\n.container {\n  margin: 0;\n  padding: 0;\n  border: none;\n}\n.label {\n  margin-block-end: 12px;\n  padding: 0;\n  color: var(--txt-01);\n  line-height: calc(20 / 14);\n  font-weight: 500;\n  text-box: trim-both cap alphabetic;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlRadioGroup.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlRadio/PlRadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M\">\nimport { provide } from \"vue\";\nimport { radioGroupModelKey, radioGroupNameKey } from \"./keys\";\nimport PlRadio from \"./PlRadio.vue\";\n\ntype RadioGroupOption = {\n  label: string;\n  value: M;\n  disabled?: boolean;\n};\n\nconst model = defineModel<M>();\n\nconst props = defineProps<{\n  /** Name of the radio group. */\n  name?: string;\n  /**\n   * List of available options.\n   * Renders a list of {@link PlRadio} components before the {@link slots.default | default} slot.\n   */\n  options?: Readonly<RadioGroupOption[]>;\n  /** Function to get option's unique key. Use if default mechanism (key = index) is unstable. */\n  keyExtractor?: (value: M, index: number) => PropertyKey;\n}>();\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars -- used by the props documentation\nconst slots = defineSlots<{\n  /**\n   * Can be anything, but usually an array of {@link PlRadio} components.\n   * If {@link props.options|options} are provided, they will be rendered before this slot.\n   */\n  default?(): unknown;\n  /** Label of the radio group. */\n  label?(): unknown;\n}>();\n\nconst keyExtractor = props.keyExtractor ?? ((_, i) => i);\n\nprovide(radioGroupNameKey, props.name);\nprovide(radioGroupModelKey, model);\n</script>\n\n<template>\n  <fieldset :class=\"$style.container\" data-testid=\"pl-radio-group\">\n    <legend :class=\"$style.label\" data-testid=\"pl-radio-group-label\">\n      <slot name=\"label\" />\n    </legend>\n    <PlRadio\n      v-for=\"(option, i) in options\"\n      :key=\"keyExtractor(option.value, i)\"\n      :value=\"option.value\"\n      :disabled=\"option.disabled\"\n      data-testid=\"pl-radio-group-option\"\n    >\n      {{ option.label }}\n    </PlRadio>\n    <slot />\n  </fieldset>\n</template>\n\n<style module>\n.container {\n  margin: 0;\n  padding: 0;\n  border: none;\n}\n.label {\n  margin-block-end: 12px;\n  padding: 0;\n  color: var(--txt-01);\n  line-height: calc(20 / 14);\n  font-weight: 500;\n  text-box: trim-both cap alphabetic;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlRadio/PlRadioGroup.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlRadioGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlRadio/PlRadioGroup.vue"],"names":[],"mappings":"AAiFA,QAAA,MAAM,YAAY,GAAK,CAAC,EACvB,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WA2GO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QAjGtD,+BAA+B;eACxB,MAAM;QACb;;;WAGG;kBACO,QAAQ,CAAC;mBAdZ,MAAM;mBACN,CAAC;uBACG,OAAO;WAYmB,CAAC;QACtC,+FAA+F;uBAChF,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,WAAW;;qBAuB5C,CAAC;;;KAkE6E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;QArFT;;;WAGG;oBACS,OAAO;QACnB,gCAAgC;kBACtB,OAAO;;;EAmFf,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"PlRadioGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlRadio/PlRadioGroup.vue"],"names":[],"mappings":"AAkFA,QAAA,MAAM,YAAY,GAAK,CAAC,EACvB,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WA+GO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QArGtD,+BAA+B;eACxB,MAAM;QACb;;;WAGG;kBACO,QAAQ,CAAC;mBAdZ,MAAM;mBACN,CAAC;uBACG,OAAO;WAYmB,CAAC;QACtC,+FAA+F;uBAChF,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,WAAW;;qBAuB5C,CAAC;;;KAsE6E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;QAzFT;;;WAGG;oBACS,OAAO;QACnB,gCAAgC;kBACtB,OAAO;;;EAuFf,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/components/PlRadio/PlRadioGroup.vue2.js

@@ -17,12 +17,19 @@ var b = /* @__PURE__ */ c({
 		let l = _(c, "modelValue"), b = c;
 		v();
 		let x = b.keyExtractor ?? ((e, t) => t);
-		return f(t, b.name), f(e, l), (e, t) => (d(), a("fieldset", { class: u(e.$style.container) }, [
-			o("legend", { class: u(e.$style.label) }, [m(e.$slots, "label")], 2),
+		return f(t, b.name), f(e, l), (e, t) => (d(), a("fieldset", {
+			class: u(e.$style.container),
+			"data-testid": "pl-radio-group"
+		}, [
+			o("legend", {
+				class: u(e.$style.label),
+				"data-testid": "pl-radio-group-label"
+			}, [m(e.$slots, "label")], 2),
 			(d(!0), a(r, null, p(c.options, (e, t) => (d(), i(n, {
 				key: g(x)(e.value, t),
 				value: e.value,
-				disabled: e.disabled
+				disabled: e.disabled,
+				"data-testid": "pl-radio-group-option"
 			}, {
 				default: y(() => [s(h(e.label), 1)]),
 				_: 2

package/dist/components/PlRadio/PlRadioGroup.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlRadioGroup.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlRadio/PlRadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M\">\nimport { provide } from \"vue\";\nimport { radioGroupModelKey, radioGroupNameKey } from \"./keys\";\nimport PlRadio from \"./PlRadio.vue\";\n\ntype RadioGroupOption = {\n  label: string;\n  value: M;\n  disabled?: boolean;\n};\n\nconst model = defineModel<M>();\n\nconst props = defineProps<{\n  /** Name of the radio group. */\n  name?: string;\n  /**\n   * List of available options.\n   * Renders a list of {@link PlRadio} components before the {@link slots.default | default} slot.\n   */\n  options?: Readonly<RadioGroupOption[]>;\n  /** Function to get option's unique key. Use if default mechanism (key = index) is unstable. */\n  keyExtractor?: (value: M, index: number) => PropertyKey;\n}>();\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars -- used by the props documentation\nconst slots = defineSlots<{\n  /**\n   * Can be anything, but usually an array of {@link PlRadio} components.\n   * If {@link props.options|options} are provided, they will be rendered before this slot.\n   */\n  default?(): unknown;\n  /** Label of the radio group. */\n  label?(): unknown;\n}>();\n\nconst keyExtractor = props.keyExtractor ?? ((_, i) => i);\n\nprovide(radioGroupNameKey, props.name);\nprovide(radioGroupModelKey, model);\n</script>\n\n<template>\n  <fieldset :class=\"$style.container\">\n    <legend :class=\"$style.label\">\n      <slot name=\"label\" />\n    </legend>\n    <PlRadio\n      v-for=\"(option, i) in options\"\n      :key=\"keyExtractor(option.value, i)\"\n      :value=\"option.value\"\n      :disabled=\"option.disabled\"\n    >\n      {{ option.label }}\n    </PlRadio>\n    <slot />\n  </fieldset>\n</template>\n\n<style module>\n.container {\n  margin: 0;\n  padding: 0;\n  border: none;\n}\n.label {\n  margin-block-end: 12px;\n  padding: 0;\n  color: var(--txt-01);\n  line-height: calc(20 / 14);\n  font-weight: 500;\n  text-box: trim-both cap alphabetic;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;EAWA,IAAM,IAAQ,EAAc,GAAA,aAAE,EAExB,IAAQ;AAaA,KAQV;EAEJ,IAAM,IAAe,EAAM,kBAAkB,GAAG,MAAM;SAEtD,EAAQ,GAAmB,EAAM,KAAK,EACtC,EAAQ,GAAoB,EAAM,kBAIhC,EAaW,YAAA,EAbA,OAAK,EAAEA,EAAAA,OAAO,UAAS,EAAA,EAAA;GAChC,EAES,UAAA,EAFA,OAAK,EAAEA,EAAAA,OAAO,MAAK,EAAA,EAAA,CAC1B,EAAqB,EAAA,QAAA,QAAA,CAAA,EAAA,EAAA;WAEvB,EAOU,GAAA,MAAA,EANc,EAAA,UAAd,GAAQ,YADlB,EAOU,GAAA;IALP,KAAK,EAAA,EAAY,CAAC,EAAO,OAAO,EAAC;IACjC,OAAO,EAAO;IACd,UAAU,EAAO;;qBAEA,CAAA,EAAA,EAAf,EAAO,MAAK,EAAA,EAAA,CAAA,CAAA;;;GAEjB,EAAQ,EAAA,QAAA,UAAA"}
+{"version":3,"file":"PlRadioGroup.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlRadio/PlRadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M\">\nimport { provide } from \"vue\";\nimport { radioGroupModelKey, radioGroupNameKey } from \"./keys\";\nimport PlRadio from \"./PlRadio.vue\";\n\ntype RadioGroupOption = {\n  label: string;\n  value: M;\n  disabled?: boolean;\n};\n\nconst model = defineModel<M>();\n\nconst props = defineProps<{\n  /** Name of the radio group. */\n  name?: string;\n  /**\n   * List of available options.\n   * Renders a list of {@link PlRadio} components before the {@link slots.default | default} slot.\n   */\n  options?: Readonly<RadioGroupOption[]>;\n  /** Function to get option's unique key. Use if default mechanism (key = index) is unstable. */\n  keyExtractor?: (value: M, index: number) => PropertyKey;\n}>();\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars -- used by the props documentation\nconst slots = defineSlots<{\n  /**\n   * Can be anything, but usually an array of {@link PlRadio} components.\n   * If {@link props.options|options} are provided, they will be rendered before this slot.\n   */\n  default?(): unknown;\n  /** Label of the radio group. */\n  label?(): unknown;\n}>();\n\nconst keyExtractor = props.keyExtractor ?? ((_, i) => i);\n\nprovide(radioGroupNameKey, props.name);\nprovide(radioGroupModelKey, model);\n</script>\n\n<template>\n  <fieldset :class=\"$style.container\" data-testid=\"pl-radio-group\">\n    <legend :class=\"$style.label\" data-testid=\"pl-radio-group-label\">\n      <slot name=\"label\" />\n    </legend>\n    <PlRadio\n      v-for=\"(option, i) in options\"\n      :key=\"keyExtractor(option.value, i)\"\n      :value=\"option.value\"\n      :disabled=\"option.disabled\"\n      data-testid=\"pl-radio-group-option\"\n    >\n      {{ option.label }}\n    </PlRadio>\n    <slot />\n  </fieldset>\n</template>\n\n<style module>\n.container {\n  margin: 0;\n  padding: 0;\n  border: none;\n}\n.label {\n  margin-block-end: 12px;\n  padding: 0;\n  color: var(--txt-01);\n  line-height: calc(20 / 14);\n  font-weight: 500;\n  text-box: trim-both cap alphabetic;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;EAWA,IAAM,IAAQ,EAAc,GAAA,aAAE,EAExB,IAAQ;AAaA,KAQV;EAEJ,IAAM,IAAe,EAAM,kBAAkB,GAAG,MAAM;SAEtD,EAAQ,GAAmB,EAAM,KAAK,EACtC,EAAQ,GAAoB,EAAM,kBAIhC,EAcW,YAAA;GAdA,OAAK,EAAEA,EAAAA,OAAO,UAAS;GAAE,eAAY;;GAC9C,EAES,UAAA;IAFA,OAAK,EAAEA,EAAAA,OAAO,MAAK;IAAE,eAAY;OACxC,EAAqB,EAAA,QAAA,QAAA,CAAA,EAAA,EAAA;WAEvB,EAQU,GAAA,MAAA,EAPc,EAAA,UAAd,GAAQ,YADlB,EAQU,GAAA;IANP,KAAK,EAAA,EAAY,CAAC,EAAO,OAAO,EAAC;IACjC,OAAO,EAAO;IACd,UAAU,EAAO;IAClB,eAAY;;qBAEM,CAAA,EAAA,EAAf,EAAO,MAAK,EAAA,EAAA,CAAA,CAAA;;;GAEjB,EAAQ,EAAA,QAAA,UAAA"}

package/dist/components/PlSearchField/PlSearchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlSearchField.js","names":[],"sources":["../../../src/components/PlSearchField/PlSearchField.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"V extends undefined | string, C extends V\">\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { computed } from \"vue\";\nimport PlTooltip from \"../PlTooltip/PlTooltip.vue\";\n\nconst model = defineModel<V>({ required: true });\n\nconst props = defineProps<{\n  modelValue?: string;\n  clearable?: boolean | (() => C);\n  placeholder?: string;\n  disabled?: boolean;\n  helper?: string;\n}>();\nconst slots = defineSlots<{\n  helper: () => unknown;\n}>();\n\nconst nonEmpty = computed(() => model.value != null && model.value.length > 0);\nconst hasHelper = computed(() => props.helper != null || slots.helper != null);\n\nconst clear = () => {\n  if (props.clearable) {\n    model.value = (typeof props.clearable === \"function\" ? props.clearable() : \"\") as V;\n  }\n};\n</script>\n\n<template>\n  <div ref=\"root\" :class=\"$style.component\">\n    <PlIcon24 name=\"search\" />\n    <input\n      ref=\"input\"\n      v-model=\"model\"\n      :disabled=\"props.disabled\"\n      :placeholder=\"props.placeholder || 'Find...'\"\n      type=\"text\"\n      spellcheck=\"false\"\n    />\n    <PlIcon16\n      v-if=\"props.clearable && nonEmpty\"\n      :class=\"$style.clear\"\n      name=\"delete-clear\"\n      @click.stop=\"clear\"\n    />\n\n    <PlTooltip v-if=\"hasHelper\" class=\"info\" position=\"bottom\">\n      <template #tooltip>\n        <slot name=\"helper\">\n          {{ props.helper }}\n        </slot>\n      </template>\n    </PlTooltip>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n  --pl-search-field-border-bottom-color: var(--txt-01);\n  --pl-search-field-bg: transparent;\n  --pl-search-field-caret-color: auto;\n  --pl-search-field-clear-display: none;\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: calc(var(--control-height) - 2px);\n  line-height: calc(var(--control-height) - 2px);\n  background-color: var(--pl-search-field-bg);\n  padding: 0 0 0 0;\n  border-bottom: 1px solid var(--pl-search-field-border-bottom-color);\n\n  input {\n    margin-left: 8px;\n    width: 100%;\n    height: 20px;\n    border: none;\n    outline: none;\n    background-color: transparent;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    caret-color: var(--pl-search-field-caret-color);\n  }\n\n  &:focus-within {\n    --pl-search-field-border-bottom-color: var(--txt-focus);\n    --pl-search-field-caret-color: var(--border-color-focus);\n    --pl-search-field-clear-display: block;\n  }\n\n  &:hover {\n    --pl-search-field-clear-display: block;\n  }\n\n  .clear {\n    --icon-color: var(--ic-02);\n    cursor: pointer;\n    margin-left: auto;\n    display: var(--pl-search-field-clear-display);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlSearchField.js","names":[],"sources":["../../../src/components/PlSearchField/PlSearchField.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"V extends undefined | string, C extends V\">\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { computed } from \"vue\";\nimport PlTooltip from \"../PlTooltip/PlTooltip.vue\";\n\nconst model = defineModel<V>({ required: true });\n\nconst props = defineProps<{\n  modelValue?: string;\n  clearable?: boolean | (() => C);\n  placeholder?: string;\n  disabled?: boolean;\n  helper?: string;\n}>();\nconst slots = defineSlots<{\n  helper: () => unknown;\n}>();\n\nconst nonEmpty = computed(() => model.value != null && model.value.length > 0);\nconst hasHelper = computed(() => props.helper != null || slots.helper != null);\n\nconst clear = () => {\n  if (props.clearable) {\n    model.value = (typeof props.clearable === \"function\" ? props.clearable() : \"\") as V;\n  }\n};\n</script>\n\n<template>\n  <div ref=\"root\" :class=\"$style.component\" data-testid=\"pl-search-field\">\n    <PlIcon24 name=\"search\" data-testid=\"pl-search-field-icon\" />\n    <input\n      ref=\"input\"\n      v-model=\"model\"\n      :disabled=\"props.disabled\"\n      :placeholder=\"props.placeholder || 'Find...'\"\n      type=\"text\"\n      spellcheck=\"false\"\n      data-testid=\"pl-search-field-input\"\n    />\n    <PlIcon16\n      v-if=\"props.clearable && nonEmpty\"\n      :class=\"$style.clear\"\n      name=\"delete-clear\"\n      data-testid=\"pl-search-field-clear\"\n      @click.stop=\"clear\"\n    />\n\n    <PlTooltip v-if=\"hasHelper\" class=\"info\" position=\"bottom\" data-testid=\"pl-search-field-helper\">\n      <template #tooltip>\n        <slot name=\"helper\">\n          {{ props.helper }}\n        </slot>\n      </template>\n    </PlTooltip>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n  --pl-search-field-border-bottom-color: var(--txt-01);\n  --pl-search-field-bg: transparent;\n  --pl-search-field-caret-color: auto;\n  --pl-search-field-clear-display: none;\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: calc(var(--control-height) - 2px);\n  line-height: calc(var(--control-height) - 2px);\n  background-color: var(--pl-search-field-bg);\n  padding: 0 0 0 0;\n  border-bottom: 1px solid var(--pl-search-field-border-bottom-color);\n\n  input {\n    margin-left: 8px;\n    width: 100%;\n    height: 20px;\n    border: none;\n    outline: none;\n    background-color: transparent;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    caret-color: var(--pl-search-field-caret-color);\n  }\n\n  &:focus-within {\n    --pl-search-field-border-bottom-color: var(--txt-focus);\n    --pl-search-field-caret-color: var(--border-color-focus);\n    --pl-search-field-clear-display: block;\n  }\n\n  &:hover {\n    --pl-search-field-clear-display: block;\n  }\n\n  .clear {\n    --icon-color: var(--ic-02);\n    cursor: pointer;\n    margin-left: auto;\n    display: var(--pl-search-field-clear-display);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/PlSearchField/PlSearchField.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlSearchField.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlSearchField/PlSearchField.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"V extends undefined | string, C extends V\">\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { computed } from \"vue\";\nimport PlTooltip from \"../PlTooltip/PlTooltip.vue\";\n\nconst model = defineModel<V>({ required: true });\n\nconst props = defineProps<{\n  modelValue?: string;\n  clearable?: boolean | (() => C);\n  placeholder?: string;\n  disabled?: boolean;\n  helper?: string;\n}>();\nconst slots = defineSlots<{\n  helper: () => unknown;\n}>();\n\nconst nonEmpty = computed(() => model.value != null && model.value.length > 0);\nconst hasHelper = computed(() => props.helper != null || slots.helper != null);\n\nconst clear = () => {\n  if (props.clearable) {\n    model.value = (typeof props.clearable === \"function\" ? props.clearable() : \"\") as V;\n  }\n};\n</script>\n\n<template>\n  <div ref=\"root\" :class=\"$style.component\">\n    <PlIcon24 name=\"search\" />\n    <input\n      ref=\"input\"\n      v-model=\"model\"\n      :disabled=\"props.disabled\"\n      :placeholder=\"props.placeholder || 'Find...'\"\n      type=\"text\"\n      spellcheck=\"false\"\n    />\n    <PlIcon16\n      v-if=\"props.clearable && nonEmpty\"\n      :class=\"$style.clear\"\n      name=\"delete-clear\"\n      @click.stop=\"clear\"\n    />\n\n    <PlTooltip v-if=\"hasHelper\" class=\"info\" position=\"bottom\">\n      <template #tooltip>\n        <slot name=\"helper\">\n          {{ props.helper }}\n        </slot>\n      </template>\n    </PlTooltip>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n  --pl-search-field-border-bottom-color: var(--txt-01);\n  --pl-search-field-bg: transparent;\n  --pl-search-field-caret-color: auto;\n  --pl-search-field-clear-display: none;\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: calc(var(--control-height) - 2px);\n  line-height: calc(var(--control-height) - 2px);\n  background-color: var(--pl-search-field-bg);\n  padding: 0 0 0 0;\n  border-bottom: 1px solid var(--pl-search-field-border-bottom-color);\n\n  input {\n    margin-left: 8px;\n    width: 100%;\n    height: 20px;\n    border: none;\n    outline: none;\n    background-color: transparent;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    caret-color: var(--pl-search-field-caret-color);\n  }\n\n  &:focus-within {\n    --pl-search-field-border-bottom-color: var(--txt-focus);\n    --pl-search-field-caret-color: var(--border-color-focus);\n    --pl-search-field-clear-display: block;\n  }\n\n  &:hover {\n    --pl-search-field-clear-display: block;\n  }\n\n  .clear {\n    --icon-color: var(--ic-02);\n    cursor: pointer;\n    margin-left: auto;\n    display: var(--pl-search-field-clear-display);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlSearchField.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlSearchField/PlSearchField.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"V extends undefined | string, C extends V\">\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { computed } from \"vue\";\nimport PlTooltip from \"../PlTooltip/PlTooltip.vue\";\n\nconst model = defineModel<V>({ required: true });\n\nconst props = defineProps<{\n  modelValue?: string;\n  clearable?: boolean | (() => C);\n  placeholder?: string;\n  disabled?: boolean;\n  helper?: string;\n}>();\nconst slots = defineSlots<{\n  helper: () => unknown;\n}>();\n\nconst nonEmpty = computed(() => model.value != null && model.value.length > 0);\nconst hasHelper = computed(() => props.helper != null || slots.helper != null);\n\nconst clear = () => {\n  if (props.clearable) {\n    model.value = (typeof props.clearable === \"function\" ? props.clearable() : \"\") as V;\n  }\n};\n</script>\n\n<template>\n  <div ref=\"root\" :class=\"$style.component\" data-testid=\"pl-search-field\">\n    <PlIcon24 name=\"search\" data-testid=\"pl-search-field-icon\" />\n    <input\n      ref=\"input\"\n      v-model=\"model\"\n      :disabled=\"props.disabled\"\n      :placeholder=\"props.placeholder || 'Find...'\"\n      type=\"text\"\n      spellcheck=\"false\"\n      data-testid=\"pl-search-field-input\"\n    />\n    <PlIcon16\n      v-if=\"props.clearable && nonEmpty\"\n      :class=\"$style.clear\"\n      name=\"delete-clear\"\n      data-testid=\"pl-search-field-clear\"\n      @click.stop=\"clear\"\n    />\n\n    <PlTooltip v-if=\"hasHelper\" class=\"info\" position=\"bottom\" data-testid=\"pl-search-field-helper\">\n      <template #tooltip>\n        <slot name=\"helper\">\n          {{ props.helper }}\n        </slot>\n      </template>\n    </PlTooltip>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n  --pl-search-field-border-bottom-color: var(--txt-01);\n  --pl-search-field-bg: transparent;\n  --pl-search-field-caret-color: auto;\n  --pl-search-field-clear-display: none;\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: calc(var(--control-height) - 2px);\n  line-height: calc(var(--control-height) - 2px);\n  background-color: var(--pl-search-field-bg);\n  padding: 0 0 0 0;\n  border-bottom: 1px solid var(--pl-search-field-border-bottom-color);\n\n  input {\n    margin-left: 8px;\n    width: 100%;\n    height: 20px;\n    border: none;\n    outline: none;\n    background-color: transparent;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    caret-color: var(--pl-search-field-caret-color);\n  }\n\n  &:focus-within {\n    --pl-search-field-border-bottom-color: var(--txt-focus);\n    --pl-search-field-caret-color: var(--border-color-focus);\n    --pl-search-field-clear-display: block;\n  }\n\n  &:hover {\n    --pl-search-field-clear-display: block;\n  }\n\n  .clear {\n    --icon-color: var(--ic-02);\n    cursor: pointer;\n    margin-left: auto;\n    display: var(--pl-search-field-clear-display);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/PlSearchField/PlSearchField.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlSearchField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlSearchField/PlSearchField.vue"],"names":[],"mappings":"AAgHA,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,SAAS,GAAG,MAAM,EAAE,CAAC,SAAS,CAAC,EAC/D,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WA4IO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;qBAxIzC,MAAM;oBACP,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC;sBACjB,MAAM;mBACT,OAAO;iBACT,MAAM;;oBAmBL,CAAC;;;KAiH8E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;gBAlID,MAAM,OAAO;;;EAsInB,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"PlSearchField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlSearchField/PlSearchField.vue"],"names":[],"mappings":"AAkHA,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,SAAS,GAAG,MAAM,EAAE,CAAC,SAAS,CAAC,EAC/D,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAoJO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;qBAhJzC,MAAM;oBACP,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC;sBACjB,MAAM;mBACT,OAAO;iBACT,MAAM;;oBAmBL,CAAC;;;KAyH8E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;gBA1ID,MAAM,OAAO;;;EA8InB,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}