@ostack.tech/ui 0.8.1 → 0.9.0

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

@@ -1,4 +1,4 @@
-import { Locale as DateFnsLocale } from 'date-fns';
+import { Locale as DayPickerLocale } from 'react-day-picker';
 import { CalendarProps } from '../../components/Calendar';
 import { CloseButtonProps } from '../../components/CloseButton';
 import { CommandMenuDialogProps, CommandMenuProps } from '../../components/CommandMenu';
@@ -11,18 +11,20 @@ import { FeedbackProps } from '../../components/Feedback';
 import { FeedbackPopoverProps } from '../../components/FeedbackPopover';
 import { FieldGroupHeaderProps } from '../../components/FieldGroup';
 import { InputProps } from '../../components/Input';
+import { KeybindsProps } from '../../components/Keybinds';
 import { LabelProps } from '../../components/Label';
 import { NumericInputProps } from '../../components/NumericInput';
 import { SelectProps } from '../../components/Select';
 import { TableColumnProps, TableHeadProps } from '../../components/Table';
+import { TabListProps } from '../../components/Tabs';
 import { ToastProviderProps, ToastViewportProps } from '../../components/Toast';
 import { ConfirmDialogOptions } from '../AlertDialogProvider';
 /** Localization object representation. */
 export interface LocalizationObject {
     languageTag: string;
-    dateFnsLocale: DateFnsLocale;
+    dayPickerLocale: DayPickerLocale;
     AlertDialog: Pick<ConfirmDialogOptions, "okText">;
-    Calendar: Pick<CalendarProps, "previousMonthLabel" | "nextMonthLabel">;
+    Calendar: Pick<CalendarProps, "monthSelectLabel" | "yearSelectLabel" | "previousMonthLabel" | "nextMonthLabel">;
     CloseButton: Pick<CloseButtonProps, "label">;
     CommandMenu: Pick<CommandMenuProps, "label" | "searchPlaceholder" | "listLabel" | "loadingLabel" | "emptyMessage">;
     CommandMenuDialog: Pick<CommandMenuDialogProps, "title" | "description">;
@@ -32,18 +34,20 @@ export interface LocalizationObject {
     DataTableFilter: Pick<DataTableFilterProps, "aria-label" | "placeholder">;
     DataTablePagination: Pick<DataTablePaginationProps, "rowsRange" | "previousPageButtonLabel" | "nextPageButtonLabel">;
     DataTableRowsPerPage: Pick<DataTableRowsPerPageProps, "label">;
-    DateInput: Pick<DateInputProps, "shortFormat" | "fullFormat" | "placeholder" | "formatDescription" | "calendarButtonLabel">;
-    DateRangeInput: Pick<DateRangeInputProps, "startInputLabel" | "endInputLabel" | "calendarButtonLabel">;
+    DateInput: Pick<DateInputProps, "format" | "announcedFormat" | "placeholder" | "formatDescription" | "selectedDateDescription" | "calendarButtonLabel">;
+    DateRangeInput: Pick<DateRangeInputProps, "startInputLabel" | "endInputLabel" | "selectedDateRangeDescription" | "calendarButtonLabel">;
     ErrorBoundary: Pick<ErrorBoundaryProps, "fallbackTitle" | "fallbackMessage" | "resetButtonLabel">;
     Feedback: Pick<FeedbackProps, "visuallyHiddenPrefix">;
     FeedbackPopover: Pick<FeedbackPopoverProps, "label">;
     FieldGroupHeader: Pick<FieldGroupHeaderProps, "visuallyHiddenCodePrefix">;
     Input: Pick<InputProps, "loadingDescription" | "clearButtonLabel">;
-    Label: Pick<LabelProps, "requiredIconLabel" | "helperButtonLabel">;
+    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">;
     TableColumn: Pick<TableColumnProps, "helperButtonLabel">;
     TableHead: Pick<TableHeadProps, "sortByColumnDescription">;
+    TabList: Pick<TabListProps, "scrollLeftButtonLabel" | "scrollRightButtonLabel">;
     ToastProvider: Pick<ToastProviderProps, "label">;
     ToastViewport: Pick<ToastViewportProps, "label">;
 }

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

@@ -0,0 +1,8 @@
+/**
+ * Intersperse an array with a separator.
+ *
+ * @param array Array to intersperse.
+ * @param separator Separator to insert between elements.
+ * @returns Interspersed array.
+ */
+export declare function intersperse<T, TSep>(array: T[], separator: TSep | ((index: number) => TSep)): (T | TSep)[];

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

@@ -1,3 +1,5 @@
+/** Keyboard shortcut keybinds. */
+export type KeyboardShortcutKeybinds = string[] | string | null | undefined;
 /** Type of the shortcut action. */
 export type KeyboardShortcutAction = (event: KeyboardEvent) => void;
 /** Options of the `registerKeyboardShortcut` function. */
@@ -62,15 +64,11 @@ export interface RegisterKeyboardShortcutOptions {
  * @returns Function used to unregister the shortcut.
  * @see {@link useKeyboardShortcut} for a hook version of this function.
  */
-export declare function registerKeyboardShortcut(keybinds: string | string[], action: KeyboardShortcutAction, { target, eventType, sequenceTimeout, ignore, capture, preventDefault, }?: RegisterKeyboardShortcutOptions): () => void;
+export declare function registerKeyboardShortcut(keybinds: NonNullable<KeyboardShortcutKeybinds>, action: KeyboardShortcutAction, { target, eventType, sequenceTimeout, ignore, capture, preventDefault, }?: RegisterKeyboardShortcutOptions): () => void;
 /** Options of the `useKeyboardShortcut` hook. */
 export interface UseKeyboardShortcutOptions extends Omit<RegisterKeyboardShortcutOptions, "target"> {
-    /**
-     * Whether the shortcut should be enabled.
-     *
-     * @default true
-     */
-    enabled?: boolean;
+    /** Whether the shortcut should be disabled. */
+    disabled?: boolean;
     /**
      * Target element on which to listen for the keybinds. While set to `null`
      * keybinds will be ignored.
@@ -108,10 +106,25 @@ export interface UseKeyboardShortcutOptions extends Omit<RegisterKeyboardShortcu
  * @see {@link registerKeyboardShortcut} for a non-hook version of this
  * function.
  */
-export declare function useKeyboardShortcut(keybinds: string | string[] | null | undefined, action: KeyboardShortcutAction, { enabled, target, eventType, sequenceTimeout, ignore, capture, preventDefault, }?: UseKeyboardShortcutOptions): void;
+export declare function useKeyboardShortcut(keybinds: KeyboardShortcutKeybinds, action: KeyboardShortcutAction, { disabled, target, eventType, sequenceTimeout, ignore, capture, preventDefault, }?: UseKeyboardShortcutOptions): void;
 /**
  * `ignore` function to use in `registerKeyboardShortcut`/`useKeyboardShortcut`
  * which ignores triggered shortcuts which occur in `<input>`, `<textarea>`, or
  * `<select>` elements.
  */
 export declare function ignoreFormControlsKeyboardShortcut(event: KeyboardEvent): boolean;
+/**
+ * Normalises `tinykeys` keybinds into an array of keybinds.
+ *
+ * @param keybinds `tinykeys` keybinds to normalise.
+ * @returns Normalised keybinds.
+ */
+export declare function normalizeKeybinds(keybinds: KeyboardShortcutKeybinds): string[][][];
+/**
+ * Converts the provided `tinykeys` keybinds into an `aria-keyshortcuts` string.
+ *
+ * @param keybinds `tinykeys` keybinds to convert into `aria-keyshortcuts`
+ *   string.
+ * @returns `aria-keyshortcuts` string.
+ */
+export declare function keybindsToAriaKeyShortcuts(keybinds: KeyboardShortcutKeybinds): string | undefined;

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

@@ -4,4 +4,6 @@ import { FormatOptions, ParseOptions } from 'date-fns';
  *
  * Workaround for: https://github.com/date-fns/date-fns/issues/942
  */
-export declare function parseDateStrict(dateString: string, dateFormat: string, options?: ParseOptions & FormatOptions): Date | null;
+export declare function parseDateStrict(dateString: string, dateFormat: string, options?: ParseOptions & FormatOptions & {
+    referenceDate?: Date;
+}): Date | null;

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

@@ -0,0 +1,2 @@
+export declare const PLATFORM: string;
+export declare const IS_APPLE: boolean;

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

@@ -1,43 +1,22 @@
 import { Locale } from 'date-fns';
-/** Default short date format. */
-export declare const DEFAULT_SHORT_DATE_FORMAT = "yyyy-MM-dd";
-/** Default full date format. */
-export declare const DEFAULT_FULL_DATE_FORMAT = "EEEE, d MMMM yyyy";
+/** Default date format. */
+export declare const DEFAULT_DATE_FORMAT = "yyyy-MM-dd";
 /** Options of the `useDateTransformer` hook. */
 export interface DateTransformerOptions {
     /** `date-fns` locale to format dates. */
     locale?: Locale;
     /**
-     * Short format of the date, as supported by
+     * Format of the date, as supported by
      * [`date-fns`](https://date-fns.org/docs/format).
      */
-    shortFormat?: string;
-    /**
-     * Full format of the date, as supported by
-     * [`date-fns`](https://date-fns.org/docs/format).
-     */
-    fullFormat?: string;
-}
-/** Available formatting widths. */
-export type DateFormatWidth = "short" | "full";
-/** Optons of the date formatter. */
-export interface DateFormatterOptions {
-    /**
-     * Formatted date width.
-     *
-     * @default short
-     */
-    width?: DateFormatWidth;
+    format?: string;
 }
-/** Optons of the date parser. */
-export interface DateParserOptions {
-    /**
-     * Formatted date width.
-     *
-     * @default short
-     */
-    width?: DateFormatWidth;
+/** Options used to parse a date string. */
+export interface DateParserOptions extends DateTransformerOptions {
+    referenceDate?: Date;
 }
+/** Options used to format a date. */
+export type DateFormatterOptions = DateTransformerOptions;
 /** Date transformer. */
 export interface DateTransformer {
     /** Function used to strictly parse a string as a date. */
@@ -50,4 +29,4 @@ export interface DateTransformer {
  * the current locale. By default, the returned functions transform a date in
  * the same way a `DateInput` would.
  */
-export declare function useDateTransformer({ locale: dateFnsLocale, shortFormat, fullFormat, }?: DateTransformerOptions): DateTransformer;
+export declare function useDateTransformer({ locale: dateFnsLocale, format, }?: DateTransformerOptions): DateTransformer;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ostack.tech/ui",
   "description": "ostack/UI component library.",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "homepage": "https://ui.ostack.tech/",
   "author": {
     "name": "Opensoft",
@@ -49,7 +49,7 @@
     "cmdk": "^1.1.1",
     "from-exponential": "^1.1.1",
     "radix-ui": "^1.4.3",
-    "react-day-picker": "^9.11.3",
+    "react-day-picker": "^9.13.0",
     "react-error-boundary": "^6.0.0",
     "react-number-format": "^5.4.4",
     "react-to-print": "^3.2.0",

package/scss/_utils.scss

@@ -46,6 +46,7 @@
 @forward "components/IconButton/IconButton-variables";
 @forward "components/CloseButton/CloseButton-variables";
 @forward "components/Input/Input-variables";
+@forward "components/Keyboard/Keyboard-variables";
 @forward "components/Link/Link-variables";
 @forward "components/Mark/Mark-variables";
 @forward "components/Overlay/Overlay-variables";

package/scss/components/Button/_Button.scss

@@ -133,4 +133,9 @@
       @extend %#{$prefix}button--#{$variant};
     }
   }
+
+  // Keybinds
+  &__keybinds {
+    @extend %#{$prefix}button__keybinds;
+  }
 }

package/scss/components/Calendar/_Calendar-variables.scss

@@ -13,27 +13,27 @@ $calendar-month-border-width: 1px !default;
 $calendar-month-border-color: var(--#{$prefix}neutral-a7) !default;
 $calendar-month-background-color: var(--#{$prefix}background-color) !default;
 
-// Caption
-$calendar-caption-gap-x: spacing(0.5) !default;
-$calendar-caption-background-color: var(--#{$prefix}primary-9) !default;
-$calendar-caption-color: var(--#{$prefix}primary-contrast) !default;
+// Header
+$calendar-header-gap-x: spacing(0.5) !default;
+$calendar-header-background-color: var(--#{$prefix}primary-9) !default;
+$calendar-header-color: var(--#{$prefix}primary-contrast) !default;
 
-// Caption label
-$calendar-caption-label-padding-y: spacing(1) !default;
-$calendar-caption-label-padding-x: spacing(2) !default;
+// Header label
+$calendar-header-label-padding-y: spacing(1) !default;
+$calendar-header-label-padding-x: spacing(2) !default;
 
-// Caption button
-$calendar-caption-button-background-color: transparent !default;
-$calendar-caption-button-color: inherit !default;
+// Header button
+$calendar-header-button-background-color: transparent !default;
+$calendar-header-button-color: inherit !default;
 
-// Caption button - Focus
-$calendar-caption-button-focus-outline-color: rgba(255, 255, 255, 0.3) !default;
+// Header button - Focus
+$calendar-header-button-focus-outline-color: rgba(255, 255, 255, 0.3) !default;
 
-// Caption button - Hover
-$calendar-caption-button-hover-background-color: rgba(0, 0, 0, 0.1) !default;
+// Header button - Hover
+$calendar-header-button-hover-background-color: rgba(0, 0, 0, 0.1) !default;
 
-// Caption button - Active
-$calendar-caption-button-active-background-color: rgba(0, 0, 0, 0.2) !default;
+// Header button - Active
+$calendar-header-button-active-background-color: rgba(0, 0, 0, 0.2) !default;
 
 // Select
 $calendar-select-padding-x: spacing(2.5) !default;

package/scss/components/Calendar/_Calendar.scss

@@ -44,7 +44,7 @@
     border: 0;
   }
 
-  &__caption {
+  &__header {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -56,20 +56,20 @@
     border-top-left-radius: $calendar-month-border-radius;
     border-top-right-radius: $calendar-month-border-radius;
 
-    background-color: $calendar-caption-background-color;
-    color: $calendar-caption-color;
+    background-color: $calendar-header-background-color;
+    color: $calendar-header-color;
   }
 
-  &__caption-label {
+  &__header-label {
     margin: 0;
-    padding: $calendar-caption-label-padding-y $calendar-caption-label-padding-x;
+    padding: $calendar-header-label-padding-y $calendar-header-label-padding-x;
   }
 
   &__navigation {
     min-width: $calendar-day-inner-size;
 
     & > :not(:last-child) {
-      margin-right: $calendar-caption-gap-x;
+      margin-right: $calendar-header-gap-x;
     }
   }
 
@@ -77,21 +77,21 @@
     display: flex;
 
     & > :not(:last-child) {
-      margin-right: $calendar-caption-gap-x;
+      margin-right: $calendar-header-gap-x;
     }
   }
 
   // Override button styles
   & &__navigation-button {
     color: inherit;
-    background-color: $calendar-caption-button-background-color;
-    outline-color: $calendar-caption-button-focus-outline-color;
+    background-color: $calendar-header-button-background-color;
+    outline-color: $calendar-header-button-focus-outline-color;
 
     &:is(:hover, :focus):not(:active):not(:disabled) {
-      background-color: $calendar-caption-button-hover-background-color !important;
+      background-color: $calendar-header-button-hover-background-color !important;
     }
     &:active:not(:disabled) {
-      background-color: $calendar-caption-button-active-background-color !important;
+      background-color: $calendar-header-button-active-background-color !important;
     }
   }
 
@@ -109,19 +109,19 @@
 
   .#{$prefix}input__container {
     border: 0;
-    background-color: $calendar-caption-button-background-color !important;
+    background-color: $calendar-header-button-background-color !important;
     background-image: none;
-    color: $calendar-caption-button-color;
+    color: $calendar-header-button-color;
     box-shadow: none;
 
     &[data-focused]:not([data-disabled]) {
-      box-shadow: 0 0 0 2px $calendar-caption-button-focus-outline-color;
+      box-shadow: 0 0 0 2px $calendar-header-button-focus-outline-color;
     }
     &:is(:hover, [data-focused]):not([data-disabled]):not([data-state="open"]) {
-      background-color: $calendar-caption-button-hover-background-color !important;
+      background-color: $calendar-header-button-hover-background-color !important;
     }
     &[data-state="open"] {
-      background-color: $calendar-caption-button-active-background-color !important;
+      background-color: $calendar-header-button-active-background-color !important;
     }
   }
 

package/scss/components/IconButton/_IconButton.scss

@@ -38,4 +38,9 @@
       @extend %#{$prefix}button--#{$variant};
     }
   }
+
+  // Keybinds
+  &__keybinds {
+    @extend %#{$prefix}button__keybinds;
+  }
 }

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

@@ -0,0 +1,18 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+@use "../../scss/utils/css-color-functions" as *;
+
+$keyboard-padding: 0 0.25em !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-word-wrap: break-word !default;
+
+$keyboard-border-width: 1px 1px 2px !default;
+$keyboard-border-style: solid !default;
+$keyboard-border-color: css-transparentize(currentColor, 0.125) !default;
+$keyboard-background-color: css-transparentize(currentColor, 0.065) !default;
+$keyboard-color: null !default;

package/scss/components/Keyboard/_Keyboard.scss

@@ -1,17 +1,20 @@
+@use "Keyboard-variables" as *;
 @use "../../scss/base-variables" as *;
 @use "../../scss/utils/spacing" as *;
 
 .#{$prefix}keyboard {
-  padding: 1px spacing(1) 0;
-  border-radius: var(--#{$prefix}border-radius-xs);
+  padding: $keyboard-padding;
+  border-radius: $keyboard-border-radius;
 
-  font-family: var(--#{$prefix}font-family-code);
-  font-weight: $font-weight-normal;
-  font-size: 0.875em;
-  word-wrap: break-word;
+  font-family: $keyboard-font-family;
+  font-weight: $keyboard-font-weight;
+  font-size: $keyboard-font-size;
+  line-height: $keyboard-line-height;
+  word-wrap: $keyboard-word-wrap;
 
-  border: 1px solid $neutral-7;
-  border-bottom-width: 3px;
-  background-color: $neutral-3;
-  color: $neutral-11;
+  border-width: $keyboard-border-width;
+  border-style: $keyboard-border-style;
+  border-color: $keyboard-border-color;
+  background-color: $keyboard-background-color;
+  color: $keyboard-color;
 }

package/scss/components/MenuList/_MenuList.scss

@@ -72,6 +72,10 @@
     @extend %#{$prefix}menu__item-icon--end;
   }
 
+  &__item-keybinds {
+    @extend %#{$prefix}menu__item-keybinds;
+  }
+
   &__item-spinner {
     @extend %#{$prefix}menu__item-spinner;
   }

package/scss/components/Tooltip/_Tooltip-variables.scss

@@ -5,12 +5,16 @@ $tooltip-max-width: 200px !default;
 $tooltip-max-height: 600px !default;
 $tooltip-padding-y: spacing(1) !default;
 $tooltip-padding-x: spacing(2) !default;
+
 $tooltip-border-radius: var(--#{$prefix}border-radius-sm) !default;
 $tooltip-font-size: var(--#{$prefix}font-size-xs) !default;
 $tooltip-line-height: var(--#{$prefix}line-height-xs) !default;
+$tooltip-text-align: center !default;
+
 $tooltip-background-color: var(--#{$prefix}neutral-12) !default;
 $tooltip-color: var(--#{$prefix}neutral-1) !default;
 $tooltip-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
+
 $tooltip-z-index: var(--#{$prefix}z-index-tooltip) !default;
 $tooltip-animation-duration: var(--#{$prefix}animation-fade-duration) !default;
 $tooltip-animation-timing-function: var(

package/scss/components/Tooltip/_Tooltip.scss

@@ -16,6 +16,7 @@
 
   font-size: $tooltip-font-size;
   line-height: $tooltip-line-height;
+  text-align: $tooltip-text-align;
 
   background-color: $tooltip-background-color;
   color: $tooltip-color;

package/scss/scss/helpers/_visually-hidden.scss

@@ -6,13 +6,22 @@
 // Hide content visually while keeping it accessible to assistive technologies
 .#{$prefix}visually-hidden,
 .#{$prefix}visually-hidden-focusable:not(:focus):not(:focus-within) {
-  position: absolute !important;
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
-  margin: -1px !important;
+  margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
   overflow: hidden !important;
   clip: rect(0, 0, 0, 0) !important;
   white-space: nowrap !important;
   border: 0 !important;
+
+  // Fix for positioned table caption that could become anonymous cells
+  &:not(caption) {
+    position: absolute !important;
+  }
+
+  // Fix to prevent overflowing children to become focusable
+  * {
+    overflow: hidden !important;
+  }
 }

package/scss/scss/placeholders/button/_button-variables.scss

@@ -2,6 +2,7 @@
 @use "sass:map";
 
 @use "../../base-variables" as *;
+@use "../../utils/spacing" as *;
 
 $button-cursor: pointer !default;
 $button-border-width: 1px !default;
@@ -133,6 +134,9 @@ $button-ghost-active-filter: null !default;
 // Ghost variant - Open
 $button-ghost-open-box-shadow: null !default;
 
+// Keybinds
+$button-keybinds-margin-y: spacing(1);
+
 // Variants
 $button-variants: solid, subtle, outlined, ghost !default;
 

package/scss/scss/placeholders/button/_button.scss

@@ -150,4 +150,8 @@
       );
     }
   }
+
+  &__keybinds:not(:first-child) {
+    margin-top: $button-keybinds-margin-y;
+  }
 }

package/scss/scss/placeholders/menu/_menu-variables.scss

@@ -176,12 +176,61 @@ $menu-item-icon-subtle-highlighted-selected-color: null !default;
 // Item icon - Subtle variant - Highlighted + Selected + Accent
 $menu-item-icon-subtle-highlighted-selected-accent-color: null !default;
 
+// Item shortcut
+$menu-item-keybinds-margin-x: $menu-item-padding-x !default;
+$menu-item-keybinds-font-size: var(--#{$prefix}font-size-xs) !default;
+$menu-item-keybinds-line-height: var(--#{$prefix}line-height-xs) !default;
+$menu-item-keybinds-color: var(--#{$prefix}neutral-11) !default;
+
+// Item shortcut - Solid variant - Accent
+$menu-item-keybinds-solid-accent-color: var(--#{$prefix}accent-10) !default;
+
+// Item shortcut - Solid variant - Highlighted
+$menu-item-keybinds-solid-highlighted-color: $menu-item-icon-solid-highlighted-color !default;
+
+// Item shortcut - Solid variant - Highlighted + Accent
+$menu-item-keybinds-solid-highlighted-accent-color: $menu-item-icon-solid-highlighted-accent-color !default;
+
+// Item shortcut - Solid variant - Selected
+$menu-item-keybinds-solid-selected-color: $menu-item-icon-solid-selected-color !default;
+
+// Item shortcut - Solid variant - Selected + Accent
+$menu-item-keybinds-solid-selected-accent-color: $menu-item-icon-solid-selected-accent-color !default;
+
+// Item shortcut - Solid variant - Highlighted + Selected
+$menu-item-keybinds-solid-highlighted-selected-color: $menu-item-icon-solid-highlighted-selected-color !default;
+
+// Item shortcut - Solid variant - Highlighted + Selected + Accent
+$menu-item-keybinds-solid-highlighted-selected-accent-color: $menu-item-icon-solid-highlighted-selected-accent-color !default;
+
+// Item shortcut - Subtle variant - Accent
+$menu-item-keybinds-subtle-accent-color: var(--#{$prefix}accent-11) !default;
+
+// Item shortcut - Subtle variant - Highlighted
+$menu-item-keybinds-subtle-highlighted-color: null !default;
+
+// Item shortcut - Subtle variant - Highlighted + Accent
+$menu-item-keybinds-subtle-highlighted-accent-color: null !default;
+
+// Item shortcut - Subtle variant - Selected
+$menu-item-keybinds-subtle-selected-color: var(--#{$prefix}neutral-12) !default;
+
+// Item shortcut - Subtle variant - Selected + Accent
+$menu-item-keybinds-subtle-selected-accent-color: var(
+  --#{$prefix}accent-12
+) !default;
+
+// Item shortcut - Subtle variant - Highlighted + Selected
+$menu-item-keybinds-subtle-highlighted-selected-color: null !default;
+
+// Item shortcut - Subtle variant - Highlighted + Selected + Accent
+$menu-item-keybinds-subtle-highlighted-selected-accent-color: null !default;
+
 // Sub trigger icon
 $menu-sub-trigger-icon-font-size: var(--#{$prefix}font-size-2xs) !default;
 
 // Checkable
 $menu-checkable-size: 16px !default;
-$menu-checkable-margin-x: spacing(3) !default;
 $menu-checkable-border-radius: var(--#{$prefix}border-radius-sm) !default;
 $menu-checkable-border-width: 1px !default;
 $menu-checkable-font-size: var(--#{$prefix}font-size-xs) !default;
@@ -312,6 +361,48 @@ $menu-item-icon-highlighted-selected-accent-color-by-variant: (
   subtle: $menu-item-icon-subtle-highlighted-selected-accent-color,
 ) !default;
 
+// Item shortcut - Accent
+$menu-item-keybinds-accent-color-by-variant: (
+  solid: $menu-item-keybinds-solid-accent-color,
+  subtle: $menu-item-keybinds-subtle-accent-color,
+) !default;
+
+// Item shortcut - Highlighted
+$menu-item-keybinds-highlighted-color-by-variant: (
+  solid: $menu-item-keybinds-solid-highlighted-color,
+  subtle: $menu-item-keybinds-subtle-highlighted-color,
+) !default;
+
+// Item shortcut - Highlighted + Accent
+$menu-item-keybinds-highlighted-accent-color-by-variant: (
+  solid: $menu-item-keybinds-solid-highlighted-accent-color,
+  subtle: $menu-item-keybinds-subtle-highlighted-accent-color,
+) !default;
+
+// Item shortcut - Selected
+$menu-item-keybinds-selected-color-by-variant: (
+  solid: $menu-item-keybinds-solid-selected-color,
+  subtle: $menu-item-keybinds-subtle-selected-color,
+) !default;
+
+// Item shortcut - Selected + Accent
+$menu-item-keybinds-selected-accent-color-by-variant: (
+  solid: $menu-item-keybinds-solid-selected-accent-color,
+  subtle: $menu-item-keybinds-subtle-selected-accent-color,
+) !default;
+
+// Item shortcut - Highlighted + Selected
+$menu-item-keybinds-highlighted-selected-color-by-variant: (
+  solid: $menu-item-keybinds-solid-highlighted-selected-color,
+  subtle: $menu-item-keybinds-subtle-highlighted-selected-color,
+) !default;
+
+// Item shortcut - Highlighted + Selected + Accent
+$menu-item-keybinds-highlighted-selected-accent-color-by-variant: (
+  solid: $menu-item-keybinds-solid-highlighted-selected-accent-color,
+  subtle: $menu-item-keybinds-subtle-highlighted-selected-accent-color,
+) !default;
+
 // Checkable indicator - Highlighted
 $menu-checkable-indicator-highlighted-color-by-variant: (
   solid: $menu-checkable-indicator-solid-highlighted-color,