@hina-ui/vue 1.7.6 → 1.7.8

package/src/components/dialog/Dialog.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { computed } from 'vue'
   import {
     DialogRoot,
     DialogTrigger,
@@ -17,6 +18,7 @@
   import { useOverlayPortal } from '../../lib/overlay-portal'
   import { useScrollViewport } from '../../lib/scroll-viewport'
   import { cn } from '../../lib/cn'
+  import { provideFormScope } from '../form/scope'
   import { dialogWrapper, dialogCard, type DialogVariants } from './dialog.variants'
 
   defineOptions({ name: 'HnDialog' })
@@ -39,13 +41,16 @@
     default?(): unknown
     icon?(): unknown
     title?(): unknown
-    body?(props: { close: () => void }): unknown
-    content?(props: { close: () => void }): unknown
-    footer?(props: { close: () => void }): unknown
+    body?(props: { close: () => void; submitting: boolean }): unknown
+    content?(props: { close: () => void; submitting: boolean }): unknown
+    footer?(props: { close: () => void; submitting: boolean }): unknown
   }>()
 
+  const submitting = provideFormScope()
+  const locked = computed(() => props.locked || submitting.value)
+
   function guard(e: Event) {
-    if (props.locked) e.preventDefault()
+    if (locked.value) e.preventDefault()
   }
 
   const { scrollArea, viewport } = useScrollViewport()
@@ -92,7 +97,7 @@
                 {{ props.description }}
               </DialogDescription>
             </template>
-            <slot v-if="slots.body" name="body" :close="close" />
+            <slot v-if="slots.body" name="body" :close="close" :submitting="submitting" />
             <template v-else>
               <div
                 v-if="props.header"
@@ -118,19 +123,19 @@
                   </DialogDescription>
                 </div>
                 <DialogClose v-if="props.closable" as-child>
-                  <CloseButton :disabled="props.locked" class="-mt-1.5 -me-1.5 shrink-0" />
+                  <CloseButton :disabled="locked" class="-mt-1.5 -me-1.5 shrink-0" />
                 </DialogClose>
               </div>
               <ScrollArea v-if="$slots.content" ref="scrollArea" class="min-h-0">
                 <div class="px-(--hn-panel-p) py-1">
-                  <slot name="content" :close="close" />
+                  <slot name="content" :close="close" :submitting="submitting" />
                 </div>
               </ScrollArea>
               <div
                 v-if="$slots.footer"
                 class="flex shrink-0 justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)"
               >
-                <slot name="footer" :close="close" />
+                <slot name="footer" :close="close" :submitting="submitting" />
               </div>
             </template>
           </Card>

package/src/components/divider/Divider.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { useSlots } from 'vue'
-  import { Separator } from 'reka-ui'
+  import { Separator } from '../../primitives/separator'
   import { cn } from '../../lib/cn'
 
   defineOptions({ name: 'HnDivider' })

package/src/components/drawer/Drawer.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { computed } from 'vue'
   import {
     DialogRoot,
     DialogTrigger,
@@ -17,6 +18,7 @@
   import { useOverlayPortal } from '../../lib/overlay-portal'
   import { useScrollViewport } from '../../lib/scroll-viewport'
   import { cn } from '../../lib/cn'
+  import { provideFormScope } from '../form/scope'
   import { drawerCard } from './drawer.variants'
 
   defineOptions({ name: 'HnDrawer' })
@@ -39,13 +41,16 @@
     default?(): unknown
     icon?(): unknown
     title?(): unknown
-    body?(props: { close: () => void }): unknown
-    content?(props: { close: () => void }): unknown
-    footer?(props: { close: () => void }): unknown
+    body?(props: { close: () => void; submitting: boolean }): unknown
+    content?(props: { close: () => void; submitting: boolean }): unknown
+    footer?(props: { close: () => void; submitting: boolean }): unknown
   }>()
 
+  const submitting = provideFormScope()
+  const locked = computed(() => props.locked || submitting.value)
+
   function guard(e: Event) {
-    if (props.locked) e.preventDefault()
+    if (locked.value) e.preventDefault()
   }
 
   const { scrollArea, viewport } = useScrollViewport()
@@ -84,7 +89,7 @@
               {{ props.description }}
             </DialogDescription>
           </template>
-          <slot v-if="slots.body" name="body" :close="close" />
+          <slot v-if="slots.body" name="body" :close="close" :submitting="submitting" />
           <template v-else>
             <div
               v-if="props.header"
