@styloviz/button 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 StyloViz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,79 @@
+# @styloviz/button
+
+> Versatile button with semantic variants, sizes, icon slots, loading and block states.
+
+Part of the **StyloViz UI Kit** — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, `OnPush`, strongly typed, dark-mode ready.
+
+## Installation
+
+```bash
+npm install @styloviz/core @styloviz/button
+```
+
+Requires `@angular/core` and `@angular/common` >= 21. `@styloviz/core` is a peer dependency shared by every component. Prefer everything at once? `@styloviz/all` installs the whole free tier in one command.
+
+## Usage
+
+```ts
+import { SvButtonComponent } from '@styloviz/button';
+
+@Component({
+  standalone: true,
+  imports: [SvButtonComponent],
+  template: `
+    <sv-button />
+  `,
+})
+export class DemoComponent {}
+```
+
+## Inputs
+
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `variant` | `ButtonVariant` | `'primary'` | Semantic color/intent: primary, secondary, success, danger, etc. |
+| `btnStyle` | `ButtonStyle` | `'solid'` | Visual treatment: solid, soft, outline, ghost, link or gradient. |
+| `size` | `ButtonSize` | `'md'` | Button size from xs to xl. |
+| `shape` | `ButtonShape` | `'rounded'` | Corner style: rounded, pill or square. |
+| `block` | `boolean` | `false` | Stretch to 100% width. |
+| `elevated` | `boolean` | `false` | Add drop shadow. |
+| `label` | `string` | `''` | Button text. Omit when projecting custom content. |
+| `iconPath` | `string` | `''` | SVG path for the built-in leading/trailing icon (quick built-in icons, e.g. Heroicons path strings). Ignored when `iconTemplate` is set. |
+| `iconViewBox` | `string` | `'0 0 24 24'` | viewBox for the provided icon paths. |
+| `trailingIconPath` | `string` | `''` | SVG path for the built-in secondary/dual trailing icon. Ignored when `trailingIconTemplate` is set. |
+| `iconTemplate` | `ButtonIconTemplate` | `null` | Custom template for the primary icon — use this to render a third-party icon component (e.g. lucide-angular, ngx-heroicons), an `<img>`, an icon font `<i>`, or arbitrary custom SVG instead of the built-in `iconPath`. Positioned per `iconPosition()`. Takes precedence over `iconPath` when set. |
+| `trailingIconTemplate` | `ButtonIconTemplate` | `null` | Custom template for the secondary/dual trailing icon. Takes precedence over `trailingIconPath` when set. See `iconTemplate` for usage. |
+| `iconPosition` | `ButtonIconPos` | `'leading'` | Where the main icon sits relative to the label. |
+| `counter` | `number \| null` | `null` | Numeric counter badge. null = hidden. |
+| `counterMax` | `number` | `99` | Value above which the counter shows "{max}+". |
+| `counterLabel` | `string` | `''` | Noun describing the counter for screen readers, e.g. "unread". |
+| `type` | `ButtonType` | `'button'` | Native button type when not in link mode. |
+| `disabled` | `boolean` | `false` | Disable interaction and dim the button. |
+| `loading` | `boolean` | `false` | Show a loading indicator and block activation. |
+| `loadingStyle` | `ButtonLoader` | `'spinner'` | Loading indicator style: spinner or dots. |
+| `loadingLabel` | `string` | `''` | Optional text shown beside the loading indicator. |
+| `href` | `string` | `''` | When set, renders an <a> anchor instead of a <button>. |
+| `target` | `string` | `'_self'` | Anchor target (e.g. _blank) when href is set. |
+| `rel` | `string` | `''` | Anchor rel. `noopener noreferrer` is auto-added for target="_blank". |
+| `download` | `string \| null` | `null` | Anchor download attribute (filename or empty string to use the URL). |
+| `name` | `string` | `''` | Native `name` for the button when submitted as part of a form. |
+| `value` | `string` | `''` | Native `value` submitted with `name` for multi-button forms. |
+| `ariaLabel` | `string` | `''` | Explicit accessible name. Required for icon-only buttons; overrides label. |
+| `title` | `string` | `''` | Native tooltip / title attribute. |
+| `autofocus` | `boolean` | `false` | Autofocus the control on render. |
+
+## Outputs
+
+| Output | Type | Description |
+| --- | --- | --- |
+| `clicked` | `MouseEvent` | Emitted on click (suppressed while disabled or loading). |
+| `focused` | `FocusEvent` | Emitted when the control receives focus. |
+| `blurred` | `FocusEvent` | Emitted when the control loses focus. |
+
+## Documentation
+
+Full API reference and live demos: https://styloviz.dev/docs
+
+## License
+
+MIT

package/fesm2022/styloviz-button.mjs

