@nice2dev/icons 1.2.1 → 1.2.2

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @nice2dev/icons — Changelog
 
+## 1.2.2
+
+### Patch Changes
+
+- 06eb0d2: 1.2.2 — library texts through the translator, a translator in the packages that had none, and the
+  end of the hook-dependency warnings. Nothing removed or renamed. Upgrade notes:
+  `documentation/omniverk/OMNIVERK_UPGRADE_1.2.2.md`.
+
+  **Translations.** 2,825 new keys in the global dictionary (en, pl, de, fr, es, uk), 80 in the local
+  dictionaries of ui-math, ui-diagrams and ui-presentations: column headers, option labels, texts in
+  conditions and templates, messages given to setters, labels returned by helpers, Polish texts that
+  were the English default. Relative dates through `Intl.RelativeTimeFormat`, plural forms through
+  `…One` / `…Many` keys. ui-science, ui-platform, ui-mobile, auth, licensing, templates, social and
+  the icon tools translate through `useNiceTranslation` (new peer `@nice2dev/ui-core ^1.2.0`);
+  ui-security reads the global translator when its own provider is absent.
+
+  **Additions.** `labelKey` on ui-mobile `TabItem` and `SwipeAction` (the presets set it);
+  `registerWebAuthn` / `authenticateWebAuthn` take the WebAuthn options `NiceWebAuthnButton` used to
+  drop (defaults unchanged); `NiceKeyboardHint` shows `descriptionKey`. Eight icons in
+  `@nice2dev/icons` — `NtdPoint`, `NtdSegment`, `NtdPerpendicular`, `NtdParallel`, `NtdMidpoint`,
+  `NtdAngleBisector`, `NtdGroup`, `NtdUngroup` — and the same names as `NiceIcon` built-ins.
+
+  **Behaviour changes, agreed.** ui-math, ui-diagrams and ui-presentations follow the app's global
+  `NiceI18nProvider` language when their own provider is absent (they stayed English);
+  `NicePresentationEditor` without `lang` takes the surrounding language. Icons drawn as glyphs are
+  Nice icons: the `NiceGeometry` tools, Align / Group / Ungroup / Layout of the diagram toolbar, the
+  presentation grid toggle, zoom and "Add Track" of `NiceDMXTimeline`. icons-gaming and
+  icons-filetypes name an icon by its `title` and are decorative without one, like `createIcon`
+  (screen readers read "GiHeart" or "DOCX file icon"); new optional `title` on the gaming icon props.
+
+  **Hook dependencies (161 → 0).** Fixed along the way: `NiceLowPowerMode` re-rendered forever from
+  mount and overflowed the stack on wake; `GenericPlayer` / `NiceGenericPlayerStage` restarted the
+  track on a volume change; `NiceDMXTimeline` called `onPlay` on every frame and missed cues added
+  during playback; `NiceConflictResolution` `autoResolve` never resolved; `NiceMAM` selected by the
+  previous filter; `NiceRulesEngine` "Run All" kept only the last result; `NiceCodeEditor` saved with
+  the first render's `onSave`; a consumer's cursor handler switched off `NiceCodeEditorAI`
+  completion; `useRadioStream` lost a volume set before the first play; `NiceGameEditor` shortcuts,
+  `useVoiceControl` continuous sessions, `NiceDeviceTrust` with a host storing the score.
+
 ## 1.2.1
 
 ### Patch Changes

package/dist/cjs/NiceDesktopIconExporter.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var uiCore = require('@nice2dev/ui-core');
 var React = require('react');
 
 /* ══════════════════════════════════════════════════════════════════════════════
@@ -626,24 +627,27 @@ Note: iconutil is only available on macOS.
  * ```
  */
 const NiceDesktopIconExporter = ({ icon, initialConfig, onExport, className = '', }) => {
+    const { t } = uiCore.useNiceTranslation();
     const { config, setConfig, icons, isExporting, progress, exportAll, downloadAll, downloadSingle, } = useDesktopIconExporter(icon, initialConfig);
     const handleExport = async () => {
         await exportAll();
         onExport === null || onExport === void 0 ? void 0 : onExport(icons);
     };
     const IconComponent = icon;
-    return (jsxRuntime.jsxs("div", { className: `nice-desktop-icon-exporter ${className}`, children: [jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__preview", children: [jsxRuntime.jsx("h3", { children: "Preview" }), jsxRuntime.jsx("div", { className: "nice-desktop-icon-exporter__preview-grid", children: [16, 32, 48, 64, 128, 256].map((size) => (jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__preview-item", children: [jsxRuntime.jsx("div", { className: "nice-desktop-icon-exporter__preview-box", style: {
+    return (jsxRuntime.jsxs("div", { className: `nice-desktop-icon-exporter ${className}`, children: [jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__preview", children: [jsxRuntime.jsx("h3", { children: t('desktopIconExporter.preview', 'Preview') }), jsxRuntime.jsx("div", { className: "nice-desktop-icon-exporter__preview-grid", children: [16, 32, 48, 64, 128, 256].map((size) => (jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__preview-item", children: [jsxRuntime.jsx("div", { className: "nice-desktop-icon-exporter__preview-box", style: {
                                         width: Math.min(size, 128),
                                         height: Math.min(size, 128),
                                         backgroundColor: config.backgroundColor || '#f0f0f0',
-                                    }, children: jsxRuntime.jsx(IconComponent, { size: Math.min(size, 128) * (1 - config.padding * 2), fill: config.fillColor }) }), jsxRuntime.jsxs("span", { children: [size, "\u00D7", size] })] }, size))) })] }), jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__config", children: [jsxRuntime.jsx("h3", { children: "Configuration" }), jsxRuntime.jsxs("label", { children: ["Icon Name:", jsxRuntime.jsx("input", { type: "text", value: config.name, onChange: (e) => setConfig((c) => ({ ...c, name: e.target.value })) })] }), jsxRuntime.jsxs("label", { children: ["Fill Color:", jsxRuntime.jsx("input", { type: "color", value: config.fillColor, onChange: (e) => setConfig((c) => ({ ...c, fillColor: e.target.value })) })] }), jsxRuntime.jsxs("label", { children: ["Background:", jsxRuntime.jsx("input", { type: "color", value: config.backgroundColor || '#ffffff', onChange: (e) => setConfig((c) => ({ ...c, backgroundColor: e.target.value })) }), jsxRuntime.jsx("button", { onClick: () => setConfig((c) => ({ ...c, backgroundColor: undefined })), children: "Transparent" })] }), jsxRuntime.jsxs("label", { children: ["Padding: ", Math.round(config.padding * 100), "%", jsxRuntime.jsx("input", { type: "range", min: "0", max: "0.3", step: "0.01", value: config.padding, onChange: (e) => setConfig((c) => ({ ...c, padding: parseFloat(e.target.value) })) })] }), jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__platforms", children: [jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.includeWindows, onChange: (e) => setConfig((c) => ({ ...c, includeWindows: e.target.checked })) }), "Windows (.ico)"] }), jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.includeMacOS, onChange: (e) => setConfig((c) => ({ ...c, includeMacOS: e.target.checked })) }), "macOS (.iconset)"] }), jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.includeLinux, onChange: (e) => setConfig((c) => ({ ...c, includeLinux: e.target.checked })) }), "Linux (hicolor)"] }), jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.includeRetina, onChange: (e) => setConfig((c) => ({ ...c, includeRetina: e.target.checked })) }), "HiDPI/Retina (@2x, @3x)"] })] }), jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__sizes", children: [jsxRuntime.jsx("h4", { children: "Sizes:" }), DESKTOP_ICON_SIZES.map(({ size, label }) => (jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.sizes.includes(size), onChange: (e) => {
+                                    }, children: jsxRuntime.jsx(IconComponent, { size: Math.min(size, 128) * (1 - config.padding * 2), fill: config.fillColor }) }), jsxRuntime.jsxs("span", { children: [size, "\u00D7", size] })] }, size))) })] }), jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__config", children: [jsxRuntime.jsx("h3", { children: t('desktopIconExporter.configuration', 'Configuration') }), jsxRuntime.jsxs("label", { children: [t('desktopIconExporter.iconName', 'Icon Name:'), jsxRuntime.jsx("input", { type: "text", value: config.name, onChange: (e) => setConfig((c) => ({ ...c, name: e.target.value })) })] }), jsxRuntime.jsxs("label", { children: [t('desktopIconExporter.fillColor', 'Fill Color:'), jsxRuntime.jsx("input", { type: "color", value: config.fillColor, onChange: (e) => setConfig((c) => ({ ...c, fillColor: e.target.value })) })] }), jsxRuntime.jsxs("label", { children: [t('desktopIconExporter.background', 'Background:'), jsxRuntime.jsx("input", { type: "color", value: config.backgroundColor || '#ffffff', onChange: (e) => setConfig((c) => ({ ...c, backgroundColor: e.target.value })) }), jsxRuntime.jsx("button", { onClick: () => setConfig((c) => ({ ...c, backgroundColor: undefined })), children: t('desktopIconExporter.transparent', 'Transparent') })] }), jsxRuntime.jsxs("label", { children: [t('desktopIconExporter.padding', 'Padding: {padding}%').replace('{padding}', String(Math.round(config.padding * 100))), jsxRuntime.jsx("input", { type: "range", min: "0", max: "0.3", step: "0.01", value: config.padding, onChange: (e) => setConfig((c) => ({ ...c, padding: parseFloat(e.target.value) })) })] }), jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__platforms", children: [jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.includeWindows, onChange: (e) => setConfig((c) => ({ ...c, includeWindows: e.target.checked })) }), t('desktopIconExporter.windowsIco', 'Windows (.ico)')] }), jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.includeMacOS, onChange: (e) => setConfig((c) => ({ ...c, includeMacOS: e.target.checked })) }), t('desktopIconExporter.macosIconset', 'macOS (.iconset)')] }), jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.includeLinux, onChange: (e) => setConfig((c) => ({ ...c, includeLinux: e.target.checked })) }), t('desktopIconExporter.linuxHicolor', 'Linux (hicolor)')] }), jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.includeRetina, onChange: (e) => setConfig((c) => ({ ...c, includeRetina: e.target.checked })) }), t('desktopIconExporter.hidpiRetina2x3x', 'HiDPI/Retina (@2x, @3x)')] })] }), jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__sizes", children: [jsxRuntime.jsx("h4", { children: t('desktopIconExporter.sizes', 'Sizes:') }), DESKTOP_ICON_SIZES.map(({ size, label }) => (jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.sizes.includes(size), onChange: (e) => {
                                             setConfig((c) => ({
                                                 ...c,
                                                 sizes: e.target.checked
                                                     ? [...c.sizes, size].sort((a, b) => a - b)
                                                     : c.sizes.filter((s) => s !== size),
                                             }));
