@ng-solid/design-system 22.4.0 → 22.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-solid/design-system",
-  "version": "22.4.0",
+  "version": "22.4.1",
   "license": "MIT",
   "description": "Arvisfy, the token-driven Angular design system for ng-solid.",
   "author": "Ulises Familia Rodríguez <chicromedia@hotmail.com>",

package/types/ng-solid-design-system.d.ts

@@ -123,12 +123,20 @@ declare class NsBreadcrumbsComponent {
 }
 
 type NsButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'success' | 'danger' | 'dark';
+type NsButtonSize = 'xs' | NsSize;
 declare class NsButtonComponent {
     readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
     readonly variant: _angular_core.InputSignal<NsButtonVariant>;
-    readonly size: _angular_core.InputSignal<NsSize>;
+    readonly size: _angular_core.InputSignal<NsButtonSize>;
     readonly icon: _angular_core.InputSignal<string>;
     readonly iconOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Explicit `ns-icon` size override. Defaults to 14 for `size="xs"` and 16
+     * for every other size when left unset.
+     */
+    readonly iconSize: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Resolved `ns-icon` size: `iconSize()` when set, else a per-size default. */
+    readonly effectiveIconSize: _angular_core.Signal<number>;
     readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly block: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -150,7 +158,7 @@ declare class NsButtonComponent {
     private readonly control;
     focus(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NsButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NsButtonComponent, "ns-button", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NsButtonComponent, "ns-button", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 type NsButtonGroupSelectionMode = 'single' | 'multiple';
@@ -752,14 +760,17 @@ declare class NsDropdownItemDirective {
     readonly key: _angular_core.InputSignal<NsKey>;
     readonly label: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly dot: _angular_core.InputSignal<NsColor>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NsDropdownItemDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NsDropdownItemDirective, "ns-dropdown-item", never, { "key": { "alias": "key"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NsDropdownItemDirective, "ns-dropdown-item", never, { "key": { "alias": "key"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 interface NsDropdownItem<T = unknown> {
     key: NsKey;
     label: string;
     disabled?: boolean;
+    /** Optional color dot rendered before the label (decorative, `aria-hidden`). */
+    dot?: NsColor;
     value?: T;
 }
 type NsDropdownValue = NsKey | readonly NsKey[] | null;
@@ -768,6 +779,7 @@ interface NsDropdownWorkingItem {
     readonly key: NsKey;
     readonly label: string;
     readonly disabled: boolean;
+    readonly dot?: NsColor;
 }
 declare class NsDropdownComponent extends NsValueAccessor<NsDropdownValue> {
     readonly collection: _angular_core.InputSignal<readonly NsDropdownItem<unknown>[]>;
@@ -799,6 +811,8 @@ declare class NsDropdownComponent extends NsValueAccessor<NsDropdownValue> {
     readonly visibleItems: _angular_core.Signal<NsDropdownWorkingItem[]>;
     readonly selectedKeys: _angular_core.Signal<ReadonlySet<NsKey>>;
     readonly selectedLabel: _angular_core.Signal<string>;
+    /** Dot of the selected item; the trigger shows it for single selection only. */
+    readonly selectedDot: _angular_core.Signal<NsColor>;
     readonly activeId: _angular_core.Signal<string>;
     constructor();
     toggle(): void;
@@ -854,7 +868,29 @@ declare class NsInputNumberComponent extends NsValueAccessor<number | null> {
     onKeydown(event: KeyboardEvent): void;
     stepBy(direction: 1 | -1): void;
     private get formatter();
+    /**
+     * `format: { style: 'percent' }` deliberately breaks from `Intl.NumberFormat`'s
+     * own convention. `Intl` expects a *fraction* (`format(0.1)` → "10%"); this
+     * component's model is the 0-100 *magnitude* instead (`100` means 100%), so a
+     * model of `10` paints "10%".
+     *
+     * Why: almost every form in this codebase stores a percentage as an integer
+     * 0-100 (discounts, tax rates, commission splits, `min`/`max`/`step` all read
+     * naturally as "0 to 100"). Making the model a 0-1 fraction would just push
+     * the ×100/÷100 conversion onto every consumer instead of doing it once here.
+     *
+     * Do NOT "fix" this back to matching `Intl` — that silently multiplies every
+     * stored percentage by 100 the next time this input round-trips a value.
+     * The bug this comment guards against: `formatDisplayValue` used to hand the
+     * raw 0-100 model straight to `Intl` (which reads it as a fraction, so `0.1`
+     * printed as "10%"), while `parse` read "10%" back as the magnitude `10` — a
+     * value that then painted as "1,000%" on the next blur. `parse` already
+     * returns the 0-100 magnitude and is intentionally left untouched; only the
+     * percent *formatting* path divides by 100 before calling `Intl`.
+     */
+    private isPercentMode;
     private formatDisplayValue;
+    /** Returns the 0-100 magnitude even in percent mode — see `isPercentMode`. */
     private parse;
     private constrain;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NsInputNumberComponent, never>;
@@ -1977,4 +2013,4 @@ declare class NsTooltipDirective implements OnDestroy {
 }
 
 export { Arvisfy, NS_EDITOR_TOOLS_DEFAULT, NS_RETIRED_TOKENS, NS_THEME_OPTIONS, NS_TOAST_OPTIONS, NsAccordionComponent, NsAccordionItemComponent, NsAlertComponent, NsAvatarComponent, NsAvatarGroupComponent, NsBadgeComponent, NsBreadcrumbItemComponent, NsBreadcrumbsComponent, NsButtonComponent, NsButtonGroupComponent, NsCardBodyComponent, NsCardComponent, NsCardFooterComponent, NsCardHeaderComponent, NsCheckboxComponent, NsChipComponent, NsCollectionController, NsCommandPaletteComponent, NsCommentComponent, NsContentEditableComponent, NsDatePickerComponent, NsDateRangePickerComponent, NsDescriptionComponent, NsDividerComponent, NsDrawerComponent, NsDrawerRef, NsDrawerService, NsDropdownComponent, NsDropdownItemDirective, NsEditorColorPickerComponent, NsEditorComponent, NsEditorImageComponent, NsEditorLinkComponent, NsEditorListComponent, NsEditorParagraphComponent, NsEditorToggleCommandComponent, NsEmptyStateComponent, NsFieldContext, NsFieldDirective, NsImageUploadComponent, NsInputCodeComponent, NsInputComponent, NsInputGroupAddonComponent, NsInputGroupComponent, NsInputNumberComponent, NsInputSearchComponent, NsLinkComponent, NsLoadMoreComponent, NsMenuComponent, NsMenuDividerComponent, NsMenuItemComponent, NsMenuSectionComponent, NsMeterComponent, NsModalComponent, NsModalRef, NsModalService, NsOptionCardComponent, NsOverlayRef, NsOverlayService, NsPaginationComponent, NsPasswordComponent, NsPopoverComponent, NsProgressBarComponent, NsRadioComponent, NsRadioGroupComponent, NsSchedule, NsScheduleComponent, NsScheduleService, NsSchemaMarkupComponent, NsSideNavComponent, NsSideNavItemComponent, NsSideNavSectionComponent, NsSkeletonComponent, NsSliderComponent, NsStatCardComponent, NsSurfaceComponent, NsSwitchComponent, NsTabComponent, NsTabsComponent, NsTagComponent, NsTagGroupComponent, NsTextAreaComponent, NsThemeService, NsTimelineComponent, NsTimelineItemComponent, NsToastComponent, NsToastHandle, NsToastService, NsTooltipComponent, NsTooltipDirective, NsValueAccessor, TemplateDirective, defineNsPreset, flattenTokens, getNsOverlayPosition, provideNsTheme, referenceToCssVariable, tokenPathToCssVariable, validateNsPreset };
-export type { NsAlertVariant, NsBadgeMode, NsButtonGroupSelectionMode, NsButtonVariant, NsChipColor, NsChipSize, NsChipVariant, NsCollectionItem, NsColor, NsColorScheme, NsCommandGroup, NsCommandItem, NsComment, NsComponentInputs, NsDateRangeValue, NsDateView, NsDeepPartial, NsDrawerComponentInputs, NsDrawerConfig, NsDrawerOptions, NsDrawerPosition, NsDropdownItem, NsDropdownValue, NsEditorTool, NsEmptyStateSize, NsFlattenedPrimitiveTokens, NsKey, NsModalConfig, NsModalOptions, NsModalSize, NsOrientation, NsOverlayCloseReason, NsOverlayConfig, NsOverlayPosition, NsPlacement, NsPrimitiveReference, NsPrimitiveTokenValue, NsResolvedColorScheme, NsResolvedThemeOptions, NsResolvedToastThemeOptions, NsSchemaMarkup, NsSchemaType, NsSelectionMode, NsSemanticReference, NsSemanticTokens, NsSideNavColor, NsSize, NsSliderValue, NsStatCardDeltaTone, NsStatCardHintTone, NsStatCardIconTone, NsStatCardValueTone, NsStatCardVariant, NsTabsVariant, NsThemeOptions, NsThemePreset, NsThemePresetOverrides, NsTimelineItemColor, NsTimelineSize, NsToastAction, NsToastCloseReason, NsToastOptions, NsToastPlacement, NsToastThemeOptions, NsToastVariant, NsTokenTree, NsVariant };
+export type { NsAlertVariant, NsBadgeMode, NsButtonGroupSelectionMode, NsButtonSize, NsButtonVariant, NsChipColor, NsChipSize, NsChipVariant, NsCollectionItem, NsColor, NsColorScheme, NsCommandGroup, NsCommandItem, NsComment, NsComponentInputs, NsDateRangeValue, NsDateView, NsDeepPartial, NsDrawerComponentInputs, NsDrawerConfig, NsDrawerOptions, NsDrawerPosition, NsDropdownItem, NsDropdownValue, NsEditorTool, NsEmptyStateSize, NsFlattenedPrimitiveTokens, NsKey, NsModalConfig, NsModalOptions, NsModalSize, NsOrientation, NsOverlayCloseReason, NsOverlayConfig, NsOverlayPosition, NsPlacement, NsPrimitiveReference, NsPrimitiveTokenValue, NsResolvedColorScheme, NsResolvedThemeOptions, NsResolvedToastThemeOptions, NsSchemaMarkup, NsSchemaType, NsSelectionMode, NsSemanticReference, NsSemanticTokens, NsSideNavColor, NsSize, NsSliderValue, NsStatCardDeltaTone, NsStatCardHintTone, NsStatCardIconTone, NsStatCardValueTone, NsStatCardVariant, NsTabsVariant, NsThemeOptions, NsThemePreset, NsThemePresetOverrides, NsTimelineItemColor, NsTimelineSize, NsToastAction, NsToastCloseReason, NsToastOptions, NsToastPlacement, NsToastThemeOptions, NsToastVariant, NsTokenTree, NsVariant };