@ardium-ui/ui 5.0.0-alpha.7 → 5.0.0-alpha.71

package/lib/tabber/index.d.ts

@@ -1,5 +1,6 @@
 export * from './tab/tab.component';
-export * from './tab/tab.defaults';
 export * from './tabber.component';
 export * from './tabber.defaults';
+export * from './tabber.directives';
 export * from './tabber.module';
+export * from './tabber.types';

package/lib/tabber/tab/tab.component.d.ts

@@ -1,19 +1,27 @@
+import { OnDestroy, TemplateRef } from '@angular/core';
+import { BooleanLike } from '@ardium-ui/devkit';
+import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
-export declare class ArdiumTabComponent {
-    protected readonly _DEFAULTS: import("./tab.defaults").ArdTabDefaults;
-    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, any>;
+export declare class ArdiumTabComponent implements OnDestroy {
+    protected readonly _DEFAULTS: import("../tabber.defaults").ArdTabberDefaults;
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly pointerEventsWhenDisabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly tabTitle: import("@angular/core").InputSignal<string>;
     readonly selected: import("@angular/core").WritableSignal<boolean>;
     set _selected(v: any);
     setSelected(state: boolean): void;
-    get _selectedHostAttribute(): boolean;
     private _emitChange;
     readonly focused: import("@angular/core").WritableSignal<boolean>;
-    readonly _label: import("@angular/core").InputSignal<string | null>;
-    readonly label: import("@angular/core").Signal<string>;
-    readonly tabId: import("@angular/core").InputSignal<string>;
+    readonly _label: import("@angular/core").InputSignal<string | TemplateRef<any> | null>;
+    readonly label: import("@angular/core").Signal<string | TemplateRef<any>>;
+    _isTabIdInitialized: boolean;
+    readonly tabId: import("@angular/core").InputSignalWithTransform<string, string>;
     readonly focusEvent: import("@angular/core").OutputEmitterRef<void>;
     readonly blurEvent: import("@angular/core").OutputEmitterRef<void>;
     readonly selectedChange: import("@angular/core").OutputEmitterRef<boolean>;
+    readonly selectedChangeInternal$: Subject<boolean>;
+    private _selectedChangeSub;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumTabComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumTabComponent, "ard-tab", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "_selected": { "alias": "selected"; "required": false; }; "_label": { "alias": "label"; "required": false; "isSignal": true; }; "tabId": { "alias": "tabId"; "required": true; "isSignal": true; }; }, { "focusEvent": "focusEvent"; "blurEvent": "blurEvent"; "selectedChange": "selectedChange"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumTabComponent, "ard-tab", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "pointerEventsWhenDisabled": { "alias": "pointerEventsWhenDisabled"; "required": false; "isSignal": true; }; "tabTitle": { "alias": "tabTitle"; "required": false; "isSignal": true; }; "_selected": { "alias": "selected"; "required": false; }; "_label": { "alias": "label"; "required": false; "isSignal": true; }; "tabId": { "alias": "tabId"; "required": true; "isSignal": true; }; }, { "focusEvent": "focus"; "blurEvent": "blur"; "selectedChange": "selectedChange"; }, never, ["*"], false, never>;
 }

package/lib/tabber/tabber.component.d.ts