-                                        } }), label] }, size)))] })] }), jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__actions", children: [jsxRuntime.jsx("button", { onClick: handleExport, disabled: isExporting, children: isExporting ? `Exporting... ${Math.round(progress)}%` : 'Generate Icons' }), jsxRuntime.jsx("button", { onClick: downloadAll, disabled: isExporting || icons.length === 0, children: "Download All (ZIP)" })] }), icons.length > 0 && (jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__results", children: [jsxRuntime.jsxs("h3", { children: ["Generated Icons (", icons.length, ")"] }), jsxRuntime.jsx("div", { className: "nice-desktop-icon-exporter__results-grid", children: icons.map((exportedIcon) => (jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__result-item", children: [jsxRuntime.jsx("img", { src: exportedIcon.dataUrl, alt: exportedIcon.filename }), jsxRuntime.jsx("span", { children: exportedIcon.filename }), jsxRuntime.jsx("button", { onClick: () => downloadSingle(exportedIcon), children: "Download" })] }, exportedIcon.filename))) })] }))] }));
+                                        } }), label] }, size)))] })] }), jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__actions", children: [jsxRuntime.jsx("button", { onClick: handleExport, disabled: isExporting, children: isExporting
+                            ? t('desktopIconExporter.exporting', 'Exporting... {progress}%').replace('{progress}', String(Math.round(progress)))
+                            : t('desktopIconExporter.generateIcons', 'Generate Icons') }), jsxRuntime.jsx("button", { onClick: downloadAll, disabled: isExporting || icons.length === 0, children: t('desktopIconExporter.downloadAllZip', 'Download All (ZIP)') })] }), icons.length > 0 && (jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__results", children: [jsxRuntime.jsx("h3", { children: t('desktopIconExporter.generatedIcons', 'Generated Icons ({icons})').replace('{icons}', String(icons.length)) }), jsxRuntime.jsx("div", { className: "nice-desktop-icon-exporter__results-grid", children: icons.map((exportedIcon) => (jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__result-item", children: [jsxRuntime.jsx("img", { src: exportedIcon.dataUrl, alt: exportedIcon.filename }), jsxRuntime.jsx("span", { children: exportedIcon.filename }), jsxRuntime.jsx("button", { onClick: () => downloadSingle(exportedIcon), children: t('desktopIconExporter.download', 'Download') })] }, exportedIcon.filename))) })] }))] }));
 };
 
 exports.DESKTOP_ICON_SIZES = DESKTOP_ICON_SIZES;

package/dist/cjs/NiceFaviconGenerator.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var uiCore = require('@nice2dev/ui-core');
 var React = require('react');
 var actions = require('./icons/actions.js');
 