@@ -110,19 +115,19 @@
                 </DialogDescription>
               </div>
               <DialogClose v-if="props.closable" as-child>
-                <CloseButton :disabled="props.locked" class="-mt-1.5 -me-1.5 shrink-0" />
+                <CloseButton :disabled="locked" class="-mt-1.5 -me-1.5 shrink-0" />
               </DialogClose>
             </div>
             <ScrollArea v-if="$slots.content" ref="scrollArea" class="min-h-0 grow">
               <div class="px-(--hn-panel-p) py-1">
-                <slot name="content" :close="close" />
+                <slot name="content" :close="close" :submitting="submitting" />
               </div>
             </ScrollArea>
             <div
               v-if="$slots.footer"
               class="flex shrink-0 justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)"
             >
-              <slot name="footer" :close="close" />
+              <slot name="footer" :close="close" :submitting="submitting" />
             </div>
           </template>
         </Card>

package/src/components/float-button/FloatButton.vue

@@ -4,6 +4,7 @@
   import Button from '../button/Button.vue'
   import { vTooltip } from '../tooltip/directive'
   import { floatButton } from './float-button.variants'
+  import { floatButtonOffset } from '../../../../shared/src/lib/float-button'
   import type { FloatButtonProps } from './types'
 
   defineOptions({ name: 'HnFloatButton', inheritAttrs: false })
@@ -26,15 +27,7 @@
   const tooltip = computed(() =>
     props.tooltip && !props.extended ? { content: props.label, side: props.tooltipSide } : false,
   )
-  const offset = computed(() =>
-    props.offset === undefined
-      ? undefined
-      : typeof props.offset === 'number'
-        ? Number.isFinite(props.offset)
-          ? `${Math.max(0, props.offset)}px`
-          : undefined
-        : props.offset,
-  )
+  const offset = computed(() => floatButtonOffset(props.offset))
   const element = computed(() => button.value?.$el as HTMLElement | undefined)
   function focus() {
     if (!props.disabled && !props.loading) element.value?.focus({ preventScroll: true })
@@ -52,7 +45,7 @@
   <Transition
     enter-active-class="hn-transition-base"
     enter-from-class="scale-90 opacity-0"
-    leave-active-class="hn-transition pointer-events-none"
+    leave-active-class="hn-float-button-leave"
     leave-to-class="scale-90 opacity-0"
     @before-enter="enter"
     @before-leave="leave"
@@ -87,7 +80,7 @@
           props.class,
         )
       "
-      :style="[{ '--hn-float-offset': offset }, props.style]"
+      :style="[offset, props.style]"
     >
       <template v-if="props.extended" #icon><slot /></template>
       <span v-if="props.extended" class="min-w-0 truncate">{{ props.label }}</span>

package/src/components/float-button/types.ts

@@ -1,6 +1,7 @@
 import type { StyleValue } from 'vue'
-import type { PrimitiveProps } from 'reka-ui'
 import type { ButtonVariants } from '../button/button.variants'
