@univerjs/design 1.0.0-alpha.3 → 1.0.0-alpha.4

package/lib/es/index.js

@@ -4,8 +4,8 @@ import { clsx as clsx$1 } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva, cva as cva$1 } from "class-variance-authority";
-import { Slot } from "@radix-ui/react-slot";
 import { DirectionProvider } from "@radix-ui/react-direction";
+import { Slot } from "@radix-ui/react-slot";
 import { CheckboxItem, Content, Item, ItemIndicator, Portal, RadioGroup as RadioGroup$1, RadioItem, Root, Separator as Separator$1, Sub, SubContent, SubTrigger, Trigger } from "@radix-ui/react-dropdown-menu";
 import { Content as Content$1, Portal as Portal$1, Root as Root$1, Trigger as Trigger$1 } from "@radix-ui/react-popover";
 import { Close, Content as Content$2, Description, Overlay, Portal as Portal$2, Root as Root$2, Title } from "@radix-ui/react-dialog";
@@ -118,10 +118,57 @@ function Avatar(props) {
 	});
 }
 
+//#endregion
+//#region src/helper/is-browser.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+function isBrowser() {
+	return typeof window !== "undefined" && typeof document !== "undefined";
+}
+
+//#endregion
+//#region src/components/config-provider/ConfigProvider.tsx
+const ConfigContext = createContext({ mountContainer: isBrowser() ? document.body : null });
+function ConfigProvider(props) {
+	const { children, locale, mountContainer, direction } = props;
+	const value = useMemo(() => {
+		return {
+			locale,
+			direction,
+			mountContainer
+		};
+	}, [
+		locale,
+		direction,
+		mountContainer
+	]);
+	return /* @__PURE__ */ jsx(ConfigContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx(DirectionProvider, {
+			dir: direction !== null && direction !== void 0 ? direction : "ltr",
+			children
+		})
+	});
+}
+
 //#endregion
 //#region src/components/badge/Badge.tsx
 function Badge(props) {
 	const { className, children, closable = false, onClose } = props;
+	const { locale } = useContext(ConfigContext);
 	return /* @__PURE__ */ jsxs("span", {
 		"data-u-comp": "badge",
 		className: clsx("univer-box-border univer-inline-flex univer-items-center univer-gap-1 univer-truncate univer-rounded-md univer-border univer-border-solid univer-border-gray-100 univer-bg-gray-100 univer-px-2.5 univer-py-0.5 univer-text-xs univer-font-medium univer-text-gray-900 dark:!univer-border-gray-500 dark:!univer-bg-gray-700 dark:!univer-text-gray-300", className),
@@ -131,7 +178,7 @@ function Badge(props) {
 		}), closable && /* @__PURE__ */ jsx("button", {
 			className: "univer-flex univer-cursor-pointer univer-items-center univer-justify-center univer-border-none univer-p-0 univer-outline-none univer-transition-opacity hover:univer-opacity-70",
 			type: "button",
-			"aria-label": "Close badge",
+			"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.closeBadge,
 			onClick: onClose,
 			children: /* @__PURE__ */ jsx(CloseIcon, { className: "univer-text-current" })
 		})]
@@ -176,52 +223,6 @@ const Button = forwardRef(({ className, variant, size, asChild = false, ...props
 });
 Button.displayName = "Button";
 
-//#endregion
-//#region src/helper/is-browser.ts
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-function isBrowser() {
-	return typeof window !== "undefined" && typeof document !== "undefined";
-}
-
-//#endregion
-//#region src/components/config-provider/ConfigProvider.tsx
-const ConfigContext = createContext({ mountContainer: isBrowser() ? document.body : null });
-function ConfigProvider(props) {
-	const { children, locale, mountContainer, direction } = props;
-	const value = useMemo(() => {
-		return {
-			locale,
-			direction,
-			mountContainer
-		};
-	}, [
-		locale,
-		direction,
-		mountContainer
-	]);
-	return /* @__PURE__ */ jsx(ConfigContext.Provider, {
-		value,
-		children: /* @__PURE__ */ jsx(DirectionProvider, {
-			dir: direction !== null && direction !== void 0 ? direction : "ltr",
-			children
-		})
-	});
-}
-
 //#endregion
 //#region src/components/button/ButtonGroup.tsx
 const ButtonGroup = ({ className, orientation = "horizontal", children }) => {
@@ -1152,7 +1153,6 @@ function useDraggable(options = {}) {
 	};
 }
 function Dialog(props) {
-	var _locale$Confirm$cance, _locale$Confirm, _locale$Confirm$confi, _locale$Confirm2;
 	const { className, children, style, open = false, title, width, draggable = false, defaultPosition, footer: propFooter, mask = true, keyboard = true, closable = true, maskClosable = true, showOk, showCancel, onOpenChange, onClose, onOk, onCancel } = props;
 	const { locale, mountContainer, direction } = useContext(ConfigContext);
 	const { position, isDragging, setElementRef, handleMouseDown } = useDraggable({
@@ -1163,11 +1163,11 @@ function Dialog(props) {
 		className: "univer-flex univer-justify-end univer-gap-2",
 		children: [showCancel && /* @__PURE__ */ jsx(Button, {
 			onClick: onCancel,
-			children: (_locale$Confirm$cance = locale === null || locale === void 0 || (_locale$Confirm = locale.Confirm) === null || _locale$Confirm === void 0 ? void 0 : _locale$Confirm.cancel) !== null && _locale$Confirm$cance !== void 0 ? _locale$Confirm$cance : "Cancel"
+			children: locale === null || locale === void 0 ? void 0 : locale.Confirm.cancel
 		}), showOk && /* @__PURE__ */ jsx(Button, {
 			variant: "primary",
 			onClick: onOk,
-			children: (_locale$Confirm$confi = locale === null || locale === void 0 || (_locale$Confirm2 = locale.Confirm) === null || _locale$Confirm2 === void 0 ? void 0 : _locale$Confirm2.confirm) !== null && _locale$Confirm$confi !== void 0 ? _locale$Confirm$confi : "OK"
+			children: locale === null || locale === void 0 ? void 0 : locale.Confirm.confirm
 		})]
 	}) : null;
 	const handleContentRef = useCallback((node) => {
@@ -1914,7 +1914,6 @@ const MemoizedAlphaSlider = memo(AlphaSlider);
 const MemoizedColorInput = memo(ColorInput);
 const MemoizedColorPresets = memo(ColorPresets);
 function ColorPicker({ format = "hex", value, onChange }) {
-	if (!isBrowser) return null;
 	const { direction, locale } = useContext(ConfigContext);
 	const [hsv, setHsv] = useState([
 		0,
@@ -1951,6 +1950,7 @@ function ColorPicker({ format = "hex", value, onChange }) {
 			console.error("Invalid value:", error);
 		}
 	}, [value, format]);
+	if (!isBrowser) return null;
 	function handleColorChange(h, s, v) {
 		setHsv([
 			h,
@@ -2439,11 +2439,7 @@ const FormDualColumnLayout = (props) => {
 */
 function Pager(props) {
 	const { className, value: current = 0, total: count = 0, loop, text: propText, onChange } = props;
-	const text = useMemo(() => propText !== null && propText !== void 0 ? propText : `${current}/${count}`, [
-		current,
-		count,
-		propText
-	]);
+	const text = propText !== null && propText !== void 0 ? propText : `${current}/${count}`;
 	const hasValue = count > 0;
 	const onClickLeftArrow = () => {
 		if (current === 1) {
@@ -2513,9 +2509,9 @@ function Gallery(props) {
 	const [isVisible, setIsVisible] = useState(false);
 	const [activeImageIndex, setActiveImageIndex] = useState(0);
 	const [zoomLevel, setZoomLevel] = useState(1);
-	const { direction } = useContext(ConfigContext);
+	const { direction, locale } = useContext(ConfigContext);
 	const dialogRef = useRef(null);
-	const activeImage = useMemo(() => images[activeImageIndex], [activeImageIndex, images]);
+	const activeImage = images[activeImageIndex];
 	const hasPagination = images.length > 1;
 	useEffect(() => {
 		if (open && dialogRef.current) dialogRef.current.focus();
@@ -2565,7 +2561,7 @@ function Gallery(props) {
 		dir: direction,
 		role: "dialog",
 		"aria-modal": "true",
-		"aria-label": "Image gallery",
+		"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.imageGallery,
 		tabIndex: -1,
 		ref: dialogRef,
 		className: clsx("univer-fixed univer-inset-0 univer-z-[1080] univer-flex univer-h-screen univer-w-screen univer-select-none univer-items-center univer-justify-center", {
@@ -2584,7 +2580,7 @@ function Gallery(props) {
 					className: "univer-h-full univer-w-full univer-object-contain univer-transition-transform univer-duration-300 univer-ease-out",
 					style: { transform: `scale(${zoomLevel})` },
 					src: activeImage,
-					alt: `Image ${activeImageIndex + 1} of ${images.length}`,
+					alt: locale === null || locale === void 0 ? void 0 : locale.Accessibility.image.replace("{0}", String(activeImageIndex + 1)).replace("{1}", String(images.length)),
 					draggable: false
 				})
 			}),
@@ -2599,21 +2595,21 @@ function Gallery(props) {
 					}),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
-						"aria-label": "Zoom in",
+						"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.zoomIn,
 						className: buttonClassName,
 						onClick: () => handleToggleZoom(.25),
 						children: /* @__PURE__ */ jsx(ZoomInIcon, { "aria-hidden": "true" })
 					}),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
-						"aria-label": "Zoom out",
+						"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.zoomOut,
 						className: buttonClassName,
 						onClick: () => handleToggleZoom(-.25),
 						children: /* @__PURE__ */ jsx(ZoomOutIcon, { "aria-hidden": "true" })
 					}),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
-						"aria-label": "Reset zoom",
+						"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.resetZoom,
 						className: buttonClassName,
 						onClick: () => handleToggleZoom("reset"),
 						children: /* @__PURE__ */ jsx(OneToOneIcon, { "aria-hidden": "true" })
@@ -2713,9 +2709,10 @@ const Input = forwardRef(({ autoFocus = false, className, style, type = "text",
 //#endregion
 //#region src/components/input-number/InputNumber.tsx
 const InputNumber = forwardRef(({ value, defaultValue, size = "small", min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, precision, formatter, parser, controls = true, className, inputClassName, controlsClassName, disabled, onChange, onKeyDown, onPressEnter, onFocus, onBlur, allowEmpty = false }, ref) => {
+	const { locale } = useContext(ConfigContext);
 	const [internalValue, setInternalValue] = useState(value !== void 0 ? value : defaultValue !== void 0 ? defaultValue : null);
 	const lastValidValueRef = useRef(internalValue);
-	const [inputValue, setInputValue] = useState(formatValue(internalValue));
+	const [inputValue, setInputValue] = useState(() => formatValue(internalValue));
 	const inputRef = useRef(null);
 	const longPressTimerRef = useRef(null);
 	const longPressIntervalRef = useRef(null);
@@ -2867,7 +2864,7 @@ const InputNumber = forwardRef(({ value, defaultValue, size = "small", min = Num
 				children: [/* @__PURE__ */ jsx("span", {
 					className: clsx("univer-box-border univer-flex univer-h-1/2 univer-w-5 univer-cursor-pointer univer-items-center univer-justify-center univer-border-none univer-bg-transparent univer-p-0 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-white dark:hover:!univer-bg-gray-600", incrementDisabled && "univer-cursor-not-allowed univer-opacity-60"),
 					role: "button",
-					"aria-label": "increment",
+					"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.increment,
 					"aria-disabled": incrementDisabled,
 					tabIndex: -1,
 					onMouseDown: (e) => e.preventDefault(),
@@ -2879,7 +2876,7 @@ const InputNumber = forwardRef(({ value, defaultValue, size = "small", min = Num
 				}), /* @__PURE__ */ jsx("span", {
 					className: clsx("univer-box-border univer-flex univer-h-1/2 univer-w-5 univer-cursor-pointer univer-items-center univer-justify-center univer-border-none univer-bg-transparent univer-p-0 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-white dark:hover:!univer-bg-gray-600", decrementDisabled && "univer-cursor-not-allowed univer-opacity-60"),
 					role: "button",
-					"aria-label": "decrement",
+					"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.decrement,
 					"aria-disabled": decrementDisabled,
 					tabIndex: -1,
 					onMouseDown: (e) => e.preventDefault(),
@@ -3212,7 +3209,7 @@ function getCssLinearGradientAngle(value) {
 	return (getGradientAngle(value) + 90) % 360;
 }
 function GradientColorPicker(props) {
-	var _draftValue$stops$sel, _locale$GradientColor, _draftValue$stops$sel2;
+	var _draftValue$stops$sel, _draftValue$stops$sel2;
 	const { className, compact = false, value = DEFAULT_VALUE, onChange } = props;
 	const { locale } = useContext(ConfigContext);
 	const [draftValue, setDraftValue] = useState(value);
@@ -3480,7 +3477,7 @@ function GradientColorPicker(props) {
 						className: "univer-flex-1",
 						children: [/* @__PURE__ */ jsx("div", {
 							className: "univer-mb-0.5 univer-text-xs univer-text-gray-500",
-							children: (_locale$GradientColor = locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.transparency) !== null && _locale$GradientColor !== void 0 ? _locale$GradientColor : "Transparency"
+							children: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.transparency
 						}), /* @__PURE__ */ jsx(InputNumber, {
 							value: Math.round((1 - getStopOpacity(draftValue.stops[selectedIndex])) * 100),
 							min: 0,

package/lib/es/locale/ar-SA.js

@@ -1,5 +1,15 @@
 //#region src/locale/ar-SA.ts
 const locale = { design: {
+	Accessibility: {
+		closeBadge: "إغلاق الشارة",
+		imageGallery: "معرض الصور",
+		image: "الصورة {0} من {1}",
+		zoomIn: "تكبير",
+		zoomOut: "تصغير",
+		resetZoom: "إعادة ضبط التكبير",
+		increment: "زيادة",
+		decrement: "إنقاص"
+	},
 	Confirm: {
 		cancel: "إلغاء",
 		confirm: "موافق"

package/lib/es/locale/ca-ES.js

@@ -1,5 +1,15 @@
 //#region src/locale/ca-ES.ts
 const locale = { design: {
+	Accessibility: {
+		closeBadge: "Tanca la insígnia",
+		imageGallery: "Galeria d’imatges",
+		image: "Imatge {0} de {1}",
+		zoomIn: "Apropa",
+		zoomOut: "Allunya",
+		resetZoom: "Restableix el zoom",
+		increment: "Incrementa",
+		decrement: "Disminueix"
+	},
 	Confirm: {
 		cancel: "cancel·la",
 		confirm: "ok"

package/lib/es/locale/de-DE.js

@@ -1,5 +1,15 @@
 //#region src/locale/de-DE.ts
 const locale = { design: {
+	Accessibility: {
+		closeBadge: "Badge schließen",
+		imageGallery: "Bildergalerie",
+		image: "Bild {0} von {1}",
+		zoomIn: "Vergrößern",
+		zoomOut: "Verkleinern",
+		resetZoom: "Zoom zurücksetzen",
+		increment: "Erhöhen",
+		decrement: "Verringern"
+	},
 	Confirm: {
 		cancel: "Abbrechen",
 		confirm: "OK"

package/lib/es/locale/en-US.js

@@ -15,6 +15,16 @@
 * limitations under the License.
 */
 const locale = { design: {
+	Accessibility: {
+		closeBadge: "Close badge",
+		imageGallery: "Image gallery",
+		image: "Image {0} of {1}",
+		zoomIn: "Zoom in",
+		zoomOut: "Zoom out",
+		resetZoom: "Reset zoom",
+		increment: "increment",
+		decrement: "decrement"
+	},
 	Confirm: {
 		cancel: "cancel",
 		confirm: "ok"

package/lib/es/locale/es-ES.js

@@ -1,5 +1,15 @@
 //#region src/locale/es-ES.ts
 const locale = { design: {
+	Accessibility: {
+		closeBadge: "Cerrar insignia",
+		imageGallery: "Galería de imágenes",
+		image: "Imagen {0} de {1}",
+		zoomIn: "Acercar",
+		zoomOut: "Alejar",
+		resetZoom: "Restablecer zoom",
+		increment: "Incrementar",
+		decrement: "Disminuir"
+	},
 	Confirm: {
 		cancel: "Cancelar",
 		confirm: "Aceptar"

package/lib/es/locale/fa-IR.js

@@ -1,5 +1,15 @@
 //#region src/locale/fa-IR.ts
 const locale = { design: {
+	Accessibility: {
+		closeBadge: "بستن نشان",
+		imageGallery: "گالری تصاویر",
+		image: "تصویر {0} از {1}",
+		zoomIn: "بزرگ‌نمایی",
+		zoomOut: "کوچک‌نمایی",
+		resetZoom: "بازنشانی بزرگ‌نمایی",
+		increment: "افزایش",
+		decrement: "کاهش"
+	},
 	Confirm: {
 		cancel: "لغو",
 		confirm: "باشه"

package/lib/es/locale/fr-FR.js

@@ -1,5 +1,15 @@
 //#region src/locale/fr-FR.ts
 const locale = { design: {
+	Accessibility: {
+		closeBadge: "Fermer le badge",
+		imageGallery: "Galerie d’images",
+		image: "Image {0} sur {1}",
+		zoomIn: "Zoom avant",
+		zoomOut: "Zoom arrière",
+		resetZoom: "Réinitialiser le zoom",
+		increment: "Augmenter",
+		decrement: "Diminuer"
+	},
 	Confirm: {
 		cancel: "annuler",
 		confirm: "ok"

package/lib/es/locale/id-ID.js

@@ -1,5 +1,15 @@
 //#region src/locale/id-ID.ts
 const locale = { design: {
+	Accessibility: {
+		closeBadge: "Tutup lencana",
+		imageGallery: "Galeri gambar",
+		image: "Gambar {0} dari {1}",
+		zoomIn: "Perbesar",
+		zoomOut: "Perkecil",
+		resetZoom: "Atur ulang zoom",
+		increment: "Tambah",
+		decrement: "Kurangi"
+	},
 	Confirm: {
 		cancel: "Batal",
 		confirm: "OK"

package/lib/es/locale/it-IT.js

@@ -1,5 +1,15 @@
 //#region src/locale/it-IT.ts
 const locale = { design: {
+	Accessibility: {
+		closeBadge: "Chiudi badge",
+		imageGallery: "Galleria immagini",
+		image: "Immagine {0} di {1}",
+		zoomIn: "Ingrandisci",
+		zoomOut: "Riduci",
+		resetZoom: "Reimposta zoom",
+		increment: "Incrementa",
+		decrement: "Decrementa"
+	},
 	Confirm: {
 		cancel: "annulla",
 		confirm: "ok"

package/lib/es/locale/ja-JP.js

@@ -1,5 +1,15 @@
 //#region src/locale/ja-JP.ts
 const locale = { design: {
+	Accessibility: {
+		closeBadge: "バッジを閉じる",
+		imageGallery: "画像ギャラリー",
+		image: "画像 {0}/{1}",
+		zoomIn: "拡大",
+		zoomOut: "縮小",
+		resetZoom: "ズームをリセット",
+		increment: "増加",
+		decrement: "減少"
+	},
 	Confirm: {
 		cancel: "キャンセル",
 		confirm: "確認"

package/lib/es/locale/ko-KR.js

@@ -1,5 +1,15 @@
 //#region src/locale/ko-KR.ts
 const locale = { design: {
+	Accessibility: {
+		closeBadge: "배지 닫기",
+		imageGallery: "이미지 갤러리",
+		image: "이미지 {0}/{1}",
+		zoomIn: "확대",
+		zoomOut: "축소",
+		resetZoom: "확대/축소 초기화",
+		increment: "증가",
+		decrement: "감소"
+	},
 	Confirm: {
 		cancel: "취소",
 		confirm: "확인"

package/lib/es/locale/pl-PL.js

@@ -1,5 +1,15 @@
 //#region src/locale/pl-PL.ts
 const locale = { design: {
+	Accessibility: {
+		closeBadge: "Zamknij plakietkę",
+		imageGallery: "Galeria obrazów",
+		image: "Obraz {0} z {1}",
+		zoomIn: "Powiększ",
+		zoomOut: "Pomniejsz",
+		resetZoom: "Resetuj powiększenie",
+		increment: "Zwiększ",
+		decrement: "Zmniejsz"
+	},
 	Confirm: {
 		cancel: "anuluj",
 		confirm: "ok"

package/lib/es/locale/pt-BR.js

@@ -1,5 +1,15 @@
 //#region src/locale/pt-BR.ts
 const locale = { design: {
+	Accessibility: {
+		closeBadge: "Fechar selo",
+		imageGallery: "Galeria de imagens",
+		image: "Imagem {0} de {1}",
+		zoomIn: "Ampliar",
+		zoomOut: "Reduzir",
+		resetZoom: "Redefinir zoom",
+		increment: "Incrementar",
+		decrement: "Diminuir"
+	},
 	Confirm: {
 		cancel: "cancelar",
 		confirm: "ok"

package/lib/es/locale/ru-RU.js

@@ -1,5 +1,15 @@
 //#region src/locale/ru-RU.ts
 const locale = { design: {
+	Accessibility: {
+		closeBadge: "Закрыть метку",
+		imageGallery: "Галерея изображений",
+		image: "Изображение {0} из {1}",
+		zoomIn: "Увеличить",
+		zoomOut: "Уменьшить",
+		resetZoom: "Сбросить масштаб",
+		increment: "Увеличить значение",
+		decrement: "Уменьшить значение"
+	},
 	Confirm: {
 		cancel: "отмена",
 		confirm: "ок"

package/lib/es/locale/sk-SK.js

@@ -1,5 +1,15 @@
 //#region src/locale/sk-SK.ts
 const locale = { design: {
+	Accessibility: {
+		closeBadge: "Zavrieť odznak",
+		imageGallery: "Galéria obrázkov",
+		image: "Obrázok {0} z {1}",
+		zoomIn: "Priblížiť",
+		zoomOut: "Oddialiť",
+		resetZoom: "Obnoviť priblíženie",
+		increment: "Zvýšiť",
+		decrement: "Znížiť"
+	},
 	Confirm: {
 		cancel: "zrušiť",
 		confirm: "ok"

package/lib/es/locale/vi-VN.js

@@ -1,5 +1,15 @@
 //#region src/locale/vi-VN.ts
 const locale = { design: {
+	Accessibility: {
+		closeBadge: "Đóng huy hiệu",
+		imageGallery: "Thư viện ảnh",
+		image: "Ảnh {0} trên {1}",
+		zoomIn: "Phóng to",
+		zoomOut: "Thu nhỏ",
+		resetZoom: "Đặt lại thu phóng",
+		increment: "Tăng",
+		decrement: "Giảm"
+	},
 	Confirm: {
 		cancel: "Hủy bỏ",
 		confirm: "Xác nhận"

package/lib/es/locale/zh-CN.js

@@ -1,5 +1,15 @@
 //#region src/locale/zh-CN.ts
 const locale = { design: {
+	Accessibility: {
+		closeBadge: "关闭徽章",
+		imageGallery: "图片库",
+		image: "第 {0} 张图片，共 {1} 张",
+		zoomIn: "放大",
+		zoomOut: "缩小",
+		resetZoom: "重置缩放",
+		increment: "增加",
+		decrement: "减少"
+	},
 	Confirm: {
 		cancel: "取消",
 		confirm: "确定"

package/lib/es/locale/zh-HK.js

@@ -1,5 +1,15 @@
 //#region src/locale/zh-HK.ts
 const locale = { design: {
+	Accessibility: {
+		closeBadge: "關閉徽章",
+		imageGallery: "圖片庫",
+		image: "第 {0} 張圖片，共 {1} 張",
+		zoomIn: "放大",
+		zoomOut: "縮小",
+		resetZoom: "重設縮放",
+		increment: "增加",
+		decrement: "減少"
+	},
 	Confirm: {
 		cancel: "取消",
 		confirm: "確定"

package/lib/es/locale/zh-TW.js

@@ -1,5 +1,15 @@
 //#region src/locale/zh-TW.ts
 const locale = { design: {
+	Accessibility: {
+		closeBadge: "關閉徽章",
+		imageGallery: "圖片庫",
+		image: "第 {0} 張圖片，共 {1} 張",
+		zoomIn: "放大",
+		zoomOut: "縮小",
+		resetZoom: "重設縮放",
+		increment: "增加",
+		decrement: "減少"
+	},
 	Confirm: {
 		cancel: "取消",
 		confirm: "確定"