@@ -225,6 +226,7 @@ function useFaviconGenerator(icon, fill = '#1e1e1e', initialConfig) {
  * Favicon generator component for creating all favicon variants.
  */
 function NiceFaviconGenerator({ icon, fill = '#1e1e1e', manifestConfig, onGenerate, className = '', }) {
+    const { t } = uiCore.useNiceTranslation();
     const { config, setConfig, assets, isGenerating, generate, downloadAll, downloadSingle, getManifestJson, getHtmlTags, } = useFaviconGenerator(icon, fill, manifestConfig);
     const [activeTab, setActiveTab] = React.useState('preview');
     const handleGenerate = async () => {
@@ -233,10 +235,12 @@ function NiceFaviconGenerator({ icon, fill = '#1e1e1e', manifestConfig, onGenera
             onGenerate(assets, getManifestJson());
         }
     };
-    return (jsxRuntime.jsxs("div", { className: `nice-favicon-generator ${className}`, style: styles.container, children: [jsxRuntime.jsxs("div", { style: styles.section, children: [jsxRuntime.jsx("h3", { style: styles.sectionTitle, children: "Manifest Configuration" }), jsxRuntime.jsxs("div", { style: styles.formGrid, children: [jsxRuntime.jsxs("div", { style: styles.formGroup, children: [jsxRuntime.jsx("label", { style: styles.label, children: "App Name" }), jsxRuntime.jsx("input", { type: "text", value: config.name, onChange: (e) => setConfig((c) => ({ ...c, name: e.target.value })), style: styles.input })] }), jsxRuntime.jsxs("div", { style: styles.formGroup, children: [jsxRuntime.jsx("label", { style: styles.label, children: "Short Name" }), jsxRuntime.jsx("input", { type: "text", value: config.shortName, onChange: (e) => setConfig((c) => ({ ...c, shortName: e.target.value })), style: styles.input })] }), jsxRuntime.jsxs("div", { style: styles.formGroup, children: [jsxRuntime.jsx("label", { style: styles.label, children: "Theme Color" }), jsxRuntime.jsx("input", { type: "color", value: config.themeColor, onChange: (e) => setConfig((c) => ({ ...c, themeColor: e.target.value })), style: styles.colorInput })] }), jsxRuntime.jsxs("div", { style: styles.formGroup, children: [jsxRuntime.jsx("label", { style: styles.label, children: "Background Color" }), jsxRuntime.jsx("input", { type: "color", value: config.backgroundColor, onChange: (e) => setConfig((c) => ({ ...c, backgroundColor: e.target.value })), style: styles.colorInput })] }), jsxRuntime.jsxs("div", { style: styles.formGroup, children: [jsxRuntime.jsx("label", { style: styles.label, children: "Display Mode" }), jsxRuntime.jsxs("select", { value: config.display, onChange: (e) => setConfig((c) => ({ ...c, display: e.target.value })), style: styles.input, children: [jsxRuntime.jsx("option", { value: "standalone", children: "Standalone" }), jsxRuntime.jsx("option", { value: "fullscreen", children: "Fullscreen" }), jsxRuntime.jsx("option", { value: "minimal-ui", children: "Minimal UI" }), jsxRuntime.jsx("option", { value: "browser", children: "Browser" })] })] }), jsxRuntime.jsxs("div", { style: styles.formGroup, children: [jsxRuntime.jsx("label", { style: styles.label, children: "Start URL" }), jsxRuntime.jsx("input", { type: "text", value: config.startUrl, onChange: (e) => setConfig((c) => ({ ...c, startUrl: e.target.value })), style: styles.input })] })] })] }), jsxRuntime.jsxs("div", { style: styles.actions, children: [jsxRuntime.jsx("button", { onClick: handleGenerate, disabled: isGenerating, style: {
+    return (jsxRuntime.jsxs("div", { className: `nice-favicon-generator ${className}`, style: styles.container, children: [jsxRuntime.jsxs("div", { style: styles.section, children: [jsxRuntime.jsx("h3", { style: styles.sectionTitle, children: t('faviconGenerator.manifestConfiguration', 'Manifest Configuration') }), jsxRuntime.jsxs("div", { style: styles.formGrid, children: [jsxRuntime.jsxs("div", { style: styles.formGroup, children: [jsxRuntime.jsx("label", { style: styles.label, children: t('faviconGenerator.appName', 'App Name') }), jsxRuntime.jsx("input", { type: "text", value: config.name, onChange: (e) => setConfig((c) => ({ ...c, name: e.target.value })), style: styles.input })] }), jsxRuntime.jsxs("div", { style: styles.formGroup, children: [jsxRuntime.jsx("label", { style: styles.label, children: t('faviconGenerator.shortName', 'Short Name') }), jsxRuntime.jsx("input", { type: "text", value: config.shortName, onChange: (e) => setConfig((c) => ({ ...c, shortName: e.target.value })), style: styles.input })] }), jsxRuntime.jsxs("div", { style: styles.formGroup, children: [jsxRuntime.jsx("label", { style: styles.label, children: t('faviconGenerator.themeColor', 'Theme Color') }), jsxRuntime.jsx("input", { type: "color", value: config.themeColor, onChange: (e) => setConfig((c) => ({ ...c, themeColor: e.target.value })), style: styles.colorInput })] }), jsxRuntime.jsxs("div", { style: styles.formGroup, children: [jsxRuntime.jsx("label", { style: styles.label, children: t('faviconGenerator.backgroundColor', 'Background Color') }), jsxRuntime.jsx("input", { type: "color", value: config.backgroundColor, onChange: (e) => setConfig((c) => ({ ...c, backgroundColor: e.target.value })), style: styles.colorInput })] }), jsxRuntime.jsxs("div", { style: styles.formGroup, children: [jsxRuntime.jsx("label", { style: styles.label, children: t('faviconGenerator.displayMode', 'Display Mode') }), jsxRuntime.jsxs("select", { value: config.display, onChange: (e) => setConfig((c) => ({ ...c, display: e.target.value })), style: styles.input, children: [jsxRuntime.jsx("option", { value: "standalone", children: t('faviconGenerator.standalone', 'Standalone') }), jsxRuntime.jsx("option", { value: "fullscreen", children: t('faviconGenerator.fullscreen', 'Fullscreen') }), jsxRuntime.jsx("option", { value: "minimal-ui", children: t('faviconGenerator.minimalUi', 'Minimal UI') }), jsxRuntime.jsx("option", { value: "browser", children: t('faviconGenerator.browser', 'Browser') })] })] }), jsxRuntime.jsxs("div", { style: styles.formGroup, children: [jsxRuntime.jsx("label", { style: styles.label, children: t('faviconGenerator.startUrl', 'Start URL') }), jsxRuntime.jsx("input", { type: "text", value: config.startUrl, onChange: (e) => setConfig((c) => ({ ...c, startUrl: e.target.value })), style: styles.input })] })] })] }), jsxRuntime.jsxs("div", { style: styles.actions, children: [jsxRuntime.jsx("button", { onClick: handleGenerate, disabled: isGenerating, style: {
                             ...styles.button,
                             ...(isGenerating ? styles.buttonDisabled : styles.buttonPrimary),
-                        }, children: isGenerating ? 'Generating...' : 'Generate Favicons' }), assets.length > 0 && (jsxRuntime.jsx("button", { onClick: downloadAll, style: { ...styles.button, ...styles.buttonSecondary }, children: "Download All" }))] }), assets.length > 0 && (jsxRuntime.jsxs("div", { style: styles.section, children: [jsxRuntime.jsxs("div", { style: styles.tabs, children: [jsxRuntime.jsx("button", { style: { ...styles.tab, ...(activeTab === 'preview' ? styles.tabActive : {}) }, onClick: () => setActiveTab('preview'), children: "Preview" }), jsxRuntime.jsx("button", { style: { ...styles.tab, ...(activeTab === 'manifest' ? styles.tabActive : {}) }, onClick: () => setActiveTab('manifest'), children: "manifest.json" }), jsxRuntime.jsx("button", { style: { ...styles.tab, ...(activeTab === 'html' ? styles.tabActive : {}) }, onClick: () => setActiveTab('html'), children: "HTML Tags" })] }), activeTab === 'preview' && (jsxRuntime.jsx("div", { style: styles.assetGrid, children: assets.map((asset) => (jsxRuntime.jsxs("div", { style: styles.assetCard, children: [jsxRuntime.jsx("div", { style: styles.assetPreview, children: jsxRuntime.jsx("img", { src: asset.dataUrl, alt: asset.filename, style: { maxWidth: '64px', maxHeight: '64px' } }) }), jsxRuntime.jsxs("div", { style: styles.assetInfo, children: [jsxRuntime.jsx("span", { style: styles.assetName, children: asset.filename }), jsxRuntime.jsxs("span", { style: styles.assetSize, children: [asset.size, "x", asset.size] }), jsxRuntime.jsx("span", { style: styles.assetPurpose, children: asset.purpose })] }), jsxRuntime.jsx("button", { onClick: () => downloadSingle(asset), style: styles.downloadBtn, "aria-label": `Download ${asset.filename}`, children: jsxRuntime.jsx(actions.NtdDownload, { size: 14, variant: "outline" }) })] }, asset.filename))) })), activeTab === 'manifest' && jsxRuntime.jsx("pre", { style: styles.codeBlock, children: getManifestJson() }), activeTab === 'html' && jsxRuntime.jsx("pre", { style: styles.codeBlock, children: getHtmlTags() })] })), jsxRuntime.jsxs("div", { style: styles.reference, children: [jsxRuntime.jsx("h4", { style: styles.referenceTitle, children: "Favicon Sizes Reference" }), jsxRuntime.jsxs("table", { style: styles.table, children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx("th", { style: styles.th, children: "File" }), jsxRuntime.jsx("th", { style: styles.th, children: "Size" }), jsxRuntime.jsx("th", { style: styles.th, children: "Purpose" })] }) }), jsxRuntime.jsx("tbody", { children: FAVICON_SIZES.map((f) => (jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsxs("td", { style: styles.td, children: [f.name, ".", f.format] }), jsxRuntime.jsxs("td", { style: styles.td, children: [f.size, "x", f.size] }), jsxRuntime.jsx("td", { style: styles.td, children: f.purpose })] }, f.name))) })] })] })] }));
+                        }, children: isGenerating
+                            ? t('faviconGenerator.generating', 'Generating...')
+                            : t('faviconGenerator.generateFavicons', 'Generate Favicons') }), assets.length > 0 && (jsxRuntime.jsx("button", { onClick: downloadAll, style: { ...styles.button, ...styles.buttonSecondary }, children: t('faviconGenerator.downloadAll', 'Download All') }))] }), assets.length > 0 && (jsxRuntime.jsxs("div", { style: styles.section, children: [jsxRuntime.jsxs("div", { style: styles.tabs, children: [jsxRuntime.jsx("button", { style: { ...styles.tab, ...(activeTab === 'preview' ? styles.tabActive : {}) }, onClick: () => setActiveTab('preview'), children: t('faviconGenerator.preview', 'Preview') }), jsxRuntime.jsx("button", { style: { ...styles.tab, ...(activeTab === 'manifest' ? styles.tabActive : {}) }, onClick: () => setActiveTab('manifest'), children: "manifest.json" }), jsxRuntime.jsx("button", { style: { ...styles.tab, ...(activeTab === 'html' ? styles.tabActive : {}) }, onClick: () => setActiveTab('html'), children: t('faviconGenerator.htmlTags', 'HTML Tags') })] }), activeTab === 'preview' && (jsxRuntime.jsx("div", { style: styles.assetGrid, children: assets.map((asset) => (jsxRuntime.jsxs("div", { style: styles.assetCard, children: [jsxRuntime.jsx("div", { style: styles.assetPreview, children: jsxRuntime.jsx("img", { src: asset.dataUrl, alt: asset.filename, style: { maxWidth: '64px', maxHeight: '64px' } }) }), jsxRuntime.jsxs("div", { style: styles.assetInfo, children: [jsxRuntime.jsx("span", { style: styles.assetName, children: asset.filename }), jsxRuntime.jsxs("span", { style: styles.assetSize, children: [asset.size, "x", asset.size] }), jsxRuntime.jsx("span", { style: styles.assetPurpose, children: asset.purpose })] }), jsxRuntime.jsx("button", { onClick: () => downloadSingle(asset), style: styles.downloadBtn, "aria-label": t('faviconGenerator.download', 'Download {filename}').replace('{filename}', String(asset.filename)), children: jsxRuntime.jsx(actions.NtdDownload, { size: 14, variant: "outline" }) })] }, asset.filename))) })), activeTab === 'manifest' && jsxRuntime.jsx("pre", { style: styles.codeBlock, children: getManifestJson() }), activeTab === 'html' && jsxRuntime.jsx("pre", { style: styles.codeBlock, children: getHtmlTags() })] })), jsxRuntime.jsxs("div", { style: styles.reference, children: [jsxRuntime.jsx("h4", { style: styles.referenceTitle, children: t('faviconGenerator.faviconSizesReference', 'Favicon Sizes Reference') }), jsxRuntime.jsxs("table", { style: styles.table, children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx("th", { style: styles.th, children: t('faviconGenerator.file', 'File') }), jsxRuntime.jsx("th", { style: styles.th, children: t('faviconGenerator.size', 'Size') }), jsxRuntime.jsx("th", { style: styles.th, children: t('faviconGenerator.purpose', 'Purpose') })] }) }), jsxRuntime.jsx("tbody", { children: FAVICON_SIZES.map((f) => (jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsxs("td", { style: styles.td, children: [f.name, ".", f.format] }), jsxRuntime.jsxs("td", { style: styles.td, children: [f.size, "x", f.size] }), jsxRuntime.jsx("td", { style: styles.td, children: f.purpose })] }, f.name))) })] })] })] }));
 }
 /* ══════════════════════════════════════════════════════════════════════════════
    Styles

package/dist/cjs/NiceIconPicker.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var uiCore = require('@nice2dev/ui-core');
 var React = require('react');
 var actions = require('./icons/actions.js');
 var files = require('./icons/files.js');
@@ -71,8 +72,9 @@ function saveToStorage(key, value) {
  * }
  * ```
  */