+import type { PrimitiveProps } from '../../primitives/primitive'
+import type { FloatButtonOffset } from '../../../../shared/src/lib/float-button'
 
 export interface FloatButtonProps {
   label: string
@@ -9,7 +10,7 @@ export interface FloatButtonProps {
   type?: 'button' | 'submit' | 'reset'
   position?: 'fixed' | 'absolute' | 'static'
   placement?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
-  offset?: number | string
+  offset?: FloatButtonOffset
   size?: 'sm' | 'md' | 'lg'
   shape?: 'circle' | 'square'
   extended?: boolean

package/src/components/form/Form.vue

@@ -3,6 +3,7 @@
   import { cn } from '../../lib/cn'
   import { useForm, type FormValidateOn } from './composables/useForm'
   import { provideForm } from './context'
+  import { reportFormScope } from './scope'
   import { formRoot } from './form.variants'
   import { focusFirstInvalid } from './utils/focus'
   import type { FormErrors, FormRules, FormValues } from './standard-schema'
@@ -47,7 +48,19 @@
     form.setErrors(errors)
   }
 
-  defineExpose({ submit, validate: form.validate, reset: form.reset, setErrors })
+  reportFormScope(form.submitting)
+
+  defineExpose({
+    submit,
+    validate: form.validate,
+    reset: form.reset,
+    setErrors,
+    errors: form.errors,
+    error: form.formError,
+    invalid: form.invalid,
+    submitting: form.submitting,
+    submitted: form.submitted,
+  })
 </script>
 
 <template>

package/src/components/form/scope.ts

@@ -0,0 +1,39 @@
+import {
+  computed,
+  inject,
+  onScopeDispose,
+  provide,
+  shallowRef,
+  watch,
+  type ComputedRef,
+  type InjectionKey,
+  type Ref,
+} from 'vue'
+
+interface FormScope {
+  set: (id: symbol, submitting: boolean) => void
+}
+
+const FORM_SCOPE_KEY = Symbol('hn-form-scope') as InjectionKey<FormScope>
+
+export function provideFormScope(): ComputedRef<boolean> {
+  const active = shallowRef<ReadonlySet<symbol>>(new Set())
+  provide(FORM_SCOPE_KEY, {
+    set(id, submitting) {
+      if (active.value.has(id) === submitting) return
+      const next = new Set(active.value)
+      if (submitting) next.add(id)
+      else next.delete(id)
+      active.value = next
+    },
+  })
+  return computed(() => active.value.size > 0)
+}
+
+export function reportFormScope(submitting: Ref<boolean>) {
+  const scope = inject(FORM_SCOPE_KEY, null)
+  if (!scope) return
+  const id = Symbol('form')
+  watch(submitting, value => scope.set(id, value), { immediate: true, flush: 'sync' })
+  onScopeDispose(() => scope.set(id, false))
+}

package/src/components/heading/Heading.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
   import { computed } from 'vue'
-  import { Primitive } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { heading, type HeadingVariants } from './heading.variants'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnHeading' })
 

package/src/components/icon-button/IconButton.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-  import { injectTooltipProviderContext, type PrimitiveProps } from 'reka-ui'
+  import { injectTooltipProviderContext } from 'reka-ui'
   import Button from '../button/Button.vue'
   import Tooltip from '../tooltip/Tooltip.vue'
   import { Passthrough } from '../../lib/passthrough'
   import type { ButtonVariants } from '../button/button.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnIconButton', inheritAttrs: false })
 

package/src/components/image/Image.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
   import { computed, onBeforeUnmount, shallowRef, useId, watch, type StyleValue } from 'vue'
-  import { Primitive } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { useRequiredLabel } from '../../lib/a11y'
   import Skeleton from '../skeleton/Skeleton.vue'
@@ -10,6 +9,7 @@
   import { useImage } from './composables/useImage'
   import { useImageGroup } from './context'
   import { useImageResolver } from './resolver'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnImage', inheritAttrs: false })
 

package/src/components/indicator/Indicator.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import VisuallyHidden from '../visually-hidden/VisuallyHidden.vue'
   import { cn } from '../../lib/cn'
   import { indicator, type IndicatorVariants } from './indicator.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnIndicator' })
 

package/src/components/input/InputAction.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-  import { Primitive } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { inputAction, inputAdornment } from './input.variants'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnInputAction' })
 

package/src/components/line-clamp/LineClamp.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+  import { computed, onBeforeUnmount, onMounted, onUpdated, shallowRef, useId } from 'vue'
+  import { useResizeObserver } from '@vueuse/core'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import Button from '../button/Button.vue'
+  import {
+    animateLineClamp,
+    lineClampCount,
+    measureLineClamp,
+    revealLineClamp,
+  } from '../../../../shared/src/lib/line-clamp'
+  import { lineClampContent, lineClampRoot, lineClampToggle } from './line-clamp.variants'
+
+  defineOptions({ name: 'HnLineClamp' })
+
+  const props = defineProps<{
+    lines?: number
+    expandLabel?: string
+    collapseLabel?: string
+    class?: string
+  }>()
+
+  const expanded = defineModel<boolean>('expanded', { default: false })
+
+  const t = useUiLocale()
+  const id = useId()
+  const root = shallowRef<HTMLElement | null>(null)
+  const content = shallowRef<HTMLElement | null>(null)
+  const truncated = shallowRef<boolean | null>(null)
+  const truncation = computed(() => (truncated.value === null ? undefined : `${truncated.value}`))
+  const count = computed(() => lineClampCount(props.lines))
+
+  let shown = expanded.value
+  let reveal = false
+  let stop: (() => void) | undefined
+
+  function measure() {
+    if (!content.value) return
+    const next = measureLineClamp(content.value)
+    if (next !== null) truncated.value = next
+  }
+
+  function sync() {
+    const element = content.value
+    if (element && shown !== expanded.value) {
+      shown = expanded.value
+      const scroll = reveal && !shown
+      reveal = false
+      stop?.()
+      stop = animateLineClamp(element, shown, () => {
+        measure()
+        if (scroll) revealLineClamp(root.value)
+      })
+    }
+    measure()
+  }
+
+  onMounted(() => {
+    measure()
+    void document.fonts?.ready.then(measure)
+  })
+  onUpdated(sync)
+  useResizeObserver(content, measure)
+  onBeforeUnmount(() => stop?.())
+
+  function toggle() {
+    reveal = expanded.value
+    expanded.value = !expanded.value
+  }
+</script>
+
+<template>
+  <div
+    ref="root"
+    :data-expanded="expanded ? '' : undefined"
+    :data-truncated="truncation"
+    :class="cn(lineClampRoot(), props.class)"
+  >
+    <div
+      :id="id"
+      ref="content"
+      :data-expanded="expanded ? '' : undefined"
+      :style="{ '--hn-line-clamp': count }"
+      :class="lineClampContent()"
+    >
+      <slot />
+    </div>
+    <span :class="lineClampToggle()">
+      <Button
+        variant="link"
+        size="sm"
+        :aria-expanded="expanded"
+        :aria-controls="id"
+        @click="toggle"
+      >
+        {{
+          expanded
+            ? (props.collapseLabel ?? t.lineClamp.collapse)
+            : (props.expandLabel ?? t.lineClamp.expand)
+        }}
+      </Button>
+    </span>
+  </div>
+</template>

