@design-factory/design-factory 20.0.0-next.0 → 20.0.0-next.1

package/index.d.ts

@@ -1,11 +1,10 @@
 import * as i0 from '@angular/core';
-import { AfterViewInit, ElementRef, Renderer2, OnInit, OnDestroy, DoCheck, RendererFactory2, ComponentRef, EmbeddedViewRef, TemplateRef, Type, ComponentFactoryResolver, ApplicationRef, Injector, OnChanges, EventEmitter, ChangeDetectorRef, NgZone, SimpleChanges, AfterViewChecked, AfterContentInit, InjectionToken } from '@angular/core';
+import { AfterViewInit, ElementRef, Renderer2, OnInit, OnDestroy, AfterViewChecked, DoCheck, ComponentRef, EmbeddedViewRef, TemplateRef, Type, OnChanges, EventEmitter, ChangeDetectorRef, NgZone, SimpleChanges, AfterContentInit, InjectionToken } from '@angular/core';
 import * as i2 from '@ng-bootstrap/ng-bootstrap';
-import { NgbDate, NgbDropdown, NgbDatepicker, NgbCalendar, NgbDateParserFormatter, NgbModal, NgbModalOptions, NgbModalRef, NgbPopoverConfig, NgbConfig } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDate, NgbDropdown, NgbDatepicker, NgbModalOptions, NgbModalRef, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
 import { Observable } from 'rxjs';
 import { ControlValueAccessor } from '@angular/forms';
 import * as i4 from '@ng-select/ng-select';