-const NiceIconPicker = /* @__PURE__ */ React.forwardRef(function NiceIconPicker({ icons, value = null, values = [], onChange, onChangeMulti, multiSelect = false, maxSelections, placeholder = 'Select icon…', variant = 'solid', gridIconSize = 'md', triggerIconSize = 'sm', categories: categoriesProp, className, disabled = false, clearable = true, virtualized = false, virtualizedItemCount = 100, showHistory = false, showFavorites = false, storageKeyPrefix = 'ntd-icon-picker', enableDragAndDrop = false, onDragStart, onDragEnd, }, ref) {
+const NiceIconPicker = /* @__PURE__ */ React.forwardRef(function NiceIconPicker({ icons, value = null, values = [], onChange, onChangeMulti, multiSelect = false, maxSelections, placeholder, variant = 'solid', gridIconSize = 'md', triggerIconSize = 'sm', categories: categoriesProp, className, disabled = false, clearable = true, virtualized = false, virtualizedItemCount = 100, showHistory = false, showFavorites = false, storageKeyPrefix = 'ntd-icon-picker', enableDragAndDrop = false, onDragStart, onDragEnd, }, ref) {
     var _a;
+    const { t } = uiCore.useNiceTranslation();
     const [isOpen, setIsOpen] = React.useState(false);
     const [search, setSearch] = React.useState('');
     const [activeCategory, setActiveCategory] = React.useState(null);
@@ -388,19 +390,27 @@ const NiceIconPicker = /* @__PURE__ */ React.forwardRef(function NiceIconPicker(
             if (selectedEntries.length === 1) {
                 return readableName(selectedEntries[0].name);
             }
-            return `${selectedEntries.length} icons selected`;
+            return t('iconPicker.iconsSelected', '{count} icons selected').replace('{count}', String(selectedEntries.length));
         }
-        return selectedEntry ? readableName(selectedEntry.name) : placeholder;
-    }, [multiSelect, selectedEntries, selectedEntry, placeholder]);
-    return (jsxRuntime.jsxs("div", { ref: rootRef, className: `ntd-picker${isOpen ? ' ntd-picker--open' : ''}${disabled ? ' ntd-picker--disabled' : ''}${multiSelect ? ' ntd-picker--multi' : ''}${className ? ` ${className}` : ''}`, children: [jsxRuntime.jsxs("button", { type: "button", className: "ntd-picker-trigger", onClick: handleToggle, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [jsxRuntime.jsx("span", { className: "ntd-picker-trigger-icon", children: selectedEntry ? (jsxRuntime.jsx(selectedEntry.Component, { size: triggerIconSize, variant: variant })) : multiSelect && selectedEntries.length > 1 ? (jsxRuntime.jsx("span", { className: "ntd-picker-multi-badge", children: selectedEntries.length })) : (jsxRuntime.jsx(files.NtdGrid, { size: 16, variant: "outline" })) }), jsxRuntime.jsx("span", { className: `ntd-picker-trigger-label${!selectedEntry && selectedEntries.length === 0 ? ' ntd-picker-trigger-placeholder' : ''}`, children: triggerLabel }), jsxRuntime.jsx("span", { className: "ntd-picker-trigger-chevron", children: jsxRuntime.jsx(Chevron, {}) })] }), isOpen && (jsxRuntime.jsxs("div", { className: "ntd-picker-dropdown", role: "listbox", children: [jsxRuntime.jsxs("div", { className: "ntd-picker-search", children: [jsxRuntime.jsx("span", { className: "ntd-picker-search-icon", children: jsxRuntime.jsx(SearchIcon, {}) }), jsxRuntime.jsx("input", { ref: searchInputRef, type: "text", placeholder: "Search icons\u2026", value: search, onChange: (e) => setSearch(e.target.value), "aria-label": "Search icons" })] }), (allCategories.length > 1 || showFavorites || showHistory) && (jsxRuntime.jsxs("div", { className: "ntd-picker-tabs", role: "tablist", children: [jsxRuntime.jsx("button", { type: "button", className: `ntd-picker-tab${activeCategory === null ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory(null), role: "tab", "aria-selected": activeCategory === null, children: "All" }), showFavorites && (jsxRuntime.jsxs("button", { type: "button", className: `ntd-picker-tab ntd-picker-tab-special${activeCategory === '__favorites__' ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory('__favorites__'), role: "tab", "aria-selected": activeCategory === '__favorites__', title: "Favorites", children: [jsxRuntime.jsx(StarIcon, { filled: true }), " Favorites", favorites.length > 0 && (jsxRuntime.jsx("span", { className: "ntd-picker-tab-count", children: favorites.length }))] })), showHistory && history.length > 0 && (jsxRuntime.jsxs("button", { type: "button", className: `ntd-picker-tab ntd-picker-tab-special${activeCategory === '__history__' ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory('__history__'), role: "tab", "aria-selected": activeCategory === '__history__', title: "Recently used", children: [jsxRuntime.jsx(ClockIcon, {}), " Recent"] })), allCategories.map((cat) => (jsxRuntime.jsx("button", { type: "button", className: `ntd-picker-tab${activeCategory === cat ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory(cat), role: "tab", "aria-selected": activeCategory === cat, children: cat }, cat)))] })), jsxRuntime.jsx("div", { className: "ntd-picker-grid-wrap", ref: gridWrapRef, children: filtered.length === 0 ? (jsxRuntime.jsxs("div", { className: "ntd-picker-empty", children: [jsxRuntime.jsx("div", { className: "ntd-picker-empty-icon", children: jsxRuntime.jsx(media.NtdInbox, { size: 28, variant: "outline" }) }), activeCategory === '__favorites__'
-                                    ? 'No favorites yet. Click the star icon to add.'
+        return selectedEntry
+            ? readableName(selectedEntry.name)
+            : (placeholder !== null && placeholder !== void 0 ? placeholder : t('iconPicker.selectIcon', 'Select icon…'));
+    }, [multiSelect, selectedEntries, selectedEntry, placeholder, t]);
+    return (jsxRuntime.jsxs("div", { ref: rootRef, className: `ntd-picker${isOpen ? ' ntd-picker--open' : ''}${disabled ? ' ntd-picker--disabled' : ''}${multiSelect ? ' ntd-picker--multi' : ''}${className ? ` ${className}` : ''}`, children: [jsxRuntime.jsxs("button", { type: "button", className: "ntd-picker-trigger", onClick: handleToggle, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [jsxRuntime.jsx("span", { className: "ntd-picker-trigger-icon", children: selectedEntry ? (jsxRuntime.jsx(selectedEntry.Component, { size: triggerIconSize, variant: variant })) : multiSelect && selectedEntries.length > 1 ? (jsxRuntime.jsx("span", { className: "ntd-picker-multi-badge", children: selectedEntries.length })) : (jsxRuntime.jsx(files.NtdGrid, { size: 16, variant: "outline" })) }), jsxRuntime.jsx("span", { className: `ntd-picker-trigger-label${!selectedEntry && selectedEntries.length === 0 ? ' ntd-picker-trigger-placeholder' : ''}`, children: triggerLabel }), jsxRuntime.jsx("span", { className: "ntd-picker-trigger-chevron", children: jsxRuntime.jsx(Chevron, {}) })] }), isOpen && (jsxRuntime.jsxs("div", { className: "ntd-picker-dropdown", role: "listbox", children: [jsxRuntime.jsxs("div", { className: "ntd-picker-search", children: [jsxRuntime.jsx("span", { className: "ntd-picker-search-icon", children: jsxRuntime.jsx(SearchIcon, {}) }), jsxRuntime.jsx("input", { ref: searchInputRef, type: "text", placeholder: t('iconPicker.searchIcons', 'Search icons…'), value: search, onChange: (e) => setSearch(e.target.value), "aria-label": t('iconPicker.searchIcons2', 'Search icons') })] }), (allCategories.length > 1 || showFavorites || showHistory) && (jsxRuntime.jsxs("div", { className: "ntd-picker-tabs", role: "tablist", children: [jsxRuntime.jsx("button", { type: "button", className: `ntd-picker-tab${activeCategory === null ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory(null), role: "tab", "aria-selected": activeCategory === null, children: t('iconPicker.all', 'All') }), showFavorites && (jsxRuntime.jsxs("button", { type: "button", className: `ntd-picker-tab ntd-picker-tab-special${activeCategory === '__favorites__' ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory('__favorites__'), role: "tab", "aria-selected": activeCategory === '__favorites__', title: t('iconPicker.favorites', 'Favorites'), children: [jsxRuntime.jsx(StarIcon, { filled: true }), " ", t('iconPicker.favorites', 'Favorites'), favorites.length > 0 && (jsxRuntime.jsx("span", { className: "ntd-picker-tab-count", children: favorites.length }))] })), showHistory && history.length > 0 && (jsxRuntime.jsxs("button", { type: "button", className: `ntd-picker-tab ntd-picker-tab-special${activeCategory === '__history__' ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory('__history__'), role: "tab", "aria-selected": activeCategory === '__history__', title: t('iconPicker.recentlyUsed', 'Recently used'), children: [jsxRuntime.jsx(ClockIcon, {}), " ", t('iconPicker.recent', 'Recent')] })), allCategories.map((cat) => (jsxRuntime.jsx("button", { type: "button", className: `ntd-picker-tab${activeCategory === cat ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory(cat), role: "tab", "aria-selected": activeCategory === cat, children: cat }, cat)))] })), jsxRuntime.jsx("div", { className: "ntd-picker-grid-wrap", ref: gridWrapRef, children: filtered.length === 0 ? (jsxRuntime.jsxs("div", { className: "ntd-picker-empty", children: [jsxRuntime.jsx("div", { className: "ntd-picker-empty-icon", children: jsxRuntime.jsx(media.NtdInbox, { size: 28, variant: "outline" }) }), activeCategory === '__favorites__'
+                                    ? t('iconPicker.noFavoritesYetClickThe', 'No favorites yet. Click the star icon to add.')
                                     : activeCategory === '__history__'
-                                        ? 'No recent icons.'
-                                        : 'No icons found'] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [virtualized && visibleRange.start > 0 && (jsxRuntime.jsx("div", { style: { height: Math.floor(visibleRange.start / 6) * 48 } })), Array.from(grouped.entries()).map(([category, entries]) => (jsxRuntime.jsxs("div", { children: [!activeCategory && !(activeCategory === null || activeCategory === void 0 ? void 0 : activeCategory.startsWith('__')) && (jsxRuntime.jsx("div", { className: "ntd-picker-category-label", children: category })), jsxRuntime.jsx("div", { className: "ntd-picker-grid", children: entries.map((entry) => {
+                                        ? t('iconPicker.noRecentIcons', 'No recent icons.')
+                                        : t('iconPicker.noIconsFound', 'No icons found')] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [virtualized && visibleRange.start > 0 && (jsxRuntime.jsx("div", { style: { height: Math.floor(visibleRange.start / 6) * 48 } })), Array.from(grouped.entries()).map(([category, entries]) => (jsxRuntime.jsxs("div", { children: [!activeCategory && !(activeCategory === null || activeCategory === void 0 ? void 0 : activeCategory.startsWith('__')) && (jsxRuntime.jsx("div", { className: "ntd-picker-category-label", children: category })), jsxRuntime.jsx("div", { className: "ntd-picker-grid", children: entries.map((entry) => {
                                                 const isSelected = selectedValues.includes(entry.name);
                                                 const isFavorite = favorites.includes(entry.name);
-                                                return (jsxRuntime.jsxs("button", { type: "button", className: `ntd-picker-cell${isSelected ? ' ntd-picker-cell--selected' : ''}${multiSelect ? ' ntd-picker-cell--multi-select' : ''}${enableDragAndDrop ? ' ntd-picker-cell--draggable' : ''}`, onClick: () => handleSelect(entry), "data-name": readableName(entry.name), role: "option", "aria-selected": isSelected, title: readableName(entry.name), draggable: enableDragAndDrop, onDragStart: enableDragAndDrop ? (e) => handleDragStart(entry, e) : undefined, onDragEnd: enableDragAndDrop ? (e) => handleDragEnd(entry, e) : undefined, children: [jsxRuntime.jsx(entry.Component, { size: gridIconSize, variant: variant }), multiSelect && isSelected && (jsxRuntime.jsx("span", { className: "ntd-picker-cell-check", children: jsxRuntime.jsx(CheckIcon, {}) })), showFavorites && (jsxRuntime.jsx("button", { type: "button", className: `ntd-picker-cell-fav${isFavorite ? ' ntd-picker-cell-fav--active' : ''}`, onClick: (e) => handleFavoriteClick(e, entry.name), title: isFavorite ? 'Remove from favorites' : 'Add to favorites', children: jsxRuntime.jsx(StarIcon, { filled: isFavorite }) }))] }, entry.name));
-                                            }) })] }, category))), virtualized && visibleRange.end < filtered.length && (jsxRuntime.jsx("div", { style: { height: Math.ceil((filtered.length - visibleRange.end) / 6) * 48 } }))] })) }), jsxRuntime.jsxs("div", { className: "ntd-picker-footer", children: [jsxRuntime.jsxs("span", { className: "ntd-picker-count", children: [filtered.length, " icon", filtered.length !== 1 ? 's' : '', multiSelect && selectedValues.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" \u2022 ", selectedValues.length, " selected"] })), maxSelections && multiSelect && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" (max ", maxSelections, ")"] })] }), clearable && selectedValues.length > 0 && (jsxRuntime.jsxs("button", { type: "button", className: "ntd-picker-clear", onClick: handleClear, children: ["Clear", multiSelect ? ' all' : ' selection'] })), multiSelect && (jsxRuntime.jsx("button", { type: "button", className: "ntd-picker-done", onClick: () => setIsOpen(false), children: "Done" }))] })] }))] }));
+                                                return (jsxRuntime.jsxs("button", { type: "button", className: `ntd-picker-cell${isSelected ? ' ntd-picker-cell--selected' : ''}${multiSelect ? ' ntd-picker-cell--multi-select' : ''}${enableDragAndDrop ? ' ntd-picker-cell--draggable' : ''}`, onClick: () => handleSelect(entry), "data-name": readableName(entry.name), role: "option", "aria-selected": isSelected, title: readableName(entry.name), draggable: enableDragAndDrop, onDragStart: enableDragAndDrop ? (e) => handleDragStart(entry, e) : undefined, onDragEnd: enableDragAndDrop ? (e) => handleDragEnd(entry, e) : undefined, children: [jsxRuntime.jsx(entry.Component, { size: gridIconSize, variant: variant }), multiSelect && isSelected && (jsxRuntime.jsx("span", { className: "ntd-picker-cell-check", children: jsxRuntime.jsx(CheckIcon, {}) })), showFavorites && (jsxRuntime.jsx("button", { type: "button", className: `ntd-picker-cell-fav${isFavorite ? ' ntd-picker-cell-fav--active' : ''}`, onClick: (e) => handleFavoriteClick(e, entry.name), title: isFavorite
+                                                                ? t('iconPicker.removeFromFavorites', 'Remove from favorites')
+                                                                : t('iconPicker.addToFavorites', 'Add to favorites'), children: jsxRuntime.jsx(StarIcon, { filled: isFavorite }) }))] }, entry.name));
+                                            }) })] }, category))), virtualized && visibleRange.end < filtered.length && (jsxRuntime.jsx("div", { style: { height: Math.ceil((filtered.length - visibleRange.end) / 6) * 48 } }))] })) }), jsxRuntime.jsxs("div", { className: "ntd-picker-footer", children: [jsxRuntime.jsxs("span", { className: "ntd-picker-count", children: [(filtered.length === 1
+                                        ? t('iconPicker.iconCountOne', '{count} icon')
+                                        : t('iconPicker.iconCountMany', '{count} icons')).replace('{count}', String(filtered.length)), multiSelect && selectedValues.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [' ', t('iconPicker.selected', '• {selectedValues} selected').replace('{selectedValues}', String(selectedValues.length))] })), maxSelections && multiSelect && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [' ', t('iconPicker.max', '(max {maxSelections})').replace('{maxSelections}', String(maxSelections))] }))] }), clearable && selectedValues.length > 0 && (jsxRuntime.jsx("button", { type: "button", className: "ntd-picker-clear", onClick: handleClear, children: multiSelect
+                                    ? t('iconPicker.clearAll', 'Clear all')
+                                    : t('iconPicker.clearSelection', 'Clear selection') })), multiSelect && (jsxRuntime.jsx("button", { type: "button", className: "ntd-picker-done", onClick: () => setIsOpen(false), children: t('iconPicker.done', 'Done') }))] })] }))] }));
 });
 
 exports.NiceIconPicker = NiceIconPicker;