package/src/components/line-clamp/line-clamp.variants.ts

@@ -0,0 +1 @@
+export * from '../../../../shared/src/variants/line-clamp'

package/src/components/link/Link.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { link, type LinkVariants } from './link.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnLink' })
 

package/src/components/multi-select/MultiSelect.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { computed, ref } from 'vue'
-  import { SelectRoot, SelectTrigger, VisuallyHidden } from 'reka-ui'
+  import { SelectRoot, SelectTrigger } from 'reka-ui'
+  import { VisuallyHidden } from '../../primitives/visually-hidden'
   import { cn } from '../../lib/cn'
   import type { VirtualizeOptions } from '../../lib/virtual/types'
   import { useUiLocale } from '../../locale'
@@ -55,6 +56,7 @@
   const size = computed(() => (group ? group.size.value : props.size))
   const {
     id: fieldId,
+    labelledBy,
     invalid,
     disabled,
     describedBy,
@@ -101,6 +103,7 @@
       v-bind="$attrs"
       as="div"
       :id="fieldId"
+      :aria-labelledby="labelledBy"
       :aria-describedby="describedBy"
       data-hn-multi-select
       @keydown="keyboard = true"

package/src/components/nav-link/NavLink.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
   import { computed } from 'vue'
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { Passthrough } from '../../lib/passthrough'
   import Tooltip from '../tooltip/Tooltip.vue'
-  import { useSidebar } from '../sidebar/context'
+  import { useInSidebar, useSidebar } from '../sidebar/context'
   import { navLink, navLinkLabel } from './nav-link.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
+  import NavLinkChild from './NavLinkChild'
 
   defineOptions({ name: 'HnNavLink', inheritAttrs: false })
 
@@ -21,18 +23,45 @@
     { as: 'a', active: false, disabled: false },
   )
 
-  const sidebar = useSidebar()
+  const sidebar = useInSidebar() ? useSidebar() : null
   const rail = computed(() => sidebar?.state.value === 'rail')
 
   const Wrapper = sidebar ? Tooltip : Passthrough
+
+  const linkProps = computed(() => ({
+    'aria-current': props.active ? ('page' as const) : undefined,
+    'data-state': props.active ? 'selected' : undefined,
+    'aria-disabled': props.disabled ? ('true' as const) : undefined,
+    'data-disabled': props.disabled ? '' : undefined,
+    tabindex: props.disabled ? -1 : undefined,
+    'aria-label': rail.value ? props.label : undefined,
+    class: cn(navLink({ active: props.active }), props.class),
+  }))
+
+  const labelProps = computed(() => ({
+    'aria-hidden': rail.value ? ('true' as const) : undefined,
+    inert: rail.value,
+    'data-collapsed': rail.value ? '' : undefined,
+    'data-hn-label': '',
+    class: navLinkLabel(),
+  }))
 </script>
 
 <template>
   <Wrapper :disabled="!rail || !props.label" :content="props.label" side="right">
+    <NavLinkChild
+      v-if="props.asChild"
+      v-bind="{ ...$attrs, ...linkProps }"
+      :as="props.as"
+      :label-props="labelProps"
+    >
+      <template v-if="$slots.icon" #icon><slot name="icon" /></template>
+      <slot />
+    </NavLinkChild>
     <Primitive
