ecabs-components 1.1.90 → 1.1.93

package/lib/base/consts/badge.consts.d.ts

@@ -0,0 +1,5 @@
+import { PhosphorIconWeight } from './icon.consts';
+export declare type BadgeVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';
+export declare type BadgeSize = 'small' | 'medium' | 'large';
+export declare type BadgeIconWeight = PhosphorIconWeight;
+export declare const CHIP_LABEL_CLASS = "mdc-evolution-chip__text-label";

package/lib/base/consts/icon.consts.d.ts

@@ -0,0 +1 @@
+export declare type PhosphorIconWeight = 'regular' | 'bold' | 'fill' | 'light' | 'thin' | 'duotone';

package/lib/base/consts/status-badge.consts.d.ts

@@ -0,0 +1,3 @@
+import { BadgeVariant } from './badge.consts';
+export declare const STATUS_BADGE_VARIANTS: Readonly<Record<string, BadgeVariant>>;
+export declare const resolveStatusBadgeVariant: (status: string | null | undefined) => BadgeVariant;

package/lib/base/directives/action-menu-trigger.directive.d.ts

@@ -0,0 +1,8 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class EcabsActionMenuTriggerDirective {
+    readonly templateRef: TemplateRef<void>;
+    constructor(templateRef: TemplateRef<void>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsActionMenuTriggerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<EcabsActionMenuTriggerDirective, "[ecabsActionMenuTrigger]", never, {}, {}, never, never, false, never>;
+}

package/lib/base/directives/badge.directive.d.ts

@@ -0,0 +1,26 @@
+import { ElementRef } from '@angular/core';
+import { MatChip } from '@angular/material/chips';
+import { MatMenuTrigger } from '@angular/material/menu';
+import { BadgeSize, BadgeVariant } from '../consts/badge.consts';
+import { EcabsTooltipIfTruncatedDirective } from './tooltip-if-truncated.directive';
+import * as i0 from "@angular/core";
+export declare class EcabsBadgeDirective {
+    private readonly elementRef;
+    private readonly chip?;
+    private readonly truncationTooltip?;
+    variant: BadgeVariant;
+    size: BadgeSize;
+    set bordered(value: boolean | string);
+    set disableRipple(value: boolean | string);
+    set interactive(value: boolean | string);
+    get badgeClasses(): string;
+    private hasBorder;
+    private rippleDisabled?;
+    private isInteractive;
+    private get noRipple();
+    private syncChip;
+    constructor(elementRef: ElementRef<HTMLElement>, menuTrigger?: MatMenuTrigger, chip?: MatChip, truncationTooltip?: EcabsTooltipIfTruncatedDirective);
+    onKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsBadgeDirective, [null, { optional: true; self: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<EcabsBadgeDirective, "[ecabsBadge]", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "bordered": { "alias": "bordered"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "interactive": { "alias": "interactive"; "required": false; }; }, {}, never, never, false, never>;
+}

package/lib/base/directives/badge.directive.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./badge.directive";
+import * as i2 from "@angular/common";
+export declare class EcabsBadgeDirectiveModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsBadgeDirectiveModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsBadgeDirectiveModule, [typeof i1.EcabsBadgeDirective], [typeof i2.CommonModule], [typeof i1.EcabsBadgeDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<EcabsBadgeDirectiveModule>;
+}

package/lib/base/directives/tooltip-if-truncated.directive.module.d.ts

@@ -1,8 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./tooltip-if-truncated.directive";
 import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/tooltip";
 export declare class EcabsTooltipIfTruncatedDirectiveModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<EcabsTooltipIfTruncatedDirectiveModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsTooltipIfTruncatedDirectiveModule, [typeof i1.EcabsTooltipIfTruncatedDirective], [typeof i2.CommonModule], [typeof i1.EcabsTooltipIfTruncatedDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsTooltipIfTruncatedDirectiveModule, [typeof i1.EcabsTooltipIfTruncatedDirective], [typeof i2.CommonModule, typeof i3.MatTooltipModule], [typeof i1.EcabsTooltipIfTruncatedDirective, typeof i3.MatTooltipModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<EcabsTooltipIfTruncatedDirectiveModule>;
 }

package/lib/base/models/action-menu.models.d.ts

@@ -0,0 +1,13 @@
+import { PhosphorIconWeight } from '../consts/icon.consts';
+export interface ActionMenuItem {
+    label: string;
+    icon?: string;
+    iconWeight?: PhosphorIconWeight;
+    isDestructive?: boolean;
+    action: () => void;
+}
+export interface ActionMenuEntry {
+    isVisible: boolean;
+    item: ActionMenuItem;
+}
+export type ActionMenuGroup = ActionMenuItem[];

package/lib/base/models/select.models.d.ts

@@ -1,4 +1,4 @@
-export type PhosphorIconWeight = 'regular' | 'bold' | 'fill' | 'light' | 'thin' | 'duotone';
+import { PhosphorIconWeight } from '../consts/icon.consts';
 export interface SelectOption<T = unknown> {
     label: string;
     value: T;

package/lib/base/pipes/status-badge-variant.pipe.d.ts

@@ -0,0 +1,8 @@
+import { PipeTransform } from '@angular/core';
+import { BadgeVariant } from '../consts/badge.consts';
+import * as i0 from "@angular/core";
+export declare class EcabsStatusBadgeVariantPipe implements PipeTransform {
+    transform(status: string | null | undefined): BadgeVariant;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsStatusBadgeVariantPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<EcabsStatusBadgeVariantPipe, "statusBadgeVariant", false>;
+}

package/lib/base/utils/icon.utils.d.ts

@@ -0,0 +1,2 @@
+import { PhosphorIconWeight } from '../consts/icon.consts';
+export declare function buildPhosphorSvgIcon(name: string | undefined | null, weight?: PhosphorIconWeight | null): string;

package/lib/ecabs-action-menu/ecabs-action-menu.component.d.ts

@@ -0,0 +1,26 @@
+import { MatMenu, MenuPositionX } from '@angular/material/menu';
+import { PhosphorIconWeight } from '../base/consts/icon.consts';
+import { EcabsActionMenuTriggerDirective } from '../base/directives/action-menu-trigger.directive';
+import { ActionMenuGroup, ActionMenuItem } from '../base/models/action-menu.models';
+import * as i0 from "@angular/core";
+export declare class EcabsActionMenuComponent {
+    groups: ActionMenuGroup[];
+    triggerIcon: string;
+    triggerIconWeight: PhosphorIconWeight;
+    triggerAriaLabel?: string;
+    xPosition: MenuPositionX;
+    menuClass: string;
+    triggerFocusable: boolean;
+    showTrigger: boolean;
+    readonly customTrigger?: EcabsActionMenuTriggerDirective;
+    readonly menu: MatMenu;
+    private readonly menuTrigger?;
+    get panelClass(): string;
+    get triggerSvgIcon(): string;
+    itemSvgIcon(item: ActionMenuItem): string;
+    triggerKeydown(event: Event): void;
+    trackByGroup(index: number): number;
+    trackByItem(_: number, item: ActionMenuItem): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsActionMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsActionMenuComponent, "ecabs-action-menu", never, { "groups": { "alias": "groups"; "required": false; }; "triggerIcon": { "alias": "triggerIcon"; "required": false; }; "triggerIconWeight": { "alias": "triggerIconWeight"; "required": false; }; "triggerAriaLabel": { "alias": "triggerAriaLabel"; "required": false; }; "xPosition": { "alias": "xPosition"; "required": false; }; "menuClass": { "alias": "menuClass"; "required": false; }; "triggerFocusable": { "alias": "triggerFocusable"; "required": false; }; "showTrigger": { "alias": "showTrigger"; "required": false; }; }, {}, ["customTrigger"], never, false, never>;
+}

package/lib/ecabs-action-menu/ecabs-action-menu.module.d.ts

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./ecabs-action-menu.component";
+import * as i2 from "../base/directives/action-menu-trigger.directive";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/material/button";
+import * as i5 from "@angular/material/divider";
+import * as i6 from "@angular/material/icon";
+import * as i7 from "@angular/material/menu";
+export declare class EcabsActionMenuModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsActionMenuModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsActionMenuModule, [typeof i1.EcabsActionMenuComponent, typeof i2.EcabsActionMenuTriggerDirective], [typeof i3.CommonModule, typeof i4.MatButtonModule, typeof i5.MatDividerModule, typeof i6.MatIconModule, typeof i7.MatMenuModule], [typeof i1.EcabsActionMenuComponent, typeof i2.EcabsActionMenuTriggerDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<EcabsActionMenuModule>;
+}

package/lib/ecabs-badge/ecabs-badge.component.d.ts

@@ -0,0 +1,41 @@
+import { BadgeIconWeight, BadgeSize, BadgeVariant } from '../base/consts/badge.consts';
+import * as i0 from "@angular/core";
+export declare class EcabsBadgeComponent {
+    variant: BadgeVariant;
+    size: BadgeSize;
+    set bordered(value: boolean | string);
+    hasBorder: boolean;
+    /**
+     * Icon name, resolved through whichever icon set the library is on (Phosphor
+     * today). Deliberately not named after the vendor so a future icon-set change
+     * does not ripple out to every call site.
+     */
+    icon?: string;
+    /**
+     * Defaults to `bold`: at badge icon sizes (12-18px) a `regular` stroke falls
+     * below one device pixel and antialiases into a ragged edge. `bold` also
+     * matches the ~26/256 ring thickness of the reference design.
+     */
+    iconWeight: BadgeIconWeight;
+    /**
+     * Material icon ligature, for the cases that need a Material glyph
+     * specifically. Used only when no `icon` is supplied.
+     */
+    materialIcon?: string;
+    /**
+     * Static so it resolves before the first change detection run, keeping the
+     * tooltip binding stable instead of changing after the view is checked.
+     */
+    private readonly labelRef?;
+    get svgIcon(): string;
+    /**
+     * Tooltip message for a clipped label. Read from the DOM rather than an input
+     * because the label is projected content. `ecabsTooltipIfTruncated` measures
+     * on mouseover, and that host listener also marks this view dirty, so the
+     * message is re-read on hover without any explicit change detection call.
+     * The directive suppresses the tooltip unless the text is actually clipped.
+     */
+    get labelText(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsBadgeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsBadgeComponent, "ecabs-badge", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "bordered": { "alias": "bordered"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconWeight": { "alias": "iconWeight"; "required": false; }; "materialIcon": { "alias": "materialIcon"; "required": false; }; }, {}, never, ["[ecabsBadgeIcon]", "*"], false, never>;
+}

package/lib/ecabs-badge/ecabs-badge.module.d.ts

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./ecabs-badge.component";
+import * as i2 from "../base/pipes/status-badge-variant.pipe";
+import * as i3 from "@angular/common";
+import * as i4 from "../base/directives/badge.directive.module";
+import * as i5 from "@angular/material/icon";
+import * as i6 from "@angular/material/tooltip";
+import * as i7 from "../base/directives/tooltip-if-truncated.directive.module";
+export declare class EcabsBadgeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsBadgeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsBadgeModule, [typeof i1.EcabsBadgeComponent, typeof i2.EcabsStatusBadgeVariantPipe], [typeof i3.CommonModule, typeof i4.EcabsBadgeDirectiveModule, typeof i5.MatIconModule, typeof i6.MatTooltipModule, typeof i7.EcabsTooltipIfTruncatedDirectiveModule], [typeof i1.EcabsBadgeComponent, typeof i4.EcabsBadgeDirectiveModule, typeof i2.EcabsStatusBadgeVariantPipe, typeof i7.EcabsTooltipIfTruncatedDirectiveModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<EcabsBadgeModule>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecabs-components",
-  "version": "1.1.90",
+  "version": "1.1.93",
   "peerDependencies": {
     "@angular/animations": "^16.2.12",
     "@angular/common": "^16.2.12",

package/public-api.d.ts

@@ -27,6 +27,7 @@ export * from './lib/base/models/header.models';
 export * from './lib/base/models/validation.models';
 export * from './lib/base/models/select.models';
 export * from './lib/base/models/waypoint.models';
+export * from './lib/base/models/action-menu.models';
 export * from './lib/ecabs-checkbox-toggle/ecabs-checkbox-toggle.component';
 export * from './lib/ecabs-checkbox-toggle/ecabs-checkbox-toggle.module';
 export * from './lib/ecabs-checkbox-v2/ecabs-checkbox-v2.component';
@@ -63,6 +64,10 @@ export * from './lib/ecabs-table/ecabs-table.component';
 export * from './lib/ecabs-table/ecabs-table.module';
 export * from './lib/ecabs-note/ecabs-note.component';
 export * from './lib/ecabs-note/ecabs-note.module';
+export * from './lib/ecabs-badge/ecabs-badge.component';
+export * from './lib/ecabs-badge/ecabs-badge.module';
+export * from './lib/ecabs-action-menu/ecabs-action-menu.component';
+export * from './lib/ecabs-action-menu/ecabs-action-menu.module';
 export * from './lib/ecabs-hint/ecabs-hint.component';
 export * from './lib/ecabs-hint/ecabs-hint.module';
 export * from './lib/ecabs-dialog-confirm/ecabs-dialog-confirm.component';
@@ -105,6 +110,9 @@ export * from './lib/base/directives/digits-only.directive';
 export * from './lib/base/directives/digits-only.directive.module';
 export * from './lib/base/directives/show-on-truncated.directive';
 export * from './lib/base/directives/show-on-truncated.directive.module';
+export * from './lib/base/directives/action-menu-trigger.directive';
+export * from './lib/base/directives/badge.directive';
+export * from './lib/base/directives/badge.directive.module';
 export * from './lib/ecabs-validation/ecabs-validation.module';
 export * from './lib/ecabs-validation/ecabs-validation.component';
 export * from './lib/ecabs-active-status-filter/ecabs-active-status-filter.component';
@@ -119,6 +127,7 @@ export * from './lib/ecabs-slider/ecabs-slider.module';
 export * from './lib/ecabs-base-phone-input/ecabs-base-phone.component';
 export * from './lib/ecabs-base-phone-input/ecabs-base-phone.module';
 export * from './lib/base/services/unsubscribe.service';
+export * from './lib/base/pipes/status-badge-variant.pipe';
 export * from './lib/base/pipes/truncate.pipe';
 export * from './lib/base/pipes/separator-append.pipe';
 export * from './lib/base/pipes/phone-number-country-code.pipe';
@@ -138,7 +147,11 @@ export * from './lib/ecabs-multiple-dates-picker/ecabs-multiple-dates-picker.com
 export * from './lib/base/services/ecabs-date-picker-translations.service';
 export * from './lib/base/utils/object-utils';
 export * from './lib/base/utils/phone-number.utils';
+export * from './lib/base/utils/icon.utils';
 export * from './lib/base/utils/select.utils';
+export * from './lib/base/consts/badge.consts';
+export * from './lib/base/consts/status-badge.consts';
+export * from './lib/base/consts/icon.consts';
 export * from './lib/base/consts/buttons.consts';
 export * from './lib/base/adapters/date.adapter';
 export * from './lib/base/consts/waypoint.consts';

package/src/assets/styles/material/overrides/_badge.scss

@@ -0,0 +1,120 @@
+$badge-sizes: small, medium, large;
+$badge-variants: default, success, warning, danger, info;
+
+.mat-icon {
+  &.badge__icon,
+  .badge__icon--slot > & {
+    width: var(--badge-icon-size);
+    height: var(--badge-icon-size);
+    font-size: var(--badge-icon-size);
+    line-height: var(--badge-icon-size);
+
+    &:hover {
+      color: inherit;
+    }
+  }
+}
+
+.mdc-evolution-chip.mat-mdc-chip.badge {
+  @extend .badge;
+
+  --mdc-chip-container-height: auto;
+  --mdc-chip-with-avatar-avatar-size: var(--badge-icon-size);
+
+  min-width: 0;
+  width: auto;
+  justify-content: flex-start;
+
+  @each $size in $badge-sizes {
+    &.badge--#{$size} {
+      @extend .badge--#{$size};
+    }
+  }
+
+  @each $variant in $badge-variants {
+    &.badge--#{$variant} {
+      @extend .badge--#{$variant};
+    }
+  }
+
+  &.badge--interactive {
+    @extend .badge--interactive;
+  }
+
+  &:hover {
+    border-color: var(--badge-border-color, transparent);
+  }
+
+  .mdc-evolution-chip__cell--primary,
+  .mdc-evolution-chip__action--primary {
+    min-width: 0;
+  }
+
+  .mdc-evolution-chip__action--primary {
+    padding: 0;
+    gap: var(--badge-gap);
+  }
+
+  .mdc-evolution-chip__graphic {
+    flex: none;
+    padding: 0;
+    width: auto;
+
+    > * {
+      width: var(--badge-icon-size);
+      height: var(--badge-icon-size);
+      font-size: var(--badge-icon-size);
+      line-height: var(--badge-icon-size);
+      color: inherit;
+    }
+  }
+
+  // #Trailing icon
+  &.mdc-evolution-chip--with-trailing-action {
+    --badge-trailing-allowance: calc(var(--badge-icon-size) + var(--badge-gap));
+
+    max-width: calc(
+      var(--badge-max-width, 100% - var(--badge-trailing-allowance)) +
+      var(--badge-trailing-allowance)
+    );
+
+    .mdc-evolution-chip__graphic {
+      padding: 0;
+    }
+
+    .mdc-evolution-chip__icon--trailing {
+      width: var(--badge-icon-size);
+      height: var(--badge-icon-size);
+      padding: 0;
+
+      font-size: var(--badge-icon-size);
+      line-height: var(--badge-icon-size);
+      color: inherit;
+
+      transition: transform 150ms ease;
+    }
+  }
+
+  &[aria-expanded='true'] .mdc-evolution-chip__icon--trailing {
+    transform: rotate(180deg);
+  }
+
+  &,
+  .mdc-evolution-chip__action {
+    cursor: inherit;
+  }
+
+  &.badge--no-ripple:hover .mat-mdc-chip-focus-overlay {
+    opacity: 0;
+  }
+
+
+  .mdc-evolution-chip__text-label {
+    @extend .badge__label;
+
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    letter-spacing: inherit;
+  }
+}

package/src/assets/styles/material/overrides/_menu.scss

@@ -3,8 +3,56 @@
     box-shadow: $box-shadow-default;
   }
 
-  &.actions-menu {
-    min-width: 180px;
+  &.action-menu-panel {
+    min-width: var(--action-menu-min-width, 180px);
+
+    &.action-menu-panel--compact {
+      --action-menu-min-width: #{calc-rem(120px)};
+    }
+  }
+}
+
+/* Material's menu styles are injected at runtime, so they land after this
+   stylesheet and win every tie. The selectors below are deliberately one class
+   heavier than the Material rules they counter. */
+.mat-mdc-icon-button {
+  .mat-icon.action-menu__trigger-icon {
+    width: var(--action-menu-trigger-icon-size);
+    height: var(--action-menu-trigger-icon-size);
+    font-size: var(--action-menu-trigger-icon-size);
+    line-height: var(--action-menu-trigger-icon-size);
+    color: var(--action-menu-trigger-icon-color);
+
+    &:hover {
+      color: var(--action-menu-trigger-icon-color-hover);
+    }
+  }
+
+  &:hover .mat-icon.action-menu__trigger-icon {
+    color: var(--action-menu-trigger-icon-color-hover);
+  }
+}
+
+.mat-mdc-menu-item {
+  &.action-menu-item {
+    color: var(--action-menu-item-color);
+
+    .mat-icon.action-menu-item__icon {
+      margin-right: var(--action-menu-item-icon-gap);
+      width: var(--action-menu-item-icon-size);
+      height: var(--action-menu-item-icon-size);
+      font-size: var(--action-menu-item-icon-size);
+      line-height: var(--action-menu-item-icon-size);
+      color: inherit;
+
+      &:hover {
+        color: inherit;
+      }
+    }
+
+    &.action-menu-item--destructive:not([disabled]):hover {
+      background-color: var(--color-error-opacity);
+    }
   }
 }
 

package/src/assets/styles/material/overrides/index.scss

@@ -1,5 +1,6 @@
 @import "autocomplete";
 @import "menu";
+@import 'badge';
 @import 'button';
 @import 'card';
 @import 'chip';

package/src/assets/styles/scss/modules/_badge.scss

@@ -0,0 +1,128 @@
+.badge {
+  --badge-gap: 0.25rem;
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--badge-gap);
+
+  max-width: var(--badge-max-width, 100%);
+  border: 1px solid var(--badge-border-color, transparent);
+  border-radius: $border-radius-base;
+  font-weight: $font-weight-medium;
+  line-height: 1;
+  white-space: nowrap;
+
+  @include e(icon) {
+    color: inherit;
+    flex: none;
+
+    width: var(--badge-icon-size);
+    height: var(--badge-icon-size);
+    font-size: var(--badge-icon-size);
+    line-height: var(--badge-icon-size);
+
+    @include m(slot) {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      &:empty {
+        display: none;
+      }
+
+      > * {
+        width: var(--badge-icon-size);
+        height: var(--badge-icon-size);
+        font-size: var(--badge-icon-size);
+        line-height: var(--badge-icon-size);
+        color: inherit;
+      }
+    }
+  }
+
+  @include e(label) {
+    display: block;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    line-height: calc(4 / 3);
+  }
+
+  /* #Sizes */
+  @include m(small) {
+    @include badge-size(1px, 6px, $font-size-xs, 12px);
+  }
+
+  @include m(medium) {
+    @include badge-size(3px, 8px, $font-size-xs, 12px);
+  }
+
+  @include m(large) {
+    @include badge-size(6px, 12px, $font-size-md, 16px);
+  }
+
+  /* #Variants */
+  @include m(default) {
+    background-color: var(--color-gray-100);
+    color: var(--color-gray-600);
+  }
+
+  @include m(success) {
+    background-color: var(--color-success--opacity);
+    color: var(--color-success);
+  }
+
+  @include m(warning) {
+    background-color: var(--color-warning-opacity);
+    color: var(--color-warning);
+  }
+
+  @include m(danger) {
+    background-color: var(--color-error-opacity);
+    color: var(--color-error);
+  }
+
+  @include m(info) {
+    background-color: rgba(var(--color-info-rgb), 0.06);
+    color: var(--color-info);
+  }
+
+  @include m(bordered) {
+    &.badge--default {
+      --badge-border-color: var(--color-default-border);
+    }
+
+    &.badge--success {
+      --badge-border-color: var(--color-success-border);
+    }
+
+    &.badge--warning {
+      --badge-border-color: var(--color-warning-border);
+    }
+
+    &.badge--danger {
+      --badge-border-color: var(--color-error-border);
+    }
+
+    &.badge--info {
+      --badge-border-color: var(--color-info-border);
+    }
+  }
+
+  /* #Interactive */
+  // A badge that can be clicked: a status label that opens a menu
+  @include m(interactive) {
+    cursor: pointer;
+
+    // Inset, so the ring is drawn inside the badge's own border box. An outset
+    // ring needs 4px of clear space on every side and gets shaved by any
+    // ancestor that clips, which in a table cell is routine: the badge sits
+    // flush against the cell's padding edge. Negative offset makes it immune to
+    // that everywhere instead of per container.
+    &:focus-visible {
+      outline: 2px solid var(--color-info);
+      outline-offset: -2px;
+    }
+  }
+}

package/src/assets/styles/scss/modules/_button.scss

@@ -1,6 +1,7 @@
 .btn {
   @include fontSize($font-size-base);
 
+  position: relative;
   border: 0;
   min-width: calc-rem(111px);
   min-height: calc-rem(42px);

package/src/assets/styles/scss/modules/_menu.scss

@@ -0,0 +1,48 @@
+.action-menu {
+  @include e(trigger) {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  @include e(trigger-icon) {
+    --action-menu-trigger-icon-size: #{calc-rem(16px)};
+    --action-menu-trigger-icon-color: var(--color-gray-400);
+    --action-menu-trigger-icon-color-hover: var(--color-brand-dark);
+
+    width: var(--action-menu-trigger-icon-size);
+    height: var(--action-menu-trigger-icon-size);
+    font-size: var(--action-menu-trigger-icon-size);
+    line-height: var(--action-menu-trigger-icon-size);
+    color: var(--action-menu-trigger-icon-color);
+  }
+}
+
+.action-menu-item {
+  --action-menu-item-color: var(--color-gray-700);
+  --action-menu-item-icon-size: #{calc-rem(16px)};
+  --action-menu-item-icon-gap: #{calc-rem(8px)};
+
+  display: flex;
+  align-items: center;
+  color: var(--action-menu-item-color);
+
+  @include m(destructive) {
+    --action-menu-item-color: var(--color-error);
+  }
+
+  @include e(icon) {
+    flex: none;
+
+    margin-right: var(--action-menu-item-icon-gap);
+    width: var(--action-menu-item-icon-size);
+    height: var(--action-menu-item-icon-size);
+    font-size: var(--action-menu-item-icon-size);
+    line-height: var(--action-menu-item-icon-size);
+    color: inherit;
+  }
+
+  @include e(label) {
+    @include fontSize($font-size-md);
+  }
+}

package/src/assets/styles/scss/modules/index.scss

@@ -1,3 +1,4 @@
+@import 'badge';
 @import 'button';
 @import 'card';
 @import 'chip';
@@ -11,6 +12,7 @@
 @import 'legend';
 @import 'list';
 @import 'map';
+@import 'menu';
 @import 'phone';
 @import 'select';
 @import 'statuses';