@egose/shadcn-theme-ng-tw 0.0.28 → 0.2.0

package/button/fesm2022/button.mjs

@@ -7,6 +7,59 @@ import { NgTemplateOutlet } from '@angular/common';
 import { HlmSpinner } from '@egose/shadcn-theme-ng-tw/spinner';
 import { cva } from 'class-variance-authority';
 
+// Keep complete utility names here so consumer Tailwind builds can discover every tone.
+const toneTextClasses = {
+    default: 'tw:text-primary',
+    primary: 'tw:text-primary',
+    secondary: 'tw:text-secondary',
+    success: 'tw:text-success',
+    warning: 'tw:text-warning',
+    danger: 'tw:text-danger',
+    info: 'tw:text-info',
+    light: 'tw:text-light-foreground',
+    dark: 'tw:text-dark',
+    accent: 'tw:text-accent',
+    destructive: 'tw:text-destructive',
+    muted: 'tw:text-muted-foreground',
+    outline: 'tw:text-primary',
+    link: 'tw:text-primary',
+    ghost: 'tw:text-light-foreground',
+};
+const outlineClasses = {
+    default: 'tw:border-primary tw:hover:bg-primary/10',
+    primary: 'tw:border-primary tw:hover:bg-primary/10',
+    secondary: 'tw:border-secondary tw:hover:bg-secondary/10',
+    success: 'tw:border-success tw:hover:bg-success/10',
+    warning: 'tw:border-warning tw:hover:bg-warning/10',
+    danger: 'tw:border-danger tw:hover:bg-danger/10',
+    info: 'tw:border-info tw:hover:bg-info/10',
+    light: 'tw:border-light tw:hover:bg-light/10',
+    dark: 'tw:border-dark tw:hover:bg-dark/10',
+    accent: 'tw:border-accent tw:hover:bg-accent/10',
+    destructive: 'tw:border-destructive tw:hover:bg-destructive/10',
+    muted: 'tw:border-muted tw:hover:bg-muted/10',
+    outline: 'tw:border-primary tw:hover:bg-primary/10',
+    link: '',
+    ghost: '',
+};
+const outlineFilledClasses = {
+    default: 'tw:hover:bg-primary tw:hover:text-primary-foreground',
+    primary: 'tw:hover:bg-primary tw:hover:text-primary-foreground',
+    secondary: 'tw:hover:bg-secondary tw:hover:text-secondary-foreground',
+    success: 'tw:hover:bg-success tw:hover:text-success-foreground',
+    warning: 'tw:hover:bg-warning tw:hover:text-warning-foreground',
+    danger: 'tw:hover:bg-danger tw:hover:text-danger-foreground',
+    info: 'tw:hover:bg-info tw:hover:text-info-foreground',
+    light: 'tw:hover:bg-light tw:hover:text-light-foreground',
+    dark: 'tw:hover:bg-dark tw:hover:text-dark-foreground',
+    accent: 'tw:hover:bg-accent tw:hover:text-accent-foreground',
+    destructive: 'tw:hover:bg-destructive tw:hover:text-destructive-foreground',
+    muted: 'tw:hover:bg-muted tw:hover:text-muted-foreground',
+    outline: 'tw:hover:bg-primary tw:hover:text-primary-foreground',
+    link: 'tw:hover:underline',
+    ghost: 'tw:hover:bg-light',
+};
+/** Semantic color utilities and appearances. Merge the result with hlm() for custom hosts. */
 const buttonVariants = cva([
     'tw:cursor-pointer',
     'tw:active:translate-y-[0.5px]',
@@ -45,7 +98,7 @@ const buttonVariants = cva([
             accent: 'tw:border tw:border-accent tw:bg-accent tw:text-accent-foreground tw:shadow-sm tw:hover:bg-accent/90',
             destructive: 'tw:border tw:border-destructive tw:bg-destructive tw:text-destructive-foreground tw:shadow-sm tw:hover:bg-destructive/90',
             muted: 'tw:border tw:border-muted tw:bg-muted tw:text-muted-foreground tw:shadow-sm tw:hover:bg-muted/90',
-            outline: 'tw:border tw:border-primary tw:bg-white tw:text-primary tw:shadow-sm tw:hover:bg-primary/10',
+            outline: 'tw:border tw:border-primary tw:bg-background tw:text-primary tw:shadow-sm tw:hover:bg-primary/10',
             link: 'tw:text-primary tw:underline-offset-4 tw:hover:underline',
             ghost: 'tw:hover:bg-light tw:hover:text-light-foreground',
         },
@@ -66,14 +119,33 @@ const buttonVariants = cva([
         },
         appearance: {
             solid: '',
-            outline: 'tw:bg-white tw:border',
-            'outline-filled': 'tw:bg-white tw:border',
+            outline: 'tw:bg-background tw:border tw:shadow-sm',
+            'outline-filled': 'tw:bg-background tw:border tw:shadow-sm',
+            ghost: 'tw:bg-transparent tw:border-0 tw:shadow-none',
+            link: 'tw:bg-transparent tw:border-0 tw:shadow-none tw:hover:bg-transparent tw:underline-offset-4 tw:hover:underline',
         },
         loading: {
             true: 'tw:pointer-events-none',
             false: null,
         },
     },
+    compoundVariants: Object.keys(toneTextClasses).flatMap((variant) => [
+        {
+            variant,
+            appearance: ["tw:outline", "tw:outline-filled", 'ghost', 'link'],
+            class: toneTextClasses[variant],
+        },
+        {
+            variant,
+            appearance: ["tw:outline", "tw:outline-filled", 'ghost'],
+            class: outlineClasses[variant],
+        },
+        {
+            variant,
+            appearance: "tw:outline-filled",
+            class: outlineFilledClasses[variant],
+        },
+    ]),
     defaultVariants: {
         variant: 'primary',
         size: 'default',
@@ -82,11 +154,12 @@ const buttonVariants = cva([
     },
 });
 class HlmButton {
-    /** Props as signal-based inputs */
+    /** Semantic color token. Legacy default, outline, link, and ghost variants remain supported. */
     variant = input('primary', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Visual treatment independent of color: solid, outline, outline-filled, ghost, or link. */
     appearance = input('solid', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
     loading = input(false, /* @ts-ignore */
@@ -105,116 +178,21 @@ class HlmButton {
     _additionalClasses = signal('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_additionalClasses" }] : /* istanbul ignore next */ []));
     /** Computed button class merging */
-    _computedClass = computed(() => {
-        const outlineClasses = this.appearance() === 'outline' || this.appearance() === 'outline-filled'
-            ? [this.getOutlineClasses(this.variant())]
-            : [];
-        if (this.appearance() === 'outline-filled') {
-            outlineClasses.push(this.getOutlineFilledClasses(this.variant()));
-        }
-        return hlm(buttonVariants({
-            variant: this.variant(),
-            size: this.size(),
-            appearance: this.appearance(),
-            loading: this.loading(),
-            className: this.userClass(),
-        }), outlineClasses, this.loading() ? 'tw:pointer-events-none' : '', this._additionalClasses());
-    }, /* @ts-ignore */
+    _computedClass = computed(() => hlm(buttonVariants({
+        variant: this.variant(),
+        size: this.size(),
+        appearance: this.appearance(),
+        loading: this.loading(),
+    }), this.userClass(), this.loading() ? 'tw:pointer-events-none' : '', this._additionalClasses()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
-    /** Computed spinner classes */
-    spinnerClass = computed(() => {
-        const base = this.appearance() === 'outline' || this.appearance() === 'outline-filled'
-            ? this.getOutlineSpinnerClasses(this.variant())
-            : this.getSpinnerClasses(this.variant());
-        return hlm(base, this.spinnerUserClass());
-    }, /* @ts-ignore */
+    /** Inherit the button's resolved text color, including theme and consumer overrides. */
+    spinnerClass = computed(() => hlm('tw:[&>svg]:text-current', this.spinnerUserClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "spinnerClass" }] : /* istanbul ignore next */ []));
     setClass(classes) {
         this._additionalClasses.set(classes);
     }
-    /** Helper functions */
-    getOutlineClasses(variant) {
-        const colors = {
-            default: 'tw:border-primary tw:text-primary tw:shadow-sm tw:hover:bg-primary/10',
-            primary: 'tw:border-primary tw:text-primary tw:shadow-sm tw:hover:bg-primary/10',
-            secondary: 'tw:border-secondary tw:text-secondary tw:shadow-sm tw:hover:bg-secondary/10',
-            success: 'tw:border-success tw:text-success tw:shadow-sm tw:hover:bg-success/10',
-            warning: 'tw:border-warning tw:text-warning tw:shadow-sm tw:hover:bg-warning/10',
-            danger: 'tw:border-danger tw:text-danger tw:shadow-sm tw:hover:bg-danger/10',
-            info: 'tw:border-info tw:text-info tw:shadow-sm tw:hover:bg-info/10',
-            light: 'tw:border-light tw:text-light-foreground tw:shadow-sm tw:hover:bg-light/10',
-            dark: 'tw:border-dark tw:text-dark tw:shadow-sm tw:hover:bg-dark/10',
-            accent: 'tw:border-accent tw:text-accent tw:shadow-sm tw:hover:bg-accent/10',
-            destructive: 'tw:border-destructive tw:text-destructive tw:shadow-sm tw:hover:bg-destructive/10',
-            muted: 'tw:border-muted tw:text-muted-foreground tw:shadow-sm tw:hover:bg-muted/10',
-            outline: 'tw:border-primary tw:text-primary tw:shadow-sm tw:hover:bg-primary/10',
-            link: 'tw:text-primary',
-            ghost: 'tw:text-light-foreground',
-        };
-        return colors[variant];
-    }
-    getOutlineFilledClasses(variant) {
-        const colors = {
-            default: 'tw:hover:bg-primary tw:hover:text-primary-foreground',
-            primary: 'tw:hover:bg-primary tw:hover:text-primary-foreground',
-            secondary: 'tw:hover:bg-secondary tw:hover:text-secondary-foreground',
-            success: 'tw:hover:bg-success tw:hover:text-success-foreground',
-            warning: 'tw:hover:bg-warning tw:hover:text-warning-foreground',
-            danger: 'tw:hover:bg-danger tw:hover:text-danger-foreground',
-            info: 'tw:hover:bg-info tw:hover:text-info-foreground',
-            light: 'tw:hover:bg-light tw:hover:text-light-foreground',
-            dark: 'tw:hover:bg-dark tw:hover:text-dark-foreground',
-            accent: 'tw:hover:bg-accent tw:hover:text-accent-foreground',
-            destructive: 'tw:hover:bg-destructive tw:hover:text-destructive-foreground',
-            muted: 'tw:hover:bg-muted tw:hover:text-muted-foreground',
-            outline: 'tw:hover:bg-primary tw:hover:text-primary-foreground',
-            link: 'tw:hover:underline',
-            ghost: 'tw:hover:bg-light',
-        };
-        return colors[variant];
-    }
-    getSpinnerClasses(variant) {
-        const colors = {
-            default: 'tw:[&>svg]:text-primary-foreground',
-            primary: 'tw:[&>svg]:text-primary-foreground',
-            secondary: 'tw:[&>svg]:text-secondary-foreground',
-            success: 'tw:[&>svg]:text-success-foreground',
-            warning: 'tw:[&>svg]:text-warning-foreground',
-            danger: 'tw:[&>svg]:text-danger-foreground',
-            info: 'tw:[&>svg]:text-info-foreground',
-            light: 'tw:[&>svg]:text-light-foreground',
-            dark: 'tw:[&>svg]:text-dark-foreground',
-            accent: 'tw:[&>svg]:text-accent-foreground',
-            destructive: 'tw:[&>svg]:text-destructive-foreground',
-            muted: 'tw:[&>svg]:text-muted-foreground',
-            outline: 'tw:[&>svg]:text-primary',
-            link: 'tw:[&>svg]:text-primary',
-            ghost: 'tw:[&>svg]:text-light-foreground',
-        };
-        return colors[variant];
-    }
-    getOutlineSpinnerClasses(variant) {
-        const colors = {
-            default: 'tw:[&>svg]:text-primary',
-            primary: 'tw:[&>svg]:text-primary',
-            secondary: 'tw:[&>svg]:text-secondary',
-            success: 'tw:[&>svg]:text-success',
-            warning: 'tw:[&>svg]:text-warning',
-            danger: 'tw:[&>svg]:text-danger',
-            info: 'tw:[&>svg]:text-info',
-            light: 'tw:[&>svg]:text-light',
-            dark: 'tw:[&>svg]:text-dark',
-            accent: 'tw:[&>svg]:text-accent',
-            destructive: 'tw:[&>svg]:text-destructive',
-            muted: 'tw:[&>svg]:text-muted-foreground',
-            outline: 'tw:[&>svg]:text-primary',
-            link: 'tw:[&>svg]:text-primary',
-            ghost: 'tw:[&>svg]:text-light-foreground',
-        };
-        return colors[variant];
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HlmButton, isStandalone: true, selector: "button[hlmButton], a[hlmButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, spinnerUserClass: { classPropertyName: "spinnerUserClass", publicName: "spinnerUserClass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()", "attr.aria-busy": "loading() || null", "attr.disabled": "(loading() || disabled()) ? true : null", "attr.type": "type()" } }, hostDirectives: [{ directive: i1.BrnButton, inputs: ["disabled", "disabled"] }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmButton, isStandalone: true, selector: "button[hlmButton], a[hlmButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, spinnerUserClass: { classPropertyName: "spinnerUserClass", publicName: "spinnerUserClass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()", "attr.aria-busy": "loading() || null", "attr.disabled": "(loading() || disabled()) ? true : null", "attr.type": "type()" } }, hostDirectives: [{ directive: i1.BrnButton, inputs: ["disabled", "disabled"] }], ngImport: i0, template: `
     <ng-template #projected>
       <ng-content></ng-content>
     </ng-template>
@@ -241,7 +219,7 @@ class HlmButton {
     }
   `, isInline: true, dependencies: [{ kind: "component", type: HlmSpinner, selector: "hlm-spinner", inputs: ["size", "show", "class", "spinnerClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmButton, decorators: [{
             type: Component,
             args: [{
                     selector: 'button[hlmButton], a[hlmButton]',
@@ -314,10 +292,10 @@ class HlmBtn {
     setClass(classes) {
         this._additionalClasses.set(classes);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmBtn, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmBtn, isStandalone: true, selector: "button[hlmBtn], a[hlmBtn]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "button" }, properties: { "class": "_computedClass()", "attr.type": "type()" } }, exportAs: ["hlmBtn"], hostDirectives: [{ directive: i1.BrnButton, inputs: ["disabled", "disabled"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmBtn, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmBtn, isStandalone: true, selector: "button[hlmBtn], a[hlmBtn]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "button" }, properties: { "class": "_computedClass()", "attr.type": "type()" } }, exportAs: ["hlmBtn"], hostDirectives: [{ directive: i1.BrnButton, inputs: ["disabled", "disabled"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmBtn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmBtn, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[hlmBtn], a[hlmBtn]',
@@ -337,11 +315,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 const HlmButtonImports = [HlmButton, HlmBtn];
 class HlmButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmButtonModule, imports: [HlmButton, HlmBtn], exports: [HlmButton, HlmBtn] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmButtonModule, imports: [HlmButton] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmButtonModule, imports: [HlmButton, HlmBtn], exports: [HlmButton, HlmBtn] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmButtonModule, imports: [HlmButton] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmButtonImports],
@@ -354,4 +332,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { HlmBtn, HlmButton, HlmButtonImports, HlmButtonModule, buttonVariants, injectBrnButtonConfig, provideBrnButtonConfig };
-//# sourceMappingURL=button.mjs.map
+

package/button/types/button.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { ValueProvider } from '@angular/core';
+import { TemplateRef, ValueProvider } from '@angular/core';
 import { ClassValue } from 'clsx';
 import * as i1 from '@spartan-ng/brain/button';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -18,10 +18,11 @@ declare class HlmBtn {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HlmBtn, "button[hlmBtn], a[hlmBtn]", ["hlmBtn"], { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.BrnButton; inputs: { "disabled": "disabled"; }; outputs: {}; }]>;
 }
 
+/** Semantic color utilities and appearances. Merge the result with hlm() for custom hosts. */
 declare const buttonVariants: (props?: ({
     variant?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "info" | "light" | "dark" | "accent" | "destructive" | "muted" | "outline" | "link" | "ghost" | null | undefined;
     size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "compact-xs" | "compact-sm" | "compact-default" | "compact-lg" | "compact-icon" | null | undefined;
-    appearance?: "outline" | "solid" | "outline-filled" | null | undefined;
+    appearance?: "outline" | "link" | "ghost" | "solid" | "outline-filled" | null | undefined;
     loading?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ButtonVariants = VariantProps<typeof buttonVariants>;
@@ -29,12 +30,13 @@ type VariantType = NonNullable<ButtonVariants['variant']>;
 type SizeType = NonNullable<ButtonVariants['size']>;
 type AppearanceType = NonNullable<ButtonVariants['appearance']>;
 declare class HlmButton {
-    /** Props as signal-based inputs */
+    /** Semantic color token. Legacy default, outline, link, and ghost variants remain supported. */
     readonly variant: _angular_core.InputSignal<VariantType>;
     readonly size: _angular_core.InputSignal<SizeType>;
+    /** Visual treatment independent of color: solid, outline, outline-filled, ghost, or link. */
     readonly appearance: _angular_core.InputSignal<AppearanceType>;
     readonly loading: _angular_core.InputSignal<boolean>;
-    readonly icon: _angular_core.InputSignal<any>;
+    readonly icon: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
     readonly iconPosition: _angular_core.InputSignal<"left" | "right">;
     readonly userClass: _angular_core.InputSignal<ClassValue>;
     readonly spinnerUserClass: _angular_core.InputSignal<ClassValue>;
@@ -43,14 +45,9 @@ declare class HlmButton {
     private readonly _additionalClasses;
     /** Computed button class merging */
     protected readonly _computedClass: _angular_core.Signal<string>;
-    /** Computed spinner classes */
+    /** Inherit the button's resolved text color, including theme and consumer overrides. */
     protected readonly spinnerClass: _angular_core.Signal<string>;
     setClass(classes: string): void;
-    /** Helper functions */
-    private getOutlineClasses;
-    private getOutlineFilledClasses;
-    private getSpinnerClasses;
-    private getOutlineSpinnerClasses;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HlmButton, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<HlmButton, "button[hlmButton], a[hlmButton]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "spinnerUserClass": { "alias": "spinnerUserClass"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.BrnButton; inputs: { "disabled": "disabled"; }; outputs: {}; }]>;
 }