+      v-else
       v-bind="$attrs"
       :as="props.as"
-      :as-child="props.asChild"
       :aria-current="props.active ? 'page' : undefined"
       :data-state="props.active ? 'selected' : undefined"
       :aria-disabled="props.disabled ? 'true' : undefined"

package/src/components/nav-link/NavLinkChild.ts

@@ -0,0 +1,57 @@
+import {
+  Comment,
+  defineComponent,
+  h,
+  mergeProps,
+  Text,
+  type PropType,
+  type Slots,
+  type VNode,
+  type VNodeArrayChildren,
+} from 'vue'
+import { Primitive, type PrimitiveProps } from '../../primitives/primitive'
+import { renderSlotFragments } from '../../primitives/utils/renderSlotFragments'
+
+type Content = string | VNodeArrayChildren | null | undefined
+
+const CHILDREN_FLAGS = 8 | 16 | 32
+
+export default defineComponent({
+  name: 'HnNavLinkChild',
+  inheritAttrs: false,
+  props: {
+    as: { type: [String, Object] as PropType<PrimitiveProps['as']>, default: 'a' },
+    labelProps: { type: Object as PropType<Record<string, unknown>>, required: true },
+  },
+  setup(props, { attrs, slots }) {
+    const inner = (content: Content) => [
+      ...(slots.icon?.() ?? []),
+      h('span', props.labelProps, content ?? undefined),
+    ]
+
+    return () => {
+      const children = renderSlotFragments(slots.default?.())
+      const child = children.find(node => node.type !== Comment && node.type !== Text)
+      if (!child) return h(Primitive, mergeProps(attrs, { as: props.as }), () => inner(children))
+
+      const { ref: _, ...own } = child.props ?? {}
+      const merged = mergeProps(attrs, own)
+      const bare = {
+        ...child,
+        props: {},
+        children: null,
+        shapeFlag: child.shapeFlag & ~CHILDREN_FLAGS,
+      } as VNode
+      if (typeof child.type === 'string') return h(bare, merged, inner(child.children as Content))
+
+      const given = (child.children ?? {}) as Slots
+      const forwarded = Object.fromEntries(
+        Object.entries(given).filter(([name]) => !name.startsWith('_') && name !== 'default'),
+      )
+      return h(bare, merged, {
+        ...forwarded,
+        default: (...args: unknown[]) => inner(given.default?.(...(args as [])) as Content),
+      })
+    }
+  },
+})

package/src/components/navigation-menu/NavigationMenuLink.vue

@@ -2,7 +2,6 @@
   import {
     NavigationMenuLink as RekaNavigationMenuLink,
     type NavigationMenuLinkEmits,
-    type PrimitiveProps,
   } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { useNavigationMenu } from './context'
@@ -11,6 +10,7 @@
     navigationMenuLink,
     navigationMenuIcon,
   } from './navigation-menu.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnNavigationMenuLink', inheritAttrs: false })
   const props = withDefaults(

package/src/components/pagination/Pagination.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { computed } from 'vue'
-  import { PaginationRoot } from 'reka-ui'
+  import { PaginationRoot } from '../../primitives/pagination'
   import { cn } from '../../lib/cn'
   import { useDirection } from '../../lib/useDirection'
   import { useUiLocale } from '../../locale'

package/src/components/pagination/PaginationContent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { shallowRef } from 'vue'
-  import { PaginationList } from 'reka-ui'
+  import { PaginationList } from '../../primitives/pagination'
   import { cn } from '../../lib/cn'
   import PaginationPages from './PaginationPages.vue'
   import { paginationList } from './pagination.variants'

package/src/components/pagination/PaginationControl.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
   import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from '@lucide/vue'
-  import { PaginationFirst, PaginationPrev, PaginationNext, PaginationLast } from 'reka-ui'
+  import {
+    PaginationFirst,
+    PaginationPrev,
+    PaginationNext,
+    PaginationLast,
+  } from '../../primitives/pagination'
   import { useUiLocale } from '../../locale'
   import Button from '../button/Button.vue'
   import type { ButtonVariants } from '../button/button.variants'

package/src/components/pagination/PaginationPage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { useTemplateRef } from 'vue'
-  import { PaginationListItem } from 'reka-ui'
+  import { PaginationListItem } from '../../primitives/pagination'
   import Button from '../button/Button.vue'
   import { vTooltip } from '../tooltip/directive'
   import { useUiLocale } from '../../locale'