@feugene/granularity 0.10.0 → 0.12.0

package/dist/components/GrModal/chunks/GrModal-C0GZrHN3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrModal-C0GZrHN3.js","names":["$slots"],"sources":["../../../../src/components/GrModal/grModalTopStack.ts","../../../../src/components/GrModal/GrModal.vue","../../../../src/components/GrModal/GrModal.vue"],"sourcesContent":["/**\n * grModalTopStack — общий стек открытых `GrModal` для вычисления «верхнего»\n * (последнего открытого) окна независимо от дерева рендера.\n *\n * Зачем нужен:\n * HeadlessUI ловит фокус (`FocusTrap` с `FocusLock`) у каждого открытого\n * `<Dialog>` и помечает остальную часть страницы как inert. Когда модалки\n * рендерятся в разных деревьях (например, диалоги `useDialogService`\n * монтируются отдельным `render()` в `document.body`), их HeadlessUI-стек не\n * общий: каждый `<Dialog>` считает себя верхним и продолжает удерживать фокус.\n * В итоге нижнее окно «ворует» фокус у верхнего диалога — нельзя, например,\n * сфокусировать input в открытом поверх `prompt`.\n *\n * Решение: единый стек регистраций. Верхней считается последняя\n * зарегистрированная модалка. Все нижние окна уведомляются (`setTopmost(false)`)\n * и помечают свой корень `inert`, освобождая фокус для верхнего окна. Когда\n * верхнее окно закрывается, следующая по стеку модалка снова становится\n * верхней (`setTopmost(true)`) и снимает `inert`.\n */\n\nexport interface GrModalTopEntry {\n  /** Уникальный id зарегистрированной модалки. */\n  id: number\n  /** Колбэк-уведомление: является ли модалка сейчас верхней. */\n  setTopmost: (isTopmost: boolean) => void\n}\n\nconst stack: GrModalTopEntry[] = []\nlet nextId = 1\n\n/** Пересчитывает «верхнее» окно и уведомляет все зарегистрированные модалки. */\nfunction sync(): void {\n  const lastIndex = stack.length - 1\n  stack.forEach((entry, index) => entry.setTopmost(index === lastIndex))\n}\n\n/** Регистрирует открытую модалку как верхнюю и возвращает её id. */\nexport function pushGrModalTop(entry: Omit<GrModalTopEntry, 'id'>): number {\n  const id = nextId++\n  stack.push({ ...entry, id })\n  sync()\n  return id\n}\n\n/** Снимает модалку со стека (при закрытии или размонтировании). */\nexport function removeGrModalTop(id: number): void {\n  const index = stack.findIndex(item => item.id === id)\n  if (index >= 0) stack.splice(index, 1)\n  sync()\n}\n\n/** Тестовая/служебная очистка стека. */\nexport function resetGrModalTopStack(): void {\n  stack.splice(0, stack.length)\n}\n","<script setup lang=\"ts\">\n/**\n * GrModal — GR-примитив модального окна на базе `@headlessui/vue`.\n *\n * Публичный API:\n * - `modelValue` (v-model) — открыто/закрыто;\n * - `size` — размер панели (`sm | md | lg | xl | full`);\n * - `closeOnBackdrop` (default: true) — закрывать при клике по оверлею;\n * - `closeOnEsc` (default: true) — закрывать по Esc;\n * - слоты `#title` / `#description` — если переданы, оборачиваются в\n *   `DialogTitle` / `DialogDescription` (связь через `aria-labelledby` /\n *   `aria-describedby` ставится HeadlessUI автоматически).\n *\n * Esc обрабатывается через общий стек открытых модалок (`grModalEscStack`):\n * единый capture-обработчик на `window` закрывает только верхнюю (последнюю\n * открытую) модалку и опережает window-обработчик Escape HeadlessUI. Это\n * чинит кейс, когда поверх `GrModal` открыт диалог `useDialogService` (другое\n * дерево рендера): Esc закрывает именно верхний диалог, а не нижнее окно.\n * Клик по оверлею (backdrop) по-прежнему идёт через `@close` HeadlessUI;\n * источник закрытия различается через ref `closeReason`.\n */\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { Dialog, DialogDescription, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'\n\nimport { pushGrModalEsc, removeGrModalEsc } from './grModalEscStack'\nimport { pushGrModalTop, removeGrModalTop } from './grModalTopStack'\nimport { useScrollLock } from '../../composables/internal/useScrollLock'\n\nimport {\n  type GrModalSize,\n  getGrModalPanelClass,\n  layout,\n  overlay as overlayClass,\n  overlayTransition,\n  panelTransition,\n  root as rootClass,\n  shell,\n} from './grModalStyles'\n\nexport interface GrModalProps {\n  modelValue: boolean\n  closeOnBackdrop?: boolean\n  closeOnEsc?: boolean\n  size?: GrModalSize\n}\n\nconst props = withDefaults(defineProps<GrModalProps>(), {\n  closeOnBackdrop: true,\n  closeOnEsc: true,\n  size: 'md',\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst panelClass = computed(() => getGrModalPanelClass(props.size))\n\n// Ссылка на панель используется как `initialFocus` для HeadlessUI `<Dialog>`:\n// панель имеет `tabindex=\"-1\"`, поэтому всегда фокусируема программно. Это\n// убирает предупреждение «There are no focusable elements inside the\n// <FocusTrap />», которое HeadlessUI выводит, когда не находит фокусируемого\n// элемента (в т.ч. когда контент окна временно помечен `inert`).\nconst panelRef = ref<HTMLElement | null>(null)\n\n// Является ли это окно верхним (последним открытым) в общем стеке модалок.\n// Когда поверх открыт другой `GrModal`/диалог сервиса, окно перестаёт быть\n// верхним и помечается `inert`, чтобы не «воровать» фокус у верхнего окна.\nconst isTopmost = ref(true)\n\n// `inert` ставится только на нижние (не верхние) открытые окна. Inert-поддерево\n// не интерактивно и не фокусируемо, поэтому FocusLock нижнего `<Dialog>`\n// перестаёт возвращать фокус себе — верхний диалог удерживает фокус сам.\nconst inertAttr = computed(() => (props.modelValue && !isTopmost.value ? '' : undefined))\n\n// SSR-guard: на сервере `document.body` недоступен — отключаем teleport,\n// а в клиенте включаем после маунта.\nconst isClient = typeof window !== 'undefined'\n\n// Источник закрытия от HeadlessUI `<Dialog>` — либо Esc, либо клик по оверлею.\n// Различаем их, чтобы `closeOnBackdrop` и `closeOnEsc` работали независимо.\nconst closeReason = ref<'backdrop' | 'esc' | null>(null)\n\nfunction close(): void {\n  emit('update:modelValue', false)\n}\n\nfunction onDialogClose(): void {\n  const reason = closeReason.value\n  closeReason.value = null\n\n  if (reason === 'esc') {\n    if (props.closeOnEsc) close()\n    return\n  }\n\n  // По умолчанию (клик по оверлею или программный вызов `@close`)\n  // уважаем `closeOnBackdrop`.\n  if (props.closeOnBackdrop) close()\n}\n\nfunction onRootKeydown(event: KeyboardEvent): void {\n  if (event.key === 'Escape') closeReason.value = 'esc'\n}\n\n// ————— Esc-стек: гарантирует, что Esc закрывает именно верхнюю (последнюю\n// открытую) модалку, даже если окна живут в разных деревьях рендера\n// (например, диалоги `useDialogService` поверх `GrModal`).\nlet escEntryId: number | null = null\nlet topEntryId: number | null = null\n\nfunction registerEsc(): void {\n  if (escEntryId !== null) return\n  escEntryId = pushGrModalEsc({\n    shouldClose: () => props.closeOnEsc,\n    close,\n  })\n}\n\nfunction unregisterEsc(): void {\n  if (escEntryId === null) return\n  removeGrModalEsc(escEntryId)\n  escEntryId = null\n}\n\nfunction registerTop(): void {\n  if (topEntryId !== null) return\n  topEntryId = pushGrModalTop({\n    setTopmost: (value) => { isTopmost.value = value },\n  })\n}\n\nfunction unregisterTop(): void {\n  if (topEntryId === null) return\n  removeGrModalTop(topEntryId)\n  topEntryId = null\n  isTopmost.value = true\n}\n\nfunction onOverlayPointerDown(): void {\n  closeReason.value = 'backdrop'\n}\n\n// ————— Scroll lock на `<body>` на время открытия.\n// HeadlessUI Vue этого не делает автоматически, а фон скроллится — для\n// GR-примитива это мешающий UX. Общий reference-counted lock корректно\n// работает при нескольких открытых оверлеях (LIFO-независимо) и компенсирует\n// ширину скроллбара, чтобы контент не дёргался.\nconst { lock: lockBodyScroll, unlock: unlockBodyScroll } = useScrollLock()\n\nwatch(\n  () => props.modelValue,\n  (value) => {\n    if (value) {\n      lockBodyScroll()\n      registerEsc()\n      registerTop()\n    }\n    else {\n      unlockBodyScroll()\n      unregisterEsc()\n      unregisterTop()\n    }\n  },\n  { immediate: true },\n)\n\nonBeforeUnmount(() => {\n  unlockBodyScroll()\n  unregisterEsc()\n  unregisterTop()\n})\n\n</script>\n\n<template>\n  <teleport to=\"body\" :disabled=\"!isClient\">\n    <TransitionRoot :show=\"modelValue\" as=\"template\">\n      <Dialog\n        as=\"div\"\n        :class=\"rootClass\"\n        :initial-focus=\"panelRef\"\n        :inert=\"inertAttr\"\n        @close=\"onDialogClose\"\n        @keydown.capture=\"onRootKeydown\"\n      >\n        <div :class=\"shell\">\n          <div :class=\"layout\">\n            <TransitionChild\n              as=\"template\"\n              :enter=\"overlayTransition.enter\"\n              :enter-from=\"overlayTransition.enterFrom\"\n              :enter-to=\"overlayTransition.enterTo\"\n              :leave=\"overlayTransition.leave\"\n              :leave-from=\"overlayTransition.leaveFrom\"\n              :leave-to=\"overlayTransition.leaveTo\"\n            >\n              <div\n                data-gr-modal-overlay\n                :class=\"overlayClass\"\n                aria-hidden=\"true\"\n                @pointerdown=\"onOverlayPointerDown\"\n              />\n            </TransitionChild>\n\n            <TransitionChild\n              as=\"template\"\n              :enter=\"panelTransition.enter\"\n              :enter-from=\"panelTransition.enterFrom\"\n              :enter-to=\"panelTransition.enterTo\"\n              :leave=\"panelTransition.leave\"\n              :leave-from=\"panelTransition.leaveFrom\"\n              :leave-to=\"panelTransition.leaveTo\"\n            >\n              <DialogPanel\n                ref=\"panelRef\"\n                data-gr-modal-panel\n                tabindex=\"-1\"\n                :class=\"panelClass\"\n              >\n                <DialogTitle v-if=\"$slots.title\" as=\"div\" data-gr-modal-title>\n                  <slot name=\"title\" />\n                </DialogTitle>\n                <DialogDescription v-if=\"$slots.description\" as=\"div\" data-gr-modal-description>\n                  <slot name=\"description\" />\n                </DialogDescription>\n                <slot />\n              </DialogPanel>\n            </TransitionChild>\n          </div>\n        </div>\n      </Dialog>\n    </TransitionRoot>\n  </teleport>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrModal — GR-примитив модального окна на базе `@headlessui/vue`.\n *\n * Публичный API:\n * - `modelValue` (v-model) — открыто/закрыто;\n * - `size` — размер панели (`sm | md | lg | xl | full`);\n * - `closeOnBackdrop` (default: true) — закрывать при клике по оверлею;\n * - `closeOnEsc` (default: true) — закрывать по Esc;\n * - слоты `#title` / `#description` — если переданы, оборачиваются в\n *   `DialogTitle` / `DialogDescription` (связь через `aria-labelledby` /\n *   `aria-describedby` ставится HeadlessUI автоматически).\n *\n * Esc обрабатывается через общий стек открытых модалок (`grModalEscStack`):\n * единый capture-обработчик на `window` закрывает только верхнюю (последнюю\n * открытую) модалку и опережает window-обработчик Escape HeadlessUI. Это\n * чинит кейс, когда поверх `GrModal` открыт диалог `useDialogService` (другое\n * дерево рендера): Esc закрывает именно верхний диалог, а не нижнее окно.\n * Клик по оверлею (backdrop) по-прежнему идёт через `@close` HeadlessUI;\n * источник закрытия различается через ref `closeReason`.\n */\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { Dialog, DialogDescription, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'\n\nimport { pushGrModalEsc, removeGrModalEsc } from './grModalEscStack'\nimport { pushGrModalTop, removeGrModalTop } from './grModalTopStack'\nimport { useScrollLock } from '../../composables/internal/useScrollLock'\n\nimport {\n  type GrModalSize,\n  getGrModalPanelClass,\n  layout,\n  overlay as overlayClass,\n  overlayTransition,\n  panelTransition,\n  root as rootClass,\n  shell,\n} from './grModalStyles'\n\nexport interface GrModalProps {\n  modelValue: boolean\n  closeOnBackdrop?: boolean\n  closeOnEsc?: boolean\n  size?: GrModalSize\n}\n\nconst props = withDefaults(defineProps<GrModalProps>(), {\n  closeOnBackdrop: true,\n  closeOnEsc: true,\n  size: 'md',\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst panelClass = computed(() => getGrModalPanelClass(props.size))\n\n// Ссылка на панель используется как `initialFocus` для HeadlessUI `<Dialog>`:\n// панель имеет `tabindex=\"-1\"`, поэтому всегда фокусируема программно. Это\n// убирает предупреждение «There are no focusable elements inside the\n// <FocusTrap />», которое HeadlessUI выводит, когда не находит фокусируемого\n// элемента (в т.ч. когда контент окна временно помечен `inert`).\nconst panelRef = ref<HTMLElement | null>(null)\n\n// Является ли это окно верхним (последним открытым) в общем стеке модалок.\n// Когда поверх открыт другой `GrModal`/диалог сервиса, окно перестаёт быть\n// верхним и помечается `inert`, чтобы не «воровать» фокус у верхнего окна.\nconst isTopmost = ref(true)\n\n// `inert` ставится только на нижние (не верхние) открытые окна. Inert-поддерево\n// не интерактивно и не фокусируемо, поэтому FocusLock нижнего `<Dialog>`\n// перестаёт возвращать фокус себе — верхний диалог удерживает фокус сам.\nconst inertAttr = computed(() => (props.modelValue && !isTopmost.value ? '' : undefined))\n\n// SSR-guard: на сервере `document.body` недоступен — отключаем teleport,\n// а в клиенте включаем после маунта.\nconst isClient = typeof window !== 'undefined'\n\n// Источник закрытия от HeadlessUI `<Dialog>` — либо Esc, либо клик по оверлею.\n// Различаем их, чтобы `closeOnBackdrop` и `closeOnEsc` работали независимо.\nconst closeReason = ref<'backdrop' | 'esc' | null>(null)\n\nfunction close(): void {\n  emit('update:modelValue', false)\n}\n\nfunction onDialogClose(): void {\n  const reason = closeReason.value\n  closeReason.value = null\n\n  if (reason === 'esc') {\n    if (props.closeOnEsc) close()\n    return\n  }\n\n  // По умолчанию (клик по оверлею или программный вызов `@close`)\n  // уважаем `closeOnBackdrop`.\n  if (props.closeOnBackdrop) close()\n}\n\nfunction onRootKeydown(event: KeyboardEvent): void {\n  if (event.key === 'Escape') closeReason.value = 'esc'\n}\n\n// ————— Esc-стек: гарантирует, что Esc закрывает именно верхнюю (последнюю\n// открытую) модалку, даже если окна живут в разных деревьях рендера\n// (например, диалоги `useDialogService` поверх `GrModal`).\nlet escEntryId: number | null = null\nlet topEntryId: number | null = null\n\nfunction registerEsc(): void {\n  if (escEntryId !== null) return\n  escEntryId = pushGrModalEsc({\n    shouldClose: () => props.closeOnEsc,\n    close,\n  })\n}\n\nfunction unregisterEsc(): void {\n  if (escEntryId === null) return\n  removeGrModalEsc(escEntryId)\n  escEntryId = null\n}\n\nfunction registerTop(): void {\n  if (topEntryId !== null) return\n  topEntryId = pushGrModalTop({\n    setTopmost: (value) => { isTopmost.value = value },\n  })\n}\n\nfunction unregisterTop(): void {\n  if (topEntryId === null) return\n  removeGrModalTop(topEntryId)\n  topEntryId = null\n  isTopmost.value = true\n}\n\nfunction onOverlayPointerDown(): void {\n  closeReason.value = 'backdrop'\n}\n\n// ————— Scroll lock на `<body>` на время открытия.\n// HeadlessUI Vue этого не делает автоматически, а фон скроллится — для\n// GR-примитива это мешающий UX. Общий reference-counted lock корректно\n// работает при нескольких открытых оверлеях (LIFO-независимо) и компенсирует\n// ширину скроллбара, чтобы контент не дёргался.\nconst { lock: lockBodyScroll, unlock: unlockBodyScroll } = useScrollLock()\n\nwatch(\n  () => props.modelValue,\n  (value) => {\n    if (value) {\n      lockBodyScroll()\n      registerEsc()\n      registerTop()\n    }\n    else {\n      unlockBodyScroll()\n      unregisterEsc()\n      unregisterTop()\n    }\n  },\n  { immediate: true },\n)\n\nonBeforeUnmount(() => {\n  unlockBodyScroll()\n  unregisterEsc()\n  unregisterTop()\n})\n\n</script>\n\n<template>\n  <teleport to=\"body\" :disabled=\"!isClient\">\n    <TransitionRoot :show=\"modelValue\" as=\"template\">\n      <Dialog\n        as=\"div\"\n        :class=\"rootClass\"\n        :initial-focus=\"panelRef\"\n        :inert=\"inertAttr\"\n        @close=\"onDialogClose\"\n        @keydown.capture=\"onRootKeydown\"\n      >\n        <div :class=\"shell\">\n          <div :class=\"layout\">\n            <TransitionChild\n              as=\"template\"\n              :enter=\"overlayTransition.enter\"\n              :enter-from=\"overlayTransition.enterFrom\"\n              :enter-to=\"overlayTransition.enterTo\"\n              :leave=\"overlayTransition.leave\"\n              :leave-from=\"overlayTransition.leaveFrom\"\n              :leave-to=\"overlayTransition.leaveTo\"\n            >\n              <div\n                data-gr-modal-overlay\n                :class=\"overlayClass\"\n                aria-hidden=\"true\"\n                @pointerdown=\"onOverlayPointerDown\"\n              />\n            </TransitionChild>\n\n            <TransitionChild\n              as=\"template\"\n              :enter=\"panelTransition.enter\"\n              :enter-from=\"panelTransition.enterFrom\"\n              :enter-to=\"panelTransition.enterTo\"\n              :leave=\"panelTransition.leave\"\n              :leave-from=\"panelTransition.leaveFrom\"\n              :leave-to=\"panelTransition.leaveTo\"\n            >\n              <DialogPanel\n                ref=\"panelRef\"\n                data-gr-modal-panel\n                tabindex=\"-1\"\n                :class=\"panelClass\"\n              >\n                <DialogTitle v-if=\"$slots.title\" as=\"div\" data-gr-modal-title>\n                  <slot name=\"title\" />\n                </DialogTitle>\n                <DialogDescription v-if=\"$slots.description\" as=\"div\" data-gr-modal-description>\n                  <slot name=\"description\" />\n                </DialogDescription>\n                <slot />\n              </DialogPanel>\n            </TransitionChild>\n          </div>\n        </div>\n      </Dialog>\n    </TransitionRoot>\n  </teleport>\n</template>\n"],"mappings":"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"}

