@ardium-ui/ui 5.0.0-alpha.69 → 5.0.0-alpha.70

package/lib/_internal/boolean-component.d.ts

@@ -1,7 +1,9 @@
 import { ControlValueAccessor } from '@angular/forms';
+import { BooleanLike } from '@ardium-ui/devkit';
 import { _NgModelComponentBase, _NgModelComponentDefaults } from './ngmodel-component';
 import * as i0 from "@angular/core";
 export interface _BooleanComponentDefaults extends _NgModelComponentDefaults {
+    reverseSelected: boolean;
 }
 export declare const _booleanComponentDefaults: _BooleanComponentDefaults;
 /**
@@ -9,6 +11,8 @@ export declare const _booleanComponentDefaults: _BooleanComponentDefaults;
  */
 export declare abstract class _BooleanComponentBase extends _NgModelComponentBase implements ControlValueAccessor {
     protected readonly _DEFAULTS: _BooleanComponentDefaults;
+    protected abstract readonly _componentId: string;
+    protected abstract readonly _componentName: string;
     writeValue(v: any): void;
     /**
      * Emits all select-state-related events.
@@ -36,6 +40,14 @@ export declare abstract class _BooleanComponentBase extends _NgModelComponentBas
      * The event emitter responsible for firing `selectedChange` events. Fired when the `selected` state is changed.
      */
     readonly selectedChange: import("@angular/core").OutputEmitterRef<boolean>;
+    /**
+     * The reverse of the `selected` state. Coercible into a boolean. Useful for cases where the "selected" state is semantically reversed, e.g. "disabled".
+     */
+    readonly reverseSelected: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    /**
+     * The "selected" state, accounting for the `reverseSelected` input.
+     */
+    readonly selectedAccountingForReverse: import("@angular/core").Signal<boolean>;
     /**
      * Toggles the selected state. Emits all appropriate events.
      */
@@ -49,5 +61,5 @@ export declare abstract class _BooleanComponentBase extends _NgModelComponentBas
      */
     unselect(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<_BooleanComponentBase, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_BooleanComponentBase, never, never, { "_selected": { "alias": "selected"; "required": false; }; }, { "selectEvent": "select"; "unselectEvent": "unselect"; "changeEvent": "change"; "selectedChange": "selectedChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_BooleanComponentBase, never, never, { "_selected": { "alias": "selected"; "required": false; }; "reverseSelected": { "alias": "reverseSelected"; "required": false; "isSignal": true; }; }, { "selectEvent": "select"; "unselectEvent": "unselect"; "changeEvent": "change"; "selectedChange": "selectedChange"; }, never, never, true, never>;
 }

package/lib/checkbox/checkbox.component.d.ts

@@ -9,11 +9,14 @@ import * as i0 from "@angular/core";
 export declare class ArdiumCheckboxComponent extends _BooleanComponentBase implements ControlValueAccessor {
     protected readonly _DEFAULTS: ArdCheckboxDefaults;
     constructor(defaults: ArdCheckboxDefaults);
+    protected readonly _componentId = "100";
+    protected readonly _componentName = "checkbox";
     readonly color: import("@angular/core").InputSignal<SimpleComponentColor>;
     readonly unselectedColor: import("@angular/core").InputSignal<SimpleComponentColor>;
     readonly ngClasses: import("@angular/core").Signal<string>;
     set _selected(v: any);
-    readonly state: import("@angular/core").ModelSignal<CheckboxState>;
+    readonly internalState: import("@angular/core").ModelSignal<CheckboxState>;
+    readonly state: import("@angular/core").Signal<CheckboxState>;
     readonly State: {
         readonly Unselected: "unselected";
         readonly Indeterminate: "indeterminate";
@@ -24,5 +27,5 @@ export declare class ArdiumCheckboxComponent extends _BooleanComponentBase imple
     readonly checkboxTemplate: import("@angular/core").Signal<ArdCheckboxTemplateDirective | undefined>;
     readonly checkboxTemplateContext: import("@angular/core").Signal<CheckboxTemplateContext>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumCheckboxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumCheckboxComponent, "ard-checkbox", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "unselectedColor": { "alias": "unselectedColor"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; }, { "state": "stateChange"; }, ["templateRepository", "checkboxTemplate"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumCheckboxComponent, "ard-checkbox", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "unselectedColor": { "alias": "unselectedColor"; "required": false; "isSignal": true; }; "internalState": { "alias": "state"; "required": false; "isSignal": true; }; }, { "internalState": "stateChange"; }, ["templateRepository", "checkboxTemplate"], never, false, never>;
 }

package/lib/checkbox/checkbox.types.d.ts

@@ -7,5 +7,7 @@ export type CheckboxState = (typeof CheckboxState)[keyof typeof CheckboxState];
 export interface CheckboxTemplateContext {
     $implicit: boolean;
     selected: boolean;
+    internalSelected: boolean;
     state: CheckboxState;
+    internalState: CheckboxState;
 }

package/lib/chip/selectable-chip/selectable-chip.component.d.ts

@@ -9,6 +9,8 @@ import * as i0 from "@angular/core";
 export declare class ArdiumSelectableChipComponent extends _BooleanComponentBase implements ControlValueAccessor {
     protected readonly _DEFAULTS: ArdSelectableChipDefaults;
     constructor(defaults: ArdSelectableChipDefaults);
+    protected readonly _componentId = "111";
+    protected readonly _componentName = "selectable-chip";
     readonly chipTitle: import("@angular/core").InputSignal<string>;
     readonly hideSelectionIcon: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     readonly contentAlignment: import("@angular/core").InputSignal<SimpleOneAxisAlignment>;

package/lib/divider/divider.component.d.ts

@@ -1,8 +1,6 @@
-import { BooleanLike } from '@ardium-ui/devkit';
 import * as i0 from "@angular/core";
+import * as i1 from "./divider.directive";
 export declare class ArdiumDividerComponent {
-    protected readonly _DEFAULTS: import("./divider.defaults").ArdDividerDefaults;
-    readonly vertical: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumDividerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumDividerComponent, "ard-divider", never, { "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumDividerComponent, "ard-divider", never, {}, {}, never, ["*"], false, [{ directive: typeof i1.ArdiumDividerDirectiveStandalone; inputs: { "vertical": "vertical"; "flexItem": "flexItem"; "textAlign": "textAlign"; "variant": "variant"; }; outputs: {}; }]>;
 }

package/lib/divider/divider.defaults.d.ts

@@ -1,6 +1,11 @@
 import { InjectionToken, Provider } from '@angular/core';
+import { OneAxisAlignmentOrientational } from '../types/alignment.types';
+import { ArdDividerVariant } from './divider.types';
 export interface ArdDividerDefaults {
     vertical: boolean;
+    variant: ArdDividerVariant;
+    flexItem: boolean;
+    textAlign: OneAxisAlignmentOrientational;
 }
 export declare const ARD_DIVIDER_DEFAULTS: InjectionToken<ArdDividerDefaults>;
 export declare function provideDividerDefaults(config: Partial<ArdDividerDefaults>): Provider;

package/lib/divider/divider.directive.d.ts

@@ -0,0 +1,18 @@
+import { BooleanLike } from '@ardium-ui/devkit';
+import { OneAxisAlignmentOrientational } from '../types/alignment.types';
+import { ArdDividerVariant } from './divider.types';
+import * as i0 from "@angular/core";
+export declare class ArdiumDividerDirective {
+    protected readonly _DEFAULTS: import("./divider.defaults").ArdDividerDefaults;
+    readonly vertical: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly flexItem: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly textAlign: import("@angular/core").InputSignal<OneAxisAlignmentOrientational>;
+    readonly variant: import("@angular/core").InputSignal<ArdDividerVariant>;
+    readonly ngClasses: import("@angular/core").Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumDividerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdiumDividerDirective, "[ard-divider]", never, { "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; "flexItem": { "alias": "flexItem"; "required": false; "isSignal": true; }; "textAlign": { "alias": "textAlign"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, false, never>;
+}
+export declare class ArdiumDividerDirectiveStandalone extends ArdiumDividerDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumDividerDirectiveStandalone, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdiumDividerDirectiveStandalone, never, never, {}, {}, never, never, true, never>;
+}

package/lib/divider/divider.module.d.ts

@@ -1,8 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./divider.component";
-import * as i2 from "@angular/common";
+import * as i2 from "./divider.directive";
+import * as i3 from "@angular/common";
 export declare class ArdiumDividerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumDividerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumDividerModule, [typeof i1.ArdiumDividerComponent], [typeof i2.CommonModule], [typeof i1.ArdiumDividerComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumDividerModule, [typeof i1.ArdiumDividerComponent, typeof i2.ArdiumDividerDirective], [typeof i3.CommonModule], [typeof i1.ArdiumDividerComponent, typeof i2.ArdiumDividerDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumDividerModule>;
 }

package/lib/divider/divider.types.d.ts

@@ -0,0 +1,5 @@
+export declare const ArdDividerVariant: {
+    readonly Full: "full";
+    readonly Middle: "middle";
+};
+export type ArdDividerVariant = typeof ArdDividerVariant[keyof typeof ArdDividerVariant];

package/lib/divider/index.d.ts

@@ -1,3 +1,5 @@
 export * from './divider.component';
 export * from './divider.defaults';
+export * from './divider.directive';
 export * from './divider.module';
+export * from './divider.types';

package/lib/dropdown-panel/dropdown-panel.types.d.ts

@@ -1,4 +1,4 @@
-export type ScrollAlignment = 'top' | 'bottom' | 'middle';
+export type ScrollAlignment = 'top' | 'bottom' | 'center';
 export declare const DropdownPanelAppearance: {
     readonly Outlined: "outlined";
     readonly Raised: "raised";

package/lib/slide-toggle/slide-toggle.component.d.ts

@@ -7,6 +7,8 @@ import * as i0 from "@angular/core";
 export declare class ArdiumSlideToggleComponent extends _BooleanComponentBase {
     protected readonly _DEFAULTS: ArdSlideToggleDefaults;
     constructor(defaults: ArdSlideToggleDefaults);
+    protected readonly _componentId = "101";
+    protected readonly _componentName = "slide-toggle";
     readonly wrapperClass: import("@angular/core").InputSignal<Nullable<string>>;
     readonly color: import("@angular/core").InputSignal<ComponentColor>;
     readonly appearance: import("@angular/core").InputSignal<ArdSlideToggleAppearance>;

package/lib/star/star-button/star-button.component.d.ts

@@ -8,13 +8,16 @@ import { ArdStarButtonStarTemplateDirective } from './star-button.directives';
 import { ArdStarButtonStarTemplateContext } from './star-button.types';
 import * as i0 from "@angular/core";
 export declare class ArdiumStarButtonComponent extends _BooleanComponentBase implements ControlValueAccessor {
-    readonly wrapperClasses: import("@angular/core").InputSignal<string>;
     protected readonly _DEFAULTS: ArdStarButtonDefaults;
     constructor(defaults: ArdStarButtonDefaults);
+    protected readonly _componentId = "107";
+    protected readonly _componentName = "start-button";
+    readonly wrapperClasses: import("@angular/core").InputSignal<string>;
     readonly clickStrategy: import("@angular/core").InputSignal<ClickStrategy>;
     readonly color: import("@angular/core").InputSignal<StarColor>;
     readonly ngClasses: import("@angular/core").Signal<string>;
     readonly starFillState: import("@angular/core").Signal<StarFillMode>;
+    readonly starFillInternal: import("@angular/core").Signal<StarFillMode>;
     onClick(): void;
     readonly starTemplate: import("@angular/core").Signal<ArdStarButtonStarTemplateDirective | undefined>;
     readonly starTemplateContext: import("@angular/core").Signal<ArdStarButtonStarTemplateContext>;

package/lib/star/star-button/star-button.types.d.ts

@@ -2,5 +2,6 @@ import { StarColor, StarFillMode } from '../star.types';
 export interface ArdStarButtonStarTemplateContext {
     $implicit: StarFillMode;
     fillMode: StarFillMode;
+    fillModeInternal: StarFillMode;
     color: StarColor;
 }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ardium-ui/ui",
-  "version": "5.0.0-alpha.69",
+  "version": "5.0.0-alpha.70",
   "peerDependencies": {
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",

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"}

package/prebuilt-themes/default/card.css

@@ -1,7 +1,29 @@
+:root {
+  --ard-card-content-padding-top: 0;
+  --ard-card-content-padding-right: 1em;
+  --ard-card-content-padding-bottom: 0;
+  --ard-card-content-padding-left: 1em;
+  --ard-card-header-padding-top: 0.5em;
+  --ard-card-header-padding-right: 1em;
+  --ard-card-header-padding-bottom: 0;
+  --ard-card-header-padding-left: 1em;
+  --ard-card-header-margin-bottom: 1em;
+  --ard-card-title-font-size: 1.375em;
+  --ard-card-title-letter-spacing: 0.0125em;
+  --ard-card-title-font-weight: 500;
+  --ard-card-title-margin-top: 0;
+  --ard-card-subtitle-font-size: 1.375em;
+  --ard-card-subtitle-letter-spacing: 0.0125em;
+  --ard-card-subtitle-font-weight: 500;
+  --ard-card-subtitle-margin-top: 0;
+  --ard-card-avatar-size: 3em;
+  --ard-card-action-buttons-padding: 0.5em;
+}
+
 ard-card,
 .ard-card {
   position: relative;
-  background: var(--ard-bg);
+  background: var(--ard-card-bg, var(--ard-bg));
   box-sizing: border-box;
   width: 100%;
   height: max-content;
@@ -9,7 +31,7 @@ ard-card,
 }
 ard-card.ard-appearance-outlined,
 .ard-card.ard-appearance-outlined {
-  border: 1px solid var(--ard-border-light);
+  border: 1px solid var(--ard-card-border-color, var(--ard-border-light));
 }
 ard-card.ard-appearance-raised,
 .ard-card.ard-appearance-raised {
@@ -21,14 +43,17 @@ ard-card.ard-variant-sharp,
 }
 ard-card.ard-variant-rounded,
 .ard-card.ard-variant-rounded {
-  border-radius: 8px;
+  border-radius: var(--ard-card-rounded-corner-radius, var(--ard-rounded-corner-radius, 0.375rem));
 }
 
 ard-card-header {
-  padding: 0.5em 1em 0 1em;
+  padding-top: var(--ard-card-header-padding-top, var(--ard-card-content-padding-top, 0.5em));
+  padding-right: var(--ard-card-header-padding-right, var(--ard-card-content-padding-right, 1em));
+  padding-bottom: var(--ard-card-header-padding-bottom, var(--ard-card-content-padding-bottom, 0));
+  padding-left: var(--ard-card-header-padding-left, var(--ard-card-content-padding-left, 1em));
   display: flex;
   align-items: center;
-  margin-bottom: 1em;
+  margin-bottom: var(--ard-card-header-margin-bottom, 1em);
   max-width: 100%;
 }
 ard-card-header .ard-card-header-title-container {
@@ -37,40 +62,44 @@ ard-card-header .ard-card-header-title-container {
   justify-content: center;
 }
 ard-card-header:first-child {
-  padding-top: 1em;
+  padding-top: var(--ard-card-content-padding-top, 0.5em);
 }
 
 .ard-card-title,
 .ard-card-subtitle {
-  line-height: normal;
   display: block;
   margin: 0;
-  font-weight: 500;
 }
 
 .ard-card-title {
-  font-size: 1.375em;
-  letter-spacing: 0.0125em;
-  color: var(--ard-text);
+  color: var(--ard-card-title-color, var(--ard-text));
+  font-size: var(--ard-card-title-font-size, 1.375em);
+  letter-spacing: var(--ard-card-title-letter-spacing, 0.0125em);
+  font-weight: var(--ard-card-title-font-weight, 500);
+  margin-top: var(--ard-card-title-margin-top, 0);
 }
 
 .ard-card-subtitle {
-  font-size: 1em;
-  letter-spacing: 0.0078125em;
-  color: var(--ard-text3);
-  margin-top: 0.125rem;
+  color: var(--ard-card-subtitle-color, var(--ard-text3));
+  font-size: var(--ard-card-subtitle-font-size, 1.375em);
+  letter-spacing: var(--ard-card-subtitle-letter-spacing, 0.0125em);
+  font-weight: var(--ard-card-subtitle-font-weight, 500);
+  margin-top: var(--ard-card-subtitle-margin-top, 0);
 }
 
 .ard-card-avatar {
   display: block;
-  width: 3em;
-  height: 3em;
+  width: var(--ard-card-avatar-size, 3em);
+  height: var(--ard-card-avatar-size, 3em);
   border-radius: 9999px;
   flex-shrink: 0;
   object-fit: cover;
 }
 .ard-card-avatar ~ .ard-card-header-title-container {
-  padding: 0 1em;
+  padding-top: var(--ard-card-content-padding-top, 0);
+  padding-right: var(--ard-card-content-padding-right, 1em);
+  padding-bottom: var(--ard-card-content-padding-bottom, 0);
+  padding-left: var(--ard-card-content-padding-left, 0);
 }
 
 .ard-card-image {
@@ -92,26 +121,29 @@ ard-card-header:first-child {
 
 ard-card .ard-appearance-outlined .ard-image,
 .ard-card .ard-appearance-outlined .ard-image {
-  border-bottom: 1px solid var(--ard-border-light);
+  border-bottom: 1px solid var(--ard-card-border-color, var(--ard-border-light));
 }
 
 .ard-card-content {
-  padding: 0 1em;
+  padding-top: var(--ard-card-content-padding-top, var(--ard-card-content-padding, 0));
+  padding-right: var(--ard-card-content-padding-right, var(--ard-card-content-padding, 1em));
+  padding-bottom: var(--ard-card-content-padding-bottom, var(--ard-card-content-padding, 0));
+  padding-left: var(--ard-card-content-padding-left, var(--ard-card-content-padding, 1em));
   display: block;
   max-width: 100%;
 }
 .ard-card-content:first-child {
-  padding-top: 1em;
+  padding-top: var(--ard-card-content-padding-top, var(--ard-card-content-padding, 0));
 }
 .ard-card-content:last-child {
-  padding-bottom: 1em;
+  padding-bottom: var(--ard-card-content-padding-bottom, var(--ard-card-content-padding, 0));
 }
 .ard-card-content > :last-child {
   margin-bottom: 0;
 }
 
 .ard-card-action-buttons {
-  padding: 0.5em;
+  padding: var(--ard-card-action-buttons-padding, 0.5em);
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -120,7 +152,7 @@ ard-card .ard-appearance-outlined .ard-image,
 .ard-card-action-buttons.ard-align-left {
   justify-content: flex-start;
 }
-.ard-card-action-buttons.ard-align-middle {
+.ard-card-action-buttons.ard-align-center {
   justify-content: center;
 }
 .ard-card-action-buttons.ard-align-right {

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/card.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;AAAA;EAEE;EACA,YCLG;EDMH;EACA;EACA;EACA;;AAGA;AAAA;EACE;;AAEF;AAAA;EACE,YCiBU;;ADdZ;AAAA;EACE;;AAEF;AAAA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;;AAGJ;AAAA;EAEE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA,OC/CK;;;ADiDP;EACE;EACA;EACA,OClDM;EDmDN;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;;AAKF;AAAA;EACE;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE","file":"card.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/card.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAIA;EAKE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;;AAGA;AAAA;EACE;;AAEF;AAAA;EACE,YCjBU;;ADoBZ;AAAA;EACE;;AAEF;AAAA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;;AAGJ;AAAA;EAEE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;;AAKF;AAAA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE","file":"card.css"}

package/prebuilt-themes/default/checkbox.css

@@ -1,9 +1,20 @@
+:root {
+  --ard-checkbox-size: 1.25em;
+  --ard-checkbox-icon-size: 1em;
+  --ard-checkbox-icon-size: 1.8em;
+  --ard-checkbox-hitbox-offset: -4px;
+  --ard-checkbox-overlay-offset: 0.4em;
+  --ard-checkbox-unselected-disabled-opacity: 40%;
+  --ard-checkbox-indeterminate-disabled-opacity: 50%;
+  --ard-checkbox-selected-disabled-opacity: 50%;
+}
+
 .ard-checkbox {
   position: relative;
   cursor: pointer;
   user-select: none;
-  width: 1.25em;
-  height: 1.25em;
+  width: var(--ard-checkbox-size, 1.25em);
+  height: var(--ard-checkbox-size, 1.25em);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -11,7 +22,8 @@
   background: none;
   padding: 0;
   outline: none;
-  color: var(--ard-text2);
+  color: var(--ard-checkbox-base-color, var(--ard-text2));
+  font-size: var(--ard-checkbox-icon-size, 1em);
 }
 .ard-checkbox.ard-color-none {
   --ard-cmpcl--bg: var(--ard-bg);
@@ -279,74 +291,32 @@
   --ard-unsel-cmpcl--overlay-colored: currentColor;
   --ard-unsel-cmpcl--overlay-colored-light: currentColor;
 }
-.ard-checkbox.ard-color-currentColor {
+.ard-checkbox.ard-color-currentColor.ard-state-selected {
   color: currentColor;
 }
 .ard-checkbox .ard-hitbox {
   position: absolute;
-  left: -4px;
-  right: -4px;
-  bottom: -4px;
-  top: -4px;
+  left: var(--ard-checkbox-hitbox-offset, -4px);
+  right: var(--ard-checkbox-hitbox-offset, -4px);
+  bottom: var(--ard-checkbox-hitbox-offset, -4px);
+  top: var(--ard-checkbox-hitbox-offset, -4px);
 }
 .ard-checkbox .ard-focus-overlay {
   position: absolute;
-  top: calc(-1 * 0.4em);
-  bottom: calc(-1 * 0.4em);
-  left: calc(-1 * 0.4em);
-  right: calc(-1 * 0.4em);
+  top: calc(-1 * var(--ard-checkbox-overlay-offset, 0.4em));
+  bottom: calc(-1 * var(--ard-checkbox-overlay-offset, 0.4em));
+  left: calc(-1 * var(--ard-checkbox-overlay-offset, 0.4em));
+  right: calc(-1 * var(--ard-checkbox-overlay-offset, 0.4em));
   opacity: 0;
   border-radius: inherit;
   pointer-events: none;
   transition: opacity 0.2s ease;
-  border-radius: 999px;
+  border-radius: 9999px;
   background: currentColor;
 }
-.ard-checkbox .ard-checkbox-icon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  height: 1.8em;
-  display: none;
-  opacity: 80%;
-  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.ard-checkbox .ard-checkbox-icon::after {
-  font-family: "Material Symbols Outlined";
-  font-size: 1.5em;
-  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 48;
-}
-.ard-checkbox .ard-icon-for-selected::after {
-  font-family: "Material Symbols Outlined";
-  font-size: 1.5em;
-  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 48;
-  content: "check_box";
-}
-.ard-checkbox .ard-icon-for-indeterminate::after {
-  content: "indeterminate_check_box";
-}
-.ard-checkbox .ard-icon-for-unselected::after {
-  content: "check_box_outline_blank";
-}
 .ard-checkbox.ard-checkbox-selected {
   color: var(--ard-unsel-cmpcl--bg-colored);
 }
-.ard-checkbox.ard-checkbox-selected .ard-checkbox-icon {
-  opacity: 90%;
-}
-.ard-checkbox.ard-checkbox-selected .ard-icon-for-selected {
-  display: block;
-}
-.ard-checkbox.ard-checkbox-indeterminate .ard-icon-for-indeterminate {
-  display: block;
-}
-.ard-checkbox.ard-checkbox-unselected .ard-icon-for-unselected {
-  display: block;
-}
-.ard-checkbox:hover .ard-checkbox-icon, .ard-checkbox:focus .ard-checkbox-icon {
-  opacity: 100%;
-}
 .ard-checkbox:hover .ard-focus-overlay, .ard-checkbox:focus .ard-focus-overlay {
   opacity: 10%;
 }
@@ -356,10 +326,13 @@
 
 .ard-disabled .ard-checkbox {
   pointer-events: none;
-  opacity: 40%;
+  opacity: var(--ard-checkbox-unselected-disabled-opacity, 40%);
+}
+.ard-disabled .ard-checkbox.ard-checkbox-selected {
+  opacity: var(--ard-checkbox-selected-disabled-opacity, 50%);
 }
-.ard-disabled .ard-checkbox.ard-checkbox-selected, .ard-disabled .ard-checkbox.ard-checkbox-indeterminate {
-  opacity: 50%;
+.ard-disabled .ard-checkbox.ard-checkbox-indeterminate {
+  opacity: var(--ard-checkbox-indeterminate-disabled-opacity, 50%);
 }
 
 /*# sourceMappingURL=checkbox.css.map */

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/checkbox.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAIA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OCXM;;ACLN;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;;AAnIF;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;;AFjHF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEF;EGnBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EHYE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EG5CF;EACA;EACA,yBACE;;AH6CF;EGhDA;EACA;EACA,yBACE;EH+CA;;AAEF;EACE;;AAEF;EACE;;AAGF;EACE;;AAEA;EACE;;AAIF;EACE;;AAIF;EACE;;AAIF;EACE;;AAKF;EACE;;AAEF;EACE;;AAIF;EACE;;;AAKN;EACE;EACA;;AAEA;EAEE","file":"checkbox.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/checkbox.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AC/BA;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;;AAnIF;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;;ADlGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEF;EElCA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EF2BE;EACA;;AAGF;EACE;;AAIA;EACE;;AAIF;EACE;;;AAKN;EACE;EACA;;AAEA;EACE;;AAEF;EACE","file":"checkbox.css"}

package/prebuilt-themes/default/chips.css

@@ -33,7 +33,7 @@
   border-radius: var(--ard-variant-border-radius);
   padding: 0;
   margin: var(--ard-chip-margin, 0);
-  vertical-align: middle;
+  vertical-align: center;
   display: flex;
   align-items: center;
   font-size: var(--ard-chip-font-size, 0.875rem);