package/dist/cjs/NiceIconPreview.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var uiCore = require('@nice2dev/ui-core');
 var React = require('react');
 
 /* ══════════════════════════════════════════════════════════════════════════════
@@ -66,6 +67,7 @@ const animationCSS = `
  * Icon preview component with multiple modes and sizes.
  */
 function NiceIconPreview({ icon: Icon, iconName = 'Icon', mode = 'both', layout = 'grid', sizes = DEFAULT_SIZES, showAnimation = true, animations = DEFAULT_ANIMATIONS, fill, className = '', }) {
+    const { t } = uiCore.useNiceTranslation();
     const [selectedAnimation, setSelectedAnimation] = React.useState(null);
     // Inject animation styles
     const styleSheet = React.useMemo(() => jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: animationCSS } }), []);
@@ -77,7 +79,7 @@ function NiceIconPreview({ icon: Icon, iconName = 'Icon', mode = 'both', layout
                 background: BACKGROUND_COLORS[bgMode],
             }, children: jsxRuntime.jsx(Icon, { size: size, fill: iconFill, className: selectedAnimation || undefined }) }));
     };
-    return (jsxRuntime.jsxs("div", { className: `nice-icon-preview ${className}`, style: styles.container, children: [styleSheet, jsxRuntime.jsxs("div", { style: styles.header, children: [jsxRuntime.jsx("h3", { style: styles.title, children: iconName }), showAnimation && (jsxRuntime.jsxs("div", { style: styles.animationControls, children: [jsxRuntime.jsx("span", { style: styles.animationLabel, children: "Animation:" }), jsxRuntime.jsxs("select", { value: selectedAnimation || '', onChange: (e) => setSelectedAnimation(e.target.value || null), style: styles.select, children: [jsxRuntime.jsx("option", { value: "", children: "None" }), animations.map((a) => (jsxRuntime.jsx("option", { value: a.className, children: a.name }, a.className)))] })] }))] }), layout === 'grid' && (jsxRuntime.jsxs("div", { style: styles.gridContainer, children: [(mode === 'light' || mode === 'both') && (jsxRuntime.jsxs("div", { style: styles.section, children: [jsxRuntime.jsx("h4", { style: styles.sectionTitle, children: "Light Mode" }), jsxRuntime.jsx("div", { style: styles.sizeGrid, children: sizes.map((s) => (jsxRuntime.jsxs("div", { style: styles.sizeItem, children: [renderIcon(s.size, 'light', fill), jsxRuntime.jsx("span", { style: styles.sizeLabel, children: s.label })] }, s.size))) })] })), (mode === 'dark' || mode === 'both') && (jsxRuntime.jsxs("div", { style: styles.section, children: [jsxRuntime.jsx("h4", { style: styles.sectionTitle, children: "Dark Mode" }), jsxRuntime.jsx("div", { style: styles.sizeGrid, children: sizes.map((s) => (jsxRuntime.jsxs("div", { style: styles.sizeItem, children: [renderIcon(s.size, 'dark', fill), jsxRuntime.jsx("span", { style: styles.sizeLabel, children: s.label })] }, s.size))) })] })), mode === 'gradient' && (jsxRuntime.jsxs("div", { style: styles.section, children: [jsxRuntime.jsx("h4", { style: styles.sectionTitle, children: "Gradient Background" }), jsxRuntime.jsx("div", { style: styles.sizeGrid, children: sizes.map((s) => (jsxRuntime.jsxs("div", { style: styles.sizeItem, children: [renderIcon(s.size, 'gradient', '#ffffff'), jsxRuntime.jsx("span", { style: styles.sizeLabel, children: s.label })] }, s.size))) })] }))] })), layout === 'list' && (jsxRuntime.jsx("div", { style: styles.listContainer, children: sizes.map((s) => (jsxRuntime.jsxs("div", { style: styles.listRow, children: [jsxRuntime.jsx("span", { style: styles.listLabel, children: s.label }), renderIcon(s.size, 'light', fill), renderIcon(s.size, 'dark', fill)] }, s.size))) })), layout === 'comparison' && (jsxRuntime.jsxs("div", { style: styles.comparisonContainer, children: [jsxRuntime.jsxs("div", { style: styles.comparisonSide, children: [jsxRuntime.jsx("h4", { style: styles.sectionTitle, children: "Light" }), jsxRuntime.jsx("div", { style: { ...styles.comparisonBox, background: BACKGROUND_COLORS.light }, children: jsxRuntime.jsx(Icon, { size: 96, fill: fill || '#1e1e1e', className: selectedAnimation || undefined }) })] }), jsxRuntime.jsxs("div", { style: styles.comparisonSide, children: [jsxRuntime.jsx("h4", { style: styles.sectionTitle, children: "Dark" }), jsxRuntime.jsx("div", { style: { ...styles.comparisonBox, background: BACKGROUND_COLORS.dark }, children: jsxRuntime.jsx(Icon, { size: 96, fill: fill || '#ffffff', className: selectedAnimation || undefined }) })] })] }))] }));
+    return (jsxRuntime.jsxs("div", { className: `nice-icon-preview ${className}`, style: styles.container, children: [styleSheet, jsxRuntime.jsxs("div", { style: styles.header, children: [jsxRuntime.jsx("h3", { style: styles.title, children: iconName }), showAnimation && (jsxRuntime.jsxs("div", { style: styles.animationControls, children: [jsxRuntime.jsx("span", { style: styles.animationLabel, children: t('iconPreview.animation', 'Animation:') }), jsxRuntime.jsxs("select", { value: selectedAnimation || '', onChange: (e) => setSelectedAnimation(e.target.value || null), style: styles.select, children: [jsxRuntime.jsx("option", { value: "", children: t('iconPreview.none', 'None') }), animations.map((a) => (jsxRuntime.jsx("option", { value: a.className, children: a.name }, a.className)))] })] }))] }), layout === 'grid' && (jsxRuntime.jsxs("div", { style: styles.gridContainer, children: [(mode === 'light' || mode === 'both') && (jsxRuntime.jsxs("div", { style: styles.section, children: [jsxRuntime.jsx("h4", { style: styles.sectionTitle, children: t('iconPreview.lightMode', 'Light Mode') }), jsxRuntime.jsx("div", { style: styles.sizeGrid, children: sizes.map((s) => (jsxRuntime.jsxs("div", { style: styles.sizeItem, children: [renderIcon(s.size, 'light', fill), jsxRuntime.jsx("span", { style: styles.sizeLabel, children: s.label })] }, s.size))) })] })), (mode === 'dark' || mode === 'both') && (jsxRuntime.jsxs("div", { style: styles.section, children: [jsxRuntime.jsx("h4", { style: styles.sectionTitle, children: t('iconPreview.darkMode', 'Dark Mode') }), jsxRuntime.jsx("div", { style: styles.sizeGrid, children: sizes.map((s) => (jsxRuntime.jsxs("div", { style: styles.sizeItem, children: [renderIcon(s.size, 'dark', fill), jsxRuntime.jsx("span", { style: styles.sizeLabel, children: s.label })] }, s.size))) })] })), mode === 'gradient' && (jsxRuntime.jsxs("div", { style: styles.section, children: [jsxRuntime.jsx("h4", { style: styles.sectionTitle, children: t('iconPreview.gradientBackground', 'Gradient Background') }), jsxRuntime.jsx("div", { style: styles.sizeGrid, children: sizes.map((s) => (jsxRuntime.jsxs("div", { style: styles.sizeItem, children: [renderIcon(s.size, 'gradient', '#ffffff'), jsxRuntime.jsx("span", { style: styles.sizeLabel, children: s.label })] }, s.size))) })] }))] })), layout === 'list' && (jsxRuntime.jsx("div", { style: styles.listContainer, children: sizes.map((s) => (jsxRuntime.jsxs("div", { style: styles.listRow, children: [jsxRuntime.jsx("span", { style: styles.listLabel, children: s.label }), renderIcon(s.size, 'light', fill), renderIcon(s.size, 'dark', fill)] }, s.size))) })), layout === 'comparison' && (jsxRuntime.jsxs("div", { style: styles.comparisonContainer, children: [jsxRuntime.jsxs("div", { style: styles.comparisonSide, children: [jsxRuntime.jsx("h4", { style: styles.sectionTitle, children: t('iconPreview.light', 'Light') }), jsxRuntime.jsx("div", { style: { ...styles.comparisonBox, background: BACKGROUND_COLORS.light }, children: jsxRuntime.jsx(Icon, { size: 96, fill: fill || '#1e1e1e', className: selectedAnimation || undefined }) })] }), jsxRuntime.jsxs("div", { style: styles.comparisonSide, children: [jsxRuntime.jsx("h4", { style: styles.sectionTitle, children: t('iconPreview.dark', 'Dark') }), jsxRuntime.jsx("div", { style: { ...styles.comparisonBox, background: BACKGROUND_COLORS.dark }, children: jsxRuntime.jsx(Icon, { size: 96, fill: fill || '#ffffff', className: selectedAnimation || undefined }) })] })] }))] }));
 }
 /* ══════════════════════════════════════════════════════════════════════════════
    Styles

package/dist/cjs/NiceIconSetCreator.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var uiCore = require('@nice2dev/ui-core');
 var React = require('react');
 var actions = require('./icons/actions.js');
 
@@ -10,6 +11,7 @@ var actions = require('./icons/actions.js');
 const DEFAULT_CONFIG = {
     name: 'MyIcons',
     packageName: '@myproject/icons',
+    // audit-allow: i18n — the generated package.json's default description, not UI copy
     description: 'Custom icon set',
     version: '1.0.0',
     author: '',
@@ -287,6 +289,7 @@ function useIconSetCreator(options) {
  * Icon Set Creator component for building custom icon packages.
  */
 function NiceIconSetCreator({ icons, initialSelection, defaultConfig, onSelectionChange: _onSelectionChange, onExport, className = '', }) {
+    const { t } = uiCore.useNiceTranslation();
     const creator = useIconSetCreator({ icons, initialSelection, defaultConfig });
     const [searchQuery, setSearchQuery] = React.useState('');
     const [categoryFilter, setCategoryFilter] = React.useState('all');
@@ -340,7 +343,9 @@ function NiceIconSetCreator({ icons, initialSelection, defaultConfig, onSelectio
             URL.revokeObjectURL(url);
         });
     }, [creator]);