-import { NgSelectComponent } from '@ng-select/ng-select';
 
 declare class SkipLinkDirective {
     readonly inFocus: i0.WritableSignal<boolean>;
@@ -61,7 +60,7 @@ declare class DfAlertModule {
 /**
  * My dfDatepickerRange directive
  */
-declare class DfDatepickerRangeDirective implements OnInit, OnDestroy, DoCheck, AfterViewInit {
+declare class DfDatepickerRangeDirective implements OnInit, OnDestroy, AfterViewChecked, AfterViewInit {
     private inputsElements;
     private isDisabled;
     private readonly siblingsNode;
@@ -81,7 +80,7 @@ declare class DfDatepickerRangeDirective implements OnInit, OnDestroy, DoCheck,
      * if the direction (rtl / ltr) is changing dynamically
      */
     updateDirection(): void;
-    ngDoCheck(): void;
+    ngAfterViewChecked(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfDatepickerRangeDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DfDatepickerRangeDirective, "[dfDatepickerRange]", ["dfDatepickerRange"], {}, {}, never, never, true, never>;
@@ -89,7 +88,6 @@ declare class DfDatepickerRangeDirective implements OnInit, OnDestroy, DoCheck,
 
 declare class DfTriggerClickDirective {
     private readonly elementRef;
-    constructor(elementRef: ElementRef);
     triggerClick(event: KeyboardEvent | MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfTriggerClickDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DfTriggerClickDirective, "[dfTriggerClick]", never, {}, {}, never, never, true, never>;
@@ -136,8 +134,6 @@ declare class DfDatePickerModule {
 }
 
 declare class DfDatepickerRangeService {
-    private readonly calendar;
-    private readonly formatter;
     fromDate: NgbDate | null;
     toDate: NgbDate | null;
     hoveredDate: NgbDate | null;
@@ -148,7 +144,8 @@ declare class DfDatepickerRangeService {
     dropDown?: NgbDropdown;
     isClosingOnToDate: boolean;
     datepicker: NgbDatepicker | null;
-    constructor(calendar: NgbCalendar, formatter: NgbDateParserFormatter);
+    private readonly calendar;
+    private readonly formatter;
     onDateSelection(date: NgbDate): void;
     setFocus(): void;
     returnFocus(): void;
@@ -218,10 +215,8 @@ declare class DfIconModule {
  * Please note that `NgbModal` adds 'modal-open' class to the body while DfModalService adds 'df-modal-open' class. Both classes include the same styles, but you may need to update your stylesheets if you were overriding 'df-modal-open' in your application.
  */
 declare class DfModalService {
-    private modalService;
-    private rendererFactory;
-    private renderer;
-    constructor(modalService: NgbModal, rendererFactory: RendererFactory2);
+    private readonly renderer;
+    private readonly modalService;
     open(content: any, options?: NgbModalOptions): NgbModalRef;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfModalService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DfModalService>;
@@ -392,60 +387,8 @@ declare class DfProgressIndicatorRef {
     constructor(containerRef: ComponentRef<DfProgressIndicatorContainerComponent>, contentRef: ComponentRef<unknown> | EmbeddedViewRef<unknown>, backdropRef?: ComponentRef<DfProgressIndicatorBackdropComponent> | undefined);
 }
 
-/** Type for the callback used to revert the scrollbar compensation. */
-type CompensationReverter = () => void;
-/**
- * Utility to handle the scrollbar.
- *
- * It allows to compensate the lack of a vertical scrollbar by adding an
- * equivalent padding on the right of the body, and to remove this compensation.
- *
- * It is a copy of https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/util/scrollbar.ts
- */
-declare class ScrollBar {
-    private readonly _document;
-    constructor(_document: any);
-    /**
-     * To be called right before a potential vertical scrollbar would be removed:
-     *
-     * - if there was a scrollbar, adds some compensation padding to the body
-     * to keep the same layout as when the scrollbar is there
-     * - if there was none, there is nothing to do
-     *
-     * @return a callback used to revert the compensation (noop if there was none,
-     * otherwise a function removing the padding)
-     */
-    compensate(): CompensationReverter;
-    /**
-     * Adds a padding of the given width on the right of the body.
-     *
-     * @return a callback used to revert the padding to its previous value
-     */
-    private _adjustBody;
-    /**
-     * Tells whether a scrollbar is currently present on the body.
-     *
-     * @return true if scrollbar is present, false otherwise
-     */
-    private _isPresent;
-    /**
-     * Calculates and returns the width of a scrollbar.
-     *
-     * @return the width of a scrollbar on this page
-     */
-    private _getWidth;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ScrollBar, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<ScrollBar>;
-}
-
 type DfProgressIndicatorContent<T> = undefined | TemplateRef<T> | Type<T> | DfProgressIndicatorContentSpinner | DfProgressIndicatorContentProgressBar;
 declare class DfProgressIndicatorService {
-    private readonly document;
-    private readonly rendererFactory;
-    private readonly componentFactoryResolver;
-    private readonly appRef;
-    private readonly injector;
-    private readonly scrollbar;
     private readonly renderer;
     private readonly BODY_CLASS;
     private readonly containerAttributes;
@@ -453,7 +396,10 @@ declare class DfProgressIndicatorService {
     private readonly defaultSpinnerAttributes;
     private readonly defaultProgressBarAttributes;
     private readonly activeInstances;
-    constructor(document: Document, rendererFactory: RendererFactory2, componentFactoryResolver: ComponentFactoryResolver, appRef: ApplicationRef, injector: Injector, scrollbar: ScrollBar);
+    private readonly document;
+    private readonly appRef;
+    private readonly environmentInjector;
+    private readonly scrollbar;
     open<T>(content: DfProgressIndicatorContent<T>, options?: DfProgressIndicatorOptions): DfProgressIndicatorRef;
     close(progressIndicatorRef: DfProgressIndicatorRef): void;
     /**
@@ -1058,23 +1004,6 @@ declare class DfSliderModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<DfSliderModule>;
 }
 
-/**
- * A configuration service for the [DfSideNavService](#/components/sidenav/api#DfSideNavComponent) component.
- *
- * You can inject this service, typically in your root component, and customize its properties
- * to provide default values for your sidenav used in the application.
- */
-declare class DfSideNavConfig {
-    isMinmized: boolean;
-    isCollapsed: boolean;
-    isPresent: boolean;
-    isInMenuOverlay: boolean;
-    isAppOverlay: boolean;
-    isAppOverlayMode: boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DfSideNavConfig, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<DfSideNavConfig>;
-}
-
 interface DfSideNavItem {
     value: string;
     title?: string;
@@ -1104,8 +1033,8 @@ declare enum DfNavItemType {
  * Creating a sidenav is straightforward: use [DfSideNavComponent](#/components/sidenav/api#DfSideNavComponent) component
  */
 declare class DfSideNavService implements OnDestroy {
-    private readonly config;
     type: typeof DfNavItemType;
+    private readonly config;
     private readonly _sideNavItems$;
     private readonly _isMinmized$;
     private readonly _isCollapsed$;
@@ -1116,7 +1045,7 @@ declare class DfSideNavService implements OnDestroy {
     private _isAppOverlayMode;
     private _items;
     private readonly subscription;
-    constructor(config: DfSideNavConfig);
+    constructor();
     ngOnDestroy(): void;
     /**
      * Use this to init the list of Elements from your sidenav
@@ -1253,20 +1182,17 @@ declare class DfSideNavService implements OnDestroy {
 }
 
 declare class DfSideNavHeaderDirective {
-    templateRef: TemplateRef<any>;
-    constructor(templateRef: TemplateRef<any>);
+    readonly templateRef: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfSideNavHeaderDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DfSideNavHeaderDirective, "ng-template[dfSideNavHeader]", never, {}, {}, never, never, true, never>;
 }
 declare class DfSideNavIconDirective {
-    templateRef: TemplateRef<any>;
-    constructor(templateRef: TemplateRef<any>);
+    readonly templateRef: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfSideNavIconDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DfSideNavIconDirective, "ng-template[dfSideNavIcon]", never, {}, {}, never, never, true, never>;
 }
 declare class DfSideNavItemDirective {
-    templateRef: TemplateRef<any>;
-    constructor(templateRef: TemplateRef<any>);
+    readonly templateRef: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfSideNavItemDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DfSideNavItemDirective, "ng-template[dfSideNavItem]", never, {}, {}, never, never, true, never>;
 }
@@ -1296,7 +1222,6 @@ declare class DfSideNavComponent implements OnDestroy {
 declare class DfManageSideNavDirective implements AfterViewChecked {
     private readonly element;
     private readonly renderer;
-    constructor(element: ElementRef, renderer: Renderer2);
     ngAfterViewChecked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfManageSideNavDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DfManageSideNavDirective, "[dfManageSideNav]", never, {}, {}, never, never, true, never>;
@@ -1331,19 +1256,18 @@ declare class DfExcludeTrapDirective implements OnDestroy, OnInit {
 }
 
 declare class DfManageNavSelectDirective implements OnInit {
+    private direction;
     private readonly select;
     private readonly element;
     private readonly rtlDirectionService;
     private readonly renderer;
-    private direction;
-    constructor(select: NgSelectComponent, element: ElementRef, rtlDirectionService: DfDirectionDetectionService, renderer: Renderer2);
     ngOnInit(): void;
     handleKeyDown(event: any): void;
     handleKeyDownBackspace(event: any): void;
     handleKeyDownRight(event: any): void;
     arrowRightInnerHandler(event: any): void;
     arrowLeftInnerHandler(event: any): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DfManageNavSelectDirective, [{ host: true; }, null, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DfManageNavSelectDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DfManageNavSelectDirective, "[dfManageNavSelect]", never, {}, {}, never, never, true, never>;
 }
 
@@ -1647,22 +1571,6 @@ declare class DfSideNavCollapseDirective implements OnInit {
     static ɵdir: i0.ɵɵDirectiveDeclaration<DfSideNavCollapseDirective, "[dfSideNavCollapse]", ["dfSideNavCollapse"], { "dfSideNavCollapse": { "alias": "dfSideNavCollapse"; "required": true; "isSignal": true; }; "minimized": { "alias": "minimized"; "required": false; "isSignal": true; }; }, { "dfSideNavCollapseChange": "dfSideNavCollapseChange"; "shown": "shown"; "hidden": "hidden"; }, never, never, true, never>;
 }
 
-/**
- * A configuration service for the [DfSideNavCollapseDirective](#/components/sidenav/api#DfSideNavCollapseDirective) component.
- *
- * You can inject this service, typically in your root component, and customize its properties
- * to provide default values for the sideNav used in the application.
- */
-declare class DfSideNavCollapseConfig {
-    private readonly _ngbConfig;
-    private _animation?;
-    constructor(_ngbConfig: NgbConfig);
-    get animation(): boolean;
-    set animation(animation: boolean);
-    static ɵfac: i0.ɵɵFactoryDeclaration<DfSideNavCollapseConfig, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<DfSideNavCollapseConfig>;
-}
-
 declare class DfSideNavCollapseModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DfSideNavCollapseModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<DfSideNavCollapseModule, never, [typeof DfSideNavCollapseDirective], [typeof DfSideNavCollapseDirective]>;
@@ -1675,6 +1583,23 @@ declare class DfSideNavModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<DfSideNavModule>;
 }
 
+/**
+ * A configuration service for the [DfSideNavService](#/components/sidenav/api#DfSideNavComponent) component.
+ *
+ * You can inject this service, typically in your root component, and customize its properties
+ * to provide default values for your sidenav used in the application.
+ */
+declare class DfSideNavConfig {
+    isMinmized: boolean;
+    isCollapsed: boolean;
+    isPresent: boolean;
+    isInMenuOverlay: boolean;
+    isAppOverlay: boolean;
+    isAppOverlayMode: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DfSideNavConfig, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DfSideNavConfig>;
+}
+
 /**
  * A service for managing the sidenav panel animation.
  * This service is included at root level
@@ -1682,9 +1607,7 @@ declare class DfSideNavModule {
  * Creating a sidenav is straightforward: use [DfSideNavComponent](#/components/sidenav/api#DfSideNavComponent) component
  */
 declare class DfSideNavCollapseService {
-    private readonly _config;
     private readonly _sideNavAnimation$;
-    constructor(_config: DfSideNavCollapseConfig);
     get sideNavAnimation$(): Observable<boolean>;
     /**
      * Use this to activate or desactivate the animation for the sideNav
@@ -1716,12 +1639,10 @@ declare const BREAKPOINTS_VARS: InjectionToken<{
     xxxl: string;
 }>;
 declare class DfBreakpoints {
+    private readonly _breakPoints$;
     private readonly _breakPointsVar;
     private readonly platformID;
-    private readonly _breakPoints$;
-    constructor(_breakPointsVar: {
-        [breakpoint: string]: string;
-    }, platformID: Object);
+    constructor();
     get breakPoints$(): Observable<{} | null>;
     private initBreakpoints;
     generate(sizes: any[][]): {};
@@ -1736,17 +1657,15 @@ interface MediaBreakpointsState {
 }
 declare class DfMediaQuery {
     private readonly _isBrowser;
-    constructor(platformId: Object);
     notSupported(query: string): Partial<MediaQueryList>;
     matchMedia(query: string): MediaQueryList;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfMediaQuery, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DfMediaQuery>;
 }
 declare class DfMediaObserver implements OnDestroy {
-    private readonly _mediaQuery;
     private readonly _subscription;
     private readonly _queries;
-    constructor(_mediaQuery: DfMediaQuery);
+    private readonly _mediaQuery;
     /**
      * Verifies if at least one of the provided media-queries is matching
      * the current viewport
@@ -1773,7 +1692,6 @@ declare class DfMediaObserver implements OnDestroy {
 declare class DfMedia {
     private readonly mediaObserver;
     private readonly _breakPointsService;
-    constructor(mediaObserver: DfMediaObserver, _breakPointsService: DfBreakpoints);
     initQueries(mediaOrBreakpoints: string | string[], breakPoints?: {
         [key: string]: string;
     }): string[];

package/package.json

@@ -2,7 +2,7 @@
   "name": "@design-factory/design-factory",
   "description": "Amadeus design system",
   "license": "BSD-3-Clause",
-  "version": "20.0.0-next.0",
+  "version": "20.0.0-next.1",
   "dependencies": {
     "tslib": "^2.0.0"
   },

package/styles/scss/_common.variables.scss

@@ -16,11 +16,12 @@ $df-zindex-topmost: 10000 !default;
 $df-font-size-xs: $font-size-sm !default;
 $df-form-placeholder-font-style: italic !default;
 // Merge DF Spacer with BS ones
+// @deprecated - will be removed in version 21, use $spacer-4 instead of '75'
 // stylelint-disable-next-line scss/dollar-variable-pattern, scss/dollar-variable-default
 $spacers: map.merge(
   (
     '75': (
-      $spacer * 0.75
+      calc($spacer * 0.75)
     )
   ),
   $spacers

package/styles/scss/_variables.scss

@@ -55,6 +55,7 @@
 @import 'components/sidenav/sidenav.variables';
 @import 'components/footer/footer.variables';
 @import 'components/separator/separator.variables';
+@import 'components/timepicker/timepicker.variables';
 @import 'components/toast/toast.variables';
 @import 'components/scrollspy/scrollspy.variables';
 @import 'components/tooltip/tooltip.variables';

package/styles/scss/agnosui/_variables.scss

@@ -23,6 +23,6 @@
   $au-tree-expand-icon-color-default: $primary !default,
   $au-tree-expand-icon-color-hover: $primary-800 !default,
   $au-tree-expand-icon-background-color-hover: var(--#{$prefix}primary-200) !default,
-
+  $au-tree-expand-icon-margin-inline-end: var(--#{$prefix}spacing-3) !default,
   $au-slider-tick-neutral-color: $gray-600 !default
 );

package/styles/scss/components/accordion/_accordion.scss

@@ -72,6 +72,13 @@
     .df-accordion-number {
       color: var(--#{$prefix}accordion-title-number-color);
     }
+
+    &:focus {
+      box-shadow: none;
+    }
+    &:focus-visible {
+      box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
+    }
   }
 
   // Reverse accordion

package/styles/scss/components/alert/_alert.scss

@@ -73,12 +73,8 @@
     }
 
     .df-alert-collapsed-text {
-      @include ltr {
-        margin-left: var(--#{$prefix}alert-icon-margin-start);
-      }
-      @include rtl {
-        margin-right: var(--#{$prefix}alert-icon-margin-start);
-      }
+      margin-block-start: var(--#{$prefix}spacing-5);
+      margin-inline-start: var(--#{$prefix}alert-icon-margin-start);
     }
   }
 
@@ -86,6 +82,13 @@
   .btn-close {
     padding-top: var(--#{$prefix}alert-btn-close-padding-y);
     padding-bottom: var(--#{$prefix}alert-btn-close-padding-y);
+
+    &:focus {
+      box-shadow: none;
+    }
+    &:focus-visible {
+      box-shadow: var(--#{$prefix}btn-close-focus-shadow);
+    }
   }
 
   // Variants of the alerts

package/styles/scss/components/badge/_badge.mixins.scss

@@ -13,3 +13,13 @@
     box-shadow: none;
   }
 }
+
+@mixin df-badge-sizing($height, $font-size, $padding-inline, $close-btn-width) {
+  font-size: $font-size;
+  height: $height;
+  --#{$prefix}badge-padding-x: #{$padding-inline};
+
+  button {
+    width: $close-btn-width;
+  }
+}

package/styles/scss/components/badge/_badge.scss

@@ -24,6 +24,7 @@ $df-lightMappedColors: () !default;
   @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
     background-color: var(--#{$prefix}badge-background-color) !important;
   }
+
   &:not(.rounded-pill):not(.df-badge-dot) {
     &:not(.df-closable) {
       &:hover:not([disabled]):not(.disabled) {
@@ -93,7 +94,7 @@ $df-lightMappedColors: () !default;
   // interactive badges
   &:not(.rounded-pill):not(.df-badge-dot) {
     cursor: pointer;
-    align-items: stretch;
+
     &[disabled],
     &.disabled,
     &:has([disabled]),
@@ -102,7 +103,7 @@ $df-lightMappedColors: () !default;
     }
   }
 
-  &:focus,
+  &:focus-visible,
   &.focus {
     outline: $df-badge-button-focus-outline;
     box-shadow: var(--#{$prefix}badge-focus-box-shadow);
@@ -231,11 +232,13 @@ $df-lightMappedColors: () !default;
           }
         }
       }
+
       &[disabled],
       &.disabled,
       &:has([disabled]),
       &:has(.disabled) {
         @include df-disable-badge(var(--#{$prefix}disabled-color), var(--#{$prefix}badge-background-color), true);
+
         & > *:hover {
           cursor: var(--#{$prefix}disabled-cursor);
         }
@@ -304,63 +307,116 @@ $df-lightMappedColors: () !default;
       }
     }
   }
-}
 
-.badge.df-closable {
-  // badge interactive closable
-  --#{$prefix}badge-interactive-container-padding-y: 0;
-  --#{$prefix}badge-interactive-container-padding-start: 0;
-  --#{$prefix}badge-interactive-container-padding-end: 0;
-  --#{$prefix}badge-interactive-button-start-radius: #{$badge-border-radius};
-  --#{$prefix}badge-interactive-button-padding-end: #{$df-badge-interactive-button-padding-end};
-  --#{$prefix}badge-interactive-close-box-shadow: #{$df-btn-focus-box-shadow};
-  --#{$prefix}badge-interactive-close-end-radius: #{$badge-border-radius};
-  --#{$prefix}badge-interactive-close-padding: #{$df-badge-interactive-close-padding};
-  --#{$prefix}badge-interactive-close-border: #{$df-badge-interactive-close-border};
-  --#{$prefix}badge-interactive-close-outline: #{$df-badge-button-focus-outline};
-  padding-block: var(--#{$prefix}badge-interactive-container-padding-y);
-  padding-inline: var(--#{$prefix}badge-interactive-container-padding-start)
-    var(--#{$prefix}badge-interactive-container-padding-end);
-
-  &:focus-within {
-    outline: var(--#{$prefix}badge-interactive-close-outline);
-    box-shadow: var(--#{$prefix}badge-interactive-close-box-shadow);
-  }
+  &.df-closable {
+    // badge interactive closable
+    --#{$prefix}badge-interactive-container-padding-y: 0;
+    --#{$prefix}badge-interactive-container-padding-start: 0;
+    --#{$prefix}badge-interactive-container-padding-end: 0;
+    --#{$prefix}badge-interactive-button-start-radius: #{$badge-border-radius};
+    --#{$prefix}badge-interactive-button-padding-end: #{$df-badge-interactive-button-padding-end};
+    --#{$prefix}badge-interactive-close-box-shadow: #{$df-btn-focus-box-shadow};
+    --#{$prefix}badge-interactive-close-end-radius: #{$badge-border-radius};
+    --#{$prefix}badge-interactive-close-padding: #{$df-badge-interactive-close-padding};
+    --#{$prefix}badge-interactive-close-border: #{$df-badge-interactive-close-border};
+    --#{$prefix}badge-interactive-close-outline: #{$df-badge-button-focus-outline};
+    padding-block: var(--#{$prefix}badge-interactive-container-padding-y);
+    padding-inline: var(--#{$prefix}badge-interactive-container-padding-start)
+      var(--#{$prefix}badge-interactive-container-padding-end);
+
+    &:has(button:focus-visible) {
+      outline: var(--#{$prefix}badge-interactive-close-outline);
+      box-shadow: var(--#{$prefix}badge-interactive-close-box-shadow);
+    }
 
-  *:focus,
-  *.focus {
-    outline: var(--#{$prefix}badge-interactive-close-outline);
-    box-shadow: var(--#{$prefix}badge-inner-elements-focus-box-shadow);
-  }
+    *:focus-visible,
+    *.focus {
+      outline: var(--#{$prefix}badge-interactive-close-outline);
+      box-shadow: var(--#{$prefix}badge-inner-elements-focus-box-shadow);
+    }
+
+    button {
+      background-color: inherit;
+      color: inherit;
+
+      &:hover {
+        cursor: pointer;
+      }
 
-  button {
-    background-color: inherit;
-    color: inherit;
+      border: var(--#{$prefix}badge-interactive-close-border);
+      padding: var(--#{$prefix}badge-interactive-close-padding);
+      border-start-end-radius: var(--#{$prefix}badge-interactive-close-end-radius);
+      border-end-end-radius: var(--#{$prefix}badge-interactive-close-end-radius);
+    }
 
-    &:hover {
-      cursor: pointer;
+    &:not(.rounded-pill) {
+      // round-pill does not have internal button as span
+      // add
+      span[role='button'] {
+        // We put the badge padding on the button except for the side that touches the close button
+        padding-block: var(--#{$prefix}badge-padding-y);
+        padding-inline: var(--#{$prefix}badge-padding-x) var(--#{$prefix}badge-interactive-button-padding-end);
+        border-start-start-radius: var(--#{$prefix}badge-interactive-button-start-radius);
+        border-end-start-radius: var(--#{$prefix}badge-interactive-button-start-radius);
+      }
     }
 
-    border: var(--#{$prefix}badge-interactive-close-border);
-    padding: var(--#{$prefix}badge-interactive-close-padding);
-    border-start-end-radius: var(--#{$prefix}badge-interactive-close-end-radius);
-    border-end-end-radius: var(--#{$prefix}badge-interactive-close-end-radius);
+    &.rounded-pill {
+      --#{$prefix}badge-interactive-close-end-radius: #{$border-radius-pill};
+      --#{$prefix}badge-interactive-container-padding-start: var(--#{$prefix}badge-padding-x);
+    }
   }
 
-  &:not(.rounded-pill) {
-    // round-pill does not have internal button as span
-    // add
-    span[role='button'] {
-      // We put the badge padding on the button except for the side that touches the close button
-      padding-block: var(--#{$prefix}badge-padding-y);
-      padding-inline: var(--#{$prefix}badge-padding-x) var(--#{$prefix}badge-interactive-button-padding-end);
-      border-start-start-radius: var(--#{$prefix}badge-interactive-button-start-radius);
-      border-end-start-radius: var(--#{$prefix}badge-interactive-button-start-radius);
+  //sizing
+  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    // TODO: when removing old branding move it to the .df-closable class and merge the padding
+    &,
+    &.df-closable {
+      &.rounded-pill > button {
+        margin-inline-start: var(--#{$prefix}spacing-1);
+      }
+
+      button,
+      [role='button'] {
+        height: 100%;
+        padding: unset;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
     }
-  }
 
-  &.rounded-pill {
-    --#{$prefix}badge-interactive-close-end-radius: #{$border-radius-pill};
-    --#{$prefix}badge-interactive-container-padding-start: var(--#{$prefix}badge-padding-x);
+    font-weight: var(--#{$prefix}typo-weight-medium);
+
+    @include df-badge-sizing(
+      $df-badge-height,
+      var(--#{$prefix}typo-sizing-xsmall),
+      var(--#{$prefix}spacing-3),
+      $df-badge-close-button-width
+    );
+    &.df-badge-sm {
+      @include df-badge-sizing(
+        $df-badge-height-sm,
+        var(--#{$prefix}typo-sizing-xsmall),
+        var(--#{$prefix}spacing-3),
+        $df-badge-close-button-width
+      );
+    }
+    &.df-badge-lg {
+      @include df-badge-sizing(
+        $df-badge-height-lg,
+        var(--#{$prefix}typo-sizing-small),
+        var(--#{$prefix}spacing-4),
+        $df-badge-close-button-width-lg
+      );
+    }
+    &.df-badge-xl {
+      @include df-badge-sizing(
+        $df-badge-height-xl,
+        var(--#{$prefix}typo-sizing-default),
+        var(--#{$prefix}spacing-5),
+        $df-badge-close-button-width-xl
+      );
+    }
   }
 }

package/styles/scss/components/badge/_badge.variables.scss

@@ -18,3 +18,11 @@ $df-badge-box-shadow-color: var(--#{$prefix}box-shadow-color) !default;
 
 $df-badge-inner-elements-focus-box-shadow: none !default;
 $df-badge-text-transform: none !default;
+
+$df-badge-height-sm: 1.25rem !default; // 20px
+$df-badge-height: 1.5rem !default; // 24px
+$df-badge-height-lg: 1.875rem !default; // 30px
+$df-badge-height-xl: 2.5rem !default; // 40px
+$df-badge-close-button-width: 1.5rem !default; // 24px
+$df-badge-close-button-width-lg: 1.75rem !default; // 26px
+$df-badge-close-button-width-xl: 2rem !default; // 28px

package/styles/scss/components/brand-color/_brand-color.mixins.scss

@@ -7,7 +7,7 @@
   button#{$parent} {
     @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
       --#{$prefix}box-shadow-color: #{shades-css-var($colorName, 'bg-color', true)};
-      &:focus {
+      &:focus-visible {
         background-color: shades-css-var($colorName, 'bg-color') !important;
       }
       &:hover {
@@ -20,7 +20,7 @@
       }
     } @else {
       &:hover,
-      &:focus {
+      &:focus-visible {
         background-color: color.adjust($color, $lightness: -10%) !important;
       }
     }