diff --git a/.changeset/gentle-poems-mate.md b/.changeset/gentle-poems-mate.md new file mode 100644 index 00000000..5285e6b2 --- /dev/null +++ b/.changeset/gentle-poems-mate.md @@ -0,0 +1,25 @@ +--- +"@kobalte/core": major +--- + +## v0.12.0 (January 14, 2024) + +**Breaking changes** + +- [#299](https://github.com/kobaltedev/kobalte/pull/299) +- `"@internationalized/message"` is no longer required in `ssr.noExternal` for [SSR with vite/SolidStart](https://kobalte.dev/docs/core/overview/ssr). +- `Breadcrumbs.Root` exposes a new [`translations` prop for localization](https://kobalte.dev/docs/core/components/breadcrumbs#breadcrumbsroot). +- `Combobox.Root` exposes a new [`translations` prop for localization](https://kobalte.dev/docs/core/components/combobox#comboboxroot). +- `Dialog.Root` exposes a new [`translations` prop for localization](https://kobalte.dev/docs/core/components/dialog#dialogroot). +- `Popover.Root` exposes a new [`translations` prop for localization](https://kobalte.dev/docs/core/components/popover#popoverroot). +- `Toast.Region` exposes a new [`translations` prop for localization](https://kobalte.dev/docs/core/components/toast#toastregion). +- `Toast.Root` exposes a new [`translations` prop for localization](https://kobalte.dev/docs/core/components/toast#toastroot). + +**New features** + +- [#301](https://github.com/kobaltedev/kobalte/pull/301) + +**Bug fixes** + +- [#292](https://github.com/kobaltedev/kobalte/pull/292) +- [#295](https://github.com/kobaltedev/kobalte/pull/295) diff --git a/apps/docs/src/VERSIONS.ts b/apps/docs/src/VERSIONS.ts index 86f3ef15..13213cb5 100644 --- a/apps/docs/src/VERSIONS.ts +++ b/apps/docs/src/VERSIONS.ts @@ -1,4 +1,5 @@ export const CORE_VERSIONS = [ + "0.12.x", "0.11.x", "0.10.x", "0.9.x", @@ -14,4 +15,4 @@ export const CORE_VERSIONS = [ export const LATEST_CORE_CHANGELOG_URL = `/docs/changelog/${CORE_VERSIONS[0].replaceAll(".", "-")}`; -export const LATEST_CORE_VERSION_NAME = "v0.11.2"; +export const LATEST_CORE_VERSION_NAME = "v0.12.0"; diff --git a/apps/docs/src/routes/docs/changelog/0-12-x.mdx b/apps/docs/src/routes/docs/changelog/0-12-x.mdx new file mode 100644 index 00000000..c2d7ba1d --- /dev/null +++ b/apps/docs/src/routes/docs/changelog/0-12-x.mdx @@ -0,0 +1,23 @@ +# v0.12.x + +## v0.12.0 (January 14, 2024) + +**Breaking changes** + +- [#299](https://github.com/kobaltedev/kobalte/pull/299) +- `"@internationalized/message"` is no longer required in `ssr.noExternal` for [SSR with vite/SolidStart](https://kobalte.dev/docs/core/overview/ssr). +- `Breadcrumbs.Root` exposes a new [`translations` prop for localization](https://kobalte.dev/docs/core/components/breadcrumbs#breadcrumbsroot). +- `Combobox.Root` exposes a new [`translations` prop for localization](https://kobalte.dev/docs/core/components/combobox#comboboxroot). +- `Dialog.Root` exposes a new [`translations` prop for localization](https://kobalte.dev/docs/core/components/dialog#dialogroot). +- `Popover.Root` exposes a new [`translations` prop for localization](https://kobalte.dev/docs/core/components/popover#popoverroot). +- `Toast.Region` exposes a new [`translations` prop for localization](https://kobalte.dev/docs/core/components/toast#toastregion). +- `Toast.Root` exposes a new [`translations` prop for localization](https://kobalte.dev/docs/core/components/toast#toastroot). + +**New features** + +- [#301](https://github.com/kobaltedev/kobalte/pull/301) + +**Bug fixes** + +- [#292](https://github.com/kobaltedev/kobalte/pull/292) +- [#295](https://github.com/kobaltedev/kobalte/pull/295) diff --git a/apps/docs/src/routes/docs/core/components/breadcrumbs.mdx b/apps/docs/src/routes/docs/core/components/breadcrumbs.mdx index 57bf1d6c..a1b0cd37 100644 --- a/apps/docs/src/routes/docs/core/components/breadcrumbs.mdx +++ b/apps/docs/src/routes/docs/core/components/breadcrumbs.mdx @@ -173,9 +173,10 @@ function App() { ### Breadcrumbs.Root -| Prop | Description | -| :-------- | :--------------------------------------------------------------------------------------------------------------------------------------------------- | -| separator | `string \| JSX.Element`
The visual separator between each breadcrumb item. It will be used as the default children of `Breadcrumbs.Separator`. | +| Prop | Description | +| :----------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| separator | `string \| JSX.Element`
The visual separator between each breadcrumb item. It will be used as the default children of `Breadcrumbs.Separator`. | +| translations | [`BreadcrumbsIntlTranslations`](https://github.com/kobaltedev/kobalte/blob/main/packages/core/src/breadcrumbs/breadcrumbs.intl.ts)
Localization strings. | ### Breadcrumbs.Link diff --git a/apps/docs/src/routes/docs/core/components/combobox.mdx b/apps/docs/src/routes/docs/core/components/combobox.mdx index 0e41574a..04c49e1e 100644 --- a/apps/docs/src/routes/docs/core/components/combobox.mdx +++ b/apps/docs/src/routes/docs/core/components/combobox.mdx @@ -926,6 +926,7 @@ We expose a CSS custom property `--kb-combobox-content-transform-origin` which c | disabled | `boolean`
Whether the combobox is disabled. | | readOnly | `boolean`
Whether the combobox items can be selected but not changed by the user. | | autoComplete | `string`
Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete) | +| translations | [`ComboboxIntlTranslations`](https://github.com/kobaltedev/kobalte/blob/main/packages/core/src/combobox/combobox.intl.ts)
Localization strings. | `Combobox.Root` also accepts the following props to customize the placement of the `Combobox.Content`. diff --git a/apps/docs/src/routes/docs/core/components/dialog.mdx b/apps/docs/src/routes/docs/core/components/dialog.mdx index c6f51a25..a89bae2d 100644 --- a/apps/docs/src/routes/docs/core/components/dialog.mdx +++ b/apps/docs/src/routes/docs/core/components/dialog.mdx @@ -271,6 +271,7 @@ function ControlledExample() { | modal | `boolean`
Whether the dialog should be the only visible content for screen readers, when set to `true`:
- interaction with outside elements will be disabled.
- scroll will be locked.
- focus will be locked inside the dialog content.
- elements outside the dialog content will not be visible for screen readers. | | preventScroll | `boolean`
Whether the scroll should be locked even if the dialog is not modal. | | forceMount | `boolean`
Used to force mounting the dialog (portal, overlay and content) when more control is needed. Useful when controlling animation with SolidJS animation libraries. | +| translations | [`DialogIntlTranslations`](https://github.com/kobaltedev/kobalte/blob/main/packages/core/src/dialog/dialog.intl.ts)
Localization strings. | ### Dialog.Trigger diff --git a/apps/docs/src/routes/docs/core/components/popover.mdx b/apps/docs/src/routes/docs/core/components/popover.mdx index 5bd9073d..e03b529e 100644 --- a/apps/docs/src/routes/docs/core/components/popover.mdx +++ b/apps/docs/src/routes/docs/core/components/popover.mdx @@ -297,6 +297,7 @@ We expose a CSS custom property `--kb-popover-content-transform-origin` which ca | modal | `boolean`
Whether the popover should be the only visible content for screen readers, when set to `true`:
- interaction with outside elements will be disabled.
- scroll will be locked.
- focus will be locked inside the popover content.
- elements outside the popover content will not be visible for screen readers. | | preventScroll | `boolean`
Whether the scroll should be locked even if the popover is not modal. | | forceMount | `boolean`
Used to force mounting the popover (portal and content) when more control is needed. Useful when controlling animation with SolidJS animation libraries. | +| translations | [`PopoverIntlTranslations`](https://github.com/kobaltedev/kobalte/blob/main/packages/core/src/popover/popover.intl.ts)
Localization strings. | `Popover.Root` also accepts the following props to customize the placement of the `Popover.Content`. diff --git a/apps/docs/src/routes/docs/core/components/toast.mdx b/apps/docs/src/routes/docs/core/components/toast.mdx index 696d5fab..cfe1eebf 100644 --- a/apps/docs/src/routes/docs/core/components/toast.mdx +++ b/apps/docs/src/routes/docs/core/components/toast.mdx @@ -580,6 +580,7 @@ Inside your application, use add your custom region: | pauseOnPageIdle | `boolean`
**default:** true
Whether the toasts close timeout should pause when the document loses focus or the page is idle (e.g. switching to a new browser tab). | | topLayer | `boolean`
**default:** true
Whether the toast region is marked as a "top layer", so that it:
- is not aria-hidden when opening an overlay.
- allows focus even outside a containing focus scope.
- doesn’t dismiss overlays when clicking on it, even though it is outside. | | regionId | `string`
The custom id of the region used for multiple regions. | +| translations | [`ToastRegionIntlTranslations`](https://github.com/kobaltedev/kobalte/blob/main/packages/core/src/toast/toast.intl.ts)
Localization strings. | ### Toast.Root @@ -596,6 +597,7 @@ Inside your application, use add your custom region: | onSwipeCancel | `(event: SwipeEvent) => void`
Event handler called when a swipe interaction is cancelled. | | onSwipeEnd | `(event: SwipeEvent) => void`
Event handler called at the end of a swipe interaction. | | onEscapeKeyDown | `(event: KeyboardEvent) => void`
Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`. | +| translations | [`ToastIntlTranslations`](https://github.com/kobaltedev/kobalte/blob/main/packages/core/src/toast/toast.intl.ts)
Localization strings. | | Data attribute | Description | | :------------------- | :----------------------------------------------------------------------- | diff --git a/packages/core/src/breadcrumbs/breadcrumbs.intl.ts b/packages/core/src/breadcrumbs/breadcrumbs.intl.ts index 7d732a3c..2940f316 100644 --- a/packages/core/src/breadcrumbs/breadcrumbs.intl.ts +++ b/packages/core/src/breadcrumbs/breadcrumbs.intl.ts @@ -1,4 +1,5 @@ export const BREADCRUMBS_INTL_TRANSLATIONS = { + // `aria-label` of the navigation. breadcrumbs: "Breadcrumbs", }; diff --git a/packages/core/src/combobox/combobox.intl.ts b/packages/core/src/combobox/combobox.intl.ts index 2eb8dfa2..597e797e 100644 --- a/packages/core/src/combobox/combobox.intl.ts +++ b/packages/core/src/combobox/combobox.intl.ts @@ -1,6 +1,8 @@ export const COMBOBOX_INTL_TRANSLATIONS = { + // Annouce option to screen readers on focus. focusAnnouncement: (optionText: string, isSelected: boolean) => `${optionText}${isSelected ? ", selected" : ""}`, + // Annouce the number of options available to screen readers on open. countAnnouncement: (optionCount: number) => { switch (optionCount) { case 1: @@ -9,8 +11,11 @@ export const COMBOBOX_INTL_TRANSLATIONS = { `${optionCount} options available`; } }, + // Annouce the selection of an option to screen readers. selectedAnnouncement: (optionText: string) => `${optionText}, selected`, + // `aria-label` of Combobox.Trigger. triggerLabel: "Show suggestions", + // `aria-label` of Combobox.Listbox. listboxLabel: "Suggestions", }; diff --git a/packages/core/src/dialog/dialog.intl.ts b/packages/core/src/dialog/dialog.intl.ts index f87cbc02..26a5f0b9 100644 --- a/packages/core/src/dialog/dialog.intl.ts +++ b/packages/core/src/dialog/dialog.intl.ts @@ -1,4 +1,5 @@ export const DIALOG_INTL_TRANSLATIONS = { + // `aria-label` of Dialog.CloseButton. dismiss: "Dismiss", }; diff --git a/packages/core/src/dialog/dialog/dialog.intl.ts b/packages/core/src/dialog/dialog/dialog.intl.ts deleted file mode 100644 index f87cbc02..00000000 --- a/packages/core/src/dialog/dialog/dialog.intl.ts +++ /dev/null @@ -1,5 +0,0 @@ -export const DIALOG_INTL_TRANSLATIONS = { - dismiss: "Dismiss", -}; - -export type DialogIntlTranslations = typeof DIALOG_INTL_TRANSLATIONS; diff --git a/packages/core/src/popover/popover.intl.ts b/packages/core/src/popover/popover.intl.ts index 46958b70..143177d8 100644 --- a/packages/core/src/popover/popover.intl.ts +++ b/packages/core/src/popover/popover.intl.ts @@ -1,4 +1,5 @@ export const POPOVER_INTL_TRANSLATIONS = { + // `aria-label` of Popover.CloseButton. dismiss: "Dismiss", }; diff --git a/packages/core/src/toast/toast.intl.ts b/packages/core/src/toast/toast.intl.ts index 15a8e207..2375ed3f 100644 --- a/packages/core/src/toast/toast.intl.ts +++ b/packages/core/src/toast/toast.intl.ts @@ -9,12 +9,14 @@ export const TOAST_HOTKEY_PLACEHOLDER = "{hotkey}"; export const TOAST_INTL_TRANSLATIONS = { + // `aria-label` of Toast.CloseButton. close: "Close", }; export type ToastIntlTranslations = typeof TOAST_INTL_TRANSLATIONS; export const TOAST_REGION_INTL_TRANSLATIONS = { + // `aria-label` of Toast.Region with notification count. notifications: (hotkeyPlaceholder: string) => `Notifications (${hotkeyPlaceholder})`, };