ecabs-components 1.1.92 → 1.1.94

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

@@ -2,3 +2,4 @@ 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/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/ecabs-action-menu/ecabs-action-menu.component.d.ts

@@ -1,4 +1,4 @@
-import { MenuPositionX } from '@angular/material/menu';
+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';
@@ -11,14 +11,16 @@ export declare class EcabsActionMenuComponent {
     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;
-    onTriggerKeydown(event: Event): void;
+    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; }; }, {}, ["customTrigger"], never, false, 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-badge/ecabs-badge.component.d.ts

@@ -3,7 +3,8 @@ import * as i0 from "@angular/core";
 export declare class EcabsBadgeComponent {
     variant: BadgeVariant;
     size: BadgeSize;
-    bordered: boolean;
+    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
@@ -26,8 +27,6 @@ export declare class EcabsBadgeComponent {
      * tooltip binding stable instead of changing after the view is checked.
      */
     private readonly labelRef?;
-    get variantClass(): string;
-    get sizeClass(): string;
     get svgIcon(): string;
     /**
      * Tooltip message for a clipped label. Read from the DOM rather than an input

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

@@ -2,11 +2,12 @@ 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 "@angular/material/icon";
-import * as i5 from "@angular/material/tooltip";
-import * as i6 from "../base/directives/tooltip-if-truncated.directive.module";
+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.MatIconModule, typeof i5.MatTooltipModule, typeof i6.EcabsTooltipIfTruncatedDirectiveModule], [typeof i1.EcabsBadgeComponent, typeof i2.EcabsStatusBadgeVariantPipe]>;
+    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/lib/ecabs-expansion-panel/ecabs-expansion-panel.component.d.ts

@@ -16,14 +16,15 @@ export declare class EcabsExpansionPanelComponent implements OnChanges {
     showCheckbox: boolean;
     showStatus: boolean;
     status: string;
-    hideToggle: boolean;
+    collapsible: boolean;
     checked: EventEmitter<boolean>;
     opened: EventEmitter<void>;
     expansionPanel: MatExpansionPanel;
     toggle: boolean;
+    get statusLabel(): string;
     onOpened(): void;
     ngOnChanges(changes: SimpleChanges): void;
     toggleAction(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<EcabsExpansionPanelComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsExpansionPanelComponent, "ecabs-expansion-panel", never, { "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "actionTitle": { "alias": "actionTitle"; "required": false; }; "index": { "alias": "index"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "showErrorMessage": { "alias": "showErrorMessage"; "required": false; }; "closePanel": { "alias": "closePanel"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "showStatus": { "alias": "showStatus"; "required": false; }; "status": { "alias": "status"; "required": false; }; "hideToggle": { "alias": "hideToggle"; "required": false; }; }, { "checked": "checked"; "opened": "opened"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsExpansionPanelComponent, "ecabs-expansion-panel", never, { "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "actionTitle": { "alias": "actionTitle"; "required": false; }; "index": { "alias": "index"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "showErrorMessage": { "alias": "showErrorMessage"; "required": false; }; "closePanel": { "alias": "closePanel"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "showStatus": { "alias": "showStatus"; "required": false; }; "status": { "alias": "status"; "required": false; }; "collapsible": { "alias": "collapsible"; "required": false; }; }, { "checked": "checked"; "opened": "opened"; }, never, ["*"], false, never>;
 }

package/lib/ecabs-expansion-panel/ecabs-expansion-panel.module.d.ts

@@ -5,10 +5,10 @@ import * as i3 from "@angular/forms";
 import * as i4 from "@angular/material/button";
 import * as i5 from "@angular/material/expansion";
 import * as i6 from "@angular/material/icon";
-import * as i7 from "@angular/material/chips";
-import * as i8 from "../ecabs-checkbox-toggle/ecabs-checkbox-toggle.module";
+import * as i7 from "../ecabs-checkbox-toggle/ecabs-checkbox-toggle.module";
+import * as i8 from "../ecabs-badge/ecabs-badge.module";
 export declare class EcabsExpansionPanelModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<EcabsExpansionPanelModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsExpansionPanelModule, [typeof i1.EcabsExpansionPanelComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.MatButtonModule, typeof i5.MatExpansionModule, typeof i6.MatIconModule, typeof i7.MatChipsModule, typeof i8.EcabsCheckboxToggleModule], [typeof i1.EcabsExpansionPanelComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsExpansionPanelModule, [typeof i1.EcabsExpansionPanelComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.MatButtonModule, typeof i5.MatExpansionModule, typeof i6.MatIconModule, typeof i7.EcabsCheckboxToggleModule, typeof i8.EcabsBadgeModule], [typeof i1.EcabsExpansionPanelComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<EcabsExpansionPanelModule>;
 }

package/package.json

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

package/public-api.d.ts

@@ -111,6 +111,8 @@ 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';

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

@@ -1,3 +1,6 @@
+$badge-sizes: small, medium, large;
+$badge-variants: default, success, warning, danger, info;
+
 .mat-icon {
   &.badge__icon,
   .badge__icon--slot > & {
@@ -11,3 +14,107 @@
     }
   }
 }
+
+.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/_expansion.scss

@@ -1,4 +1,15 @@
-.example-headers-align .mat-expansion-panel-header-title {
+ecabs-expansion-panel {
+  .mat-expansion-panel-header-description {
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .mat-expansion-indicator::after {
+    border-color: var(--color-gray-500);
+  }
+}
+
+ecabs-expansion-panel .mat-expansion-panel-header-title {
   @include fontSize($font-heading-xs);
 
   color: var(--color-brand-dark);
@@ -22,6 +33,37 @@
     .mat-expansion-panel-body {
       padding: calc-rem(0 0 16 0);
     }
+
+    .ecabs-expansion-panel__heading {
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      height: var(--mat-expansion-header-expanded-state-height, #{calc-rem(64)});
+      padding: calc-rem(0 0 24 0);
+
+      // Matches the width the real header's content box gets once the toggle is accounted for.
+      .mat-content {
+        display: flex;
+        flex: 1;
+        flex-direction: row;
+        overflow: hidden;
+        margin-right: calc-rem(8);
+      }
+
+      .mat-expansion-panel-header-title,
+      .mat-expansion-panel-header-description {
+        display: flex;
+        align-items: center;
+        flex-grow: 1;
+        flex-basis: 0;
+        margin-right: calc-rem(16);
+      }
+
+      .mat-expansion-panel-header-description {
+        flex-grow: 2;
+        color: var(--mat-expansion-header-description-color);
+      }
+    }
   }
 
   .mat-expansion-panel:not([class*=mat-elevation-z]) {

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

@@ -1,61 +1,61 @@
-.mat-mdc-menu-panel {
-  &.mat-mdc-elevation-specific.mat-elevation-z8 {
-    box-shadow: $box-shadow-default;
-  }
-
-  &.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);
-    }
-  }
-}
-
-.logout-btn {
-  box-shadow: 0 -5px 10px -10px var(--color-gray-500);
-}
+.mat-mdc-menu-panel {
+  &.mat-mdc-elevation-specific.mat-elevation-z8 {
+    box-shadow: $box-shadow-default;
+  }
+
+  &.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);
+    }
+  }
+}
+
+.logout-btn {
+  box-shadow: 0 -5px 10px -10px var(--color-gray-500);
+}

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

@@ -1,10 +1,12 @@
-.badge {
+.badge {
+  --badge-gap: 0.25rem;
+
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--badge-gap);
 
   max-width: var(--badge-max-width, 100%);
-  border: 1px solid transparent;
+  border: 1px solid var(--badge-border-color, transparent);
   border-radius: $border-radius-base;
   font-weight: $font-weight-medium;
   line-height: 1;
@@ -19,7 +21,6 @@
     font-size: var(--badge-icon-size);
     line-height: var(--badge-icon-size);
 
-
     @include m(slot) {
       display: inline-flex;
       align-items: center;
@@ -89,23 +90,39 @@
 
   @include m(bordered) {
     &.badge--default {
-      border-color: var(--color-default-border);
+      --badge-border-color: var(--color-default-border);
     }
 
     &.badge--success {
-      border-color: var(--color-success-border);
+      --badge-border-color: var(--color-success-border);
     }
 
     &.badge--warning {
-      border-color: var(--color-warning-border);
+      --badge-border-color: var(--color-warning-border);
     }
 
     &.badge--danger {
-      border-color: var(--color-error-border);
+      --badge-border-color: var(--color-error-border);
     }
 
     &.badge--info {
-      border-color: var(--color-info-border);
+      --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

@@ -1,48 +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);
-  }
-}
+.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);
+  }
+}