upgrade localization lib

docs/resources/changelog.md

@@ -13,6 +13,8 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Improved RTL animations for `<sl-drawer>` [#784](https://github.com/shoelace-style/shoelace/issues/784)
 - Improved RTL styles for `<sl-button-group>` [#783](https://github.com/shoelace-style/shoelace/issues/783)
 - Improved RTL styles for the toast stack [#785](https://github.com/shoelace-style/shoelace/issues/785)
+- Improved typings for translations and localized terms
+- Upgraded @shoelace-style/localize to 3.0
 
 ## 2.0.0-beta.75
 

package.json

@@ -55,7 +55,7 @@
     "@floating-ui/dom": "^0.5.2",
     "@lit-labs/react": "^1.0.4",
     "@shoelace-style/animations": "^1.1.0",
-    "@shoelace-style/localize": "^2.2.1",
+    "@shoelace-style/localize": "^3.0.0",
     "color": "4.2",
     "lit": "^2.2.5",
     "qr-creator": "^1.0.0"

src/utilities/localize.ts

@@ -1,5 +1,29 @@
-// Register English as the default/fallback language
-import '../translations/en';
+import { LocalizeController as DefaultLocalizationController } from '@shoelace-style/localize';
+import '../translations/en'; // Register English as the default/fallback language
+import type { Translation as DefaultTranslation } from '@shoelace-style/localize';
+
+// Extend the controller and apply our own translation interface for better typings
+export class LocalizeController extends DefaultLocalizationController<Translation> {}
 
 // Export functions from the localize lib so we have one central place to import them from
-export * from '@shoelace-style/localize';
+export { registerTranslation } from '@shoelace-style/localize';
+
+export interface Translation extends DefaultTranslation {
+  $code: string; // e.g. en, en-GB
+  $name: string; // e.g. English, Español
+  $dir: 'ltr' | 'rtl';
+
+  clearEntry: string;
+  close: string;
+  copy: string;
+  currentValue: string;
+  hidePassword: string;
+  progress: string;
+  remove: string;
+  resize: string;
+  scrollToEnd: string;
+  scrollToStart: string;
+  selectAColorFromTheScreen: string;
+  showPassword: string;
+  toggleColorFormat: string;
+}