@ostack.tech/ui 0.8.2 → 0.9.1

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,

package/scss/scss/placeholders/menu/_menu.scss

@@ -121,6 +121,12 @@
             --#{$prefix}menu-item-icon-color,
             map.get($menu-item-icon-accent-color-by-variant, $variant)
           );
+
+          // Item shortcut - Accent
+          @include declare-var(
+            --#{$prefix}menu-item-keybinds-color,
+            map.get($menu-item-keybinds-accent-color-by-variant, $variant)
+          );
         }
 
         // Item - Highlighted
@@ -145,6 +151,12 @@
             map.get($menu-item-icon-highlighted-color-by-variant, $variant)
           );
 
+          // Item shortcut - Highlighted
+          @include declare-var(
+            --#{$prefix}menu-item-keybinds-color,
+            map.get($menu-item-keybinds-highlighted-color-by-variant, $variant)
+          );
+
           // Checkable indicator - Highlighted
           @include declare-var(
             --#{$prefix}menu-checkable-indicator-color,
@@ -177,6 +189,15 @@
               )
             );
 
+            // Item shortcut - Highlighted + Accent
+            @include declare-var(
+              --#{$prefix}menu-item-keybinds-color,
+              map.get(
+                $menu-item-keybinds-highlighted-accent-color-by-variant,
+                $variant
+              )
+            );
+
             // Checkable indicator - Highlighted + Accent
             @include declare-var(
               --#{$prefix}menu-checkable-indicator-color,
@@ -214,6 +235,12 @@
             map.get($menu-item-icon-selected-color-by-variant, $variant)
           );
 
+          // Item shortcut - Selected
+          @include declare-var(
+            --#{$prefix}menu-item-keybinds-color,
+            map.get($menu-item-keybinds-selected-color-by-variant, $variant)
+          );
+
           // Item - Selected + Accent
           &[data-accent] {
             @include declare-var(
@@ -236,6 +263,15 @@
                 $variant
               )
             );
+
+            // Item shortcut - Selected + Accent
+            @include declare-var(
+              --#{$prefix}menu-item-keybinds-color,
+              map.get(
+                $menu-item-keybinds-selected-accent-color-by-variant,
+                $variant
+              )
+            );
           }
         }
 
@@ -260,6 +296,15 @@
             )
           );
 
+          // Item shortcut - Highlighted + Selected
+          @include declare-var(
+            --#{$prefix}menu-item-keybinds-color,
+            map.get(
+              $menu-item-keybinds-highlighted-selected-color-by-variant,
+              $variant
+            )
+          );
+
           // Item - Highlighted + Selected + Accent
           &[data-accent] {
             @include declare-var(
@@ -278,6 +323,15 @@
                 $variant
               )
             );
+
+            // Item shortcut - Highlighted + Selected + Accent
+            @include declare-var(
+              --#{$prefix}menu-item-keybinds-color,
+              map.get(
+                $menu-item-keybinds-highlighted-selected-accent-color-by-variant,
+                $variant
+              )
+            );
           }
         }
       }
@@ -323,6 +377,13 @@
     }
   }
 