@@ -0,0 +1,342 @@
+import * as i0 from '@angular/core';
+import { input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+
+// ─── Component ───────────────────────────────────────────────────────────────
+/**
+ * SvButtonComponent — Premium, accessible button for StyloViz dashboards.
+ *
+ * Install: npm install @styloviz/button
+ * Import:  import { SvButtonComponent } from '@styloviz/button';
+ *
+ * Features:
+ * - 9 variants × 6 styles × 5 sizes × 3 shapes
+ * - 3 loading animations: spinner · dots · pulse
+ * - Leading, trailing, and icon-only modes
+ * - Dual-icon layout via trailingIconPath
+ * - Bring-your-own icon via `iconTemplate` / `trailingIconTemplate` — render
+ *   any third-party icon component, <img>, icon font, or custom SVG instead
+ *   of the built-in path-based icon
+ * - Counter badge (top-right)
+ * - Renders as <a> when href is provided
+ * - Full dark-mode + OnPush
+ */
+class SvButtonComponent {
+    // ── Appearance ────────────────────────────────────────────────────────────
+    /** Semantic color/intent: primary, secondary, success, danger, etc. @default 'primary' */
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Visual treatment: solid, soft, outline, ghost, link or gradient. @default 'solid' */
+    btnStyle = input('solid', ...(ngDevMode ? [{ debugName: "btnStyle" }] : /* istanbul ignore next */ []));
+    /** Button size from xs to xl. @default 'md' */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Corner style: rounded, pill or square. @default 'rounded' */
+    shape = input('rounded', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    /** Stretch to 100% width. @default false */
+    block = input(false, ...(ngDevMode ? [{ debugName: "block" }] : /* istanbul ignore next */ []));
+    /** Add drop shadow. @default false */
+    elevated = input(false, ...(ngDevMode ? [{ debugName: "elevated" }] : /* istanbul ignore next */ []));
+    // ── Content ───────────────────────────────────────────────────────────────
+    /** Button text. Omit when projecting custom content. */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * SVG path for the built-in leading/trailing icon (quick built-in icons,
+     * e.g. Heroicons path strings). Ignored when `iconTemplate` is set.
+     */
+    iconPath = input('', ...(ngDevMode ? [{ debugName: "iconPath" }] : /* istanbul ignore next */ []));
+    /** viewBox for the provided icon paths. @default '0 0 24 24' */
+    iconViewBox = input('0 0 24 24', ...(ngDevMode ? [{ debugName: "iconViewBox" }] : /* istanbul ignore next */ []));
+    /**
+     * SVG path for the built-in secondary/dual trailing icon. Ignored when
+     * `trailingIconTemplate` is set.
+     */
+    trailingIconPath = input('', ...(ngDevMode ? [{ debugName: "trailingIconPath" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom template for the primary icon — use this to render a third-party
+     * icon component (e.g. lucide-angular, ngx-heroicons), an `<img>`, an icon
+     * font `<i>`, or arbitrary custom SVG instead of the built-in `iconPath`.
+     * Positioned per `iconPosition()`. Takes precedence over `iconPath` when set.
+     *
+     * @example
+     * ```html
+     * <ng-template #saveIcon>
+     *   <img src="/assets/icons/save.svg" alt="" />
+     * </ng-template>
+     * <sv-button label="Save" [iconTemplate]="saveIcon" />
+     * ```
+     */
+    iconTemplate = input(null, ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom template for the secondary/dual trailing icon. Takes precedence
+     * over `trailingIconPath` when set. See `iconTemplate` for usage.
+     */
+    trailingIconTemplate = input(null, ...(ngDevMode ? [{ debugName: "trailingIconTemplate" }] : /* istanbul ignore next */ []));
+    /** Where the main icon sits relative to the label. @default 'leading' */
+    iconPosition = input('leading', ...(ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []));
+    /** Numeric counter badge. null = hidden. @default null */
+    counter = input(null, ...(ngDevMode ? [{ debugName: "counter" }] : /* istanbul ignore next */ []));
+    /** Value above which the counter shows "{max}+". @default 99 */
+    counterMax = input(99, ...(ngDevMode ? [{ debugName: "counterMax" }] : /* istanbul ignore next */ []));
+    /** Noun describing the counter for screen readers, e.g. "unread". */
+    counterLabel = input('', ...(ngDevMode ? [{ debugName: "counterLabel" }] : /* istanbul ignore next */ []));
+    // ── State ─────────────────────────────────────────────────────────────────
+    /** Native button type when not in link mode. @default 'button' */
+    type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Disable interaction and dim the button. @default false */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Show a loading indicator and block activation. @default false */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** Loading indicator style: spinner or dots. @default 'spinner' */
+    loadingStyle = input('spinner', ...(ngDevMode ? [{ debugName: "loadingStyle" }] : /* istanbul ignore next */ []));
+    /** Optional text shown beside the loading indicator. */
+    loadingLabel = input('', ...(ngDevMode ? [{ debugName: "loadingLabel" }] : /* istanbul ignore next */ []));
+    // ── Link mode ─────────────────────────────────────────────────────────────
+    /** When set, renders an <a> anchor instead of a <button>. */
+    href = input('', ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
+    /** Anchor target (e.g. _blank) when href is set. @default '_self' */
+    target = input('_self', ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+    /** Anchor rel. `noopener noreferrer` is auto-added for target="_blank". */
+    rel = input('', ...(ngDevMode ? [{ debugName: "rel" }] : /* istanbul ignore next */ []));
+    /** Anchor download attribute (filename or empty string to use the URL). */
+    download = input(null, ...(ngDevMode ? [{ debugName: "download" }] : /* istanbul ignore next */ []));
+    // ── Form integration (button mode) ─────────────────────────────────────────
+    /** Native `name` for the button when submitted as part of a form. */
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Native `value` submitted with `name` for multi-button forms. */
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    // ── Accessibility ───────────────────────────────────────────────────────────
+    /** Explicit accessible name. Required for icon-only buttons; overrides label. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Native tooltip / title attribute. */
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Autofocus the control on render. @default false */
+    autofocus = input(false, ...(ngDevMode ? [{ debugName: "autofocus" }] : /* istanbul ignore next */ []));
+    // ── Output ────────────────────────────────────────────────────────────────
+    /** Emitted on click (suppressed while disabled or loading). */
+    clicked = output();
+    /** Emitted when the control receives focus. */
+    focused = output();
+    /** Emitted when the control loses focus. */
+    blurred = output();
+    // ── Computed ──────────────────────────────────────────────────────────────
+    isDisabled = computed(() => this.disabled() || this.loading(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    displayLabel = computed(() => this.loading() && this.loadingLabel() ? this.loadingLabel() : this.label(), ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
+    /** True when a counter badge should be shown. */
+    hasCounter = computed(() => this.counter() !== null && this.counter() >= 0, ...(ngDevMode ? [{ debugName: "hasCounter" }] : /* istanbul ignore next */ []));
+    /** Text rendered inside the counter badge (e.g. "99+"). */
+    counterText = computed(() => {
+        const n = this.counter();
+        if (n === null)
+            return '';
+        const max = this.counterMax();
+        return n > max ? `${max}+` : `${n}`;
+    }, ...(ngDevMode ? [{ debugName: "counterText" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible name. Uses ariaLabel, then label. Appends the counter
+     * (e.g. "Inbox, 5 unread") so screen readers announce the badge.
+     */
+    accessibleLabel = computed(() => {
+        const base = this.ariaLabel() || this.label();
+        if (!this.hasCounter())
+            return base || null;
+        const noun = this.counterLabel() ? ` ${this.counterLabel()}` : '';
+        const count = `${this.counter()}${noun}`;
+        return base ? `${base}, ${count}` : count;
+    }, ...(ngDevMode ? [{ debugName: "accessibleLabel" }] : /* istanbul ignore next */ []));
+    /** Resolved rel for anchors; ensures safe defaults for new tabs. */
+    computedRel = computed(() => {
+        const tokens = new Set(this.rel().split(/\s+/).filter(Boolean));
+        if (this.target() === '_blank') {
+            tokens.add('noopener');
+            tokens.add('noreferrer');
+        }
+        return tokens.size ? [...tokens].join(' ') : null;
+    }, ...(ngDevMode ? [{ debugName: "computedRel" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const displayClass = this.block() ? 'flex w-full' : 'inline-flex';
+        const baseClasses = this._base.replace('inline-flex', displayClass);
+        return [
+            baseClasses,
+            this._sizeClasses(this.size()),
+            this._shapeClasses(this.shape()),
+            this._variantStyleClasses(this.variant(), this.btnStyle()),
+            this._stateClasses(),
+            this.elevated() && !['link', 'ghost'].includes(this.btnStyle())
+                ? 'shadow-md hover:shadow-lg active:shadow-sm'
+                : '',
+        ].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    iconSizeClass = computed(() => {
+        const map = {
+            xs: 'h-3.5 w-3.5', sm: 'h-4 w-4', md: 'h-[18px] w-[18px]',
+            lg: 'h-5 w-5', xl: 'h-6 w-6',
+        };
+        return map[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "iconSizeClass" }] : /* istanbul ignore next */ []));
+    spinnerSizeClass = computed(() => {
+        const map = {
+            xs: 'h-3 w-3', sm: 'h-3.5 w-3.5', md: 'h-4 w-4',
+            lg: 'h-[18px] w-[18px]', xl: 'h-5 w-5',
+        };
+        return map[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "spinnerSizeClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Sizing wrapper for a projected `iconTemplate`. Constrains third-party
+     * icon components, `<img>`, and custom SVG to the same box the built-in
+     * icon would occupy, so custom icons line up regardless of their own
+     * intrinsic markup or default size.
+     */
+    customIconWrapperClass = computed(() => `${this.iconSizeClass()} inline-flex shrink-0 items-center justify-center ` +
+        '[&>svg]:h-full [&>svg]:w-full [&>img]:h-full [&>img]:w-full [&>img]:object-contain', ...(ngDevMode ? [{ debugName: "customIconWrapperClass" }] : /* istanbul ignore next */ []));
+    /** Same as `customIconWrapperClass`, dimmed to match `trailingIconPath`'s dual-icon treatment. */
+    trailingCustomIconWrapperClass = computed(() => `${this.customIconWrapperClass()} opacity-70`, ...(ngDevMode ? [{ debugName: "trailingCustomIconWrapperClass" }] : /* istanbul ignore next */ []));
+    // ── Event ─────────────────────────────────────────────────────────────────
+    handleClick(event) {
+        if (this.isDisabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.clicked.emit(event);
+    }
+    // ── Private helpers ───────────────────────────────────────────────────────
+    _base = 'relative inline-flex items-center justify-center font-medium ' +
+        'transition-all duration-150 focus-visible:outline-none ' +
+        'focus-visible:ring-2 focus-visible:ring-offset-2 ' +
+        'focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-950 ' +
+        'select-none whitespace-nowrap leading-none';
+    _sizeClasses(sz) {
+        const iconOnly = this.iconPosition() === 'only';
+        const map = {
+            xs: { text: 'h-7 px-2.5 text-xs gap-1.5', icon: 'h-7 w-7 text-xs' },
+            sm: { text: 'h-8 px-3 text-sm gap-1.5', icon: 'h-8 w-8 text-sm' },
+            md: { text: 'h-9 px-4 text-sm gap-2', icon: 'h-9 w-9 text-sm' },
+            lg: { text: 'h-10 px-5 text-[15px] gap-2', icon: 'h-10 w-10 text-[15px]' },
+            xl: { text: 'h-12 px-6 text-base gap-2.5', icon: 'h-12 w-12 text-base' },
+        };
+        return iconOnly ? map[sz].icon : map[sz].text;
+    }
+    _shapeClasses(sh) {
+        const map = {
+            rounded: 'rounded-md', pill: 'rounded-full', square: 'rounded-none',
+        };
+        return map[sh];
+    }
+    _variantStyleClasses(v, s) {
+        switch (s) {
+            case 'solid': return this._solid(v);
+            case 'outline': return this._outline(v);
+            case 'soft': return this._soft(v);
+            case 'ghost': return this._ghost(v);
+            case 'link': return this._link(v);
+            case 'gradient': return this._gradient(v);
+        }
+    }
+    _solid(v) {
+        const map = {
+            primary: 'bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 focus-visible:ring-blue-500',
+            secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring-gray-400 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600',
+            success: 'bg-emerald-600 text-white hover:bg-emerald-700 active:bg-emerald-800 focus-visible:ring-emerald-500',
+            warning: 'bg-amber-500 text-white hover:bg-amber-600 active:bg-amber-700 focus-visible:ring-amber-400',
+            danger: 'bg-red-600 text-white hover:bg-red-700 active:bg-red-800 focus-visible:ring-red-500',
+            info: 'bg-sky-500 text-white hover:bg-sky-600 active:bg-sky-700 focus-visible:ring-sky-400',
+            neutral: 'bg-gray-800 text-white hover:bg-gray-900 focus-visible:ring-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500',
+            ghost: 'bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-400 dark:text-gray-300 dark:hover:bg-gray-800',
+            link: 'bg-transparent text-blue-600 hover:text-blue-700 hover:underline focus-visible:ring-blue-500 dark:text-blue-400',
+        };
+        return map[v];
+    }
+    _outline(v) {
+        const map = {
+            primary: 'border border-blue-600 text-blue-600 bg-transparent hover:bg-blue-50 focus-visible:ring-blue-500 dark:border-blue-500 dark:text-blue-400 dark:hover:bg-blue-900/20',
+            secondary: 'border border-gray-300 text-gray-700 bg-transparent hover:bg-gray-50 focus-visible:ring-gray-400 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800',
+            success: 'border border-emerald-600 text-emerald-600 bg-transparent hover:bg-emerald-50 focus-visible:ring-emerald-500 dark:border-emerald-500 dark:text-emerald-400 dark:hover:bg-emerald-900/20',
+            warning: 'border border-amber-500 text-amber-600 bg-transparent hover:bg-amber-50 focus-visible:ring-amber-400 dark:border-amber-400 dark:text-amber-400 dark:hover:bg-amber-900/20',
+            danger: 'border border-red-600 text-red-600 bg-transparent hover:bg-red-50 focus-visible:ring-red-500 dark:border-red-500 dark:text-red-400 dark:hover:bg-red-900/20',
+            info: 'border border-sky-500 text-sky-600 bg-transparent hover:bg-sky-50 focus-visible:ring-sky-400 dark:border-sky-400 dark:text-sky-400 dark:hover:bg-sky-900/20',
+            neutral: 'border border-gray-700 text-gray-800 bg-transparent hover:bg-gray-50 focus-visible:ring-gray-600 dark:border-gray-500 dark:text-gray-300 dark:hover:bg-gray-800',
+            ghost: 'border border-transparent text-gray-600 bg-transparent hover:border-gray-300 hover:bg-gray-50 focus-visible:ring-gray-400 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:bg-gray-800',
+            link: 'border border-transparent text-blue-600 bg-transparent hover:border-blue-300 hover:bg-blue-50 focus-visible:ring-blue-500 dark:text-blue-400 dark:hover:bg-blue-900/20',
+        };
+        return map[v];
+    }
+    _soft(v) {
+        const map = {
+            primary: 'bg-blue-50 text-blue-700 hover:bg-blue-100 focus-visible:ring-blue-400 dark:bg-blue-900/30 dark:text-blue-300 dark:hover:bg-blue-900/50',
+            secondary: 'bg-gray-100 text-gray-700 hover:bg-gray-200 focus-visible:ring-gray-400 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700',
+            success: 'bg-emerald-50 text-emerald-700 hover:bg-emerald-100 focus-visible:ring-emerald-400 dark:bg-emerald-900/30 dark:text-emerald-300 dark:hover:bg-emerald-900/50',
+            warning: 'bg-amber-50 text-amber-700 hover:bg-amber-100 focus-visible:ring-amber-400 dark:bg-amber-900/30 dark:text-amber-300 dark:hover:bg-amber-900/50',
+            danger: 'bg-red-50 text-red-700 hover:bg-red-100 focus-visible:ring-red-400 dark:bg-red-900/30 dark:text-red-300 dark:hover:bg-red-900/50',
+            info: 'bg-sky-50 text-sky-700 hover:bg-sky-100 focus-visible:ring-sky-400 dark:bg-sky-900/30 dark:text-sky-300 dark:hover:bg-sky-900/50',
+            neutral: 'bg-gray-200 text-gray-700 hover:bg-gray-300 focus-visible:ring-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600',
+            ghost: 'bg-transparent text-gray-600 hover:bg-gray-100 focus-visible:ring-gray-400 dark:text-gray-400 dark:hover:bg-gray-800',
+            link: 'bg-transparent text-blue-600 hover:bg-blue-50 hover:underline focus-visible:ring-blue-400 dark:text-blue-400 dark:hover:bg-blue-900/20',
+        };
+        return map[v];
+    }
+    _ghost(v) {
+        const map = {
+            primary: 'bg-transparent text-blue-600 hover:bg-blue-50 focus-visible:ring-blue-400 dark:text-blue-400 dark:hover:bg-blue-900/20',
+            secondary: 'bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-400 dark:text-gray-300 dark:hover:bg-gray-800',
+            success: 'bg-transparent text-emerald-600 hover:bg-emerald-50 focus-visible:ring-emerald-400 dark:text-emerald-400 dark:hover:bg-emerald-900/20',
+            warning: 'bg-transparent text-amber-600 hover:bg-amber-50 focus-visible:ring-amber-400 dark:text-amber-400 dark:hover:bg-amber-900/20',
+            danger: 'bg-transparent text-red-600 hover:bg-red-50 focus-visible:ring-red-400 dark:text-red-400 dark:hover:bg-red-900/20',
+            info: 'bg-transparent text-sky-600 hover:bg-sky-50 focus-visible:ring-sky-400 dark:text-sky-400 dark:hover:bg-sky-900/20',
+            neutral: 'bg-transparent text-gray-600 hover:bg-gray-100 focus-visible:ring-gray-400 dark:text-gray-400 dark:hover:bg-gray-800',
+            ghost: 'bg-transparent text-gray-500 hover:bg-gray-100 focus-visible:ring-gray-300 dark:text-gray-500 dark:hover:bg-gray-800',
+            link: 'bg-transparent text-blue-600 hover:text-blue-700 focus-visible:ring-blue-400 dark:text-blue-400 dark:hover:text-blue-300',
+        };
+        return map[v];
+    }
+    _link(v) {
+        const map = {
+            primary: 'bg-transparent text-blue-600 underline-offset-4 hover:underline hover:text-blue-700 focus-visible:ring-blue-400 dark:text-blue-400',
+            secondary: 'bg-transparent text-gray-600 underline-offset-4 hover:underline hover:text-gray-900 focus-visible:ring-gray-400 dark:text-gray-400',
+            success: 'bg-transparent text-emerald-600 underline-offset-4 hover:underline hover:text-emerald-700 focus-visible:ring-emerald-400 dark:text-emerald-400',
+            warning: 'bg-transparent text-amber-600 underline-offset-4 hover:underline focus-visible:ring-amber-400 dark:text-amber-400',
+            danger: 'bg-transparent text-red-600 underline-offset-4 hover:underline hover:text-red-700 focus-visible:ring-red-400 dark:text-red-400',
+            info: 'bg-transparent text-sky-600 underline-offset-4 hover:underline hover:text-sky-700 focus-visible:ring-sky-400 dark:text-sky-400',
+            neutral: 'bg-transparent text-gray-600 underline-offset-4 hover:underline hover:text-gray-900 focus-visible:ring-gray-400 dark:text-gray-300',
+            ghost: 'bg-transparent text-gray-500 underline-offset-4 hover:underline hover:text-gray-700 focus-visible:ring-gray-300 dark:text-gray-400',
+            link: 'bg-transparent text-blue-600 underline underline-offset-4 hover:text-blue-800 focus-visible:ring-blue-400 dark:text-blue-400',
+        };
+        return map[v];
+    }
+    _gradient(v) {
+        const map = {
+            primary: 'bg-gradient-to-r from-blue-500 to-indigo-600 text-white hover:from-blue-600 hover:to-indigo-700 focus-visible:ring-indigo-500',
+            secondary: 'bg-gradient-to-r from-gray-100 to-gray-200 text-gray-900 hover:from-gray-200 hover:to-gray-300 focus-visible:ring-gray-400 dark:from-gray-700 dark:to-gray-800 dark:text-gray-100',
+            success: 'bg-gradient-to-r from-emerald-400 to-teal-600 text-white hover:from-emerald-500 hover:to-teal-700 focus-visible:ring-teal-500',
+            warning: 'bg-gradient-to-r from-amber-400 to-orange-500 text-white hover:from-amber-500 hover:to-orange-600 focus-visible:ring-orange-400',
+            danger: 'bg-gradient-to-r from-rose-500 to-red-600 text-white hover:from-rose-600 hover:to-red-700 focus-visible:ring-red-500',
+            info: 'bg-gradient-to-r from-sky-400 to-cyan-500 text-white hover:from-sky-500 hover:to-cyan-600 focus-visible:ring-cyan-400',
+            neutral: 'bg-gradient-to-r from-gray-700 to-gray-900 text-white hover:from-gray-800 hover:to-black focus-visible:ring-gray-600',
+            ghost: 'bg-gradient-to-r from-gray-50 to-gray-100 text-gray-700 hover:from-gray-100 hover:to-gray-200 focus-visible:ring-gray-400 dark:from-gray-800 dark:to-gray-900 dark:text-gray-200',
+            link: 'bg-gradient-to-r from-blue-500 to-violet-600 text-white hover:from-blue-600 hover:to-violet-700 focus-visible:ring-violet-500',
+        };
+        return map[v];
+    }
+    _stateClasses() {
+        if (this.loading())
+            return 'opacity-75 cursor-wait pointer-events-none';
+        if (this.disabled())
+            return 'opacity-50 cursor-not-allowed pointer-events-none';
+        return 'cursor-pointer';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SvButtonComponent, isStandalone: true, selector: "sv-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, btnStyle: { classPropertyName: "btnStyle", publicName: "btnStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, iconPath: { classPropertyName: "iconPath", publicName: "iconPath", isSignal: true, isRequired: false, transformFunction: null }, iconViewBox: { classPropertyName: "iconViewBox", publicName: "iconViewBox", isSignal: true, isRequired: false, transformFunction: null }, trailingIconPath: { classPropertyName: "trailingIconPath", publicName: "trailingIconPath", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, trailingIconTemplate: { classPropertyName: "trailingIconTemplate", publicName: "trailingIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, counter: { classPropertyName: "counter", publicName: "counter", isSignal: true, isRequired: false, transformFunction: null }, counterMax: { classPropertyName: "counterMax", publicName: "counterMax", isSignal: true, isRequired: false, transformFunction: null }, counterLabel: { classPropertyName: "counterLabel", publicName: "counterLabel", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingStyle: { classPropertyName: "loadingStyle", publicName: "loadingStyle", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, download: { classPropertyName: "download", publicName: "download", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", focused: "focused", blurred: "blurred" }, ngImport: i0, template: "@if (href()) {\n  <a\n    [href]=\"isDisabled() ? null : href()\"\n    [target]=\"target()\"\n    [attr.rel]=\"computedRel()\"\n    [attr.download]=\"download()\"\n    [attr.role]=\"'link'\"\n    [attr.tabindex]=\"isDisabled() ? -1 : null\"\n    [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n    [attr.aria-busy]=\"loading() ? 'true' : null\"\n    [attr.aria-label]=\"accessibleLabel()\"\n    [attr.title]=\"title() || null\"\n    [class]=\"classes()\"\n    (click)=\"handleClick($event)\"\n    (focus)=\"focused.emit($event)\"\n    (blur)=\"blurred.emit($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"btnInner\" />\n  </a>\n} @else {\n  <button\n    [type]=\"type()\"\n    [disabled]=\"isDisabled()\"\n    [attr.name]=\"name() || null\"\n    [attr.value]=\"value() || null\"\n    [attr.autofocus]=\"autofocus() ? '' : null\"\n    [attr.aria-busy]=\"loading() ? 'true' : null\"\n    [attr.aria-label]=\"accessibleLabel()\"\n    [attr.title]=\"title() || null\"\n    [class]=\"classes()\"\n    (click)=\"handleClick($event)\"\n    (focus)=\"focused.emit($event)\"\n    (blur)=\"blurred.emit($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"btnInner\" />\n  </button>\n}\n\n<ng-template #btnInner>\n\n  @if (loading()) {\n    @if (loadingStyle() === 'spinner') {\n      <svg [class]=\"spinnerSizeClass() + ' animate-spin shrink-0'\" fill=\"none\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n        <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\" />\n      </svg>\n    }\n    @if (loadingStyle() === 'dots') {\n      <span class=\"flex items-center gap-0.5\" aria-hidden=\"true\">\n        @for (dot of [0, 1, 2]; track dot) {\n          <span\n            [class]=\"spinnerSizeClass() + ' rounded-full bg-current animate-bounce'\"\n            [style.animation-delay]=\"(dot * 150) + 'ms'\"\n          ></span>\n        }\n      </span>\n    }\n    @if (loadingStyle() === 'pulse') {\n      <span [class]=\"spinnerSizeClass() + ' shrink-0 rounded-full bg-current/80 animate-pulse'\" aria-hidden=\"true\"></span>\n    }\n    <!-- Announce busy state when there is no visible label beside the indicator -->\n    @if (iconPosition() === 'only' || !displayLabel()) {\n      <span class=\"sr-only\">{{ loadingLabel() || 'Loading' }}</span>\n    }\n  }\n\n  @if (!loading() && (iconPosition() === 'leading' || iconPosition() === 'only')) {\n    @if (iconTemplate(); as tpl) {\n      <span [class]=\"customIconWrapperClass()\" aria-hidden=\"true\">\n        <ng-container [ngTemplateOutlet]=\"tpl\" />\n      </span>\n    } @else if (iconPath()) {\n      <svg [class]=\"iconSizeClass() + ' shrink-0'\" fill=\"none\" [attr.viewBox]=\"iconViewBox()\" stroke-width=\"1.8\" stroke=\"currentColor\" aria-hidden=\"true\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" [attr.d]=\"iconPath()\" />\n      </svg>\n    }\n  }\n\n  @if (iconPosition() !== 'only') {\n    <span>{{ displayLabel() }}</span>\n  }\n\n  @if (!loading() && iconPosition() === 'trailing') {\n    @if (iconTemplate(); as tpl) {\n      <span [class]=\"customIconWrapperClass()\" aria-hidden=\"true\">\n        <ng-container [ngTemplateOutlet]=\"tpl\" />\n      </span>\n    } @else if (iconPath()) {\n      <svg [class]=\"iconSizeClass() + ' shrink-0'\" fill=\"none\" [attr.viewBox]=\"iconViewBox()\" stroke-width=\"1.8\" stroke=\"currentColor\" aria-hidden=\"true\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" [attr.d]=\"iconPath()\" />\n      </svg>\n    }\n  }\n\n  @if (!loading()) {\n    @if (trailingIconTemplate(); as tpl) {\n      <span [class]=\"trailingCustomIconWrapperClass()\" aria-hidden=\"true\">\n        <ng-container [ngTemplateOutlet]=\"tpl\" />\n      </span>\n    } @else if (trailingIconPath()) {\n      <svg [class]=\"iconSizeClass() + ' shrink-0 opacity-70'\" fill=\"none\" [attr.viewBox]=\"iconViewBox()\" stroke-width=\"1.8\" stroke=\"currentColor\" aria-hidden=\"true\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" [attr.d]=\"trailingIconPath()\" />\n      </svg>\n    }\n  }\n\n  @if (hasCounter()) {\n    <span\n      class=\"absolute -top-1.5 -right-1.5 flex h-4 min-w-[1rem] items-center justify-center\n             rounded-full bg-red-500 px-1 text-[9px] font-bold leading-none text-white\n             ring-2 ring-white dark:ring-gray-950\"\n      aria-hidden=\"true\"\n    >{{ counterText() }}</span>\n  }\n\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sv-button', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (href()) {\n  <a\n    [href]=\"isDisabled() ? null : href()\"\n    [target]=\"target()\"\n    [attr.rel]=\"computedRel()\"\n    [attr.download]=\"download()\"\n    [attr.role]=\"'link'\"\n    [attr.tabindex]=\"isDisabled() ? -1 : null\"\n    [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n    [attr.aria-busy]=\"loading() ? 'true' : null\"\n    [attr.aria-label]=\"accessibleLabel()\"\n    [attr.title]=\"title() || null\"\n    [class]=\"classes()\"\n    (click)=\"handleClick($event)\"\n    (focus)=\"focused.emit($event)\"\n    (blur)=\"blurred.emit($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"btnInner\" />\n  </a>\n} @else {\n  <button\n    [type]=\"type()\"\n    [disabled]=\"isDisabled()\"\n    [attr.name]=\"name() || null\"\n    [attr.value]=\"value() || null\"\n    [attr.autofocus]=\"autofocus() ? '' : null\"\n    [attr.aria-busy]=\"loading() ? 'true' : null\"\n    [attr.aria-label]=\"accessibleLabel()\"\n    [attr.title]=\"title() || null\"\n    [class]=\"classes()\"\n    (click)=\"handleClick($event)\"\n    (focus)=\"focused.emit($event)\"\n    (blur)=\"blurred.emit($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"btnInner\" />\n  </button>\n}\n\n<ng-template #btnInner>\n\n  @if (loading()) {\n    @if (loadingStyle() === 'spinner') {\n      <svg [class]=\"spinnerSizeClass() + ' animate-spin shrink-0'\" fill=\"none\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n        <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\" />\n      </svg>\n    }\n    @if (loadingStyle() === 'dots') {\n      <span class=\"flex items-center gap-0.5\" aria-hidden=\"true\">\n        @for (dot of [0, 1, 2]; track dot) {\n          <span\n            [class]=\"spinnerSizeClass() + ' rounded-full bg-current animate-bounce'\"\n            [style.animation-delay]=\"(dot * 150) + 'ms'\"\n          ></span>\n        }\n      </span>\n    }\n    @if (loadingStyle() === 'pulse') {\n      <span [class]=\"spinnerSizeClass() + ' shrink-0 rounded-full bg-current/80 animate-pulse'\" aria-hidden=\"true\"></span>\n    }\n    <!-- Announce busy state when there is no visible label beside the indicator -->\n    @if (iconPosition() === 'only' || !displayLabel()) {\n      <span class=\"sr-only\">{{ loadingLabel() || 'Loading' }}</span>\n    }\n  }\n\n  @if (!loading() && (iconPosition() === 'leading' || iconPosition() === 'only')) {\n    @if (iconTemplate(); as tpl) {\n      <span [class]=\"customIconWrapperClass()\" aria-hidden=\"true\">\n        <ng-container [ngTemplateOutlet]=\"tpl\" />\n      </span>\n    } @else if (iconPath()) {\n      <svg [class]=\"iconSizeClass() + ' shrink-0'\" fill=\"none\" [attr.viewBox]=\"iconViewBox()\" stroke-width=\"1.8\" stroke=\"currentColor\" aria-hidden=\"true\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" [attr.d]=\"iconPath()\" />\n      </svg>\n    }\n  }\n\n  @if (iconPosition() !== 'only') {\n    <span>{{ displayLabel() }}</span>\n  }\n\n  @if (!loading() && iconPosition() === 'trailing') {\n    @if (iconTemplate(); as tpl) {\n      <span [class]=\"customIconWrapperClass()\" aria-hidden=\"true\">\n        <ng-container [ngTemplateOutlet]=\"tpl\" />\n      </span>\n    } @else if (iconPath()) {\n      <svg [class]=\"iconSizeClass() + ' shrink-0'\" fill=\"none\" [attr.viewBox]=\"iconViewBox()\" stroke-width=\"1.8\" stroke=\"currentColor\" aria-hidden=\"true\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" [attr.d]=\"iconPath()\" />\n      </svg>\n    }\n  }\n\n  @if (!loading()) {\n    @if (trailingIconTemplate(); as tpl) {\n      <span [class]=\"trailingCustomIconWrapperClass()\" aria-hidden=\"true\">\n        <ng-container [ngTemplateOutlet]=\"tpl\" />\n      </span>\n    } @else if (trailingIconPath()) {\n      <svg [class]=\"iconSizeClass() + ' shrink-0 opacity-70'\" fill=\"none\" [attr.viewBox]=\"iconViewBox()\" stroke-width=\"1.8\" stroke=\"currentColor\" aria-hidden=\"true\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" [attr.d]=\"trailingIconPath()\" />\n      </svg>\n    }\n  }\n\n  @if (hasCounter()) {\n    <span\n      class=\"absolute -top-1.5 -right-1.5 flex h-4 min-w-[1rem] items-center justify-center\n             rounded-full bg-red-500 px-1 text-[9px] font-bold leading-none text-white\n             ring-2 ring-white dark:ring-gray-950\"\n      aria-hidden=\"true\"\n    >{{ counterText() }}</span>\n  }\n\n</ng-template>\n" }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], btnStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "btnStyle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], iconPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPath", required: false }] }], iconViewBox: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconViewBox", required: false }] }], trailingIconPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIconPath", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], trailingIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIconTemplate", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], counter: [{ type: i0.Input, args: [{ isSignal: true, alias: "counter", required: false }] }], counterMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "counterMax", required: false }] }], counterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "counterLabel", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingStyle", required: false }] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], download: [{ type: i0.Input, args: [{ isSignal: true, alias: "download", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
+
+/**
+ * @styloviz/button — Public API
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SvButtonComponent };
+//# sourceMappingURL=styloviz-button.mjs.map

package/fesm2022/styloviz-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styloviz-button.mjs","sources":["../../../../projects/button/src/lib/button.component.ts","../../../../projects/button/src/lib/button.component.html","../../../../projects/button/src/public-api.ts","../../../../projects/button/src/styloviz-button.ts"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  computed,\n  input,\n  output,\n  TemplateRef,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type ButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'info'\n  | 'neutral'\n  | 'ghost'\n  | 'link';\n\nexport type ButtonStyle =\n  | 'solid'\n  | 'outline'\n  | 'soft'\n  | 'ghost'\n  | 'link'\n  | 'gradient';\n\nexport type ButtonSize    = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type ButtonShape   = 'rounded' | 'pill' | 'square';\nexport type ButtonIconPos = 'leading' | 'trailing' | 'only';\nexport type ButtonLoader  = 'spinner' | 'dots' | 'pulse';\nexport type ButtonType    = 'button' | 'submit' | 'reset';\n\n/** Template type for `iconTemplate` / `trailingIconTemplate` — any TemplateRef, or null when unset. */\nexport type ButtonIconTemplate = TemplateRef<unknown> | null;\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\n/**\n * SvButtonComponent — Premium, accessible button for StyloViz dashboards.\n *\n * Install: npm install @styloviz/button\n * Import:  import { SvButtonComponent } from '@styloviz/button';\n *\n * Features:\n * - 9 variants × 6 styles × 5 sizes × 3 shapes\n * - 3 loading animations: spinner · dots · pulse\n * - Leading, trailing, and icon-only modes\n * - Dual-icon layout via trailingIconPath\n * - Bring-your-own icon via `iconTemplate` / `trailingIconTemplate` — render\n *   any third-party icon component, <img>, icon font, or custom SVG instead\n *   of the built-in path-based icon\n * - Counter badge (top-right)\n * - Renders as <a> when href is provided\n * - Full dark-mode + OnPush\n */\n@Component({\n  selector: 'sv-button',\n  standalone: true,\n  imports: [NgTemplateOutlet],\n  templateUrl: './button.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SvButtonComponent {\n  // ── Appearance ────────────────────────────────────────────────────────────\n\n  /** Semantic color/intent: primary, secondary, success, danger, etc. @default 'primary' */\n  variant      = input<ButtonVariant>('primary');\n  /** Visual treatment: solid, soft, outline, ghost, link or gradient. @default 'solid' */\n  btnStyle     = input<ButtonStyle>('solid');\n  /** Button size from xs to xl. @default 'md' */\n  size         = input<ButtonSize>('md');\n  /** Corner style: rounded, pill or square. @default 'rounded' */\n  shape        = input<ButtonShape>('rounded');\n  /** Stretch to 100% width. @default false */\n  block        = input<boolean>(false);\n  /** Add drop shadow. @default false */\n  elevated     = input<boolean>(false);\n\n  // ── Content ───────────────────────────────────────────────────────────────\n\n  /** Button text. Omit when projecting custom content. */\n  label            = input<string>('');\n  /**\n   * SVG path for the built-in leading/trailing icon (quick built-in icons,\n   * e.g. Heroicons path strings). Ignored when `iconTemplate` is set.\n   */\n  iconPath         = input<string>('');\n  /** viewBox for the provided icon paths. @default '0 0 24 24' */\n  iconViewBox      = input<string>('0 0 24 24');\n  /**\n   * SVG path for the built-in secondary/dual trailing icon. Ignored when\n   * `trailingIconTemplate` is set.\n   */\n  trailingIconPath = input<string>('');\n  /**\n   * Custom template for the primary icon — use this to render a third-party\n   * icon component (e.g. lucide-angular, ngx-heroicons), an `<img>`, an icon\n   * font `<i>`, or arbitrary custom SVG instead of the built-in `iconPath`.\n   * Positioned per `iconPosition()`. Takes precedence over `iconPath` when set.\n   *\n   * @example\n   * ```html\n   * <ng-template #saveIcon>\n   *   <img src=\"/assets/icons/save.svg\" alt=\"\" />\n   * </ng-template>\n   * <sv-button label=\"Save\" [iconTemplate]=\"saveIcon\" />\n   * ```\n   */\n  iconTemplate         = input<ButtonIconTemplate>(null);\n  /**\n   * Custom template for the secondary/dual trailing icon. Takes precedence\n   * over `trailingIconPath` when set. See `iconTemplate` for usage.\n   */\n  trailingIconTemplate = input<ButtonIconTemplate>(null);\n  /** Where the main icon sits relative to the label. @default 'leading' */\n  iconPosition     = input<ButtonIconPos>('leading');\n  /** Numeric counter badge. null = hidden. @default null */\n  counter          = input<number | null>(null);\n  /** Value above which the counter shows \"{max}+\". @default 99 */\n  counterMax       = input<number>(99);\n  /** Noun describing the counter for screen readers, e.g. \"unread\". */\n  counterLabel     = input<string>('');\n\n  // ── State ─────────────────────────────────────────────────────────────────\n\n  /** Native button type when not in link mode. @default 'button' */\n  type         = input<ButtonType>('button');\n  /** Disable interaction and dim the button. @default false */\n  disabled     = input<boolean>(false);\n  /** Show a loading indicator and block activation. @default false */\n  loading      = input<boolean>(false);\n  /** Loading indicator style: spinner or dots. @default 'spinner' */\n  loadingStyle = input<ButtonLoader>('spinner');\n  /** Optional text shown beside the loading indicator. */\n  loadingLabel = input<string>('');\n\n  // ── Link mode ─────────────────────────────────────────────────────────────\n\n  /** When set, renders an <a> anchor instead of a <button>. */\n  href     = input<string>('');\n  /** Anchor target (e.g. _blank) when href is set. @default '_self' */\n  target   = input<string>('_self');\n  /** Anchor rel. `noopener noreferrer` is auto-added for target=\"_blank\". */\n  rel      = input<string>('');\n  /** Anchor download attribute (filename or empty string to use the URL). */\n  download = input<string | null>(null);\n\n  // ── Form integration (button mode) ─────────────────────────────────────────\n\n  /** Native `name` for the button when submitted as part of a form. */\n  name  = input<string>('');\n  /** Native `value` submitted with `name` for multi-button forms. */\n  value = input<string>('');\n\n  // ── Accessibility ───────────────────────────────────────────────────────────\n\n  /** Explicit accessible name. Required for icon-only buttons; overrides label. */\n  ariaLabel = input<string>('');\n  /** Native tooltip / title attribute. */\n  title     = input<string>('');\n  /** Autofocus the control on render. @default false */\n  autofocus = input<boolean>(false);\n\n  // ── Output ────────────────────────────────────────────────────────────────\n\n  /** Emitted on click (suppressed while disabled or loading). */\n  clicked = output<MouseEvent>();\n  /** Emitted when the control receives focus. */\n  focused = output<FocusEvent>();\n  /** Emitted when the control loses focus. */\n  blurred = output<FocusEvent>();\n\n  // ── Computed ──────────────────────────────────────────────────────────────\n\n  readonly isDisabled   = computed(() => this.disabled() || this.loading());\n  readonly displayLabel = computed(() =>\n    this.loading() && this.loadingLabel() ? this.loadingLabel() : this.label()\n  );\n\n  /** True when a counter badge should be shown. */\n  readonly hasCounter = computed(\n    () => this.counter() !== null && this.counter()! >= 0\n  );\n\n  /** Text rendered inside the counter badge (e.g. \"99+\"). */\n  readonly counterText = computed(() => {\n    const n = this.counter();\n    if (n === null) return '';\n    const max = this.counterMax();\n    return n > max ? `${max}+` : `${n}`;\n  });\n\n  /**\n   * Accessible name. Uses ariaLabel, then label. Appends the counter\n   * (e.g. \"Inbox, 5 unread\") so screen readers announce the badge.\n   */\n  readonly accessibleLabel = computed(() => {\n    const base = this.ariaLabel() || this.label();\n    if (!this.hasCounter()) return base || null;\n    const noun = this.counterLabel() ? ` ${this.counterLabel()}` : '';\n    const count = `${this.counter()}${noun}`;\n    return base ? `${base}, ${count}` : count;\n  });\n\n  /** Resolved rel for anchors; ensures safe defaults for new tabs. */\n  readonly computedRel = computed(() => {\n    const tokens = new Set(this.rel().split(/\\s+/).filter(Boolean));\n    if (this.target() === '_blank') {\n      tokens.add('noopener');\n      tokens.add('noreferrer');\n    }\n    return tokens.size ? [...tokens].join(' ') : null;\n  });\n\n  readonly classes = computed(() => {\n    const displayClass = this.block() ? 'flex w-full' : 'inline-flex';\n    const baseClasses = this._base.replace('inline-flex', displayClass);\n    return [\n      baseClasses,\n      this._sizeClasses(this.size()),\n      this._shapeClasses(this.shape()),\n      this._variantStyleClasses(this.variant(), this.btnStyle()),\n      this._stateClasses(),\n      this.elevated() && !['link', 'ghost'].includes(this.btnStyle())\n        ? 'shadow-md hover:shadow-lg active:shadow-sm'\n        : '',\n    ].filter(Boolean).join(' ');\n  });\n\n  readonly iconSizeClass = computed(() => {\n    const map: Record<ButtonSize, string> = {\n      xs: 'h-3.5 w-3.5', sm: 'h-4 w-4', md: 'h-[18px] w-[18px]',\n      lg: 'h-5 w-5',     xl: 'h-6 w-6',\n    };\n    return map[this.size()];\n  });\n\n  readonly spinnerSizeClass = computed(() => {\n    const map: Record<ButtonSize, string> = {\n      xs: 'h-3 w-3', sm: 'h-3.5 w-3.5', md: 'h-4 w-4',\n      lg: 'h-[18px] w-[18px]', xl: 'h-5 w-5',\n    };\n    return map[this.size()];\n  });\n\n  /**\n   * Sizing wrapper for a projected `iconTemplate`. Constrains third-party\n   * icon components, `<img>`, and custom SVG to the same box the built-in\n   * icon would occupy, so custom icons line up regardless of their own\n   * intrinsic markup or default size.\n   */\n  readonly customIconWrapperClass = computed(\n    () =>\n      `${this.iconSizeClass()} inline-flex shrink-0 items-center justify-center ` +\n      '[&>svg]:h-full [&>svg]:w-full [&>img]:h-full [&>img]:w-full [&>img]:object-contain'\n  );\n\n  /** Same as `customIconWrapperClass`, dimmed to match `trailingIconPath`'s dual-icon treatment. */\n  readonly trailingCustomIconWrapperClass = computed(\n    () => `${this.customIconWrapperClass()} opacity-70`\n  );\n\n  // ── Event ─────────────────────────────────────────────────────────────────\n\n  handleClick(event: MouseEvent): void {\n    if (this.isDisabled()) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.clicked.emit(event);\n  }\n\n  // ── Private helpers ───────────────────────────────────────────────────────\n\n  private readonly _base =\n    'relative inline-flex items-center justify-center font-medium ' +\n    'transition-all duration-150 focus-visible:outline-none ' +\n    'focus-visible:ring-2 focus-visible:ring-offset-2 ' +\n    'focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-950 ' +\n    'select-none whitespace-nowrap leading-none';\n\n  private _sizeClasses(sz: ButtonSize): string {\n    const iconOnly = this.iconPosition() === 'only';\n    const map: Record<ButtonSize, { text: string; icon: string }> = {\n      xs: { text: 'h-7 px-2.5 text-xs gap-1.5',     icon: 'h-7 w-7 text-xs' },\n      sm: { text: 'h-8 px-3 text-sm gap-1.5',        icon: 'h-8 w-8 text-sm' },\n      md: { text: 'h-9 px-4 text-sm gap-2',          icon: 'h-9 w-9 text-sm' },\n      lg: { text: 'h-10 px-5 text-[15px] gap-2',     icon: 'h-10 w-10 text-[15px]' },\n      xl: { text: 'h-12 px-6 text-base gap-2.5',     icon: 'h-12 w-12 text-base' },\n    };\n    return iconOnly ? map[sz].icon : map[sz].text;\n  }\n\n  private _shapeClasses(sh: ButtonShape): string {\n    const map: Record<ButtonShape, string> = {\n      rounded: 'rounded-md', pill: 'rounded-full', square: 'rounded-none',\n    };\n    return map[sh];\n  }\n\n  private _variantStyleClasses(v: ButtonVariant, s: ButtonStyle): string {\n    switch (s) {\n      case 'solid':    return this._solid(v);\n      case 'outline':  return this._outline(v);\n      case 'soft':     return this._soft(v);\n      case 'ghost':    return this._ghost(v);\n      case 'link':     return this._link(v);\n      case 'gradient': return this._gradient(v);\n    }\n  }\n\n  private _solid(v: ButtonVariant): string {\n    const map: Record<ButtonVariant, string> = {\n      primary:   'bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 focus-visible:ring-blue-500',\n      secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring-gray-400 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600',\n      success:   'bg-emerald-600 text-white hover:bg-emerald-700 active:bg-emerald-800 focus-visible:ring-emerald-500',\n      warning:   'bg-amber-500 text-white hover:bg-amber-600 active:bg-amber-700 focus-visible:ring-amber-400',\n      danger:    'bg-red-600 text-white hover:bg-red-700 active:bg-red-800 focus-visible:ring-red-500',\n      info:      'bg-sky-500 text-white hover:bg-sky-600 active:bg-sky-700 focus-visible:ring-sky-400',\n      neutral:   'bg-gray-800 text-white hover:bg-gray-900 focus-visible:ring-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500',\n      ghost:     'bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-400 dark:text-gray-300 dark:hover:bg-gray-800',\n      link:      'bg-transparent text-blue-600 hover:text-blue-700 hover:underline focus-visible:ring-blue-500 dark:text-blue-400',\n    };\n    return map[v];\n  }\n\n  private _outline(v: ButtonVariant): string {\n    const map: Record<ButtonVariant, string> = {\n      primary:   'border border-blue-600 text-blue-600 bg-transparent hover:bg-blue-50 focus-visible:ring-blue-500 dark:border-blue-500 dark:text-blue-400 dark:hover:bg-blue-900/20',\n      secondary: 'border border-gray-300 text-gray-700 bg-transparent hover:bg-gray-50 focus-visible:ring-gray-400 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800',\n      success:   'border border-emerald-600 text-emerald-600 bg-transparent hover:bg-emerald-50 focus-visible:ring-emerald-500 dark:border-emerald-500 dark:text-emerald-400 dark:hover:bg-emerald-900/20',\n      warning:   'border border-amber-500 text-amber-600 bg-transparent hover:bg-amber-50 focus-visible:ring-amber-400 dark:border-amber-400 dark:text-amber-400 dark:hover:bg-amber-900/20',\n      danger:    'border border-red-600 text-red-600 bg-transparent hover:bg-red-50 focus-visible:ring-red-500 dark:border-red-500 dark:text-red-400 dark:hover:bg-red-900/20',\n      info:      'border border-sky-500 text-sky-600 bg-transparent hover:bg-sky-50 focus-visible:ring-sky-400 dark:border-sky-400 dark:text-sky-400 dark:hover:bg-sky-900/20',\n      neutral:   'border border-gray-700 text-gray-800 bg-transparent hover:bg-gray-50 focus-visible:ring-gray-600 dark:border-gray-500 dark:text-gray-300 dark:hover:bg-gray-800',\n      ghost:     'border border-transparent text-gray-600 bg-transparent hover:border-gray-300 hover:bg-gray-50 focus-visible:ring-gray-400 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:bg-gray-800',\n      link:      'border border-transparent text-blue-600 bg-transparent hover:border-blue-300 hover:bg-blue-50 focus-visible:ring-blue-500 dark:text-blue-400 dark:hover:bg-blue-900/20',\n    };\n    return map[v];\n  }\n\n  private _soft(v: ButtonVariant): string {\n    const map: Record<ButtonVariant, string> = {\n      primary:   'bg-blue-50 text-blue-700 hover:bg-blue-100 focus-visible:ring-blue-400 dark:bg-blue-900/30 dark:text-blue-300 dark:hover:bg-blue-900/50',\n      secondary: 'bg-gray-100 text-gray-700 hover:bg-gray-200 focus-visible:ring-gray-400 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700',\n      success:   'bg-emerald-50 text-emerald-700 hover:bg-emerald-100 focus-visible:ring-emerald-400 dark:bg-emerald-900/30 dark:text-emerald-300 dark:hover:bg-emerald-900/50',\n      warning:   'bg-amber-50 text-amber-700 hover:bg-amber-100 focus-visible:ring-amber-400 dark:bg-amber-900/30 dark:text-amber-300 dark:hover:bg-amber-900/50',\n      danger:    'bg-red-50 text-red-700 hover:bg-red-100 focus-visible:ring-red-400 dark:bg-red-900/30 dark:text-red-300 dark:hover:bg-red-900/50',\n      info:      'bg-sky-50 text-sky-700 hover:bg-sky-100 focus-visible:ring-sky-400 dark:bg-sky-900/30 dark:text-sky-300 dark:hover:bg-sky-900/50',\n      neutral:   'bg-gray-200 text-gray-700 hover:bg-gray-300 focus-visible:ring-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600',\n      ghost:     'bg-transparent text-gray-600 hover:bg-gray-100 focus-visible:ring-gray-400 dark:text-gray-400 dark:hover:bg-gray-800',\n      link:      'bg-transparent text-blue-600 hover:bg-blue-50 hover:underline focus-visible:ring-blue-400 dark:text-blue-400 dark:hover:bg-blue-900/20',\n    };\n    return map[v];\n  }\n\n  private _ghost(v: ButtonVariant): string {\n    const map: Record<ButtonVariant, string> = {\n      primary:   'bg-transparent text-blue-600 hover:bg-blue-50 focus-visible:ring-blue-400 dark:text-blue-400 dark:hover:bg-blue-900/20',\n      secondary: 'bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-400 dark:text-gray-300 dark:hover:bg-gray-800',\n      success:   'bg-transparent text-emerald-600 hover:bg-emerald-50 focus-visible:ring-emerald-400 dark:text-emerald-400 dark:hover:bg-emerald-900/20',\n      warning:   'bg-transparent text-amber-600 hover:bg-amber-50 focus-visible:ring-amber-400 dark:text-amber-400 dark:hover:bg-amber-900/20',\n      danger:    'bg-transparent text-red-600 hover:bg-red-50 focus-visible:ring-red-400 dark:text-red-400 dark:hover:bg-red-900/20',\n      info:      'bg-transparent text-sky-600 hover:bg-sky-50 focus-visible:ring-sky-400 dark:text-sky-400 dark:hover:bg-sky-900/20',\n      neutral:   'bg-transparent text-gray-600 hover:bg-gray-100 focus-visible:ring-gray-400 dark:text-gray-400 dark:hover:bg-gray-800',\n      ghost:     'bg-transparent text-gray-500 hover:bg-gray-100 focus-visible:ring-gray-300 dark:text-gray-500 dark:hover:bg-gray-800',\n      link:      'bg-transparent text-blue-600 hover:text-blue-700 focus-visible:ring-blue-400 dark:text-blue-400 dark:hover:text-blue-300',\n    };\n    return map[v];\n  }\n\n  private _link(v: ButtonVariant): string {\n    const map: Record<ButtonVariant, string> = {\n      primary:   'bg-transparent text-blue-600 underline-offset-4 hover:underline hover:text-blue-700 focus-visible:ring-blue-400 dark:text-blue-400',\n      secondary: 'bg-transparent text-gray-600 underline-offset-4 hover:underline hover:text-gray-900 focus-visible:ring-gray-400 dark:text-gray-400',\n      success:   'bg-transparent text-emerald-600 underline-offset-4 hover:underline hover:text-emerald-700 focus-visible:ring-emerald-400 dark:text-emerald-400',\n      warning:   'bg-transparent text-amber-600 underline-offset-4 hover:underline focus-visible:ring-amber-400 dark:text-amber-400',\n      danger:    'bg-transparent text-red-600 underline-offset-4 hover:underline hover:text-red-700 focus-visible:ring-red-400 dark:text-red-400',\n      info:      'bg-transparent text-sky-600 underline-offset-4 hover:underline hover:text-sky-700 focus-visible:ring-sky-400 dark:text-sky-400',\n      neutral:   'bg-transparent text-gray-600 underline-offset-4 hover:underline hover:text-gray-900 focus-visible:ring-gray-400 dark:text-gray-300',\n      ghost:     'bg-transparent text-gray-500 underline-offset-4 hover:underline hover:text-gray-700 focus-visible:ring-gray-300 dark:text-gray-400',\n      link:      'bg-transparent text-blue-600 underline underline-offset-4 hover:text-blue-800 focus-visible:ring-blue-400 dark:text-blue-400',\n    };\n    return map[v];\n  }\n\n  private _gradient(v: ButtonVariant): string {\n    const map: Record<ButtonVariant, string> = {\n      primary:   'bg-gradient-to-r from-blue-500 to-indigo-600 text-white hover:from-blue-600 hover:to-indigo-700 focus-visible:ring-indigo-500',\n      secondary: 'bg-gradient-to-r from-gray-100 to-gray-200 text-gray-900 hover:from-gray-200 hover:to-gray-300 focus-visible:ring-gray-400 dark:from-gray-700 dark:to-gray-800 dark:text-gray-100',\n      success:   'bg-gradient-to-r from-emerald-400 to-teal-600 text-white hover:from-emerald-500 hover:to-teal-700 focus-visible:ring-teal-500',\n      warning:   'bg-gradient-to-r from-amber-400 to-orange-500 text-white hover:from-amber-500 hover:to-orange-600 focus-visible:ring-orange-400',\n      danger:    'bg-gradient-to-r from-rose-500 to-red-600 text-white hover:from-rose-600 hover:to-red-700 focus-visible:ring-red-500',\n      info:      'bg-gradient-to-r from-sky-400 to-cyan-500 text-white hover:from-sky-500 hover:to-cyan-600 focus-visible:ring-cyan-400',\n      neutral:   'bg-gradient-to-r from-gray-700 to-gray-900 text-white hover:from-gray-800 hover:to-black focus-visible:ring-gray-600',\n      ghost:     'bg-gradient-to-r from-gray-50 to-gray-100 text-gray-700 hover:from-gray-100 hover:to-gray-200 focus-visible:ring-gray-400 dark:from-gray-800 dark:to-gray-900 dark:text-gray-200',\n      link:      'bg-gradient-to-r from-blue-500 to-violet-600 text-white hover:from-blue-600 hover:to-violet-700 focus-visible:ring-violet-500',\n    };\n    return map[v];\n  }\n\n  private _stateClasses(): string {\n    if (this.loading()) return 'opacity-75 cursor-wait pointer-events-none';\n    if (this.disabled()) return 'opacity-50 cursor-not-allowed pointer-events-none';\n    return 'cursor-pointer';\n  }\n}\n","@if (href()) {\n  <a\n    [href]=\"isDisabled() ? null : href()\"\n    [target]=\"target()\"\n    [attr.rel]=\"computedRel()\"\n    [attr.download]=\"download()\"\n    [attr.role]=\"'link'\"\n    [attr.tabindex]=\"isDisabled() ? -1 : null\"\n    [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n    [attr.aria-busy]=\"loading() ? 'true' : null\"\n    [attr.aria-label]=\"accessibleLabel()\"\n    [attr.title]=\"title() || null\"\n    [class]=\"classes()\"\n    (click)=\"handleClick($event)\"\n    (focus)=\"focused.emit($event)\"\n    (blur)=\"blurred.emit($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"btnInner\" />\n  </a>\n} @else {\n  <button\n    [type]=\"type()\"\n    [disabled]=\"isDisabled()\"\n    [attr.name]=\"name() || null\"\n    [attr.value]=\"value() || null\"\n    [attr.autofocus]=\"autofocus() ? '' : null\"\n    [attr.aria-busy]=\"loading() ? 'true' : null\"\n    [attr.aria-label]=\"accessibleLabel()\"\n    [attr.title]=\"title() || null\"\n    [class]=\"classes()\"\n    (click)=\"handleClick($event)\"\n    (focus)=\"focused.emit($event)\"\n    (blur)=\"blurred.emit($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"btnInner\" />\n  </button>\n}\n\n<ng-template #btnInner>\n\n  @if (loading()) {\n    @if (loadingStyle() === 'spinner') {\n      <svg [class]=\"spinnerSizeClass() + ' animate-spin shrink-0'\" fill=\"none\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n        <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\" />\n      </svg>\n    }\n    @if (loadingStyle() === 'dots') {\n      <span class=\"flex items-center gap-0.5\" aria-hidden=\"true\">\n        @for (dot of [0, 1, 2]; track dot) {\n          <span\n            [class]=\"spinnerSizeClass() + ' rounded-full bg-current animate-bounce'\"\n            [style.animation-delay]=\"(dot * 150) + 'ms'\"\n          ></span>\n        }\n      </span>\n    }\n    @if (loadingStyle() === 'pulse') {\n      <span [class]=\"spinnerSizeClass() + ' shrink-0 rounded-full bg-current/80 animate-pulse'\" aria-hidden=\"true\"></span>\n    }\n    <!-- Announce busy state when there is no visible label beside the indicator -->\n    @if (iconPosition() === 'only' || !displayLabel()) {\n      <span class=\"sr-only\">{{ loadingLabel() || 'Loading' }}</span>\n    }\n  }\n\n  @if (!loading() && (iconPosition() === 'leading' || iconPosition() === 'only')) {\n    @if (iconTemplate(); as tpl) {\n      <span [class]=\"customIconWrapperClass()\" aria-hidden=\"true\">\n        <ng-container [ngTemplateOutlet]=\"tpl\" />\n      </span>\n    } @else if (iconPath()) {\n      <svg [class]=\"iconSizeClass() + ' shrink-0'\" fill=\"none\" [attr.viewBox]=\"iconViewBox()\" stroke-width=\"1.8\" stroke=\"currentColor\" aria-hidden=\"true\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" [attr.d]=\"iconPath()\" />\n      </svg>\n    }\n  }\n\n  @if (iconPosition() !== 'only') {\n    <span>{{ displayLabel() }}</span>\n  }\n\n  @if (!loading() && iconPosition() === 'trailing') {\n    @if (iconTemplate(); as tpl) {\n      <span [class]=\"customIconWrapperClass()\" aria-hidden=\"true\">\n        <ng-container [ngTemplateOutlet]=\"tpl\" />\n      </span>\n    } @else if (iconPath()) {\n      <svg [class]=\"iconSizeClass() + ' shrink-0'\" fill=\"none\" [attr.viewBox]=\"iconViewBox()\" stroke-width=\"1.8\" stroke=\"currentColor\" aria-hidden=\"true\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" [attr.d]=\"iconPath()\" />\n      </svg>\n    }\n  }\n\n  @if (!loading()) {\n    @if (trailingIconTemplate(); as tpl) {\n      <span [class]=\"trailingCustomIconWrapperClass()\" aria-hidden=\"true\">\n        <ng-container [ngTemplateOutlet]=\"tpl\" />\n      </span>\n    } @else if (trailingIconPath()) {\n      <svg [class]=\"iconSizeClass() + ' shrink-0 opacity-70'\" fill=\"none\" [attr.viewBox]=\"iconViewBox()\" stroke-width=\"1.8\" stroke=\"currentColor\" aria-hidden=\"true\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" [attr.d]=\"trailingIconPath()\" />\n      </svg>\n    }\n  }\n\n  @if (hasCounter()) {\n    <span\n      class=\"absolute -top-1.5 -right-1.5 flex h-4 min-w-[1rem] items-center justify-center\n             rounded-full bg-red-500 px-1 text-[9px] font-bold leading-none text-white\n             ring-2 ring-white dark:ring-gray-950\"\n      aria-hidden=\"true\"\n    >{{ counterText() }}</span>\n  }\n\n</ng-template>\n","/**\n * @styloviz/button — Public API\n */\nexport { SvButtonComponent } from './lib/button.component';\nexport type {\n  ButtonVariant,\n  ButtonStyle,\n  ButtonSize,\n  ButtonShape,\n  ButtonIconPos,\n  ButtonLoader,\n  ButtonType,\n  ButtonIconTemplate,\n} from './lib/button.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@styloviz/button",
+  "version": "0.1.1",
+  "description": "Versatile button with semantic variants, sizes, icon slots, loading and block states.",
+  "keywords": [
+    "angular",
+    "tailwind",
+    "ui-kit",
+    "button",
+    "styloviz"
+  ],
+  "license": "MIT",
+  "author": "sazzad-bs23",
+  "homepage": "https://styloviz.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rhossain/angular-tailwind-dashboard-components.git",
+    "directory": "projects/button"
+  },
+  "bugs": {
+    "url": "https://github.com/rhossain/angular-tailwind-dashboard-components/issues"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0",
+    "@styloviz/core": ">=0.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/styloviz-button.mjs",
+  "typings": "types/styloviz-button.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/styloviz-button.d.ts",
+      "default": "./fesm2022/styloviz-button.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/types/styloviz-button.d.ts

@@ -0,0 +1,162 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+
+type ButtonVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'ghost' | 'link';
+type ButtonStyle = 'solid' | 'outline' | 'soft' | 'ghost' | 'link' | 'gradient';
+type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type ButtonShape = 'rounded' | 'pill' | 'square';
+type ButtonIconPos = 'leading' | 'trailing' | 'only';
+type ButtonLoader = 'spinner' | 'dots' | 'pulse';
+type ButtonType = 'button' | 'submit' | 'reset';
+/** Template type for `iconTemplate` / `trailingIconTemplate` — any TemplateRef, or null when unset. */
+type ButtonIconTemplate = TemplateRef<unknown> | null;
+/**
+ * SvButtonComponent — Premium, accessible button for StyloViz dashboards.
+ *
+ * Install: npm install @styloviz/button
+ * Import:  import { SvButtonComponent } from '@styloviz/button';
+ *
+ * Features:
+ * - 9 variants × 6 styles × 5 sizes × 3 shapes
+ * - 3 loading animations: spinner · dots · pulse
+ * - Leading, trailing, and icon-only modes
+ * - Dual-icon layout via trailingIconPath
+ * - Bring-your-own icon via `iconTemplate` / `trailingIconTemplate` — render
+ *   any third-party icon component, <img>, icon font, or custom SVG instead
+ *   of the built-in path-based icon
+ * - Counter badge (top-right)
+ * - Renders as <a> when href is provided
+ * - Full dark-mode + OnPush
+ */
+declare class SvButtonComponent {
+    /** Semantic color/intent: primary, secondary, success, danger, etc. @default 'primary' */
+    variant: _angular_core.InputSignal<ButtonVariant>;
+    /** Visual treatment: solid, soft, outline, ghost, link or gradient. @default 'solid' */
+    btnStyle: _angular_core.InputSignal<ButtonStyle>;
+    /** Button size from xs to xl. @default 'md' */
+    size: _angular_core.InputSignal<ButtonSize>;
+    /** Corner style: rounded, pill or square. @default 'rounded' */
+    shape: _angular_core.InputSignal<ButtonShape>;
+    /** Stretch to 100% width. @default false */
+    block: _angular_core.InputSignal<boolean>;
+    /** Add drop shadow. @default false */
+    elevated: _angular_core.InputSignal<boolean>;
+    /** Button text. Omit when projecting custom content. */
+    label: _angular_core.InputSignal<string>;
+    /**
+     * SVG path for the built-in leading/trailing icon (quick built-in icons,
+     * e.g. Heroicons path strings). Ignored when `iconTemplate` is set.
+     */
+    iconPath: _angular_core.InputSignal<string>;
+    /** viewBox for the provided icon paths. @default '0 0 24 24' */
+    iconViewBox: _angular_core.InputSignal<string>;
+    /**
+     * SVG path for the built-in secondary/dual trailing icon. Ignored when
+     * `trailingIconTemplate` is set.
+     */
+    trailingIconPath: _angular_core.InputSignal<string>;
+    /**
+     * Custom template for the primary icon — use this to render a third-party
+     * icon component (e.g. lucide-angular, ngx-heroicons), an `<img>`, an icon
+     * font `<i>`, or arbitrary custom SVG instead of the built-in `iconPath`.
+     * Positioned per `iconPosition()`. Takes precedence over `iconPath` when set.
+     *
+     * @example
+     * ```html
+     * <ng-template #saveIcon>
+     *   <img src="/assets/icons/save.svg" alt="" />
+     * </ng-template>
+     * <sv-button label="Save" [iconTemplate]="saveIcon" />
+     * ```
+     */
+    iconTemplate: _angular_core.InputSignal<ButtonIconTemplate>;
+    /**
+     * Custom template for the secondary/dual trailing icon. Takes precedence
+     * over `trailingIconPath` when set. See `iconTemplate` for usage.
+     */
+    trailingIconTemplate: _angular_core.InputSignal<ButtonIconTemplate>;
+    /** Where the main icon sits relative to the label. @default 'leading' */
+    iconPosition: _angular_core.InputSignal<ButtonIconPos>;
+    /** Numeric counter badge. null = hidden. @default null */
+    counter: _angular_core.InputSignal<number | null>;
+    /** Value above which the counter shows "{max}+". @default 99 */
+    counterMax: _angular_core.InputSignal<number>;
+    /** Noun describing the counter for screen readers, e.g. "unread". */
+    counterLabel: _angular_core.InputSignal<string>;
+    /** Native button type when not in link mode. @default 'button' */
+    type: _angular_core.InputSignal<ButtonType>;
+    /** Disable interaction and dim the button. @default false */
+    disabled: _angular_core.InputSignal<boolean>;
+    /** Show a loading indicator and block activation. @default false */
+    loading: _angular_core.InputSignal<boolean>;
+    /** Loading indicator style: spinner or dots. @default 'spinner' */
+    loadingStyle: _angular_core.InputSignal<ButtonLoader>;
+    /** Optional text shown beside the loading indicator. */
+    loadingLabel: _angular_core.InputSignal<string>;
+    /** When set, renders an <a> anchor instead of a <button>. */
+    href: _angular_core.InputSignal<string>;
+    /** Anchor target (e.g. _blank) when href is set. @default '_self' */
+    target: _angular_core.InputSignal<string>;
+    /** Anchor rel. `noopener noreferrer` is auto-added for target="_blank". */
+    rel: _angular_core.InputSignal<string>;
+    /** Anchor download attribute (filename or empty string to use the URL). */
+    download: _angular_core.InputSignal<string | null>;
+    /** Native `name` for the button when submitted as part of a form. */
+    name: _angular_core.InputSignal<string>;
+    /** Native `value` submitted with `name` for multi-button forms. */
+    value: _angular_core.InputSignal<string>;
+    /** Explicit accessible name. Required for icon-only buttons; overrides label. */
+    ariaLabel: _angular_core.InputSignal<string>;
+    /** Native tooltip / title attribute. */
+    title: _angular_core.InputSignal<string>;
+    /** Autofocus the control on render. @default false */
+    autofocus: _angular_core.InputSignal<boolean>;
+    /** Emitted on click (suppressed while disabled or loading). */
+    clicked: _angular_core.OutputEmitterRef<MouseEvent>;
+    /** Emitted when the control receives focus. */
+    focused: _angular_core.OutputEmitterRef<FocusEvent>;
+    /** Emitted when the control loses focus. */
+    blurred: _angular_core.OutputEmitterRef<FocusEvent>;
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    readonly displayLabel: _angular_core.Signal<string>;
+    /** True when a counter badge should be shown. */
+    readonly hasCounter: _angular_core.Signal<boolean>;
+    /** Text rendered inside the counter badge (e.g. "99+"). */
+    readonly counterText: _angular_core.Signal<string>;
+    /**
+     * Accessible name. Uses ariaLabel, then label. Appends the counter
+     * (e.g. "Inbox, 5 unread") so screen readers announce the badge.
+     */
+    readonly accessibleLabel: _angular_core.Signal<string | null>;
+    /** Resolved rel for anchors; ensures safe defaults for new tabs. */
+    readonly computedRel: _angular_core.Signal<string | null>;
+    readonly classes: _angular_core.Signal<string>;
+    readonly iconSizeClass: _angular_core.Signal<string>;
+    readonly spinnerSizeClass: _angular_core.Signal<string>;
+    /**
+     * Sizing wrapper for a projected `iconTemplate`. Constrains third-party
+     * icon components, `<img>`, and custom SVG to the same box the built-in
+     * icon would occupy, so custom icons line up regardless of their own
+     * intrinsic markup or default size.
+     */
+    readonly customIconWrapperClass: _angular_core.Signal<string>;
+    /** Same as `customIconWrapperClass`, dimmed to match `trailingIconPath`'s dual-icon treatment. */
+    readonly trailingCustomIconWrapperClass: _angular_core.Signal<string>;
+    handleClick(event: MouseEvent): void;
+    private readonly _base;
+    private _sizeClasses;
+    private _shapeClasses;
+    private _variantStyleClasses;
+    private _solid;
+    private _outline;
+    private _soft;
+    private _ghost;
+    private _link;
+    private _gradient;
+    private _stateClasses;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SvButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SvButtonComponent, "sv-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "btnStyle": { "alias": "btnStyle"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "iconPath": { "alias": "iconPath"; "required": false; "isSignal": true; }; "iconViewBox": { "alias": "iconViewBox"; "required": false; "isSignal": true; }; "trailingIconPath": { "alias": "trailingIconPath"; "required": false; "isSignal": true; }; "iconTemplate": { "alias": "iconTemplate"; "required": false; "isSignal": true; }; "trailingIconTemplate": { "alias": "trailingIconTemplate"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "counter": { "alias": "counter"; "required": false; "isSignal": true; }; "counterMax": { "alias": "counterMax"; "required": false; "isSignal": true; }; "counterLabel": { "alias": "counterLabel"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingStyle": { "alias": "loadingStyle"; "required": false; "isSignal": true; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "rel": { "alias": "rel"; "required": false; "isSignal": true; }; "download": { "alias": "download"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; "focused": "focused"; "blurred": "blurred"; }, never, never, true, never>;
+}
+
+export { SvButtonComponent };
+export type { ButtonIconPos, ButtonIconTemplate, ButtonLoader, ButtonShape, ButtonSize, ButtonStyle, ButtonType, ButtonVariant };