-    return (jsxRuntime.jsxs("div", { className: `nice-icon-set-creator ${className}`, style: styles.container, children: [jsxRuntime.jsxs("div", { style: styles.header, children: [jsxRuntime.jsx("h2", { style: styles.title, children: "Icon Set Creator" }), jsxRuntime.jsxs("div", { style: styles.stats, children: [creator.selectedCount, " / ", creator.items.length, " icons selected"] })] }), jsxRuntime.jsxs("div", { style: styles.content, children: [jsxRuntime.jsxs("div", { style: styles.configPanel, children: [jsxRuntime.jsx("h3", { style: styles.sectionTitle, children: "Configuration" }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: "Set Name" }), jsxRuntime.jsx("input", { type: "text", value: creator.config.name, onChange: (e) => creator.updateConfig({ name: e.target.value }), style: styles.input, placeholder: "MyIcons" })] }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: "Package Name" }), jsxRuntime.jsx("input", { type: "text", value: creator.config.packageName, onChange: (e) => creator.updateConfig({ packageName: e.target.value }), style: styles.input, placeholder: "@myproject/icons" })] }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: "Description" }), jsxRuntime.jsx("input", { type: "text", value: creator.config.description, onChange: (e) => creator.updateConfig({ description: e.target.value }), style: styles.input })] }), jsxRuntime.jsxs("div", { style: styles.fieldRow, children: [jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: "Version" }), jsxRuntime.jsx("input", { type: "text", value: creator.config.version, onChange: (e) => creator.updateConfig({ version: e.target.value }), style: styles.input })] }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: "License" }), jsxRuntime.jsx("input", { type: "text", value: creator.config.license, onChange: (e) => creator.updateConfig({ license: e.target.value }), style: styles.input })] })] }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: "Export Format" }), jsxRuntime.jsxs("select", { value: creator.config.format, onChange: (e) => creator.updateConfig({ format: e.target.value }), style: styles.select, children: [jsxRuntime.jsx("option", { value: "esm", children: "ES Modules" }), jsxRuntime.jsx("option", { value: "cjs", children: "CommonJS" }), jsxRuntime.jsx("option", { value: "both", children: "Both" })] })] }), jsxRuntime.jsxs("div", { style: styles.checkboxGroup, children: [jsxRuntime.jsxs("label", { style: styles.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: creator.config.generateTypes, onChange: (e) => creator.updateConfig({ generateTypes: e.target.checked }) }), "Generate TypeScript types"] }), jsxRuntime.jsxs("label", { style: styles.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: creator.config.treeShaking, onChange: (e) => creator.updateConfig({ treeShaking: e.target.checked }) }), "Tree-shaking friendly"] }), jsxRuntime.jsxs("label", { style: styles.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: creator.config.includeMetadata, onChange: (e) => creator.updateConfig({ includeMetadata: e.target.checked }) }), "Include metadata"] })] }), jsxRuntime.jsxs("div", { style: styles.exportActions, children: [jsxRuntime.jsx("button", { onClick: handleExport, style: styles.primaryButton, children: "Preview Export" }), jsxRuntime.jsx("button", { onClick: handleDownloadZip, style: styles.secondaryButton, children: "Download Files" })] })] }), jsxRuntime.jsxs("div", { style: styles.selectionPanel, children: [jsxRuntime.jsxs("div", { style: styles.selectionHeader, children: [jsxRuntime.jsx("input", { type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search icons...", style: styles.searchInput }), jsxRuntime.jsxs("select", { value: categoryFilter, onChange: (e) => setCategoryFilter(e.target.value), style: styles.categorySelect, children: [jsxRuntime.jsx("option", { value: "all", children: "All Categories" }), categories.map((cat) => (jsxRuntime.jsx("option", { value: cat, children: cat }, cat)))] })] }), jsxRuntime.jsxs("div", { style: styles.selectionActions, children: [jsxRuntime.jsx("button", { onClick: creator.selectAll, style: styles.smallButton, children: "Select All" }), jsxRuntime.jsx("button", { onClick: creator.deselectAll, style: styles.smallButton, children: "Deselect All" })] }), jsxRuntime.jsx("div", { style: styles.iconGrid, children: filteredItems.map((item) => (jsxRuntime.jsxs("div", { role: "checkbox", "aria-checked": item.included, "aria-label": item.customName, tabIndex: 0, onClick: () => creator.toggleIcon(item.originalName), onKeyDown: (e) => {
+    return (jsxRuntime.jsxs("div", { className: `nice-icon-set-creator ${className}`, style: styles.container, children: [jsxRuntime.jsxs("div", { style: styles.header, children: [jsxRuntime.jsx("h2", { style: styles.title, children: t('iconSetCreator.iconSetCreator', 'Icon Set Creator') }), jsxRuntime.jsx("div", { style: styles.stats, children: t('iconSetCreator.iconsSelected', '{selectedCount} / {items} icons selected')
+                            .replace('{selectedCount}', String(creator.selectedCount))
+                            .replace('{items}', String(creator.items.length)) })] }), jsxRuntime.jsxs("div", { style: styles.content, children: [jsxRuntime.jsxs("div", { style: styles.configPanel, children: [jsxRuntime.jsx("h3", { style: styles.sectionTitle, children: t('iconSetCreator.configuration', 'Configuration') }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: t('iconSetCreator.setName', 'Set Name') }), jsxRuntime.jsx("input", { type: "text", value: creator.config.name, onChange: (e) => creator.updateConfig({ name: e.target.value }), style: styles.input, placeholder: "MyIcons" })] }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: t('iconSetCreator.packageName', 'Package Name') }), jsxRuntime.jsx("input", { type: "text", value: creator.config.packageName, onChange: (e) => creator.updateConfig({ packageName: e.target.value }), style: styles.input, placeholder: "@myproject/icons" })] }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: t('iconSetCreator.description', 'Description') }), jsxRuntime.jsx("input", { type: "text", value: creator.config.description, onChange: (e) => creator.updateConfig({ description: e.target.value }), style: styles.input })] }), jsxRuntime.jsxs("div", { style: styles.fieldRow, children: [jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: t('iconSetCreator.version', 'Version') }), jsxRuntime.jsx("input", { type: "text", value: creator.config.version, onChange: (e) => creator.updateConfig({ version: e.target.value }), style: styles.input })] }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: t('iconSetCreator.license', 'License') }), jsxRuntime.jsx("input", { type: "text", value: creator.config.license, onChange: (e) => creator.updateConfig({ license: e.target.value }), style: styles.input })] })] }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: t('iconSetCreator.exportFormat', 'Export Format') }), jsxRuntime.jsxs("select", { value: creator.config.format, onChange: (e) => creator.updateConfig({ format: e.target.value }), style: styles.select, children: [jsxRuntime.jsx("option", { value: "esm", children: t('iconSetCreator.esModules', 'ES Modules') }), jsxRuntime.jsx("option", { value: "cjs", children: "CommonJS" }), jsxRuntime.jsx("option", { value: "both", children: t('iconSetCreator.both', 'Both') })] })] }), jsxRuntime.jsxs("div", { style: styles.checkboxGroup, children: [jsxRuntime.jsxs("label", { style: styles.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: creator.config.generateTypes, onChange: (e) => creator.updateConfig({ generateTypes: e.target.checked }) }), t('iconSetCreator.generateTypescriptTypes', 'Generate TypeScript types')] }), jsxRuntime.jsxs("label", { style: styles.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: creator.config.treeShaking, onChange: (e) => creator.updateConfig({ treeShaking: e.target.checked }) }), t('iconSetCreator.treeShakingFriendly', 'Tree-shaking friendly')] }), jsxRuntime.jsxs("label", { style: styles.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: creator.config.includeMetadata, onChange: (e) => creator.updateConfig({ includeMetadata: e.target.checked }) }), t('iconSetCreator.includeMetadata', 'Include metadata')] })] }), jsxRuntime.jsxs("div", { style: styles.exportActions, children: [jsxRuntime.jsx("button", { onClick: handleExport, style: styles.primaryButton, children: t('iconSetCreator.previewExport', 'Preview Export') }), jsxRuntime.jsx("button", { onClick: handleDownloadZip, style: styles.secondaryButton, children: t('iconSetCreator.downloadFiles', 'Download Files') })] })] }), jsxRuntime.jsxs("div", { style: styles.selectionPanel, children: [jsxRuntime.jsxs("div", { style: styles.selectionHeader, children: [jsxRuntime.jsx("input", { type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: t('iconSetCreator.searchIcons', 'Search icons...'), style: styles.searchInput }), jsxRuntime.jsxs("select", { value: categoryFilter, onChange: (e) => setCategoryFilter(e.target.value), style: styles.categorySelect, children: [jsxRuntime.jsx("option", { value: "all", children: t('iconSetCreator.allCategories', 'All Categories') }), categories.map((cat) => (jsxRuntime.jsx("option", { value: cat, children: cat }, cat)))] })] }), jsxRuntime.jsxs("div", { style: styles.selectionActions, children: [jsxRuntime.jsx("button", { onClick: creator.selectAll, style: styles.smallButton, children: t('iconSetCreator.selectAll', 'Select All') }), jsxRuntime.jsx("button", { onClick: creator.deselectAll, style: styles.smallButton, children: t('iconSetCreator.deselectAll', 'Deselect All') })] }), jsxRuntime.jsx("div", { style: styles.iconGrid, children: filteredItems.map((item) => (jsxRuntime.jsxs("div", { role: "checkbox", "aria-checked": item.included, "aria-label": item.customName, tabIndex: 0, onClick: () => creator.toggleIcon(item.originalName), onKeyDown: (e) => {
                                         if (e.key === 'Enter' || e.key === ' ') {
                                             e.preventDefault();
                                             creator.toggleIcon(item.originalName);
@@ -349,7 +354,7 @@ function NiceIconSetCreator({ icons, initialSelection, defaultConfig, onSelectio
                                         ...styles.iconItem,
                                         borderColor: item.included ? '#3b82f6' : '#e5e7eb',
                                         backgroundColor: item.included ? '#eff6ff' : '#fff',
-                                    }, children: [jsxRuntime.jsx(item.icon, { size: 32 }), jsxRuntime.jsx("span", { style: styles.iconName, children: item.customName }), item.included && (jsxRuntime.jsx("span", { style: styles.checkmark, children: jsxRuntime.jsx(actions.NtdCheck, { size: 14 }) }))] }, item.originalName))) })] }), previewOutput && (jsxRuntime.jsxs("div", { style: styles.previewPanel, children: [jsxRuntime.jsx("h3", { style: styles.sectionTitle, children: "Export Preview" }), previewOutput.map((file) => (jsxRuntime.jsxs("div", { style: styles.filePreview, children: [jsxRuntime.jsx("div", { style: styles.fileName, children: file.filename }), jsxRuntime.jsxs("pre", { style: styles.codePreview, children: [file.content.slice(0, 1000), file.content.length > 1000 && '...'] })] }, file.filename)))] }))] })] }));
+                                    }, children: [jsxRuntime.jsx(item.icon, { size: 32 }), jsxRuntime.jsx("span", { style: styles.iconName, children: item.customName }), item.included && (jsxRuntime.jsx("span", { style: styles.checkmark, children: jsxRuntime.jsx(actions.NtdCheck, { size: 14 }) }))] }, item.originalName))) })] }), previewOutput && (jsxRuntime.jsxs("div", { style: styles.previewPanel, children: [jsxRuntime.jsx("h3", { style: styles.sectionTitle, children: t('iconSetCreator.exportPreview', 'Export Preview') }), previewOutput.map((file) => (jsxRuntime.jsxs("div", { style: styles.filePreview, children: [jsxRuntime.jsx("div", { style: styles.fileName, children: file.filename }), jsxRuntime.jsxs("pre", { style: styles.codePreview, children: [file.content.slice(0, 1000), file.content.length > 1000 && '...'] })] }, file.filename)))] }))] })] }));
 }
 /* ══════════════════════════════════════════════════════════════════════════════
    Styles

package/dist/cjs/NtdIconBadge.js

@@ -1,9 +1,19 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var uiCore = require('@nice2dev/ui-core');
 var React = require('react');
 var types = require('./types.js');
 
+/** The status in words for the accessible name — English defaults of `ntdIconBadge.statusValue.*`. */
+const STATUS_WORDS = {
+    online: 'online',
+    offline: 'offline',
+    busy: 'busy',
+    away: 'away',
+    dnd: 'do not disturb',
+    invisible: 'invisible',
+};
 /* ────────────────────────────────────────────────────────────────────────────
    CONSTANTS
 ───────────────────────────────────────────────────────────────────────────── */