+  &__item-keybinds {
+    margin-left: $menu-item-keybinds-margin-x;
+    font-size: $menu-item-keybinds-font-size;
+    line-height: $menu-item-keybinds-line-height;
+    color: var(--#{$prefix}menu-item-keybinds-color, $menu-item-keybinds-color);
+  }
+
   &__sub-trigger-icon {
     font-size: $menu-sub-trigger-icon-font-size;
   }
@@ -336,7 +397,6 @@
     width: $menu-checkable-size;
     height: $menu-checkable-size;
 
-    margin-left: $menu-checkable-margin-x;
     border-radius: $menu-checkable-border-radius;
     border: $menu-checkable-border-width solid
       var(--#{$prefix}menu-item-icon-color, $menu-item-icon-color);

package/dist/chunks/en-BfgHKQwn.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"en-BfgHKQwn.js","sources":["../../src/locales/en.tsx"],"sourcesContent":["import type { LocalizationObject } from \"../providers/LocalizationProvider\";\n\n/** `en` locale (partial). */\nexport const en: Omit<LocalizationObject, \"languageTag\" | \"dateFnsLocale\"> = {\n  AlertDialog: {\n    okText: \"OK\",\n  },\n  Calendar: {\n    previousMonthLabel: \"Previous month\",\n    nextMonthLabel: \"Next month\",\n  },\n  CloseButton: {\n    label: \"Close\",\n  },\n  CommandMenu: {\n    searchPlaceholder: \"Search…\",\n    listLabel: \"Suggestions\",\n    loadingLabel: \"Loading…\",\n    emptyMessage: \"No results found.\",\n  },\n  CommandMenuDialog: {\n    title: \"Command palette\",\n    description: \"Search for a command…\",\n  },\n  ConfirmDialog: {\n    cancelText: \"Cancel\",\n  },\n  ControlCode: {\n    visuallyHiddenPrefix: \"Field\",\n  },\n  DataTable: {\n    emptyMessage: \"Nothing to show.\",\n  },\n  DataTableFilter: {\n    \"aria-label\": \"Table filter\",\n    placeholder: \"Filter\",\n  },\n  DataTablePagination: {\n    rowsRange: (range, total) => (\n      <>\n        Rows&nbsp;{range}&nbsp;of {total}\n      </>\n    ),\n    previousPageButtonLabel: \"Previous page\",\n    nextPageButtonLabel: \"Next page\",\n  },\n  DataTableRowsPerPage: {\n    label: \"Rows per page\",\n  },\n  DateInput: {\n    calendarButtonLabel: (selectedDate, editable) =>\n      editable\n        ? selectedDate\n          ? `Open calendar to change selected date: ${selectedDate}`\n          : \"Open calendar to select date\"\n        : selectedDate\n          ? `Open calendar with selected date: ${selectedDate}`\n          : \"Open calendar with no selected date\",\n  },\n  DateRangeInput: {\n    startInputLabel: \"Start date\",\n    endInputLabel: \"End date\",\n    calendarButtonLabel: (selectedDateRange, editable) =>\n      editable\n        ? selectedDateRange\n          ? `Open calendar to change selected date-range: ${selectedDateRange}`\n          : \"Open calendar to select date-range\"\n        : selectedDateRange\n          ? `Open calendar with selected date-range: ${selectedDateRange}`\n          : \"Open calendar with no selected date-range\",\n  },\n  ErrorBoundary: {\n    fallbackMessage: (\n      <>\n        Something went wrong.\n        <br />\n        Press the button on the right to try again. If the problem persists,\n        please try again later.\n      </>\n    ),\n    resetButtonLabel: \"Retry\",\n  },\n  Feedback: {\n    visuallyHiddenPrefix: (type) =>\n      type === \"error\" ? \"Error:\" : type === \"warning\" ? \"Warning:\" : null,\n  },\n  FeedbackPopover: {\n    label: \"Show feedback\",\n  },\n  FieldGroupHeader: {\n    visuallyHiddenCodePrefix: \"Group\",\n  },\n  Input: {\n    loadingDescription: \"Loading…\",\n    clearButtonLabel: \"Clear\",\n  },\n  Label: {\n    requiredIconLabel: \"Required\",\n    helperButtonLabel: \"Show help\",\n  },\n  NumericInput: {\n    decimalSeparator: \".\",\n    groupingStyle: \"thousand\",\n    groupSeparator: \",\",\n  },\n  Select: {\n    optionsLabel: \"Options\",\n  },\n  TableColumn: {\n    helperButtonLabel: \"Show help\",\n  },\n  TableHead: {\n    sortByColumnDescription: (columnName, sortDirection) =>\n      sortDirection === null\n        ? `Stop sorting table by column “${columnName}”`\n        : `Sort table by column “${columnName}” in ${\n            sortDirection === \"asc\" ? \"ascending\" : \"descending\"\n          } order`,\n  },\n  ToastProvider: {\n    label: \"Notification\",\n  },\n  ToastViewport: {\n    label: \"Notifications ({hotkey})\",\n  },\n};\n"],"names":[],"mappings":";AAGO,MAAM,KAAgE;AAAA,EAC3E,aAAa;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,UAAU;AAAA,IACR,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,EAAA;AAAA,EAElB,aAAa;AAAA,IACX,OAAO;AAAA,EAAA;AAAA,EAET,aAAa;AAAA,IACX,mBAAmB;AAAA,IACnB,WAAW;AAAA,IACX,cAAc;AAAA,IACd,cAAc;AAAA,EAAA;AAAA,EAEhB,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,aAAa;AAAA,EAAA;AAAA,EAEf,eAAe;AAAA,IACb,YAAY;AAAA,EAAA;AAAA,EAEd,aAAa;AAAA,IACX,sBAAsB;AAAA,EAAA;AAAA,EAExB,WAAW;AAAA,IACT,cAAc;AAAA,EAAA;AAAA,EAEhB,iBAAiB;AAAA,IACf,cAAc;AAAA,IACd,aAAa;AAAA,EAAA;AAAA,EAEf,qBAAqB;AAAA,IACnB,WAAW,CAAC,OAAO,UACjB,qBAAA,UAAA,EAAE,UAAA;AAAA,MAAA;AAAA,MACW;AAAA,MAAM;AAAA,MAAU;AAAA,IAAA,GAC7B;AAAA,IAEF,yBAAyB;AAAA,IACzB,qBAAqB;AAAA,EAAA;AAAA,EAEvB,sBAAsB;AAAA,IACpB,OAAO;AAAA,EAAA;AAAA,EAET,WAAW;AAAA,IACT,qBAAqB,CAAC,cAAc,aAClC,WACI,eACE,0CAA0C,YAAY,KACtD,iCACF,eACE,qCAAqC,YAAY,KACjD;AAAA,EAAA;AAAA,EAEV,gBAAgB;AAAA,IACd,iBAAiB;AAAA,IACjB,eAAe;AAAA,IACf,qBAAqB,CAAC,mBAAmB,aACvC,WACI,oBACE,gDAAgD,iBAAiB,KACjE,uCACF,oBACE,2CAA2C,iBAAiB,KAC5D;AAAA,EAAA;AAAA,EAEV,eAAe;AAAA,IACb,iBACE,qBAAA,UAAA,EAAE,UAAA;AAAA,MAAA;AAAA,0BAEC,MAAA,EAAG;AAAA,MAAE;AAAA,IAAA,GAGR;AAAA,IAEF,kBAAkB;AAAA,EAAA;AAAA,EAEpB,UAAU;AAAA,IACR,sBAAsB,CAAC,SACrB,SAAS,UAAU,WAAW,SAAS,YAAY,aAAa;AAAA,EAAA;AAAA,EAEpE,iBAAiB;AAAA,IACf,OAAO;AAAA,EAAA;AAAA,EAET,kBAAkB;AAAA,IAChB,0BAA0B;AAAA,EAAA;AAAA,EAE5B,OAAO;AAAA,IACL,oBAAoB;AAAA,IACpB,kBAAkB;AAAA,EAAA;AAAA,EAEpB,OAAO;AAAA,IACL,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,EAAA;AAAA,EAErB,cAAc;AAAA,IACZ,kBAAkB;AAAA,IAClB,eAAe;AAAA,IACf,gBAAgB;AAAA,EAAA;AAAA,EAElB,QAAQ;AAAA,IACN,cAAc;AAAA,EAAA;AAAA,EAEhB,aAAa;AAAA,IACX,mBAAmB;AAAA,EAAA;AAAA,EAErB,WAAW;AAAA,IACT,yBAAyB,CAAC,YAAY,kBACpC,kBAAkB,OACd,iCAAiC,UAAU,MAC3C,yBAAyB,UAAU,QACjC,kBAAkB,QAAQ,cAAc,YAC1C;AAAA,EAAA;AAAA,EAER,eAAe;AAAA,IACb,OAAO;AAAA,EAAA;AAAA,EAET,eAAe;AAAA,IACb,OAAO;AAAA,EAAA;AAEX;"}