@@ -1,28 +1,44 @@
-import { AfterContentInit } from '@angular/core';
+import { AfterContentInit, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
+import { BooleanLike } from '@ardium-ui/devkit';
 import { OneAxisAlignment } from '../types/alignment.types';
 import { ComponentColor } from '../types/colors.types';
 import { ArdiumTabComponent } from './tab/tab.component';
+import { ArdTabberLabelTemplateDirective } from './tabber.directives';
+import { TabberLabelContext } from './tabber.types';
 import * as i0 from "@angular/core";
-export declare class ArdiumTabberComponent implements AfterContentInit {
+export declare class ArdiumTabberComponent implements AfterContentInit, OnChanges {
     protected readonly _DEFAULTS: import("./tabber.defaults").ArdTabberDefaults;
     readonly tabs: import("@angular/core").Signal<readonly ArdiumTabComponent[]>;
-    readonly currentTab: import("@angular/core").WritableSignal<ArdiumTabComponent | null>;
-    readonly currentFocusedTab: import("@angular/core").WritableSignal<ArdiumTabComponent | null>;
+    readonly selectedTabId: import("@angular/core").ModelSignal<string | null>;
+    readonly selectedTab: import("@angular/core").Signal<ArdiumTabComponent | null>;
+    readonly focusedTabId: import("@angular/core").WritableSignal<string | null>;
+    readonly focusedTab: import("@angular/core").Signal<ArdiumTabComponent | null>;
+    private _selectedTabIdToCheck;
+    ngOnChanges(changes: SimpleChanges): void;
+    private _validateSelectedTabId;
     readonly initialTab: import("@angular/core").InputSignal<string | undefined>;
     ngAfterContentInit(): void;
-    onTabClick(tab: ArdiumTabComponent): void;
+    selectTab(tab: ArdiumTabComponent): void;
+    private _unselectSpecificTab;
+    private _unselectCurrentTab;
+    private _selectNewTab;
     onTabFocus(tab: ArdiumTabComponent): void;
     onTabBlur(tab: ArdiumTabComponent): void;
     readonly focusEvent: import("@angular/core").OutputEmitterRef<string>;
     readonly blurEvent: import("@angular/core").OutputEmitterRef<string>;
-    readonly changeTab: import("@angular/core").OutputEmitterRef<string>;
     readonly color: import("@angular/core").InputSignal<ComponentColor>;
     readonly ngClasses: import("@angular/core").Signal<string>;
-    readonly stretchTabs: import("@angular/core").InputSignalWithTransform<boolean, any>;
-    readonly uniformTabWidths: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly stretchTabs: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly uniformTabWidths: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     readonly tabAlignment: import("@angular/core").InputSignal<OneAxisAlignment>;
     readonly tabContainerClasses: import("@angular/core").Signal<string>;
     readonly tabIndex: import("@angular/core").InputSignal<string | number>;
+    readonly labelTemplate: import("@angular/core").Signal<ArdTabberLabelTemplateDirective | undefined>;
+    readonly tabsWithTemplates: import("@angular/core").Signal<{
+        tab: ArdiumTabComponent;
+        template: TemplateRef<any> | null;
+        templateContext: TabberLabelContext | null;
+    }[]>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumTabberComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumTabberComponent, "ard-tabber", never, { "initialTab": { "alias": "initialTab"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "stretchTabs": { "alias": "stretchTabs"; "required": false; "isSignal": true; }; "uniformTabWidths": { "alias": "uniformTabWidths"; "required": false; "isSignal": true; }; "tabAlignment": { "alias": "tabAlignment"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; }, { "focusEvent": "focus"; "blurEvent": "blur"; "changeTab": "changeTab"; }, ["tabs"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumTabberComponent, "ard-tabber", never, { "selectedTabId": { "alias": "selectedTab"; "required": false; "isSignal": true; }; "initialTab": { "alias": "initialTab"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "stretchTabs": { "alias": "stretchTabs"; "required": false; "isSignal": true; }; "uniformTabWidths": { "alias": "uniformTabWidths"; "required": false; "isSignal": true; }; "tabAlignment": { "alias": "tabAlignment"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; }, { "selectedTabId": "selectedTabChange"; "focusEvent": "focus"; "blurEvent": "blur"; }, ["tabs", "labelTemplate"], ["*"], false, never>;
 }

package/lib/tabber/tabber.defaults.d.ts

@@ -2,6 +2,8 @@ import { InjectionToken, Provider } from '@angular/core';
 import { OneAxisAlignment } from './../types/alignment.types';
 import { ComponentColor } from './../types/colors.types';
 export interface ArdTabberDefaults {
+    tabDisabled: boolean;
+    tabPointerEventsWhenDisabled: boolean;
     color: ComponentColor;
     stretchTabs: boolean;
     uniformTabWidths: boolean;

package/lib/tabber/tabber.directives.d.ts

@@ -0,0 +1,9 @@
+import { TemplateRef } from '@angular/core';
+import { TabberLabelContext } from './tabber.types';
+import * as i0 from "@angular/core";
+export declare class ArdTabberLabelTemplateDirective {
+    template: TemplateRef<TabberLabelContext>;
+    constructor(template: TemplateRef<TabberLabelContext>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdTabberLabelTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdTabberLabelTemplateDirective, "ng-template[ard-tabber-label-tmp]", never, {}, {}, never, never, false, never>;
+}

package/lib/tabber/tabber.module.d.ts

@@ -1,9 +1,10 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./tabber.component";
 import * as i2 from "./tab/tab.component";
-import * as i3 from "@angular/common";
+import * as i3 from "./tabber.directives";
+import * as i4 from "@angular/common";
 export declare class ArdiumTabberModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumTabberModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumTabberModule, [typeof i1.ArdiumTabberComponent, typeof i2.ArdiumTabComponent], [typeof i3.CommonModule], [typeof i1.ArdiumTabberComponent, typeof i2.ArdiumTabComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumTabberModule, [typeof i1.ArdiumTabberComponent, typeof i2.ArdiumTabComponent, typeof i3.ArdTabberLabelTemplateDirective], [typeof i4.CommonModule], [typeof i1.ArdiumTabberComponent, typeof i2.ArdiumTabComponent, typeof i3.ArdTabberLabelTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumTabberModule>;
 }

package/lib/tabber/tabber.types.d.ts

@@ -0,0 +1,5 @@
+export interface TabberLabelContext {
+    $implicit: string;
+    label: string;
+    tabId: string;
+}

package/lib/table/table.component.d.ts

@@ -1,4 +1,5 @@
 import { AfterContentInit, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
+import { BooleanLike, NumberLike } from '@ardium-ui/devkit';
 import { _FocusableComponentBase } from '../_internal/focusable-component';
 import { ProgressBarMode } from '../progress-bar';
 import { CurrentItemsFormatFn, PaginationAlign } from '../table-pagination/table-pagination.types';
@@ -15,15 +16,15 @@ export declare class ArdiumTableComponent extends _FocusableComponentBase implem
     private readonly _itemStorage;
     readonly rowDisabledFrom: import("@angular/core").InputSignal<string>;
     readonly rowBoldFrom: import("@angular/core").InputSignal<string>;
-    readonly invertRowDisabled: import("@angular/core").InputSignalWithTransform<boolean, any>;
-    readonly invertRowBold: import("@angular/core").InputSignalWithTransform<boolean, any>;
-    readonly selectableRows: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly invertRowDisabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly invertRowBold: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly selectableRows: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     readonly maxSelectedItems: import("@angular/core").InputSignalWithTransform<Nullable<number>, any>;
-    readonly clickableRows: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly clickableRows: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     readonly caption: import("@angular/core").InputSignal<Nullable<string>>;
-    readonly isLoading: import("@angular/core").InputSignalWithTransform<boolean, any>;
-    readonly loadingProgress: import("@angular/core").InputSignalWithTransform<number, any>;
-    readonly loadingProgressBuffer: import("@angular/core").InputSignalWithTransform<number, any>;
+    readonly isLoading: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly loadingProgress: import("@angular/core").InputSignalWithTransform<number, NumberLike>;
+    readonly loadingProgressBuffer: import("@angular/core").InputSignalWithTransform<number, NumberLike>;
     readonly loadingBarMode: import("@angular/core").InputSignal<ProgressBarMode>;
     readonly loadingBarColor: import("@angular/core").InputSignal<ComponentColor>;
     readonly appearance: import("@angular/core").InputSignal<TableAppearance>;
@@ -31,11 +32,11 @@ export declare class ArdiumTableComponent extends _FocusableComponentBase implem
     readonly color: import("@angular/core").InputSignal<ComponentColor>;
     readonly align: import("@angular/core").InputSignal<TableAlignType>;
     readonly headerAlign: import("@angular/core").InputSignal<TableAlignType>;
-    readonly compact: import("@angular/core").InputSignalWithTransform<boolean, any>;
-    readonly zebra: import("@angular/core").InputSignalWithTransform<boolean, any>;
-    readonly stickyHeader: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly compact: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly zebra: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly stickyHeader: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     readonly ngClasses: import("@angular/core").Signal<string>;
-    readonly paginated: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly paginated: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     readonly paginationStrategy: import("@angular/core").InputSignal<TablePaginationStrategy>;
     readonly paginationOptions: import("@angular/core").InputSignalWithTransform<number[] | {
         value: number;
@@ -49,9 +50,9 @@ export declare class ArdiumTableComponent extends _FocusableComponentBase implem
     readonly paginationAlign: import("@angular/core").InputSignal<PaginationAlign>;
     readonly itemsPerPageText: import("@angular/core").InputSignal<string>;
     readonly currentItemsFormatFn: import("@angular/core").InputSignal<CurrentItemsFormatFn>;
-    readonly pageFillRemaining: import("@angular/core").InputSignalWithTransform<boolean, any>;
-    readonly paginationDisabled: import("@angular/core").InputSignalWithTransform<boolean, any>;
-    readonly useFirstLastButtons: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly pageFillRemaining: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly paginationDisabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly useFirstLastButtons: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     readonly itemsPerPage: import("@angular/core").ModelSignal<number>;
     readonly page: import("@angular/core").ModelSignal<number>;
     readonly isDefinedTotalItems: import("@angular/core").Signal<boolean>;
@@ -63,7 +64,7 @@ export declare class ArdiumTableComponent extends _FocusableComponentBase implem
     private _data;
     set data(v: any[]);
     get data(): any[];
-    readonly treatDataSourceAsString: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly treatDataSourceAsString: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     readonly checkboxTemplate: import("@angular/core").Signal<TemplateRef<TableCheckboxContext> | undefined>;
     readonly headerCheckboxTemplate: import("@angular/core").Signal<TemplateRef<TableHeaderCheckboxContext> | undefined>;
     readonly captionTemplate: import("@angular/core").Signal<TemplateRef<TableCaptionContext> | undefined>;

package/lib/table-pagination/table-pagination.component.d.ts

@@ -1,4 +1,5 @@
 import { OnInit } from '@angular/core';
+import { BooleanLike } from '@ardium-ui/devkit';
 import { _FocusableComponentBase } from '../_internal/focusable-component';
 import { ComponentColor } from '../types/colors.types';
 import { ArdTablePaginationDefaults } from './table-pagination.defaults';
@@ -21,10 +22,10 @@ export declare class ArdiumTablePaginationComponent extends _FocusableComponentB
     ngOnInit(): void;
     readonly color: import("@angular/core").InputSignal<ComponentColor>;
     readonly align: import("@angular/core").InputSignal<PaginationAlign>;
-    readonly compact: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly compact: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     readonly ngClasses: import("@angular/core").Signal<string>;
-    readonly useFirstLastButtons: import("@angular/core").InputSignalWithTransform<boolean, any>;
-    readonly isLoading: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly useFirstLastButtons: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly isLoading: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     readonly itemsPerPageText: import("@angular/core").InputSignal<string>;
     readonly currentItemsFormatFn: import("@angular/core").InputSignal<CurrentItemsFormatFn>;
     readonly getCurrentItemsContext: import("@angular/core").Signal<import("../_internal/models/pagination.model").PaginationCurrentItemsContext>;

package/lib/text-list/text-list.component.d.ts

@@ -1,8 +1,9 @@
+import { BooleanLike } from '@ardium-ui/devkit';
 import * as i0 from "@angular/core";
 export declare class ArdiumTextListComponent {
     readonly values: import("@angular/core").InputSignal<any[]>;
     readonly separator: import("@angular/core").InputSignal<string>;
-    readonly filter: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly filter: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumTextListComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumTextListComponent, "ard-text-list", never, { "values": { "alias": "values"; "required": true; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; }, {}, never, never, false, never>;
 }

package/lib/types/alignment.types.d.ts

@@ -5,7 +5,13 @@ export declare const SimpleOneAxisAlignment: {
 export type SimpleOneAxisAlignment = (typeof SimpleOneAxisAlignment)[keyof typeof SimpleOneAxisAlignment];
 export declare const OneAxisAlignment: {
     readonly Left: "left";
-    readonly Middle: "middle";
+    readonly Center: "center";
     readonly Right: "right";
 };
 export type OneAxisAlignment = (typeof OneAxisAlignment)[keyof typeof OneAxisAlignment];
+export declare const OneAxisAlignmentOrientational: {
+    readonly Start: "start";
+    readonly Center: "center";
+    readonly End: "end";
+};
+export type OneAxisAlignmentOrientational = (typeof OneAxisAlignmentOrientational)[keyof typeof OneAxisAlignmentOrientational];

package/lib/types/item-storage.types.d.ts

@@ -1,31 +1,30 @@
-import { WritableSignal } from '@angular/core';
-import { Nullable } from './utility.types';
-export interface OptionContext<T extends ArdSimplestStorageItem> {
+export type OptionContext<T extends ArdSimplestStorageItem> = {
     $implicit: T;
     item: T;
-    itemData: any;
-}
+} & {
+    [K in keyof Omit<T, 'filtered'>]: T[K];
+};
 export interface ArdSimplestStorageItem {
-    readonly itemData: WritableSignal<any>;
+    readonly itemData: object;
     readonly index: number;
-    readonly value: WritableSignal<any>;
-    readonly label: WritableSignal<string>;
-    readonly selected: WritableSignal<Nullable<boolean>>;
-    readonly highlighted: WritableSignal<Nullable<boolean>>;
+    readonly value: any;
+    readonly label: string;
+    readonly selected: boolean;
+    readonly highlighted: boolean;
 }
 export interface ArdOptionSimple extends ArdSimplestStorageItem {
-    readonly disabled: WritableSignal<Nullable<boolean>>;
+    readonly disabled: boolean;
 }
 export interface ArdOption extends ArdOptionSimple {
+    readonly filtered: boolean;
+    readonly isExactMatch: boolean;
     readonly group: unknown;
-    readonly highlighted_recently: WritableSignal<Nullable<boolean>>;
+    readonly highlighted_recently: boolean;
 }
 export interface ArdOptionGroup {
-    readonly label: WritableSignal<string>;
-    readonly disabled: WritableSignal<Nullable<boolean>>;
-    readonly highlighted: WritableSignal<Nullable<boolean>>;
-    readonly selected: WritableSignal<Nullable<boolean>>;
-    readonly children: WritableSignal<ArdOption[]>;
+    readonly label: string;
+    readonly disabled: boolean;
+    readonly children: ArdOption[];
 }
 export declare const ArdPanelPosition: {
     readonly Top: "top";
@@ -35,5 +34,5 @@ export declare const ArdPanelPosition: {
 export type ArdPanelPosition = (typeof ArdPanelPosition)[keyof typeof ArdPanelPosition];
 export type ArdItemGroupMap = Map<any, ArdOptionGroup>;
 export type GroupByFn = (item: any) => any;
-export type SearchFn = (searchTerm: string, item: ArdOption) => boolean;
+export type SearchFn = (searchTerm: string, item: ArdOption) => [boolean, boolean];
 export type CompareWithFn = (value: any, optionValue: any) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ardium-ui/ui",
-  "version": "5.0.0-alpha.7",
+  "version": "5.0.0-alpha.71",
   "peerDependencies": {
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",
@@ -12,7 +12,8 @@
     "first-last": "^1.1.1",
     "more-rounding": "^4.2.2",
     "resolve-object-path": "^2.0.0",
-    "@ardium-ui/devkit": "^7.7.1",
+    "lodash": "^4.17.23",
+    "@ardium-ui/devkit": "8.0.2-alpha.2",
     "simple-bool": "^3.0.1",
     "take-chance": "^4.3.2",
     "color": "^4.2.3"

package/prebuilt-themes/default/badge.css

@@ -1,3 +1,16 @@
+:root {
+  --ard-badge-small-font-size: 0.55rem;
+  --ard-badge-small-font-weight: 400;
+  --ard-badge-small-letter-spacing: 0.2px;
+  --ard-badge-medium-font-size: 0.667rem;
+  --ard-badge-medium-font-weight: 500;
+  --ard-badge-medium-letter-spacing: 0.2px;
+  --ard-badge-large-font-size: 0.8125rem;
+  --ard-badge-large-font-weight: 600;
+  --ard-badge-large-letter-spacing: 0.2px;
+  --ard-badge-overlap-offset: 0.3em;
+}
+
 .ard-badge-host {
   position: relative;
 }
@@ -9,10 +22,10 @@
   pointer-events: none;
   background: var(--ard-cmpcl--bg-colored);
   color: var(--ard-cmpcl--on-bg-colored);
-  font-size: var(--ard-_badge-size);
-  min-width: calc(var(--ard-_badge-size) * 1.375);
-  height: calc(var(--ard-_badge-size) * 1.375);
-  --ard-_badge-overlap-offset-x: 0.3em;
+  font-size: var(--ard-_badge-font-size);
+  min-width: var(--ard-_badge-size);
+  height: var(--ard-_badge-size);
+  --ard-_badge-overlap-offset-x: var(--ard-badge-overlap-offset, 0.3em);
 }
 .ard-badge.ard-color-none {
   --ard-cmpcl--bg: var(--ard-bg);
@@ -151,7 +164,7 @@
   border-radius: 9999px;
 }
 .ard-badge.ard-variant-rounded {
-  border-radius: calc(var(--ard-_badge-size) * 0.25);
+  border-radius: var(--ard-_badge-radius);
 }
 .ard-badge.ard-variant-sharp {
   border-radius: 0;
@@ -160,22 +173,31 @@
   display: none;
 }
 .ard-badge .ard-badge-content {
-  padding: 0 calc(var(--ard-_badge-size) * 0.5);
+  padding: 0 var(--ard-_badge-padding);
 }
 .ard-badge.ard-badge-size-small {
-  --ard-_badge-size: 0.55rem;
-  font-weight: 400;
-  letter-spacing: 0.2px;
+  --ard-_badge-font-size: var(--ard-badge-small-font-size, 0.55rem);
+  --ard-_badge-size: var(--ard-badge-small-size, calc(var(--ard-badge-small-font-size) * 1.375));
+  --ard-_badge-padding: calc(var(--ard-badge-small-font-size) * 0.5);
+  --ard-_badge-radius: var(--ard-badge-small-rounded-radius, calc(var(--ard-badge-small-font-size) * 0.25));
+  font-weight: var(--ard-badge-small-font-weight, 400);
+  letter-spacing: var(--ard-badge-small-letter-spacing, 0.2px);
 }
 .ard-badge.ard-badge-size-medium {
-  --ard-_badge-size: 0.667rem;
-  font-weight: 500;
-  letter-spacing: 0.2px;
+  --ard-_badge-font-size: var(--ard-badge-medium-font-size, 0.667rem);
+  --ard-_badge-size: var(--ard-badge-medium-size, calc(var(--ard-badge-medium-font-size) * 1.375));
+  --ard-_badge-padding: calc(var(--ard-badge-medium-font-size) * 0.5);
+  --ard-_badge-radius: var(--ard-badge-medium-rounded-radius, calc(var(--ard-badge-medium-font-size) * 0.25));
+  font-weight: var(--ard-badge-medium-font-weight, 500);
+  letter-spacing: var(--ard-badge-medium-letter-spacing, 0.2px);
 }
 .ard-badge.ard-badge-size-large {
-  --ard-_badge-size: 0.8125rem;
-  font-weight: 600;
-  letter-spacing: 0.2px;
+  --ard-_badge-font-size: var(--ard-badge-large-font-size, 0.8125rem);
+  --ard-_badge-size: var(--ard-badge-large-size, calc(var(--ard-badge-large-font-size) * 1.375));
+  --ard-_badge-padding: calc(var(--ard-badge-large-font-size) * 0.5);
+  --ard-_badge-radius: var(--ard-badge-large-rounded-radius, calc(var(--ard-badge-large-font-size) * 0.25));
+  font-weight: var(--ard-badge-large-font-weight, 600);
+  letter-spacing: var(--ard-badge-large-letter-spacing, 0.2px);
 }
 .ard-badge.ard-badge-overlap {
   --ard-_badge-overlap-offset-x: 50%;

package/prebuilt-themes/default/badge.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/badge.scss","../../../../projects/ui/src/themes/default/_coloring.scss"],"names":[],"mappings":"AAEA;EACE;;;AAEF;EAEE;EACA;EACA;EACA;EAGA;EACA;EAmBA;EACA;EACA;EAuBA;;ACvDA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADrHF;EACE;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE;;AAQF;EACE;;AAGF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAMF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAIF;EAEE;;AAEF;EAEE;;AAEF;EAEE;;AAEF;EAEE","file":"badge.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/badge.scss","../../../../projects/ui/src/themes/default/_coloring.scss"],"names":[],"mappings":"AAIA;EACE;EAEA;EACA;EAGA;EAEA;EACA;EAGA;EAEA;EACA;EAGA;;;AAGF;EACE;;;AAEF;EAEE;EACA;EACA;EACA;EAGA;EACA;EAmBA;EACA;EACA;EAgCA;;ACxFA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AD7FF;EACE;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE;;AAQF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAMF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAIF;EAEE;;AAEF;EAEE;;AAEF;EAEE;;AAEF;EAEE","file":"badge.css"}