@@ -190,6 +200,7 @@ function injectStyles() {
 const NtdBadge = /* @__PURE__ */ Object.assign(
 /* @__PURE__ */ React.forwardRef(({ icon: Icon, count = 0, maxCount = 99, showZero = false, position = 'top-right', variant = 'standard', badgeColor = '#ef4444', textColor = '#ffffff', animated = true, pulse = false, iconProps = {}, className, style, 'aria-label': ariaLabel, }, ref) => {
     var _a, _b;
+    const { t } = uiCore.useNiceTranslation();
     const [isEntering, setIsEntering] = React.useState(false);
     const [countChanging, setCountChanging] = React.useState(false);
     const prevCountRef = React.useRef(count);
@@ -213,6 +224,7 @@ const NtdBadge = /* @__PURE__ */ Object.assign(
             const timer = setTimeout(() => setIsEntering(false), 300);
             return () => clearTimeout(timer);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- the enter animation plays once, when the badge mounts
     }, []);
     const shouldShowBadge = count > 0 || showZero;
     const displayCount = count > maxCount ? `${maxCount}+` : count.toString();
@@ -233,7 +245,9 @@ const NtdBadge = /* @__PURE__ */ Object.assign(
             width: resolvedSize,
             height: resolvedSize,
             ...style,
-        }, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (shouldShowBadge ? `${count} notifications` : undefined), children: [jsxRuntime.jsx(Icon, { ...iconProps }), shouldShowBadge && (jsxRuntime.jsx("span", { className: badgeClasses, style: {
+        }, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (shouldShowBadge
+            ? t('ntdIconBadge.notifications', '{count} notifications').replace('{count}', String(count))
+            : undefined), children: [jsxRuntime.jsx(Icon, { ...iconProps }), shouldShowBadge && (jsxRuntime.jsx("span", { className: badgeClasses, style: {
                     ...POSITION_STYLES[position],
                     backgroundColor: badgeColor,
                     color: textColor,
@@ -259,7 +273,8 @@ const NtdBadge = /* @__PURE__ */ Object.assign(
  */
 const NtdStatusDot = /* @__PURE__ */ Object.assign(
 /* @__PURE__ */ React.forwardRef(({ icon: Icon, status, statusColor, position = 'bottom-right', dotSize = 'md', animated = true, pulse = false, iconProps = {}, className, style, }, ref) => {
-    var _a, _b;
+    var _a, _b, _c;
+    const { t } = uiCore.useNiceTranslation();
     React.useEffect(() => {
         injectStyles();
     }, []);
@@ -279,7 +294,7 @@ const NtdStatusDot = /* @__PURE__ */ Object.assign(
             width: resolvedIconSize,
             height: resolvedIconSize,
             ...style,
-        }, role: "status", "aria-label": `Status: ${status}`, children: [jsxRuntime.jsx(Icon, { ...iconProps }), jsxRuntime.jsx("span", { className: dotClasses, style: {
+        }, role: "status", "aria-label": t('ntdIconBadge.status', 'Status: {status}').replace('{status}', t('ntdIconBadge.statusValue.' + status, (_c = STATUS_WORDS[status]) !== null && _c !== void 0 ? _c : status)), children: [jsxRuntime.jsx(Icon, { ...iconProps }), jsxRuntime.jsx("span", { className: dotClasses, style: {
                     ...POSITION_STYLES[position],
                     width: resolvedDotSize,
                     height: resolvedDotSize,

package/dist/cjs/NtdIconMorph.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var uiCore = require('@nice2dev/ui-core');
 var React = require('react');
 var actions = require('./icons/actions.js');
 var media = require('./icons/media.js');
@@ -264,6 +265,7 @@ const NtdIconMorph = /* @__PURE__ */ Object.assign(
 const NtdPathMorph = /* @__PURE__ */ Object.assign(
 /* @__PURE__ */ React.forwardRef(({ pair, morphed: controlledMorphed, trigger = 'none', duration = 300, easing = 'ease-in-out', size = 'md', color = 'currentColor', strokeWidth = 2, filled = false, onMorphStart, onMorphEnd, className, style, 'aria-label': ariaLabel, }, ref) => {
     var _a, _b;
+    const { t } = uiCore.useNiceTranslation();
     const [internalMorphed, setInternalMorphed] = React.useState(false);
     const morphed = controlledMorphed !== null && controlledMorphed !== void 0 ? controlledMorphed : internalMorphed;
     const [isAnimating, setIsAnimating] = React.useState(false);
@@ -315,7 +317,7 @@ const NtdPathMorph = /* @__PURE__ */ Object.assign(
     return (jsxRuntime.jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: pathData.viewBox, width: resolvedSize, height: resolvedSize, className: `ntd-path-morph ${className !== null && className !== void 0 ? className : ''}`, style: {
             cursor: trigger !== 'none' ? 'pointer' : undefined,
             ...style,
-        }, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, role: trigger !== 'none' ? 'button' : 'img', "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : `${pair} icon`, "aria-pressed": trigger !== 'none' ? morphed : undefined, children: jsxRuntime.jsx("path", { d: currentPath, fill: filled ? color : 'none', stroke: filled ? 'none' : color, strokeWidth: filled ? 0 : strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", style: {
+        }, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, role: trigger !== 'none' ? 'button' : 'img', "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t('ntdIconMorph.icon', '{pair} icon').replace('{pair}', String(pair)), "aria-pressed": trigger !== 'none' ? morphed : undefined, children: jsxRuntime.jsx("path", { d: currentPath, fill: filled ? color : 'none', stroke: filled ? 'none' : color, strokeWidth: filled ? 0 : strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", style: {
                 transition: `d ${duration}ms ${resolvedEasing}, fill ${duration}ms ${resolvedEasing}, stroke ${duration}ms ${resolvedEasing}`,
             } }) }));
 }), { displayName: 'NtdPathMorph' });

package/dist/cjs/design-tokens.js

@@ -29,6 +29,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * @version 1.0.0
  * @since 2026-03
  * @license MIT
+ *
+ * audit-allow: i18n-file — token descriptions written into Style Dictionary output, not UI copy.
  */
 /* ────────────────────────────────────────────────────────────────────────────
    DEFAULT TOKEN VALUES

package/dist/cjs/iconMetadata.js

@@ -17,6 +17,8 @@
 /* ────────────────────────────────────────────────────────────────────────────
    CATEGORY METADATA
 ───────────────────────────────────────────────────────────────────────────── */
+// audit-allow: i18n — English data for the host's icon browser and searchIcons(); no control of
+// this package shows it.
 const CATEGORY_INFO = {
     actions: {
         label: 'Actions',
@@ -364,6 +366,7 @@ function getSearchSuggestions(partialQuery, limit = 5) {
    This will be populated when icons are imported
 ───────────────────────────────────────────────────────────────────────────── */
 // Example metadata definitions (actual ones will be in icon files)
+// audit-allow: i18n — English search metadata: searchIcons() matches these words.
 const UI_ICON_METADATA = {
     NtdHome: {
         category: 'ui',
@@ -430,6 +433,7 @@ const UI_ICON_METADATA = {
         related: ['NtdBellOff', 'NtdAlarm'],
     },
 };
+// audit-allow: i18n — English search metadata: searchIcons() matches these words.
 const ACTION_ICON_METADATA = {
     NtdPlay: {
         category: 'actions',

package/dist/cjs/icons/actions.js

@@ -251,6 +251,26 @@ const NtdUnlock = /* @__PURE__ */ createIcon.createIcon({
         vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2.5", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2.5", fill: "white", opacity: "0.08" }), jsxRuntime.jsx("circle", { cx: "12", cy: "15.5", r: "1.5", fill: secondaryColor }), jsxRuntime.jsx("rect", { x: "11.25", y: "16.5", width: "1.5", height: "2", rx: "0.5", fill: "#3B82F6" }), jsxRuntime.jsx("path", { d: "M7 11V7a5 5 0 019.9-1", stroke: "white", strokeWidth: "1" })] })),
     },
 });
+// Group / ungroup selected objects (1.2.2: the diagram toolbar drew them as ⊞ / ⊟).
+// Group: two objects inside the corners of one selection frame; ungroup: the two apart.
+const NtdGroup = /* @__PURE__ */ createIcon.createIcon({
+    displayName: 'NtdGroup',
+    paths: {
+        solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M3 7V3h4M17 3h4v4M21 17v4h-4M7 21H3v-4", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }), jsxRuntime.jsx("rect", { x: "7", y: "7", width: "5", height: "5", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "12", y: "12", width: "5", height: "5", fill: primaryColor })] })),
+        outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: "M3 7V3h4M17 3h4v4M21 17v4h-4M7 21H3v-4M7 7h5v5H7zM12 12h5v5h-5z", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })),
+        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "7", y: "7", width: "5", height: "5", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("rect", { x: "12", y: "12", width: "5", height: "5", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: "M3 7V3h4M17 3h4v4M21 17v4h-4M7 21H3v-4M7 7h5v5H7zM12 12h5v5h-5z", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M3 7V3h4M17 3h4v4M21 17v4h-4M7 21H3v-4", stroke: primaryColor, strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }), jsxRuntime.jsx("rect", { x: "7", y: "7", width: "5", height: "5", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "12", y: "12", width: "5", height: "5", fill: primaryColor })] })),
+    },
+});
+const NtdUngroup = /* @__PURE__ */ createIcon.createIcon({
+    displayName: 'NtdUngroup',
+    paths: {
+        solid: ({ primaryColor, strokeWidth: _strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "3", y: "3", width: "8", height: "8", rx: "1", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "13", y: "13", width: "8", height: "8", rx: "1", fill: primaryColor })] })),
+        outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: "M3 3h8v8H3zM13 13h8v8h-8z", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "round", fill: "none" })),
+        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "3", y: "3", width: "8", height: "8", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("rect", { x: "13", y: "13", width: "8", height: "8", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: "M3 3h8v8H3zM13 13h8v8h-8z", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "round", fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "3", y: "3", width: "8", height: "8", rx: "1", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "13", y: "13", width: "8", height: "8", rx: "1", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "3", y: "3", width: "8", height: "8", rx: "1", fill: "white", opacity: "0.1" }), jsxRuntime.jsx("rect", { x: "13", y: "13", width: "8", height: "8", rx: "1", fill: "white", opacity: "0.1" })] })),
+    },
+});
 
 exports.NtdCheck = NtdCheck;
 exports.NtdClipboard = NtdClipboard;
@@ -258,6 +278,7 @@ exports.NtdCopy = NtdCopy;
 exports.NtdDownload = NtdDownload;
 exports.NtdEdit = NtdEdit;
 exports.NtdFilter = NtdFilter;
+exports.NtdGroup = NtdGroup;
 exports.NtdLink = NtdLink;
 exports.NtdLock = NtdLock;
 exports.NtdLogIn = NtdLogIn;
@@ -274,6 +295,7 @@ exports.NtdShare = NtdShare;
 exports.NtdSort = NtdSort;
 exports.NtdTrash = NtdTrash;
 exports.NtdUndo = NtdUndo;
+exports.NtdUngroup = NtdUngroup;
 exports.NtdUnlock = NtdUnlock;
 exports.NtdUpload = NtdUpload;
 exports.NtdZoomIn = NtdZoomIn;

package/dist/cjs/icons/index.js

@@ -52,6 +52,7 @@ exports.NtdCopy = actions.NtdCopy;
 exports.NtdDownload = actions.NtdDownload;
 exports.NtdEdit = actions.NtdEdit;
 exports.NtdFilter = actions.NtdFilter;
+exports.NtdGroup = actions.NtdGroup;
 exports.NtdLink = actions.NtdLink;
 exports.NtdLock = actions.NtdLock;
 exports.NtdLogIn = actions.NtdLogIn;
@@ -68,6 +69,7 @@ exports.NtdShare = actions.NtdShare;
 exports.NtdSort = actions.NtdSort;
 exports.NtdTrash = actions.NtdTrash;
 exports.NtdUndo = actions.NtdUndo;
+exports.NtdUngroup = actions.NtdUngroup;
 exports.NtdUnlock = actions.NtdUnlock;
 exports.NtdUpload = actions.NtdUpload;
 exports.NtdZoomIn = actions.NtdZoomIn;
@@ -234,6 +236,7 @@ exports.NtdTree = weather.NtdTree;
 exports.NtdUmbrella = weather.NtdUmbrella;
 exports.NtdWave = weather.NtdWave;
 exports.NtdWind = weather.NtdWind;
+exports.NtdAngleBisector = shapes.NtdAngleBisector;
 exports.NtdArrowDownCircle = shapes.NtdArrowDownCircle;
 exports.NtdArrowLeftCircle = shapes.NtdArrowLeftCircle;
 exports.NtdArrowRightCircle = shapes.NtdArrowRightCircle;
@@ -247,11 +250,16 @@ exports.NtdCross = shapes.NtdCross;
 exports.NtdDiamond = shapes.NtdDiamond;
 exports.NtdHexagon = shapes.NtdHexagon;
 exports.NtdMaximize = shapes.NtdMaximize;
+exports.NtdMidpoint = shapes.NtdMidpoint;
 exports.NtdMinimize = shapes.NtdMinimize;
 exports.NtdMove = shapes.NtdMove;
 exports.NtdOctagon = shapes.NtdOctagon;
+exports.NtdParallel = shapes.NtdParallel;
 exports.NtdPentagon = shapes.NtdPentagon;
+exports.NtdPerpendicular = shapes.NtdPerpendicular;
+exports.NtdPoint = shapes.NtdPoint;
 exports.NtdRepeat = shapes.NtdRepeat;
+exports.NtdSegment = shapes.NtdSegment;
 exports.NtdShuffle = shapes.NtdShuffle;
 exports.NtdSquare = shapes.NtdSquare;
 exports.NtdStar4 = shapes.NtdStar4;