package/dist/components/GrModal/index.js

@@ -1,4 +1,4 @@
-import { t as GrModal_default } from "./chunks/GrModal-CSOL3fHQ.js";
-import { t as getGrModalPanelClass } from "../../chunks/grModalStyles-FgaKqx50.js";
-import { n as grModalClassTokens, r as grModalSafelist, t as grModalConfig } from "../../chunks/config-DRpkoSvq.js";
+import { t as GrModal_default } from "./chunks/GrModal-C0GZrHN3.js";
+import { t as getGrModalPanelClass } from "../../chunks/grModalStyles-DWd3i05Q.js";
+import { n as grModalClassTokens, r as grModalSafelist, t as grModalConfig } from "../../chunks/config-CziwTDDL.js";
 export { GrModal_default as GrModal, GrModal_default as default, getGrModalPanelClass, grModalClassTokens, grModalConfig, grModalSafelist };

package/dist/components/GrNavbar/chunks/{GrNavbar-CHxwtFIR.js → GrNavbar-DW3MiIIf.js}

@@ -1,6 +1,6 @@
-import { t as GrButton_default } from "../../GrButton/chunks/GrButton-CPDKonoB.js";
-import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-BV7RBU_0.js";
-import { t as useGranularityTranslations } from "../../../chunks/granularityI18n-D_7jowK2.js";
+import { t as useGranularityTranslations } from "../../../chunks/granularityI18n-DoV7Ca2m.js";
+import { t as GrButton_default } from "../../GrButton/chunks/GrButton-BlffdeJr.js";
+import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-D9AWQLk2.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, markRaw, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
 //#region ~icons/lucide/menu
 var _hoisted_1$1 = {
@@ -25,12 +25,12 @@ var menu_default = markRaw({
 //#endregion
 //#region src/components/GrNavbar/GrNavbar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
-	"data-ds-navbar": "",
+	"data-gr-navbar": "",
 	class: "h-[56px] border-b border-[var(--brd)] bg-[var(--bg)] flex items-center justify-between px-4 sm:px-6"
 };
 var _hoisted_2 = { class: "flex items-center gap-3" };
 var _hoisted_3 = {
-	"data-ds-navbar-title": "",
+	"data-gr-navbar-title": "",
 	class: "text-[14px] font-700"
 };
 var _hoisted_4 = { class: "flex items-center gap-3" };
@@ -54,7 +54,7 @@ var GrNavbar_default = /* @__PURE__ */ defineComponent({
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("header", _hoisted_1, [createElementVNode("div", _hoisted_2, [__props.showMenuButton ? (openBlock(), createBlock(GrButton_default, {
 				key: 0,
-				"data-ds-navbar-menu": "",
+				"data-gr-navbar-menu": "",
 				variant: "ghost",
 				size: "sm",
 				square: "",

package/dist/components/GrNavbar/chunks/{GrNavbar-CHxwtFIR.js.map → GrNavbar-DW3MiIIf.js.map}

@@ -1 +1 @@
-{"version":3,"file":"GrNavbar-CHxwtFIR.js","names":[],"sources":["../../../../src/components/GrNavbar/GrNavbar.vue","../../../../src/components/GrNavbar/GrNavbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport IconMenu from '~icons/lucide/menu'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\n\n/**\n * GrNavbar — верхняя панель приложения (header) с заголовком,\n * опциональной кнопкой меню (обычно — для мобильных) и правым слотом\n * для действий/аватара.\n *\n * - Корень — `<header>` (landmark), без собственного `role`.\n * - `aria-label` кнопки меню локализуется через `useGranularityTranslations`.\n */\nexport interface GrNavbarProps {\n  title: string\n  showMenuButton?: boolean\n  /** Extra classes applied to the menu button wrapper (e.g. `sm:hidden`). */\n  menuButtonClass?: string\n}\n\nwithDefaults(defineProps<GrNavbarProps>(), {\n  showMenuButton: false,\n  menuButtonClass: '',\n})\n\nconst emit = defineEmits<{\n  (e: 'menu'): void\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst menuAriaLabel = computed(() => t('gr.navbar.openMenu', 'Open menu'))\n</script>\n\n<template>\n  <header\n    data-ds-navbar\n    class=\"h-[56px] border-b border-[var(--brd)] bg-[var(--bg)] flex items-center justify-between px-4 sm:px-6\"\n  >\n    <div class=\"flex items-center gap-3\">\n      <GrButton\n        v-if=\"showMenuButton\"\n        data-ds-navbar-menu\n        variant=\"ghost\"\n        size=\"sm\"\n        square\n        :aria-label=\"menuAriaLabel\"\n        :class=\"menuButtonClass\"\n        @click=\"emit('menu')\"\n      >\n        <GrIcon :size=\"16\">\n          <IconMenu aria-hidden=\"true\" />\n        </GrIcon>\n      </GrButton>\n      <div data-ds-navbar-title class=\"text-[14px] font-700\">\n        <slot name=\"title\">\n          {{ title }}\n        </slot>\n      </div>\n    </div>\n\n    <div class=\"flex items-center gap-3\">\n      <slot />\n    </div>\n  </header>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport IconMenu from '~icons/lucide/menu'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\n\n/**\n * GrNavbar — верхняя панель приложения (header) с заголовком,\n * опциональной кнопкой меню (обычно — для мобильных) и правым слотом\n * для действий/аватара.\n *\n * - Корень — `<header>` (landmark), без собственного `role`.\n * - `aria-label` кнопки меню локализуется через `useGranularityTranslations`.\n */\nexport interface GrNavbarProps {\n  title: string\n  showMenuButton?: boolean\n  /** Extra classes applied to the menu button wrapper (e.g. `sm:hidden`). */\n  menuButtonClass?: string\n}\n\nwithDefaults(defineProps<GrNavbarProps>(), {\n  showMenuButton: false,\n  menuButtonClass: '',\n})\n\nconst emit = defineEmits<{\n  (e: 'menu'): void\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst menuAriaLabel = computed(() => t('gr.navbar.openMenu', 'Open menu'))\n</script>\n\n<template>\n  <header\n    data-ds-navbar\n    class=\"h-[56px] border-b border-[var(--brd)] bg-[var(--bg)] flex items-center justify-between px-4 sm:px-6\"\n  >\n    <div class=\"flex items-center gap-3\">\n      <GrButton\n        v-if=\"showMenuButton\"\n        data-ds-navbar-menu\n        variant=\"ghost\"\n        size=\"sm\"\n        square\n        :aria-label=\"menuAriaLabel\"\n        :class=\"menuButtonClass\"\n        @click=\"emit('menu')\"\n      >\n        <GrIcon :size=\"16\">\n          <IconMenu aria-hidden=\"true\" />\n        </GrIcon>\n      </GrButton>\n      <div data-ds-navbar-title class=\"text-[14px] font-700\">\n        <slot name=\"title\">\n          {{ title }}\n        </slot>\n      </div>\n    </div>\n\n    <div class=\"flex items-center gap-3\">\n      <slot />\n    </div>\n  </header>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,OAAO;EAIb,MAAM,EAAE,MAAM,4BAA2B;EAEzC,MAAM,gBAAgB,eAAe,EAAE,sBAAsB,YAAY,CAAA;;uBAIvE,mBA6BS,UA7BT,YA6BS,CAzBP,mBAoBM,OApBN,YAoBM,CAlBI,QAAA,kBAAA,WAAA,EADR,YAaW,kBAAA;;IAXT,uBAAA;IACA,SAAQ;IACR,MAAK;IACL,QAAA;IACC,cAAY,cAAA;IACZ,OAAK,eAAE,QAAA,gBAAe;IACtB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;;2BAIH,CAFT,YAES,gBAAA,EAFA,MAAM,IAAE,EAAA;4BACgB,CAA/B,YAA+B,MAAA,aAAA,EAAA,EAArB,eAAY,QAAM,CAAA,CAAA,CAAA;;;;mEAGhC,mBAIM,OAJN,YAIM,CAHJ,WAEO,KAAA,QAAA,SAAA,EAAA,QAAA,CAAA,gBAAA,gBADF,QAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAKd,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"GrNavbar-DW3MiIIf.js","names":[],"sources":["../../../../src/components/GrNavbar/GrNavbar.vue","../../../../src/components/GrNavbar/GrNavbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport IconMenu from '~icons/lucide/menu'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\n\n/**\n * GrNavbar — верхняя панель приложения (header) с заголовком,\n * опциональной кнопкой меню (обычно — для мобильных) и правым слотом\n * для действий/аватара.\n *\n * - Корень — `<header>` (landmark), без собственного `role`.\n * - `aria-label` кнопки меню локализуется через `useGranularityTranslations`.\n */\nexport interface GrNavbarProps {\n  title: string\n  showMenuButton?: boolean\n  /** Extra classes applied to the menu button wrapper (e.g. `sm:hidden`). */\n  menuButtonClass?: string\n}\n\nwithDefaults(defineProps<GrNavbarProps>(), {\n  showMenuButton: false,\n  menuButtonClass: '',\n})\n\nconst emit = defineEmits<{\n  (e: 'menu'): void\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst menuAriaLabel = computed(() => t('gr.navbar.openMenu', 'Open menu'))\n</script>\n\n<template>\n  <header\n    data-gr-navbar\n    class=\"h-[56px] border-b border-[var(--brd)] bg-[var(--bg)] flex items-center justify-between px-4 sm:px-6\"\n  >\n    <div class=\"flex items-center gap-3\">\n      <GrButton\n        v-if=\"showMenuButton\"\n        data-gr-navbar-menu\n        variant=\"ghost\"\n        size=\"sm\"\n        square\n        :aria-label=\"menuAriaLabel\"\n        :class=\"menuButtonClass\"\n        @click=\"emit('menu')\"\n      >\n        <GrIcon :size=\"16\">\n          <IconMenu aria-hidden=\"true\" />\n        </GrIcon>\n      </GrButton>\n      <div data-gr-navbar-title class=\"text-[14px] font-700\">\n        <slot name=\"title\">\n          {{ title }}\n        </slot>\n      </div>\n    </div>\n\n    <div class=\"flex items-center gap-3\">\n      <slot />\n    </div>\n  </header>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport IconMenu from '~icons/lucide/menu'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\n\n/**\n * GrNavbar — верхняя панель приложения (header) с заголовком,\n * опциональной кнопкой меню (обычно — для мобильных) и правым слотом\n * для действий/аватара.\n *\n * - Корень — `<header>` (landmark), без собственного `role`.\n * - `aria-label` кнопки меню локализуется через `useGranularityTranslations`.\n */\nexport interface GrNavbarProps {\n  title: string\n  showMenuButton?: boolean\n  /** Extra classes applied to the menu button wrapper (e.g. `sm:hidden`). */\n  menuButtonClass?: string\n}\n\nwithDefaults(defineProps<GrNavbarProps>(), {\n  showMenuButton: false,\n  menuButtonClass: '',\n})\n\nconst emit = defineEmits<{\n  (e: 'menu'): void\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst menuAriaLabel = computed(() => t('gr.navbar.openMenu', 'Open menu'))\n</script>\n\n<template>\n  <header\n    data-gr-navbar\n    class=\"h-[56px] border-b border-[var(--brd)] bg-[var(--bg)] flex items-center justify-between px-4 sm:px-6\"\n  >\n    <div class=\"flex items-center gap-3\">\n      <GrButton\n        v-if=\"showMenuButton\"\n        data-gr-navbar-menu\n        variant=\"ghost\"\n        size=\"sm\"\n        square\n        :aria-label=\"menuAriaLabel\"\n        :class=\"menuButtonClass\"\n        @click=\"emit('menu')\"\n      >\n        <GrIcon :size=\"16\">\n          <IconMenu aria-hidden=\"true\" />\n        </GrIcon>\n      </GrButton>\n      <div data-gr-navbar-title class=\"text-[14px] font-700\">\n        <slot name=\"title\">\n          {{ title }}\n        </slot>\n      </div>\n    </div>\n\n    <div class=\"flex items-center gap-3\">\n      <slot />\n    </div>\n  </header>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,OAAO;EAIb,MAAM,EAAE,MAAM,2BAA2B;EAEzC,MAAM,gBAAgB,eAAe,EAAE,sBAAsB,WAAW,CAAC;;uBAIvE,mBA6BS,UA7BT,YA6BS,CAzBP,mBAoBM,OApBN,YAoBM,CAlBI,QAAA,kBAAA,UAAA,GADR,YAaW,kBAAA;;IAXT,uBAAA;IACA,SAAQ;IACR,MAAK;IACL,QAAA;IACC,cAAY,cAAA;IACZ,OAAK,eAAE,QAAA,eAAe;IACtB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,MAAA;;2BAIH,CAFT,YAES,gBAAA,EAFA,MAAM,GAAE,GAAA;4BACgB,CAA/B,YAA+B,MAAA,YAAA,GAAA,EAArB,eAAY,OAAM,CAAA,CAAA,CAAA;;;;mEAGhC,mBAIM,OAJN,YAIM,CAHJ,WAEO,KAAA,QAAA,SAAA,CAAA,SAAA,CAAA,gBAAA,gBADF,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAKd,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/GrNavbar/index.js

@@ -1,3 +1,3 @@
-import { t as GrNavbar_default } from "./chunks/GrNavbar-CHxwtFIR.js";
-import { t as grNavbarConfig } from "../../chunks/config-C_q_4FrU.js";
+import { t as GrNavbar_default } from "./chunks/GrNavbar-DW3MiIIf.js";
+import { t as grNavbarConfig } from "../../chunks/config-ZiXWIRBX.js";
 export { GrNavbar_default as GrNavbar, GrNavbar_default as default, grNavbarConfig };

package/dist/components/GrNumberInput/chunks/{GrNumberInput-ClPBwkxx.js → GrNumberInput-DxCEvL7V.js}

@@ -1,5 +1,7 @@
-import { i as grNumberInputShellClass, r as grNumberInputInputClass } from "../../../chunks/config-DvDNney3.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUpdated, openBlock, ref, renderSlot, useSlots, withModifiers } from "vue";
+import { t as useGranularityTranslations } from "../../../chunks/granularityI18n-DoV7Ca2m.js";
+import { n as useAddonMeasurement, t as addLen } from "../../../chunks/useAddonMeasurement-DM0akF4C.js";
+import { i as grNumberInputShellClass, r as grNumberInputInputClass } from "../../../chunks/config-C7NpDrfO.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, useSlots, withModifiers } from "vue";
 //#region src/components/GrNumberInput/GrNumberInput.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"id",
@@ -9,6 +11,9 @@ var _hoisted_1 = [
 	"placeholder",
 	"disabled",
 	"value",
+	"aria-valuenow",
+	"aria-valuemin",
+	"aria-valuemax",
 	"aria-invalid"
 ];
 var _hoisted_2 = { class: "flex flex-col justify-center gap-1" };
@@ -44,6 +49,11 @@ var GrNumberInput_default = /* @__PURE__ */ defineComponent({
 		min: { default: void 0 },
 		max: { default: void 0 },
 		precision: { default: void 0 },
+		locale: { default: void 0 },
+		useGrouping: {
+			type: Boolean,
+			default: false
+		},
 		controls: {
 			type: Boolean,
 			default: false
@@ -53,8 +63,16 @@ var GrNumberInput_default = /* @__PURE__ */ defineComponent({
 		prefixMaxWidth: { default: void 0 },
 		suffixMinWidth: { default: void 0 },
 		suffixMaxWidth: { default: void 0 },
-		increaseLabel: { default: "Increase" },
-		decreaseLabel: { default: "Decrease" }
+		prefixFixed: {
+			type: Boolean,
+			default: false
+		},
+		suffixFixed: {
+			type: Boolean,
+			default: false
+		},
+		increaseLabel: { default: void 0 },
+		decreaseLabel: { default: void 0 }
 	},
 	emits: ["update:modelValue", "change"],
 	setup(__props, { expose: __expose, emit: __emit }) {
@@ -81,6 +99,9 @@ var GrNumberInput_default = /* @__PURE__ */ defineComponent({
 		}
 		__expose({ focus });
 		const slots = useSlots();
+		const { t } = useGranularityTranslations();
+		const resolvedIncreaseLabel = computed(() => props.increaseLabel ?? t("gr.numberInput.increase", "Increase"));
+		const resolvedDecreaseLabel = computed(() => props.decreaseLabel ?? t("gr.numberInput.decrease", "Decrease"));
 		const hasPrefix = computed(() => Boolean(slots.prefix));
 		const hasSuffix = computed(() => Boolean(slots.suffix));
 		const hasHorizontalControls = computed(() => props.controls && props.controlsDirection === "horizontal");
@@ -91,51 +112,17 @@ var GrNumberInput_default = /* @__PURE__ */ defineComponent({
 		const defaultAddonMinWidth = computed(() => addonLen.value);
 		const prefixMinWidth = computed(() => props.prefixMinWidth ?? defaultAddonMinWidth.value);
 		const suffixMinWidth = computed(() => props.suffixMinWidth ?? defaultAddonMinWidth.value);
-		const prefixEl = ref(null);
-		const suffixEl = ref(null);
-		const measuredPrefixWidth = ref(void 0);
-		const measuredSuffixWidth = ref(void 0);
-		let ro = null;
-		let scheduled = false;
-		function readWidthPx(el) {
-			if (!el) return void 0;
-			const width = Math.ceil(el.getBoundingClientRect().width || 0);
-			if (width <= 0) return void 0;
-			return `${width}px`;
-		}
-		function measure() {
-			measuredPrefixWidth.value = hasPrefix.value ? readWidthPx(prefixEl.value) : void 0;
-			measuredSuffixWidth.value = hasSuffix.value ? readWidthPx(suffixEl.value) : void 0;
-		}
-		function refreshObserver() {
-			if (typeof ResizeObserver === "undefined") return;
-			if (!ro) ro = new ResizeObserver(() => measure());
-			ro.disconnect();
-			if (prefixEl.value) ro.observe(prefixEl.value);
-			if (suffixEl.value) ro.observe(suffixEl.value);
-		}
-		function scheduleMeasure() {
-			if (scheduled) return;
-			scheduled = true;
-			nextTick(() => {
-				scheduled = false;
-				measure();
-				refreshObserver();
-			});
-		}
-		onMounted(() => scheduleMeasure());
-		onUpdated(() => scheduleMeasure());
-		onBeforeUnmount(() => ro?.disconnect());
-		function addLen(a, b) {
-			if (a === "0px") return b;
-			if (b === "0px") return a;
-			const apx = a.endsWith("px") ? Number(a.slice(0, -2)) : null;
-			const bpx = b.endsWith("px") ? Number(b.slice(0, -2)) : null;
-			if (apx !== null && Number.isFinite(apx) && bpx !== null && Number.isFinite(bpx)) return `${apx + bpx}px`;
-			return `calc(${a} + ${b})`;
-		}
-		const prefixLen = computed(() => hasPrefix.value ? measuredPrefixWidth.value ?? prefixMinWidth.value : "0px");
-		const suffixLen = computed(() => hasSuffix.value ? measuredSuffixWidth.value ?? suffixMinWidth.value : "0px");
+		const prefixFixedWidth = computed(() => props.prefixMaxWidth ?? props.prefixMinWidth ?? defaultAddonMinWidth.value);
+		const suffixFixedWidth = computed(() => props.suffixMaxWidth ?? props.suffixMinWidth ?? defaultAddonMinWidth.value);
+		const { prefixEl, suffixEl, measuredPrefixWidth, measuredSuffixWidth } = useAddonMeasurement(hasPrefix, hasSuffix);
+		const prefixLen = computed(() => {
+			if (!hasPrefix.value) return "0px";
+			return props.prefixFixed ? prefixFixedWidth.value : measuredPrefixWidth.value ?? prefixMinWidth.value;
+		});
+		const suffixLen = computed(() => {
+			if (!hasSuffix.value) return "0px";
+			return props.suffixFixed ? suffixFixedWidth.value : measuredSuffixWidth.value ?? suffixMinWidth.value;
+		});
 		function addonStyle(side, offset) {
 			return {
 				width: addonLen.value,
@@ -154,6 +141,12 @@ var GrNumberInput_default = /* @__PURE__ */ defineComponent({
 			};
 		});
 		const suffixStyle = computed(() => {
+			if (props.suffixFixed) return {
+				right: "0px",
+				width: suffixFixedWidth.value,
+				minWidth: suffixFixedWidth.value,
+				maxWidth: suffixFixedWidth.value
+			};
 			return {
 				right: "0px",
 				minWidth: suffixMinWidth.value,
@@ -161,6 +154,11 @@ var GrNumberInput_default = /* @__PURE__ */ defineComponent({
 			};
 		});
 		const prefixStyle = computed(() => {
+			if (props.prefixFixed) return {
+				width: prefixFixedWidth.value,
+				minWidth: prefixFixedWidth.value,
+				maxWidth: prefixFixedWidth.value
+			};
 			return {
 				minWidth: prefixMinWidth.value,
 				maxWidth: props.prefixMaxWidth
@@ -190,6 +188,10 @@ var GrNumberInput_default = /* @__PURE__ */ defineComponent({
 			let hasSepLocal = false;
 			for (let i = 0; i < raw.length; i++) {
 				const ch = raw[i];
+				if (ch === "-" && out.length === 0) {
+					out += "-";
+					continue;
+				}
 				if (isDigit(ch)) {
 					out += ch;
 					continue;
@@ -222,32 +224,95 @@ var GrNumberInput_default = /* @__PURE__ */ defineComponent({
 		function format(n) {
 			const sep = props.decimalSeparator || ".";
 			const p = props.precision;
-			let s = p === void 0 ? String(n) : n.toFixed(Math.max(0, p));
+			let s = p === void 0 ? n.toLocaleString("en-US", {
+				useGrouping: false,
+				maximumFractionDigits: 20
+			}) : n.toFixed(Math.max(0, p));
 			if (sep !== ".") s = s.replace(".", sep);
 			return s;
 		}
 		function onInput(e) {
 			const el = e.target;
-			const next = sanitize(el.value);
-			if (el.value !== next) el.value = next;
+			const raw = el.value;
+			const next = sanitize(raw);
+			if (raw !== next) {
+				const caret = el.selectionStart ?? raw.length;
+				const keptBefore = sanitize(raw.slice(0, caret)).length;
+				el.value = next;
+				el.setSelectionRange(keptBefore, keptBefore);
+			}
 			emit("update:modelValue", next);
 		}
-		function onChange(e) {
-			const el = e.target;
-			const next = sanitize(el.value);
+		function commit(el) {
+			const num = toNumber(sanitize(el.value));
+			const next = num === null ? sanitize(el.value) : format(clamp(normalize(num)));
 			if (el.value !== next) el.value = next;
+			if (next !== props.modelValue) emit("update:modelValue", next);
 			emit("change", next);
 		}
-		function stepBy(dir) {
-			if (props.disabled) return;
-			const nextStr = format(clamp(normalize((toNumber(props.modelValue) ?? 0) + (props.step ?? 1) * dir)));
+		function onChange(e) {
+			commit(e.target);
+		}
+		function setValue(n) {
+			const nextStr = format(clamp(normalize(n)));
 			emit("update:modelValue", nextStr);
 			emit("change", nextStr);
+		}
+		function stepBy(dir) {
+			if (props.disabled) return;
+			setValue((toNumber(props.modelValue) ?? 0) + (props.step ?? 1) * dir);
 			focus();
 		}
+		function onKeydown(e) {
+			if (props.disabled) return;
+			switch (e.key) {
+				case "ArrowUp":
+					e.preventDefault();
+					stepBy(1);
+					break;
+				case "ArrowDown":
+					e.preventDefault();
+					stepBy(-1);
+					break;
+				case "Home":
+					if (props.min !== void 0) {
+						e.preventDefault();
+						setValue(props.min);
+					}
+					break;
+				case "End":
+					if (props.max !== void 0) {
+						e.preventDefault();
+						setValue(props.max);
+					}
+					break;
+			}
+		}
+		const ariaValueNow = computed(() => toNumber(props.modelValue) ?? void 0);
+		const isFocused = ref(false);
+		function formatGrouped(value) {
+			const num = toNumber(value);
+			if (num === null) return value;
+			const sep = props.decimalSeparator || ".";
+			return new Intl.NumberFormat(props.locale, {
+				useGrouping: true,
+				minimumFractionDigits: props.precision ?? 0,
+				maximumFractionDigits: props.precision ?? 20
+			}).formatToParts(num).map((part) => part.type === "decimal" ? sep : part.value).join("");
+		}
+		const displayValue = computed(() => {
+			if (!props.useGrouping || isFocused.value) return props.modelValue;
+			return formatGrouped(props.modelValue);
+		});
+		function onFocus() {
+			isFocused.value = true;
+		}
+		function onBlur() {
+			isFocused.value = false;
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
-				"data-ds-number-input": "",
+				"data-gr-number-input": "",
 				class: normalizeClass(["relative w-full overflow-hidden rounded-md border bg-[var(--bg)] transition-colors duration-150 focus-within:ring-2 focus-within:ring-[var(--ring)]", shellClassName.value])
 			}, [
 				_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", {
@@ -255,7 +320,7 @@ var GrNumberInput_default = /* @__PURE__ */ defineComponent({
 					ref_key: "prefixEl",
 					ref: prefixEl,
 					"data-testid": "number-input-prefix",
-					"data-ds-number-input-prefix": "",
+					"data-gr-number-input-prefix": "",
 					class: "absolute inset-y-0 left-0 flex items-center justify-center border-r border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate",
 					style: normalizeStyle(prefixStyle.value),
 					"aria-hidden": "true"
@@ -271,34 +336,41 @@ var GrNumberInput_default = /* @__PURE__ */ defineComponent({
 					autocomplete: __props.autocomplete,
 					placeholder: __props.placeholder,
 					disabled: __props.disabled,
-					value: __props.modelValue,
+					value: displayValue.value,
+					role: "spinbutton",
+					"aria-valuenow": ariaValueNow.value,
+					"aria-valuemin": __props.min,
+					"aria-valuemax": __props.max,
 					"aria-invalid": __props.invalid ? "true" : void 0,
 					class: ["w-full bg-transparent text-[var(--fg)] placeholder:text-[var(--muted-fg)] focus:placeholder:text-transparent focus:outline-none disabled:cursor-not-allowed", inputClassName.value],
 					style: inputStyle.value,
 					onInput,
-					onChange
+					onChange,
+					onKeydown,
+					onFocus,
+					onBlur
 				}), null, 16, _hoisted_1),
 				_ctx.$slots.suffix ? (openBlock(), createElementBlock("div", {
 					key: 1,
 					ref_key: "suffixEl",
 					ref: suffixEl,
 					"data-testid": "number-input-suffix",
-					"data-ds-number-input-suffix": "",
-					class: "absolute inset-y-0 flex items-center justify-center border-l border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate",
+					"data-gr-number-input-suffix": "",
+					class: normalizeClass(["absolute inset-y-0 flex items-center justify-center border-l border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate", __props.suffixFixed ? "[direction:rtl]" : ""]),
 					style: normalizeStyle(suffixStyle.value),
 					"aria-hidden": "true"
-				}, [renderSlot(_ctx.$slots, "suffix")], 4)) : createCommentVNode("", true),
+				}, [renderSlot(_ctx.$slots, "suffix")], 6)) : createCommentVNode("", true),
 				hasVerticalControls.value ? (openBlock(), createElementBlock("div", {
 					key: 2,
 					"data-testid": "number-input-controls-vertical",
-					"data-ds-number-input-controls": "vertical",
+					"data-gr-number-input-controls": "vertical",
 					class: "absolute inset-y-0 flex items-center justify-center border-l border-[var(--brd)]",
 					style: normalizeStyle(verticalControlsStyle.value)
 				}, [createElementVNode("div", _hoisted_2, [createElementVNode("button", {
 					type: "button",
 					class: "h-4 w-7 inline-flex items-center justify-center rounded text-[10px] text-[var(--muted-fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50 disabled:cursor-not-allowed",
 					disabled: __props.disabled,
-					"aria-label": __props.increaseLabel,
+					"aria-label": resolvedIncreaseLabel.value,
 					onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
 					onClick: _cache[1] || (_cache[1] = ($event) => stepBy(1))
 				}, [..._cache[8] || (_cache[8] = [createElementVNode("svg", {
@@ -318,7 +390,7 @@ var GrNumberInput_default = /* @__PURE__ */ defineComponent({
 					type: "button",
 					class: "h-4 w-7 inline-flex items-center justify-center rounded text-[10px] text-[var(--muted-fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50 disabled:cursor-not-allowed",
 					disabled: __props.disabled,
-					"aria-label": __props.decreaseLabel,
+					"aria-label": resolvedDecreaseLabel.value,
 					onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
 					onClick: _cache[3] || (_cache[3] = ($event) => stepBy(-1))
 				}, [..._cache[9] || (_cache[9] = [createElementVNode("svg", {
@@ -338,14 +410,14 @@ var GrNumberInput_default = /* @__PURE__ */ defineComponent({
 				hasHorizontalControls.value ? (openBlock(), createElementBlock("div", {
 					key: 3,
 					"data-testid": "number-input-controls-horizontal-left",
-					"data-ds-number-input-controls": "horizontal-left",
+					"data-gr-number-input-controls": "horizontal-left",
 					class: "absolute inset-y-0 flex items-stretch justify-center border-r border-[var(--brd)]",
 					style: normalizeStyle(horizontalLeftControlsStyle.value)
 				}, [createElementVNode("button", {
 					type: "button",
 					class: "h-full w-full inline-flex items-center justify-center text-[var(--muted-fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]",
 					disabled: __props.disabled,
-					"aria-label": __props.decreaseLabel,
+					"aria-label": resolvedDecreaseLabel.value,
 					onMousedown: _cache[4] || (_cache[4] = withModifiers(() => {}, ["prevent"])),
 					onClick: _cache[5] || (_cache[5] = ($event) => stepBy(-1))
 				}, [..._cache[10] || (_cache[10] = [createElementVNode("svg", {
@@ -365,14 +437,14 @@ var GrNumberInput_default = /* @__PURE__ */ defineComponent({
 				hasHorizontalControls.value ? (openBlock(), createElementBlock("div", {
 					key: 4,
 					"data-testid": "number-input-controls-horizontal-right",
-					"data-ds-number-input-controls": "horizontal-right",
+					"data-gr-number-input-controls": "horizontal-right",
 					class: "absolute inset-y-0 flex items-stretch justify-center border-l border-[var(--brd)]",
 					style: normalizeStyle(horizontalRightControlsStyle.value)
 				}, [createElementVNode("button", {
 					type: "button",
 					class: "h-full w-full inline-flex items-center justify-center text-[var(--muted-fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]",
 					disabled: __props.disabled,
-					"aria-label": __props.increaseLabel,
+					"aria-label": resolvedIncreaseLabel.value,
 					onMousedown: _cache[6] || (_cache[6] = withModifiers(() => {}, ["prevent"])),
 					onClick: _cache[7] || (_cache[7] = ($event) => stepBy(1))
 				}, [..._cache[11] || (_cache[11] = [createElementVNode("svg", {