@ostack.tech/ui 0.9.1 → 0.10.0

package/dist/types/components/Input/Input.d.ts

@@ -77,6 +77,15 @@ export interface InputPropsBase {
     showClearButton?: ShowClearButton;
     /** Label of the clear button announced to assistive technologies. */
     clearButtonLabel?: string;
+    /**
+     * Accessible description for how to clear the control when the clear button
+     * is visible.
+     *
+     * This field should be provided when adding extra keybinds to clear the
+     * control (_e.g._ the input is a file input and pressing Backspace/Delete
+     * clears it).
+     */
+    clearDescription?: ReactNode;
     /**
      * Function called whenever the value changes.
      *
@@ -114,8 +123,8 @@ export interface InputPropsBase {
  * ```tsx
  * import { Input } from "@ostack.tech/ui";
  *
- * function Search() {
- *   return <Input placeholder="Search…" />;
+ * function UsernameInput() {
+ *   return <Input placeholder="Enter username…" />;
  * }
  * ```
  */

package/dist/types/components/Keyboard/Keyboard.d.ts

@@ -9,7 +9,22 @@ export interface KeyboardProps extends ComponentPropsWithoutRef<"kbd"> {
     asChild?: boolean;
 }
 /**
- * Component used to show which key or combination of keys performs a given
- * action.
+ * Component which represents a span of inline text denoting textual user input
+ * from a keyboard, voice input, or any other text entry device. It is built on
+ * top of the browser's [`<kbd>` (keyboard input)
+ * element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/kbd).
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * function BookmarkInstructions() {
+ *   return (
+ *     <>
+ *       Press <Keyboard>Ctrl</Keyboard> + <Keyboard>D</Keyboard> to
+ *       bookmark this page.
+ *     </>
+ *   );
+ * }
+ * ```
  */
 export declare const Keyboard: import('react').ForwardRefExoticComponent<KeyboardProps & import('react').RefAttributes<HTMLElement>>;

package/dist/types/components/NumericInput/NumericInput.d.ts

@@ -5,9 +5,9 @@ import { Input } from '../Input';
 export interface NumericInputProps extends NumericTransformerOptions, Omit<ComponentPropsWithoutRef<typeof Input>, "defaultValue" | "value" | "onValueChange" | "type" | "min" | "max"> {
     type?: "text" | "tel" | "password";
     /** Numeric input's default value. */
-    defaultValue?: string | number | null;
+    defaultValue?: string | number | bigint | null;
     /** Numeric input's controlled value. */
-    value?: string | number | null;
+    value?: string | number | bigint | null;
     /**
      * Function called whenever the value of the numeric input changes.
      *
@@ -34,28 +34,28 @@ export interface NumericInputProps extends NumericTransformerOptions, Omit<Compo
      * `"999 999,99 €"`, i.e. `valueIsUnformattedString` has no effect on this
      * property.
      */
-    min?: string | number | null;
+    min?: string | number | bigint | null;
     /**
      * Maximum number allowed. If a string is provided, it should **not** be the
      * formatted representation, e.g. `"999999.99" should be provided instead of
      * `"999 999,99 €"`, i.e. `valueIsUnformattedString` has no effect on this
      * property.
      */
-    max?: string | number | null;
+    max?: string | number | bigint | null;
     /**
      * Value that the number should be greater than. If a string is provided, it
      * should **not** be the formatted representation, e.g. `"999999.99" should be
      * provided instead of `"999 999,99 €"`, i.e. `valueIsUnformattedString` has
      * no effect on this property.
      */
-    exclusiveMin?: string | number | null;
+    exclusiveMin?: string | number | bigint | null;
     /**
      * Value that the number should be less than. If a string is provided, it
      * should **not** be the formatted representation, e.g. `"999999.99" should be
      * provided instead of `"999 999,99 €"`, i.e. `valueIsUnformattedString` has
      * no effect on this property.
      */
-    exclusiveMax?: string | number | null;
+    exclusiveMax?: string | number | bigint | null;
     /**
      * Whether the numeric value should be allowed.
      *
@@ -73,14 +73,27 @@ export interface NumericValueRepresentations {
     numberValue: number | null;
 }
 /**
- * The `NumericInput` component is designed for numeric data entry, offering
- * features like digit grouping, adornments, and precision control to enhance
- * the user experience when dealing with numbers.
+ * The numeric input component is used to collect numeric user input. It is
+ * built on top of the [`Input`
+ * component](https://ui.ostack.tech/?path=/docs/ostack-ui-forms-input--docs)
+ * and the [`react-number-format`
+ * library](https://s-yadav.github.io/react-number-format/).
  *
- * Similar to the [Input](/docs/ostack-ui-forms-input--docs)
- * component,`NumericInput` works seamlessly with the `Field` component to
- * create structured, accessible form groups. By combining it with `Field`, you
- * can ensure proper associations between `Label`, `NumericInput`, and
- * `HelperText`, improving clarity and accessibility for users.
+ * It supports specifying the precision, scale, separators, grouping of digits,
+ * restrictions, or affixes of a number.
+ *
+ * For accessibility purposes, numeric inputs are usually included within a
+ * `Field` together with a `Label` and optionally `HelperText` and/or
+ * `Feedback`.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import { NumericInput } from "@ostack.tech/ui";
+ *
+ * function NumberOfTickets() {
+ *   return <NumericInput placeholder="Enter number of tickets…" />;
+ * }
+ * ```
  */
 export declare const NumericInput: import('react').ForwardRefExoticComponent<NumericInputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/types/components/RadioGroup/RadioGroup.d.ts

@@ -57,6 +57,11 @@ export interface RadioGroupProps extends Omit<ComponentPropsWithoutRef<typeof Ra
      * @default false
      */
     showClearButton?: ShowClearButton;
+    /**
+     * Accessible description for how to clear the radio group when the clear
+     * button is visible.
+     */
+    clearDescription?: ReactNode;
     /** Label of the clear button announced to assistive technologies. */
     clearButtonLabel?: string;
     /**

package/dist/types/components/Select/Select.d.ts

@@ -5,7 +5,7 @@ import { Input } from '../Input';
 import { PopoverContent, PopoverTrigger } from '../Popover';
 import { Tag } from '../Tag';
 /** Base properties of the select component. */
-export interface SelectPropsBase<T extends string | number | readonly string[] = string | number | readonly string[]> extends ComponentPropsWithoutRef<typeof PopoverTrigger>, Pick<ComponentPropsWithoutRef<typeof Input>, "name" | "required" | "variant" | "status" | "code" | "readOnly" | "loading" | "loadingDescription" | "showSpinner" | "align" | "startAdornment" | "endAdornment" | "showClearButton" | "onBlurToOutside" | "rootProps" | "codeProps" | "containerProps" | "clearButtonProps" | "spinnerProps">, Pick<ComponentPropsWithoutRef<typeof CommandMenu>, "searchPlaceholder" | "searchValue" | "onSearchValueChange"> {
+export interface SelectPropsBase<T extends string | number | readonly string[] = string | number | readonly string[]> extends ComponentPropsWithoutRef<typeof PopoverTrigger>, Pick<ComponentPropsWithoutRef<typeof Input>, "name" | "required" | "variant" | "status" | "code" | "readOnly" | "loading" | "loadingDescription" | "showSpinner" | "align" | "startAdornment" | "endAdornment" | "showClearButton" | "clearDescription" | "onBlurToOutside" | "rootProps" | "codeProps" | "containerProps" | "clearButtonProps" | "spinnerProps">, Pick<ComponentPropsWithoutRef<typeof CommandMenu>, "searchPlaceholder" | "searchValue" | "onSearchValueChange"> {
     /**
      * Whether multiple options can be selected. If not set, at most one option
      * can be selected at a time.
@@ -38,6 +38,8 @@ export interface SelectPropsBase<T extends string | number | readonly string[] =
     onOpenChange?: (open: boolean) => void;
     /** Select's placeholder. */
     placeholder?: ReactNode;
+    /** Accessible label for the search input. Not shown visibly. */
+    searchLabel?: string;
     /** Accessible label for the list of options. Not shown visibly. */
     optionsLabel?: string;
     /**
@@ -52,6 +54,8 @@ export interface SelectPropsBase<T extends string | number | readonly string[] =
     loadingOptionsProgress?: number;
     /** Message to display when no options were found. */
     emptyMessage?: ReactNode;
+    /** Label of the close button shown on each value tag. */
+    valueTagCloseButtonLabel?: ReactNode;
     /**
      * When `multiple` is set, this property controls the maximum width the
      * content of a value tag representing a selected option can reach. By
@@ -67,7 +71,7 @@ export interface SelectPropsBase<T extends string | number | readonly string[] =
     /** Properties to pass to the `Popover` component. */
     popoverProps?: ComponentPropsWithRef<typeof PopoverContent>;
     /** Options to pass to the `CommandMenu` component. */
-    commandMenuProps?: Omit<ComponentPropsWithRef<typeof CommandMenu>, "defaultValue" | "value" | "onValueChange" | "iconPlacement" | "searchPlaceholder" | "searchValue" | "onSearchValueChange" | "listLabel" | "loading" | "loadingLabel" | "loadingProgress" | "emptyMessage">;
+    commandMenuProps?: Omit<ComponentPropsWithRef<typeof CommandMenu>, "defaultValue" | "value" | "onValueChange" | "iconPlacement" | "searchPlaceholder" | "searchValue" | "onSearchValueChange" | "label" | "listLabel" | "loading" | "loadingLabel" | "loadingProgress" | "emptyMessage">;
 }
 /** Properties of the select component with `multiple` not set. */
 export interface SelectSingleProps extends SelectPropsBase<string | number> {
@@ -83,8 +87,8 @@ export type SelectProps = SelectSingleProps | SelectMultipleProps;
  * Control which displays a menu of options for the user to pick from. Provides
  * an alternative to the browser's [`<select>`
  * element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select)
- * via the “combobox” pattern, allowing users to search for options. It is built
- * on top of the `Input`, `Popover`, and `CommandMenu` components.
+ * while also allowing users to search for options. It is built on top of the
+ * `Input`, `Popover`, and `CommandMenu` components.
  *
  * It supports the selection of more than one option by setting the `multiple`
  * property.

package/dist/types/components/Select/SelectContext.d.ts

@@ -11,6 +11,7 @@ export interface SelectContextValue {
     status?: ControlStatus;
     disabled?: boolean;
     readOnly?: boolean;
+    valueTagCloseButtonLabel?: SelectProps["valueTagCloseButtonLabel"];
     valueTagProps?: SelectProps["valueTagProps"];
     store: SelectStore;
 }
@@ -37,13 +38,14 @@ export declare const SelectContext: import('react').Context<SelectContextValue |
 /** Options to pass to the `useCreateSelectContext` hook. */
 export type UseCreateSelectContextOptions = Omit<SelectContextValue, "store">;
 /** Hook which creates the select context. */
-export declare function useCreateSelectContext({ multiple, value, onOptionSelect, status, disabled, readOnly, valueTagProps, }: UseCreateSelectContextOptions): {
+export declare function useCreateSelectContext({ multiple, value, onOptionSelect, status, disabled, readOnly, valueTagCloseButtonLabel, valueTagProps, }: UseCreateSelectContextOptions): {
     multiple: boolean;
     value: string | string[];
     onOptionSelect: (value: string) => void;
     status: ControlStatus | undefined;
     disabled: boolean | undefined;
     readOnly: boolean | undefined;
+    valueTagCloseButtonLabel: ReactNode;
     valueTagProps: Omit<Omit<import('../Tag/Tag.tsx').TagProps & import('react').RefAttributes<HTMLSpanElement>, "ref">, "color" | "open" | "defaultOpen" | "onOpenChange" | "showCloseButton"> | undefined;
     store: Omit<import('zustand').StoreApi<SelectState>, "subscribe"> & {
         subscribe: {

package/dist/types/components/Tabs/Tabs.d.ts

@@ -23,6 +23,9 @@ export interface TabsProps extends Omit<ComponentPropsWithoutRef<typeof TabsPrim
  *
  * The `value` set on each tab should match the `value` of its content.
  *
+ * Built on top of the [Radix Tabs
+ * primitive](https://radix-ui.com/primitives/docs/components/tabs).
+ *
  * It composes the following subcomponents:
  *
  * - `TabList`: A container holding the list of tabs.

package/dist/types/components/TextArea/TextArea.d.ts

@@ -4,18 +4,21 @@ import { InputPropsBase } from '../Input';
 export interface TextAreaProps extends Omit<InputPropsBase, "asChild" | "children">, ComponentPropsWithoutRef<"textarea"> {
 }
 /**
- * The `TextArea` component is a flexible, multiline input field designed for
- * text entry. This component is ideal for capturing larger amounts of text,
- * such as user feedback, comments, or descriptions.
+ * The text area component is used to collect multi-line user input. It is built
+ * on top of the browser's [`<textarea>`
+ * element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/textarea).
  *
- * All extra properties are passed directly to the underlying textarea element,
- * offering full control over behavior and appearance. The TextArea component
- * can be combined with the `Field` component for better structure and
- * accessibility. The `Field` ensures proper associations between the `Label`,
- * `TextArea`, and related elements like `HelperText`, improving usability and
- * accessibility for users.
+ * For accessibility purposes, text areas are usually included within a `Field`
+ * together with a `Label` and optionally `HelperText` and/or `Feedback`.
  *
- * This setup ensures that the `TextArea` can adapt to different use cases while
- * maintaining a consistent and accessible form structure.
+ * Example usage:
+ *
+ * ```tsx
+ * import { TextArea } from "@ostack.tech/ui";
+ *
+ * function CommentArea() {
+ *   return <TextArea placeholder="Leave a comment…" />;
+ * }
+ * ```
  */
 export declare const TextArea: import('react').ForwardRefExoticComponent<TextAreaProps & import('react').RefAttributes<HTMLTextAreaElement>>;

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -12,14 +12,18 @@ export interface TooltipProps extends Omit<ComponentPropsWithoutRef<typeof Toolt
     showArrow?: boolean;
     /** Tooltip's trigger element. */
     children: ReactElement;
-    /** The open state of the tooltip when it is initially rendered. */
+    /** Default open state of the tooltip. */
     defaultOpen?: boolean;
     /**
-     * The controlled open state of the tooltip. Should be used in conjunction
-     * with `onOpenChange`.
+     * Controlled open state of the tooltip.
+     *
+     * Use together with `onOpenChange`.
      */
     open?: boolean;
-    /** Event handler called when the open state of the tooltip changes. */
+    /**
+     * Function called when the open state of the tooltip changes. Use it to
+     * control the tooltip's open state together with the `open` property.
+     */
     onOpenChange?: (open: boolean) => void;
     /**
      * Override the duration given to the `TooltipProvider` to customise the open
@@ -39,17 +43,24 @@ export interface TooltipProps extends Omit<ComponentPropsWithoutRef<typeof Toolt
     arrowProps?: ComponentPropsWithRef<typeof TooltipPrimitive.Arrow>;
 }
 /**
- * The `Tooltip` component renders a popup that displays information related to
- * an element (trigger) when the element receives keyboard focus or the mouse
- * hovers over it.
+ * The tooltip component displays a popup containing information related to an
+ * element when the user focuses or hovers over it.
+ *
+ * Built on top of the [Radix Tooltip
+ * primitive](https://www.radix-ui.com/primitives/docs/components/tooltip).
+ *
+ * Example usage:
  *
- * In ostack/UI applications, `TooltipProvider` is already integrated into the
- * root container to ensure consistent tooltip behavior throughout the
- * application. Developers typically don't need to configure it manually, as the
- * default setup handles delay times and interactions seamlessly.
+ * ```tsx
+ * import { Button, Tooltip } from "@ostack.tech/ui";
  *
- * For detailed information on these props, which do not have descriptions,
- * please refer to the
- * [docs](https://www.radix-ui.com/primitives/docs/components/tooltip).
+ * function BookmarkButton() {}
+ *   return (
+ *     <Tooltip content="Save for later…">
+ *       <Button>Bookmark</Button>
+ *     </Tooltip>
+ *   );
+ * }
+ * ```
  */
 export declare const Tooltip: import('react').ForwardRefExoticComponent<TooltipProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/providers/LocalizationProvider/LocalizationObject.d.ts

@@ -3,7 +3,7 @@ import { CalendarProps } from '../../components/Calendar';
 import { CloseButtonProps } from '../../components/CloseButton';
 import { CommandMenuDialogProps, CommandMenuProps } from '../../components/CommandMenu';
 import { ControlCodeProps } from '../../components/ControlCode';
-import { DataTableContentProps, DataTableFilterProps, DataTablePaginationProps, DataTableRowsPerPageProps } from '../../components/DataTable';
+import { DataTableContentProps, DataTableFilterProps, DataTablePaginationProps, DataTableProps, DataTableRowsPerPageProps } from '../../components/DataTable';
 import { DateInputProps } from '../../components/DateInput';
 import { DateRangeInputProps } from '../../components/DateRangeInput';
 import { ErrorBoundaryProps } from '../../components/ErrorBoundary';
@@ -14,6 +14,7 @@ import { InputProps } from '../../components/Input';
 import { KeybindsProps } from '../../components/Keybinds';
 import { LabelProps } from '../../components/Label';
 import { NumericInputProps } from '../../components/NumericInput';
+import { RadioGroupProps } from '../../components/RadioGroup';
 import { SelectProps } from '../../components/Select';
 import { TableColumnProps, TableHeadProps } from '../../components/Table';
 import { TabListProps } from '../../components/Tabs';
@@ -30,9 +31,10 @@ export interface LocalizationObject {
     CommandMenuDialog: Pick<CommandMenuDialogProps, "title" | "description">;
     ConfirmDialog: Pick<ConfirmDialogOptions, "okText" | "cancelText">;
     ControlCode: Pick<ControlCodeProps, "visuallyHiddenPrefix">;
-    DataTable: Pick<DataTableContentProps, "emptyMessage">;
+    DataTable: Pick<DataTableProps, "selectAllRowsLabel" | "selectRowLabel">;
+    DataTableContent: Pick<DataTableContentProps, "emptyMessage">;
     DataTableFilter: Pick<DataTableFilterProps, "aria-label" | "placeholder">;
-    DataTablePagination: Pick<DataTablePaginationProps, "rowsRange" | "previousPageButtonLabel" | "nextPageButtonLabel">;
+    DataTablePagination: Pick<DataTablePaginationProps, "aria-label" | "rowsRange" | "rowsRangeSelectLabel" | "previousPageButtonLabel" | "nextPageButtonLabel">;
     DataTableRowsPerPage: Pick<DataTableRowsPerPageProps, "label">;
     DateInput: Pick<DateInputProps, "format" | "announcedFormat" | "placeholder" | "formatDescription" | "selectedDateDescription" | "calendarButtonLabel">;
     DateRangeInput: Pick<DateRangeInputProps, "startInputLabel" | "endInputLabel" | "selectedDateRangeDescription" | "calendarButtonLabel">;
@@ -44,7 +46,8 @@ export interface LocalizationObject {
     Keybinds: Pick<KeybindsProps, "keybindsSeparatorLabel" | "keyPressesSeparatorLabel" | "keysSeparatorLabel" | "keySymbols" | "keyLabels">;
     Label: Pick<LabelProps, "helperButtonLabel">;
     NumericInput: Pick<NumericInputProps, "decimalSeparator" | "groupingStyle" | "groupSeparator">;
-    Select: Pick<SelectProps, "searchPlaceholder" | "emptyMessage" | "optionsLabel" | "loadingOptionsLabel">;
+    RadioGroup: Pick<RadioGroupProps, "clearDescription">;
+    Select: Pick<SelectProps, "placeholder" | "clearDescription" | "searchLabel" | "searchPlaceholder" | "emptyMessage" | "optionsLabel" | "loadingOptionsLabel" | "valueTagCloseButtonLabel">;
     TableColumn: Pick<TableColumnProps, "helperButtonLabel">;
     TableHead: Pick<TableHeadProps, "sortByColumnDescription">;
     TabList: Pick<TabListProps, "scrollLeftButtonLabel" | "scrollRightButtonLabel">;

package/dist/types/utils/numericStringUtils.d.ts

@@ -1,8 +1,8 @@
 /**
- * Converts a numberic value to a string, removing exponential notation. Nullish
+ * Converts a numeric value to a string, removing exponential notation. Nullish
  * or `NaN` values become the empty string.
  */
-export declare function numericToString(v: string | number | null | undefined): string;
+export declare function numericToString(v: string | number | bigint | null | undefined): string;
 /** Whether a numeric string represents a negative number. */
 export declare function isNumericStringNegative(v: string): boolean;
 /** Whether a numeric string represents the `null` value. */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ostack.tech/ui",
   "description": "ostack/UI component library.",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "homepage": "https://ui.ostack.tech/",
   "author": {
     "name": "Opensoft",
@@ -38,15 +38,12 @@
   ],
   "scripts": {
     "clean": "rimraf dist/ scss/",
-    "build": "npm run build:js && npm run build:css",
-    "build:js": "vite build",
-    "build:css": "npm run copy:scss && sass -I ../../node_modules/ scss/index.scss dist/ostack-ui.css",
+    "build": "vite build && npm run copy:scss",
     "copy:scss": "cpy 'src/**/*.scss' '!src/**/*.stories.scss' scss/"
   },
   "dependencies": {
     "@fortawesome/react-fontawesome": "^3.1.1",
     "@tanstack/react-virtual": "^3.13.18",
-    "cmdk": "^1.1.1",
     "from-exponential": "^1.1.1",
     "radix-ui": "^1.4.3",
     "react-day-picker": "^9.13.0",

package/scss/components/Code/_Code-variables.scss

@@ -6,7 +6,7 @@ $code-padding-x: spacing(1) !default;
 $code-border-radius: var(--#{$prefix}border-radius-sm) !default;
 $code-font-family: var(--#{$prefix}font-family-code) !default;
 $code-font-weight: $font-weight-normal !default;
-$code-font-size: 0.975em !default;
+$code-font-size: 0.875em !default;
 $code-line-height: 1.25 !default;
 $code-background-color: var(--#{$prefix}accent-a3) !default;
 $code-color: var(--#{$prefix}accent-a11) !default;

package/scss/components/CommandMenu/_CommandMenu.scss

@@ -131,13 +131,7 @@
       $command-menu-list-transition-timing-function;
   }
 
-  &__item
-    &__item-action:not(
-      a,
-      :disabled,
-      [data-disabled=""],
-      [data-disabled="true"]
-    ) {
+  &__item &__item-action:not(a, :disabled, [data-disabled]) {
     cursor: $command-menu-item-button-cursor;
   }
 

package/scss/components/DataTable/_DataTable-variables.scss

@@ -13,9 +13,15 @@ $data-table-filter-max-width: 250px !default;
 
 // Rows per page
 $data-table-rows-per-page-gap-x: spacing(1) !default;
+$data-table-rows-per-page-font-size: var(--#{$prefix}font-size-sm) !default;
+$data-table-rows-per-page-line-height: var(--#{$prefix}line-height-sm) !default;
+$data-table-rows-per-page-font-weight: $font-weight-normal !default;
 
 // Pagination
 $data-table-pagination-gap-x: spacing(2) !default;
+$data-table-pagination-font-size: var(--#{$prefix}font-size-sm) !default;
+$data-table-pagination-line-height: var(--#{$prefix}line-height-sm) !default;
+$data-table-pagination-font-weight: null !default;
 
 // Pagination arrows
 $data-table-pagination-arrows-gap-x: spacing(1) !default;

package/scss/components/DataTable/_DataTable.scss

@@ -4,6 +4,7 @@
 @use "../../scss/utils/breakpoints" as *;
 @use "../../scss/utils/spacing" as *;
 @use "../../scss/utils/transition" as *;
+@use "../../scss/utils/maybe-important" as *;
 
 .#{$prefix}data-table {
   $data-table: &;
@@ -48,6 +49,9 @@
 
   &__rows-per-page-label {
     margin-right: $data-table-rows-per-page-gap-x;
+    font-size: $data-table-rows-per-page-font-size;
+    line-height: $data-table-rows-per-page-line-height;
+    font-weight: maybe-important($data-table-rows-per-page-font-weight);
   }
 
   &__rows-per-page-select-root,
@@ -59,6 +63,9 @@
     display: flex;
     flex-wrap: wrap;
     align-items: center;
+    font-size: $data-table-pagination-font-size;
+    line-height: $data-table-pagination-line-height;
+    font-weight: $data-table-pagination-font-weight;
   }
 
   &__pagination-arrows {

package/scss/components/Dialog/_Dialog.scss

@@ -60,7 +60,8 @@
 
   // Variants
   @each $variant in $dialog-variants {
-    &#{$card}--#{$variant} {
+    &#{$card}--#{$variant},
+    #{$card}--#{$variant} {
       @include declare-var(
         --#{$prefix}card-border-color,
         map.get($dialog-border-color-by-variant, $variant)

package/scss/components/DropdownMenu/_DropdownMenu.scss

@@ -19,9 +19,9 @@
   }
 
   :is(&__item, &__checkbox-item, &__radio-item)
-    #{$menu-list-item-action}:not(a):not(:disabled):not([data-disabled=""]):not(
-      [data-disabled="true"]
-    ):not([data-loading]) {
+    #{$menu-list-item-action}:not(a):not(:disabled):not([data-disabled]):not(
+      [data-loading]
+    ) {
     cursor: $menu-item-button-cursor;
   }
 

package/scss/components/Keyboard/_Keyboard-variables.scss

@@ -2,13 +2,13 @@
 @use "../../scss/utils/spacing" as *;
 @use "../../scss/utils/css-color-functions" as *;
 
-$keyboard-padding: 0 0.25em !default;
+$keyboard-padding: 1px 0.25em 0 !default;
 $keyboard-border-radius: var(--#{$prefix}border-radius-sm) !default;
 
 $keyboard-font-family: var(--#{$prefix}font-family-code) !default;
 $keyboard-font-weight: $font-weight-normal !default;
 $keyboard-font-size: 0.875em !default;
-$keyboard-line-height: 1 !default;
+$keyboard-line-height: 1.25 !default;
 $keyboard-word-wrap: break-word !default;
 
 $keyboard-border-width: 1px 1px 2px !default;

package/scss/components/Keyboard/_Keyboard.scss

@@ -3,6 +3,7 @@
 @use "../../scss/utils/spacing" as *;
 
 .#{$prefix}keyboard {
+  display: inline-block;
   padding: $keyboard-padding;
   border-radius: $keyboard-border-radius;
 

package/scss/components/MenuList/_MenuList.scss

@@ -33,9 +33,9 @@
 
       // Highlight action on hover only if the item isn't styled as selected
       &:not([data-state="checked"][data-hide-control]) {
-        &:is([data-highlighted], [data-state="open"], [data-selected="true"])
+        &:is([data-highlighted], [data-state="open"], [data-selected])
           #{$menu-list}__item-action--#{$variant},
-        #{$menu-list}__item-action--#{$variant}:hover {
+        #{$menu-list}__item-action--#{$variant}:not([data-loading]):hover {
           @extend %#{$prefix}menu__item-action--#{$variant}--highlighted;
         }
       }
@@ -49,7 +49,7 @@
       &--#{$variant} {
         @extend %#{$prefix}menu__item-action--#{$variant};
 
-        &:is([data-selected=""], [data-selected="true"]) {
+        &[data-selected] {
           @extend %#{$prefix}menu__item-action--#{$variant}--selected;
         }
       }

package/scss/components/Select/_Select-variables.scss

@@ -66,6 +66,10 @@ $select-option-font-family: null !default;
 $select-option-font-weight: null !default;
 $select-option-text-transform: null !default;
 
+// Option - Selected
+$select-option-selected-font-weight: null !default;
+$select-option-selected-text-transform: null !default;
+
 // Option indicator
 $select-option-indicator-font-size: var(--#{$prefix}font-size-sm) !default;
 

package/scss/components/Select/_Select.scss

@@ -160,6 +160,12 @@
     text-transform: $select-option-text-transform;
   }
 
+  // Option - Selected
+  &__option[aria-selected="true"] > &__option-action {
+    font-weight: $select-option-selected-font-weight;
+    text-transform: $select-option-selected-text-transform;
+  }
+
   // Option indicator
   &__option-indicator {
     font-size: $select-option-indicator-font-size;

package/scss/components/Tag/_Tag-variables.scss

@@ -23,7 +23,7 @@ $tag-subtle-box-shadow: null !default;
 
 // Outlined variant
 $tag-outlined-background-color: null !default;
-$tag-outlined-color: var(--#{$prefix}accent-a11) !default;
+$tag-outlined-color: var(--#{$prefix}accent-a12) !default;
 $tag-outlined-box-shadow: inset 0 0 0 2px var(--#{$prefix}accent-a11) !default;
 
 // Icon

package/scss/components/Toast/_Toast.scss

@@ -178,4 +178,8 @@
       @extend %#{$prefix}notification--#{$variant};
     }
   }
+
+  &--outlined {
+    background-color: var(--#{$prefix}background-color);
+  }
 }

package/scss/index.scss

@@ -1,6 +1,7 @@
 @forward "utils";
 
 // Helpers
+@forward "scss/helpers/keyframes";
 @forward "scss/helpers/print-utils";
 @forward "scss/helpers/visually-hidden";