ng-hub-ui-buttons 22.1.0

package/fesm2022/ng-hub-ui-buttons.mjs

@@ -0,0 +1,483 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, input, HostBinding, ChangeDetectionStrategy, Component, output, signal, inject, DestroyRef, ViewEncapsulation, model, Directive, ElementRef, ViewContainerRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { fromEvent } from 'rxjs';
+import { debounceTime, filter, take } from 'rxjs/operators';
+import { OverlayService } from 'ng-hub-ui-utils';
+
+/** Injection token for DropdownContext. */
+const DROPDOWN_CONTEXT = new InjectionToken('HubDropdownContext');
+
+/**
+ * Styled button component. Applies hub-btn CSS classes computed from signal inputs.
+ * Use <hub-btn> when the element type can be this component, or [hubBtn] directive
+ * when a native element (button, a, etc.) must keep its tag.
+ */
+class HubBtnComponent {
+    /** Visual style of the button. */
+    variant = input('solid', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Semantic color token. */
+    color = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Size token. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** When true, enforces equal width/height (icon-only layout). */
+    iconOnly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
+    /** When true, shows a spinner and blocks pointer events. */
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** Mirrors the native disabled attribute on the host element. */
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Computed CSS classes applied to the host element via HostBinding. */
+    get _hostClass() {
+        return [
+            `hub-btn-${this.variant()}`,
+            `hub-btn-${this.color()}`,
+            `hub-btn-${this.size()}`,
+            this.iconOnly() ? 'hub-btn-icon' : '',
+            this.loading() ? 'hub-btn-loading' : '',
+            this.disabled() ? 'hub-btn-disabled' : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    /** Reflects the disabled state as a native HTML attribute. */
+    get _disabledAttr() {
+        return this.disabled() ? true : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubBtnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubBtnComponent, isStandalone: true, selector: "hub-btn", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this._hostClass", "attr.disabled": "this._disabledAttr" }, classAttribute: "hub-btn" }, ngImport: i0, template: "@if (loading()) {\n\t<span class=\"hub-btn__spinner\" aria-hidden=\"true\"></span>\n}\n<ng-content></ng-content>\n", styles: [":where(:host){--hub-btn-padding-x: .875rem;--hub-btn-padding-y: .4375rem;--hub-btn-border-radius: var(--hub-sys-radius-md, .375rem);--hub-btn-border-width: 1.5px;--hub-btn-font-size: var(--hub-ref-font-size-base, 1rem);--hub-btn-font-weight: 500;--hub-btn-gap: .375rem;--hub-btn-transition: all .15s ease;--hub-btn-spinner-size: .875em;--hub-btn-disabled-opacity: .55}:host{display:inline-flex;align-items:center;justify-content:center;gap:var(--hub-btn-gap);padding:var(--hub-btn-padding-y) var(--hub-btn-padding-x);border-radius:var(--hub-btn-border-radius);border:var(--hub-btn-border-width) solid transparent;font-size:var(--hub-btn-font-size);font-weight:var(--hub-btn-font-weight);cursor:pointer;text-decoration:none;transition:var(--hub-btn-transition);-webkit-user-select:none;user-select:none;white-space:nowrap}:host(.hub-btn-disabled),:host([disabled]){opacity:var(--hub-btn-disabled-opacity);pointer-events:none}:host(.hub-btn-loading){pointer-events:none}:host(.hub-btn-sm){--hub-btn-padding-x: .625rem;--hub-btn-padding-y: .25rem;--hub-btn-font-size: .8125rem;--hub-btn-border-radius: var(--hub-sys-radius-sm, .25rem)}:host(.hub-btn-lg){--hub-btn-padding-x: 1.25rem;--hub-btn-padding-y: .625rem;--hub-btn-font-size: 1rem}:host(.hub-btn-xl){--hub-btn-padding-x: 1.75rem;--hub-btn-padding-y: .8125rem;--hub-btn-font-size: 1.125rem}:host(.hub-btn-icon){--hub-btn-padding-x: var(--hub-btn-padding-y);aspect-ratio:1}.hub-btn__spinner{display:inline-block;width:var(--hub-btn-spinner-size);height:var(--hub-btn-spinner-size);border:2px solid color-mix(in srgb,currentColor 30%,transparent);border-top-color:currentColor;border-radius:50%;animation:hub-btn-spin .7s linear infinite}@keyframes hub-btn-spin{to{transform:rotate(360deg)}}:host(.hub-btn-solid.hub-btn-primary){background:var(--hub-sys-color-primary-default, var(--hub-sys-color-primary));color:var(--hub-sys-color-primary-on-default, #fff);border-color:var(--hub-sys-color-primary-default, var(--hub-sys-color-primary))}:host(.hub-btn-solid.hub-btn-primary):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-primary-emphasis);border-color:var(--hub-sys-color-primary-emphasis)}:host(.hub-btn-outline.hub-btn-primary){background:transparent;color:var(--hub-sys-color-primary-emphasis);border-color:var(--hub-sys-color-primary-default, var(--hub-sys-color-primary))}:host(.hub-btn-outline.hub-btn-primary):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-primary-subtle)}:host(.hub-btn-soft.hub-btn-primary){background:var(--hub-sys-color-primary-subtle);color:var(--hub-sys-color-primary-emphasis);border-color:transparent}:host(.hub-btn-soft.hub-btn-primary):hover:not([disabled]):not(.hub-btn-disabled){background:color-mix(in srgb,var(--hub-sys-color-primary-subtle) 80%,var(--hub-sys-color-primary-default))}:host(.hub-btn-ghost.hub-btn-primary){background:transparent;color:var(--hub-sys-color-primary-emphasis);border-color:transparent}:host(.hub-btn-ghost.hub-btn-primary):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-primary-subtle)}:host(.hub-btn-link.hub-btn-primary){background:transparent;color:var(--hub-sys-color-primary-emphasis);border-color:transparent;text-decoration:underline;padding-inline:.125rem}:host(.hub-btn-link.hub-btn-primary):hover:not([disabled]):not(.hub-btn-disabled){color:var(--hub-sys-color-primary-default)}:host(.hub-btn-solid.hub-btn-secondary){background:var(--hub-sys-color-secondary-default, var(--hub-sys-color-secondary));color:var(--hub-sys-color-secondary-on-default, #fff);border-color:var(--hub-sys-color-secondary-default, var(--hub-sys-color-secondary))}:host(.hub-btn-solid.hub-btn-secondary):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-secondary-emphasis);border-color:var(--hub-sys-color-secondary-emphasis)}:host(.hub-btn-outline.hub-btn-secondary){background:transparent;color:var(--hub-sys-color-secondary-emphasis);border-color:var(--hub-sys-color-secondary-default, var(--hub-sys-color-secondary))}:host(.hub-btn-outline.hub-btn-secondary):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-secondary-subtle)}:host(.hub-btn-soft.hub-btn-secondary){background:var(--hub-sys-color-secondary-subtle);color:var(--hub-sys-color-secondary-emphasis);border-color:transparent}:host(.hub-btn-soft.hub-btn-secondary):hover:not([disabled]):not(.hub-btn-disabled){background:color-mix(in srgb,var(--hub-sys-color-secondary-subtle) 80%,var(--hub-sys-color-secondary-default))}:host(.hub-btn-ghost.hub-btn-secondary){background:transparent;color:var(--hub-sys-color-secondary-emphasis);border-color:transparent}:host(.hub-btn-ghost.hub-btn-secondary):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-secondary-subtle)}:host(.hub-btn-link.hub-btn-secondary){background:transparent;color:var(--hub-sys-color-secondary-emphasis);border-color:transparent;text-decoration:underline;padding-inline:.125rem}:host(.hub-btn-link.hub-btn-secondary):hover:not([disabled]):not(.hub-btn-disabled){color:var(--hub-sys-color-secondary-default)}:host(.hub-btn-solid.hub-btn-success){background:var(--hub-sys-color-success-default, var(--hub-sys-color-success));color:var(--hub-sys-color-success-on-default, #fff);border-color:var(--hub-sys-color-success-default, var(--hub-sys-color-success))}:host(.hub-btn-solid.hub-btn-success):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-success-emphasis);border-color:var(--hub-sys-color-success-emphasis)}:host(.hub-btn-outline.hub-btn-success){background:transparent;color:var(--hub-sys-color-success-emphasis);border-color:var(--hub-sys-color-success-default, var(--hub-sys-color-success))}:host(.hub-btn-outline.hub-btn-success):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-success-subtle)}:host(.hub-btn-soft.hub-btn-success){background:var(--hub-sys-color-success-subtle);color:var(--hub-sys-color-success-emphasis);border-color:transparent}:host(.hub-btn-soft.hub-btn-success):hover:not([disabled]):not(.hub-btn-disabled){background:color-mix(in srgb,var(--hub-sys-color-success-subtle) 80%,var(--hub-sys-color-success-default))}:host(.hub-btn-ghost.hub-btn-success){background:transparent;color:var(--hub-sys-color-success-emphasis);border-color:transparent}:host(.hub-btn-ghost.hub-btn-success):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-success-subtle)}:host(.hub-btn-link.hub-btn-success){background:transparent;color:var(--hub-sys-color-success-emphasis);border-color:transparent;text-decoration:underline;padding-inline:.125rem}:host(.hub-btn-link.hub-btn-success):hover:not([disabled]):not(.hub-btn-disabled){color:var(--hub-sys-color-success-default)}:host(.hub-btn-solid.hub-btn-danger){background:var(--hub-sys-color-danger-default, var(--hub-sys-color-danger));color:var(--hub-sys-color-danger-on-default, #fff);border-color:var(--hub-sys-color-danger-default, var(--hub-sys-color-danger))}:host(.hub-btn-solid.hub-btn-danger):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-danger-emphasis);border-color:var(--hub-sys-color-danger-emphasis)}:host(.hub-btn-outline.hub-btn-danger){background:transparent;color:var(--hub-sys-color-danger-emphasis);border-color:var(--hub-sys-color-danger-default, var(--hub-sys-color-danger))}:host(.hub-btn-outline.hub-btn-danger):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-danger-subtle)}:host(.hub-btn-soft.hub-btn-danger){background:var(--hub-sys-color-danger-subtle);color:var(--hub-sys-color-danger-emphasis);border-color:transparent}:host(.hub-btn-soft.hub-btn-danger):hover:not([disabled]):not(.hub-btn-disabled){background:color-mix(in srgb,var(--hub-sys-color-danger-subtle) 80%,var(--hub-sys-color-danger-default))}:host(.hub-btn-ghost.hub-btn-danger){background:transparent;color:var(--hub-sys-color-danger-emphasis);border-color:transparent}:host(.hub-btn-ghost.hub-btn-danger):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-danger-subtle)}:host(.hub-btn-link.hub-btn-danger){background:transparent;color:var(--hub-sys-color-danger-emphasis);border-color:transparent;text-decoration:underline;padding-inline:.125rem}:host(.hub-btn-link.hub-btn-danger):hover:not([disabled]):not(.hub-btn-disabled){color:var(--hub-sys-color-danger-default)}:host(.hub-btn-solid.hub-btn-warning){background:var(--hub-sys-color-warning-default, var(--hub-sys-color-warning));color:var(--hub-sys-color-warning-on-default, #fff);border-color:var(--hub-sys-color-warning-default, var(--hub-sys-color-warning))}:host(.hub-btn-solid.hub-btn-warning):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-warning-emphasis);border-color:var(--hub-sys-color-warning-emphasis)}:host(.hub-btn-outline.hub-btn-warning){background:transparent;color:var(--hub-sys-color-warning-emphasis);border-color:var(--hub-sys-color-warning-default, var(--hub-sys-color-warning))}:host(.hub-btn-outline.hub-btn-warning):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-warning-subtle)}:host(.hub-btn-soft.hub-btn-warning){background:var(--hub-sys-color-warning-subtle);color:var(--hub-sys-color-warning-emphasis);border-color:transparent}:host(.hub-btn-soft.hub-btn-warning):hover:not([disabled]):not(.hub-btn-disabled){background:color-mix(in srgb,var(--hub-sys-color-warning-subtle) 80%,var(--hub-sys-color-warning-default))}:host(.hub-btn-ghost.hub-btn-warning){background:transparent;color:var(--hub-sys-color-warning-emphasis);border-color:transparent}:host(.hub-btn-ghost.hub-btn-warning):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-warning-subtle)}:host(.hub-btn-link.hub-btn-warning){background:transparent;color:var(--hub-sys-color-warning-emphasis);border-color:transparent;text-decoration:underline;padding-inline:.125rem}:host(.hub-btn-link.hub-btn-warning):hover:not([disabled]):not(.hub-btn-disabled){color:var(--hub-sys-color-warning-default)}:host(.hub-btn-solid.hub-btn-info){background:var(--hub-sys-color-info-default, var(--hub-sys-color-info));color:var(--hub-sys-color-info-on-default, #fff);border-color:var(--hub-sys-color-info-default, var(--hub-sys-color-info))}:host(.hub-btn-solid.hub-btn-info):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-info-emphasis);border-color:var(--hub-sys-color-info-emphasis)}:host(.hub-btn-outline.hub-btn-info){background:transparent;color:var(--hub-sys-color-info-emphasis);border-color:var(--hub-sys-color-info-default, var(--hub-sys-color-info))}:host(.hub-btn-outline.hub-btn-info):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-info-subtle)}:host(.hub-btn-soft.hub-btn-info){background:var(--hub-sys-color-info-subtle);color:var(--hub-sys-color-info-emphasis);border-color:transparent}:host(.hub-btn-soft.hub-btn-info):hover:not([disabled]):not(.hub-btn-disabled){background:color-mix(in srgb,var(--hub-sys-color-info-subtle) 80%,var(--hub-sys-color-info-default))}:host(.hub-btn-ghost.hub-btn-info){background:transparent;color:var(--hub-sys-color-info-emphasis);border-color:transparent}:host(.hub-btn-ghost.hub-btn-info):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-info-subtle)}:host(.hub-btn-link.hub-btn-info){background:transparent;color:var(--hub-sys-color-info-emphasis);border-color:transparent;text-decoration:underline;padding-inline:.125rem}:host(.hub-btn-link.hub-btn-info):hover:not([disabled]):not(.hub-btn-disabled){color:var(--hub-sys-color-info-default)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubBtnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hub-btn', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'hub-btn' }, template: "@if (loading()) {\n\t<span class=\"hub-btn__spinner\" aria-hidden=\"true\"></span>\n}\n<ng-content></ng-content>\n", styles: [":where(:host){--hub-btn-padding-x: .875rem;--hub-btn-padding-y: .4375rem;--hub-btn-border-radius: var(--hub-sys-radius-md, .375rem);--hub-btn-border-width: 1.5px;--hub-btn-font-size: var(--hub-ref-font-size-base, 1rem);--hub-btn-font-weight: 500;--hub-btn-gap: .375rem;--hub-btn-transition: all .15s ease;--hub-btn-spinner-size: .875em;--hub-btn-disabled-opacity: .55}:host{display:inline-flex;align-items:center;justify-content:center;gap:var(--hub-btn-gap);padding:var(--hub-btn-padding-y) var(--hub-btn-padding-x);border-radius:var(--hub-btn-border-radius);border:var(--hub-btn-border-width) solid transparent;font-size:var(--hub-btn-font-size);font-weight:var(--hub-btn-font-weight);cursor:pointer;text-decoration:none;transition:var(--hub-btn-transition);-webkit-user-select:none;user-select:none;white-space:nowrap}:host(.hub-btn-disabled),:host([disabled]){opacity:var(--hub-btn-disabled-opacity);pointer-events:none}:host(.hub-btn-loading){pointer-events:none}:host(.hub-btn-sm){--hub-btn-padding-x: .625rem;--hub-btn-padding-y: .25rem;--hub-btn-font-size: .8125rem;--hub-btn-border-radius: var(--hub-sys-radius-sm, .25rem)}:host(.hub-btn-lg){--hub-btn-padding-x: 1.25rem;--hub-btn-padding-y: .625rem;--hub-btn-font-size: 1rem}:host(.hub-btn-xl){--hub-btn-padding-x: 1.75rem;--hub-btn-padding-y: .8125rem;--hub-btn-font-size: 1.125rem}:host(.hub-btn-icon){--hub-btn-padding-x: var(--hub-btn-padding-y);aspect-ratio:1}.hub-btn__spinner{display:inline-block;width:var(--hub-btn-spinner-size);height:var(--hub-btn-spinner-size);border:2px solid color-mix(in srgb,currentColor 30%,transparent);border-top-color:currentColor;border-radius:50%;animation:hub-btn-spin .7s linear infinite}@keyframes hub-btn-spin{to{transform:rotate(360deg)}}:host(.hub-btn-solid.hub-btn-primary){background:var(--hub-sys-color-primary-default, var(--hub-sys-color-primary));color:var(--hub-sys-color-primary-on-default, #fff);border-color:var(--hub-sys-color-primary-default, var(--hub-sys-color-primary))}:host(.hub-btn-solid.hub-btn-primary):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-primary-emphasis);border-color:var(--hub-sys-color-primary-emphasis)}:host(.hub-btn-outline.hub-btn-primary){background:transparent;color:var(--hub-sys-color-primary-emphasis);border-color:var(--hub-sys-color-primary-default, var(--hub-sys-color-primary))}:host(.hub-btn-outline.hub-btn-primary):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-primary-subtle)}:host(.hub-btn-soft.hub-btn-primary){background:var(--hub-sys-color-primary-subtle);color:var(--hub-sys-color-primary-emphasis);border-color:transparent}:host(.hub-btn-soft.hub-btn-primary):hover:not([disabled]):not(.hub-btn-disabled){background:color-mix(in srgb,var(--hub-sys-color-primary-subtle) 80%,var(--hub-sys-color-primary-default))}:host(.hub-btn-ghost.hub-btn-primary){background:transparent;color:var(--hub-sys-color-primary-emphasis);border-color:transparent}:host(.hub-btn-ghost.hub-btn-primary):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-primary-subtle)}:host(.hub-btn-link.hub-btn-primary){background:transparent;color:var(--hub-sys-color-primary-emphasis);border-color:transparent;text-decoration:underline;padding-inline:.125rem}:host(.hub-btn-link.hub-btn-primary):hover:not([disabled]):not(.hub-btn-disabled){color:var(--hub-sys-color-primary-default)}:host(.hub-btn-solid.hub-btn-secondary){background:var(--hub-sys-color-secondary-default, var(--hub-sys-color-secondary));color:var(--hub-sys-color-secondary-on-default, #fff);border-color:var(--hub-sys-color-secondary-default, var(--hub-sys-color-secondary))}:host(.hub-btn-solid.hub-btn-secondary):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-secondary-emphasis);border-color:var(--hub-sys-color-secondary-emphasis)}:host(.hub-btn-outline.hub-btn-secondary){background:transparent;color:var(--hub-sys-color-secondary-emphasis);border-color:var(--hub-sys-color-secondary-default, var(--hub-sys-color-secondary))}:host(.hub-btn-outline.hub-btn-secondary):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-secondary-subtle)}:host(.hub-btn-soft.hub-btn-secondary){background:var(--hub-sys-color-secondary-subtle);color:var(--hub-sys-color-secondary-emphasis);border-color:transparent}:host(.hub-btn-soft.hub-btn-secondary):hover:not([disabled]):not(.hub-btn-disabled){background:color-mix(in srgb,var(--hub-sys-color-secondary-subtle) 80%,var(--hub-sys-color-secondary-default))}:host(.hub-btn-ghost.hub-btn-secondary){background:transparent;color:var(--hub-sys-color-secondary-emphasis);border-color:transparent}:host(.hub-btn-ghost.hub-btn-secondary):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-secondary-subtle)}:host(.hub-btn-link.hub-btn-secondary){background:transparent;color:var(--hub-sys-color-secondary-emphasis);border-color:transparent;text-decoration:underline;padding-inline:.125rem}:host(.hub-btn-link.hub-btn-secondary):hover:not([disabled]):not(.hub-btn-disabled){color:var(--hub-sys-color-secondary-default)}:host(.hub-btn-solid.hub-btn-success){background:var(--hub-sys-color-success-default, var(--hub-sys-color-success));color:var(--hub-sys-color-success-on-default, #fff);border-color:var(--hub-sys-color-success-default, var(--hub-sys-color-success))}:host(.hub-btn-solid.hub-btn-success):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-success-emphasis);border-color:var(--hub-sys-color-success-emphasis)}:host(.hub-btn-outline.hub-btn-success){background:transparent;color:var(--hub-sys-color-success-emphasis);border-color:var(--hub-sys-color-success-default, var(--hub-sys-color-success))}:host(.hub-btn-outline.hub-btn-success):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-success-subtle)}:host(.hub-btn-soft.hub-btn-success){background:var(--hub-sys-color-success-subtle);color:var(--hub-sys-color-success-emphasis);border-color:transparent}:host(.hub-btn-soft.hub-btn-success):hover:not([disabled]):not(.hub-btn-disabled){background:color-mix(in srgb,var(--hub-sys-color-success-subtle) 80%,var(--hub-sys-color-success-default))}:host(.hub-btn-ghost.hub-btn-success){background:transparent;color:var(--hub-sys-color-success-emphasis);border-color:transparent}:host(.hub-btn-ghost.hub-btn-success):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-success-subtle)}:host(.hub-btn-link.hub-btn-success){background:transparent;color:var(--hub-sys-color-success-emphasis);border-color:transparent;text-decoration:underline;padding-inline:.125rem}:host(.hub-btn-link.hub-btn-success):hover:not([disabled]):not(.hub-btn-disabled){color:var(--hub-sys-color-success-default)}:host(.hub-btn-solid.hub-btn-danger){background:var(--hub-sys-color-danger-default, var(--hub-sys-color-danger));color:var(--hub-sys-color-danger-on-default, #fff);border-color:var(--hub-sys-color-danger-default, var(--hub-sys-color-danger))}:host(.hub-btn-solid.hub-btn-danger):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-danger-emphasis);border-color:var(--hub-sys-color-danger-emphasis)}:host(.hub-btn-outline.hub-btn-danger){background:transparent;color:var(--hub-sys-color-danger-emphasis);border-color:var(--hub-sys-color-danger-default, var(--hub-sys-color-danger))}:host(.hub-btn-outline.hub-btn-danger):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-danger-subtle)}:host(.hub-btn-soft.hub-btn-danger){background:var(--hub-sys-color-danger-subtle);color:var(--hub-sys-color-danger-emphasis);border-color:transparent}:host(.hub-btn-soft.hub-btn-danger):hover:not([disabled]):not(.hub-btn-disabled){background:color-mix(in srgb,var(--hub-sys-color-danger-subtle) 80%,var(--hub-sys-color-danger-default))}:host(.hub-btn-ghost.hub-btn-danger){background:transparent;color:var(--hub-sys-color-danger-emphasis);border-color:transparent}:host(.hub-btn-ghost.hub-btn-danger):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-danger-subtle)}:host(.hub-btn-link.hub-btn-danger){background:transparent;color:var(--hub-sys-color-danger-emphasis);border-color:transparent;text-decoration:underline;padding-inline:.125rem}:host(.hub-btn-link.hub-btn-danger):hover:not([disabled]):not(.hub-btn-disabled){color:var(--hub-sys-color-danger-default)}:host(.hub-btn-solid.hub-btn-warning){background:var(--hub-sys-color-warning-default, var(--hub-sys-color-warning));color:var(--hub-sys-color-warning-on-default, #fff);border-color:var(--hub-sys-color-warning-default, var(--hub-sys-color-warning))}:host(.hub-btn-solid.hub-btn-warning):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-warning-emphasis);border-color:var(--hub-sys-color-warning-emphasis)}:host(.hub-btn-outline.hub-btn-warning){background:transparent;color:var(--hub-sys-color-warning-emphasis);border-color:var(--hub-sys-color-warning-default, var(--hub-sys-color-warning))}:host(.hub-btn-outline.hub-btn-warning):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-warning-subtle)}:host(.hub-btn-soft.hub-btn-warning){background:var(--hub-sys-color-warning-subtle);color:var(--hub-sys-color-warning-emphasis);border-color:transparent}:host(.hub-btn-soft.hub-btn-warning):hover:not([disabled]):not(.hub-btn-disabled){background:color-mix(in srgb,var(--hub-sys-color-warning-subtle) 80%,var(--hub-sys-color-warning-default))}:host(.hub-btn-ghost.hub-btn-warning){background:transparent;color:var(--hub-sys-color-warning-emphasis);border-color:transparent}:host(.hub-btn-ghost.hub-btn-warning):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-warning-subtle)}:host(.hub-btn-link.hub-btn-warning){background:transparent;color:var(--hub-sys-color-warning-emphasis);border-color:transparent;text-decoration:underline;padding-inline:.125rem}:host(.hub-btn-link.hub-btn-warning):hover:not([disabled]):not(.hub-btn-disabled){color:var(--hub-sys-color-warning-default)}:host(.hub-btn-solid.hub-btn-info){background:var(--hub-sys-color-info-default, var(--hub-sys-color-info));color:var(--hub-sys-color-info-on-default, #fff);border-color:var(--hub-sys-color-info-default, var(--hub-sys-color-info))}:host(.hub-btn-solid.hub-btn-info):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-info-emphasis);border-color:var(--hub-sys-color-info-emphasis)}:host(.hub-btn-outline.hub-btn-info){background:transparent;color:var(--hub-sys-color-info-emphasis);border-color:var(--hub-sys-color-info-default, var(--hub-sys-color-info))}:host(.hub-btn-outline.hub-btn-info):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-info-subtle)}:host(.hub-btn-soft.hub-btn-info){background:var(--hub-sys-color-info-subtle);color:var(--hub-sys-color-info-emphasis);border-color:transparent}:host(.hub-btn-soft.hub-btn-info):hover:not([disabled]):not(.hub-btn-disabled){background:color-mix(in srgb,var(--hub-sys-color-info-subtle) 80%,var(--hub-sys-color-info-default))}:host(.hub-btn-ghost.hub-btn-info){background:transparent;color:var(--hub-sys-color-info-emphasis);border-color:transparent}:host(.hub-btn-ghost.hub-btn-info):hover:not([disabled]):not(.hub-btn-disabled){background:var(--hub-sys-color-info-subtle)}:host(.hub-btn-link.hub-btn-info){background:transparent;color:var(--hub-sys-color-info-emphasis);border-color:transparent;text-decoration:underline;padding-inline:.125rem}:host(.hub-btn-link.hub-btn-info):hover:not([disabled]):not(.hub-btn-disabled){color:var(--hub-sys-color-info-default)}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], _hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], _disabledAttr: [{
+                type: HostBinding,
+                args: ['attr.disabled']
+            }] } });
+
+/**
+ * Floating Action Button component. Renders fixed in the viewport at the given position.
+ * Supports circular and extended (pill with label) variants.
+ * When collapseOnScroll is true, an extended FAB collapses to icon-only after 50px scroll.
+ * Uses inset-inline-* / inset-block-* CSS logical properties for RTL support.
+ */
+class HubFabComponent {
+    color = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    size = input('standard', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    extended = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "extended" }] : /* istanbul ignore next */ []));
+    /** Fixed viewport position. 9-slot grid including center. */
+    position = input('bottom-end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** When true, collapses an extended FAB to icon-only on page scroll. */
+    collapseOnScroll = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapseOnScroll" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    fabClick = output();
+    /** Collapse state driven by scroll — only active when extended + collapseOnScroll. */
+    _collapsed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_collapsed" }] : /* istanbul ignore next */ []));
+    _destroyRef = inject(DestroyRef);
+    get _hostClass() {
+        return [
+            `hub-fab-${this.color()}`,
+            `hub-fab-${this.size()}`,
+            `hub-fab-${this.position()}`,
+            this.extended() && !this._collapsed() ? 'hub-fab-extended' : '',
+            this.disabled() ? 'hub-fab-disabled' : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    ngOnInit() {
+        if (!this.collapseOnScroll())
+            return;
+        fromEvent(window, 'scroll', { passive: true })
+            .pipe(debounceTime(50), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            this._collapsed.set(window.scrollY > 50);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubFabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubFabComponent, isStandalone: true, selector: "hub-fab", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, collapseOnScroll: { classPropertyName: "collapseOnScroll", publicName: "collapseOnScroll", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fabClick: "fabClick" }, host: { properties: { "class": "this._hostClass" }, classAttribute: "hub-fab" }, ngImport: i0, template: "<ng-content select=\"[slot=icon]\"></ng-content>\n\n@if (extended() && !_collapsed()) {\n\t<span class=\"hub-fab__label\">\n\t\t<ng-content select=\"[slot=label]\"></ng-content>\n\t</span>\n} @else if (!extended()) {\n\t<ng-content></ng-content>\n}\n", styles: [":where(.hub-fab){--hub-fab-size-mini: 2.5rem;--hub-fab-size-standard: 3.5rem;--hub-fab-size-large: 4.5rem;--hub-fab-border-radius: 50%;--hub-fab-shadow: var(--hub-sys-shadow-md, 0 4px 12px rgba(0, 0, 0, .15));--hub-fab-shadow-hover: var(--hub-sys-shadow-lg, 0 8px 24px rgba(0, 0, 0, .18));--hub-fab-offset: 1rem;--hub-fab-extended-height: 3.5rem;--hub-fab-extended-radius: 1.75rem;--hub-fab-extended-padding-x: 1.25rem;--hub-fab-transition: box-shadow .2s ease, transform .15s ease;--hub-fab-z-index: 1030}.hub-fab{position:fixed;display:inline-flex;align-items:center;justify-content:center;width:var(--hub-fab-size-standard);height:var(--hub-fab-size-standard);border-radius:var(--hub-fab-border-radius);border:none;cursor:pointer;box-shadow:var(--hub-fab-shadow);z-index:var(--hub-fab-z-index);transition:var(--hub-fab-transition);color:#fff;font-size:1.4rem}.hub-fab:hover{box-shadow:var(--hub-fab-shadow-hover);transform:translateY(-1px)}.hub-fab.hub-fab-disabled{opacity:.45;pointer-events:none}.hub-fab.hub-fab-extended{width:auto;height:var(--hub-fab-extended-height);border-radius:var(--hub-fab-extended-radius);padding-inline:var(--hub-fab-extended-padding-x);gap:.5rem;font-size:.95rem;font-weight:600}.hub-fab-mini{width:var(--hub-fab-size-mini);height:var(--hub-fab-size-mini);font-size:1rem}.hub-fab-large{width:var(--hub-fab-size-large);height:var(--hub-fab-size-large);font-size:1.75rem}.hub-fab-primary{background:var(--hub-sys-color-primary-default, var(--hub-sys-color-primary));color:var(--hub-sys-color-primary-on-default, #fff)}.hub-fab-secondary{background:var(--hub-sys-color-secondary-default, var(--hub-sys-color-secondary));color:var(--hub-sys-color-secondary-on-default, #fff)}.hub-fab-success{background:var(--hub-sys-color-success-default, var(--hub-sys-color-success));color:var(--hub-sys-color-success-on-default, #fff)}.hub-fab-danger{background:var(--hub-sys-color-danger-default, var(--hub-sys-color-danger));color:var(--hub-sys-color-danger-on-default, #fff)}.hub-fab-warning{background:var(--hub-sys-color-warning-default, var(--hub-sys-color-warning));color:var(--hub-sys-color-warning-on-default, #fff)}.hub-fab-info{background:var(--hub-sys-color-info-default, var(--hub-sys-color-info));color:var(--hub-sys-color-info-on-default, #fff)}.hub-speed-dial .hub-fab{position:static}.hub-fab-top-start{inset-block-start:var(--hub-fab-offset);inset-inline-start:var(--hub-fab-offset)}.hub-fab-top-center{inset-block-start:var(--hub-fab-offset);inset-inline-start:50%;transform:translate(-50%)}.hub-fab-top-end{inset-block-start:var(--hub-fab-offset);inset-inline-end:var(--hub-fab-offset)}.hub-fab-middle-start{inset-block-start:50%;inset-inline-start:var(--hub-fab-offset);transform:translateY(-50%)}.hub-fab-center{inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.hub-fab-middle-end{inset-block-start:50%;inset-inline-end:var(--hub-fab-offset);transform:translateY(-50%)}.hub-fab-bottom-start{inset-block-end:var(--hub-fab-offset);inset-inline-start:var(--hub-fab-offset)}.hub-fab-bottom-center{inset-block-end:var(--hub-fab-offset);inset-inline-start:50%;transform:translate(-50%)}.hub-fab-bottom-end{inset-block-end:var(--hub-fab-offset);inset-inline-end:var(--hub-fab-offset)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubFabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hub-fab', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'hub-fab' }, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"[slot=icon]\"></ng-content>\n\n@if (extended() && !_collapsed()) {\n\t<span class=\"hub-fab__label\">\n\t\t<ng-content select=\"[slot=label]\"></ng-content>\n\t</span>\n} @else if (!extended()) {\n\t<ng-content></ng-content>\n}\n", styles: [":where(.hub-fab){--hub-fab-size-mini: 2.5rem;--hub-fab-size-standard: 3.5rem;--hub-fab-size-large: 4.5rem;--hub-fab-border-radius: 50%;--hub-fab-shadow: var(--hub-sys-shadow-md, 0 4px 12px rgba(0, 0, 0, .15));--hub-fab-shadow-hover: var(--hub-sys-shadow-lg, 0 8px 24px rgba(0, 0, 0, .18));--hub-fab-offset: 1rem;--hub-fab-extended-height: 3.5rem;--hub-fab-extended-radius: 1.75rem;--hub-fab-extended-padding-x: 1.25rem;--hub-fab-transition: box-shadow .2s ease, transform .15s ease;--hub-fab-z-index: 1030}.hub-fab{position:fixed;display:inline-flex;align-items:center;justify-content:center;width:var(--hub-fab-size-standard);height:var(--hub-fab-size-standard);border-radius:var(--hub-fab-border-radius);border:none;cursor:pointer;box-shadow:var(--hub-fab-shadow);z-index:var(--hub-fab-z-index);transition:var(--hub-fab-transition);color:#fff;font-size:1.4rem}.hub-fab:hover{box-shadow:var(--hub-fab-shadow-hover);transform:translateY(-1px)}.hub-fab.hub-fab-disabled{opacity:.45;pointer-events:none}.hub-fab.hub-fab-extended{width:auto;height:var(--hub-fab-extended-height);border-radius:var(--hub-fab-extended-radius);padding-inline:var(--hub-fab-extended-padding-x);gap:.5rem;font-size:.95rem;font-weight:600}.hub-fab-mini{width:var(--hub-fab-size-mini);height:var(--hub-fab-size-mini);font-size:1rem}.hub-fab-large{width:var(--hub-fab-size-large);height:var(--hub-fab-size-large);font-size:1.75rem}.hub-fab-primary{background:var(--hub-sys-color-primary-default, var(--hub-sys-color-primary));color:var(--hub-sys-color-primary-on-default, #fff)}.hub-fab-secondary{background:var(--hub-sys-color-secondary-default, var(--hub-sys-color-secondary));color:var(--hub-sys-color-secondary-on-default, #fff)}.hub-fab-success{background:var(--hub-sys-color-success-default, var(--hub-sys-color-success));color:var(--hub-sys-color-success-on-default, #fff)}.hub-fab-danger{background:var(--hub-sys-color-danger-default, var(--hub-sys-color-danger));color:var(--hub-sys-color-danger-on-default, #fff)}.hub-fab-warning{background:var(--hub-sys-color-warning-default, var(--hub-sys-color-warning));color:var(--hub-sys-color-warning-on-default, #fff)}.hub-fab-info{background:var(--hub-sys-color-info-default, var(--hub-sys-color-info));color:var(--hub-sys-color-info-on-default, #fff)}.hub-speed-dial .hub-fab{position:static}.hub-fab-top-start{inset-block-start:var(--hub-fab-offset);inset-inline-start:var(--hub-fab-offset)}.hub-fab-top-center{inset-block-start:var(--hub-fab-offset);inset-inline-start:50%;transform:translate(-50%)}.hub-fab-top-end{inset-block-start:var(--hub-fab-offset);inset-inline-end:var(--hub-fab-offset)}.hub-fab-middle-start{inset-block-start:50%;inset-inline-start:var(--hub-fab-offset);transform:translateY(-50%)}.hub-fab-center{inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.hub-fab-middle-end{inset-block-start:50%;inset-inline-end:var(--hub-fab-offset);transform:translateY(-50%)}.hub-fab-bottom-start{inset-block-end:var(--hub-fab-offset);inset-inline-start:var(--hub-fab-offset)}.hub-fab-bottom-center{inset-block-end:var(--hub-fab-offset);inset-inline-start:50%;transform:translate(-50%)}.hub-fab-bottom-end{inset-block-end:var(--hub-fab-offset);inset-inline-end:var(--hub-fab-offset)}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], extended: [{ type: i0.Input, args: [{ isSignal: true, alias: "extended", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], collapseOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseOnScroll", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fabClick: [{ type: i0.Output, args: ["fabClick"] }], _hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * FAB that expands a stack of HubSpeedDialItemComponent children on click or hover.
+ * Supports 4 expansion directions and all 9 FAB viewport positions.
+ * Closes automatically on Escape key press.
+ */
+class HubSpeedDialComponent {
+    color = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    size = input('standard', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    position = input('bottom-end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    direction = input('up', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    trigger = input('click', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    isOpen = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    opened = output();
+    closed = output();
+    _destroyRef = inject(DestroyRef);
+    get _hostClass() {
+        return [
+            `hub-speed-dial-${this.color()}`,
+            `hub-speed-dial-${this.position()}`,
+            `hub-speed-dial-${this.direction()}`,
+            this.isOpen() ? 'hub-speed-dial-open' : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    constructor() {
+        fromEvent(document, 'keydown')
+            .pipe(filter((e) => e.key === 'Escape' && this.isOpen()), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => this.close());
+    }
+    /** Toggle the speed dial open/closed. */
+    toggle() {
+        this.isOpen() ? this.close() : this.open();
+    }
+    /** Open the speed dial and emit the opened event. */
+    open() {
+        this.isOpen.set(true);
+        this.opened.emit();
+    }
+    /** Close the speed dial and emit the closed event. */
+    close() {
+        this.isOpen.set(false);
+        this.closed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSpeedDialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubSpeedDialComponent, isStandalone: true, selector: "hub-speed-dial", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", opened: "opened", closed: "closed" }, host: { properties: { "class": "this._hostClass" }, classAttribute: "hub-speed-dial" }, ngImport: i0, template: "<button\n\tclass=\"hub-fab\"\n\t[class]=\"'hub-fab-' + color() + ' hub-fab-' + size()\"\n\t(click)=\"trigger() === 'click' && toggle()\"\n\t(mouseenter)=\"trigger() === 'hover' && open()\"\n\t(mouseleave)=\"trigger() === 'hover' && close()\"\n\ttype=\"button\"\n\t[attr.aria-expanded]=\"isOpen()\"\n\taria-haspopup=\"true\">\n\t<ng-content select=\"[hubTrigger]\"></ng-content>\n</button>\n\n@if (isOpen()) {\n\t<div class=\"hub-speed-dial__actions\" [attr.data-direction]=\"direction()\">\n\t\t<ng-content></ng-content>\n\t</div>\n}\n", styles: [":where(:host){--hub-speed-dial-gap: .625rem;--hub-speed-dial-z-index: 1030;--hub-speed-dial-animation: .2s ease}:host{position:fixed;display:flex;flex-direction:column-reverse;align-items:center;gap:var(--hub-speed-dial-gap);z-index:var(--hub-speed-dial-z-index)}.hub-speed-dial__actions{display:flex;flex-direction:column-reverse;align-items:center;gap:var(--hub-speed-dial-gap);animation:hub-sd-fade-in var(--hub-speed-dial-animation) both}:host(.hub-speed-dial-top-start){inset-block-start:1rem;inset-inline-start:1rem;flex-direction:column;align-items:flex-start}:host(.hub-speed-dial-top-end){inset-block-start:1rem;inset-inline-end:1rem;flex-direction:column;align-items:flex-end}:host(.hub-speed-dial-bottom-start){inset-block-end:1rem;inset-inline-start:1rem;align-items:flex-start}:host(.hub-speed-dial-bottom-end){inset-block-end:1rem;inset-inline-end:1rem;align-items:flex-end}:host(.hub-speed-dial-center){inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}:host(.hub-speed-dial-left){flex-direction:row-reverse}:host(.hub-speed-dial-left) .hub-speed-dial__actions{flex-direction:row-reverse}:host(.hub-speed-dial-right){flex-direction:row}:host(.hub-speed-dial-right) .hub-speed-dial__actions{flex-direction:row}@keyframes hub-sd-fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSpeedDialComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hub-speed-dial', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'hub-speed-dial' }, template: "<button\n\tclass=\"hub-fab\"\n\t[class]=\"'hub-fab-' + color() + ' hub-fab-' + size()\"\n\t(click)=\"trigger() === 'click' && toggle()\"\n\t(mouseenter)=\"trigger() === 'hover' && open()\"\n\t(mouseleave)=\"trigger() === 'hover' && close()\"\n\ttype=\"button\"\n\t[attr.aria-expanded]=\"isOpen()\"\n\taria-haspopup=\"true\">\n\t<ng-content select=\"[hubTrigger]\"></ng-content>\n</button>\n\n@if (isOpen()) {\n\t<div class=\"hub-speed-dial__actions\" [attr.data-direction]=\"direction()\">\n\t\t<ng-content></ng-content>\n\t</div>\n}\n", styles: [":where(:host){--hub-speed-dial-gap: .625rem;--hub-speed-dial-z-index: 1030;--hub-speed-dial-animation: .2s ease}:host{position:fixed;display:flex;flex-direction:column-reverse;align-items:center;gap:var(--hub-speed-dial-gap);z-index:var(--hub-speed-dial-z-index)}.hub-speed-dial__actions{display:flex;flex-direction:column-reverse;align-items:center;gap:var(--hub-speed-dial-gap);animation:hub-sd-fade-in var(--hub-speed-dial-animation) both}:host(.hub-speed-dial-top-start){inset-block-start:1rem;inset-inline-start:1rem;flex-direction:column;align-items:flex-start}:host(.hub-speed-dial-top-end){inset-block-start:1rem;inset-inline-end:1rem;flex-direction:column;align-items:flex-end}:host(.hub-speed-dial-bottom-start){inset-block-end:1rem;inset-inline-start:1rem;align-items:flex-start}:host(.hub-speed-dial-bottom-end){inset-block-end:1rem;inset-inline-end:1rem;align-items:flex-end}:host(.hub-speed-dial-center){inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}:host(.hub-speed-dial-left){flex-direction:row-reverse}:host(.hub-speed-dial-left) .hub-speed-dial__actions{flex-direction:row-reverse}:host(.hub-speed-dial-right){flex-direction:row}:host(.hub-speed-dial-right) .hub-speed-dial__actions{flex-direction:row}@keyframes hub-sd-fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], _hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * Secondary action item rendered inside HubSpeedDialComponent.
+ * Emits itemClick when activated. Supports an optional label tooltip.
+ */
+class HubSpeedDialItemComponent {
+    /** Icon character or ligature string displayed in the action button. */
+    icon = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Tooltip label shown next to the action button. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    color = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    itemClick = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSpeedDialItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubSpeedDialItemComponent, isStandalone: true, selector: "hub-speed-dial-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "@if (label()) {\n\t<span class=\"hub-speed-dial-item__label\">{{ label() }}</span>\n}\n<button\n\tclass=\"hub-speed-dial-item__btn\"\n\t[class]=\"'hub-speed-dial-item__btn--' + color()\"\n\t[disabled]=\"disabled() || null\"\n\t(click)=\"itemClick.emit()\"\n\ttype=\"button\"\n\t[attr.aria-label]=\"label() || icon()\">\n\t<i [class]=\"icon()\" aria-hidden=\"true\"></i>\n</button>\n", styles: [":host{display:flex;align-items:center;gap:.625rem}.hub-speed-dial-item__label{font-size:.8rem;font-weight:500;background:var(--hub-sys-color-surface-default, #1e293b);color:var(--hub-sys-text-primary, #fff);padding:.1875rem .5rem;border-radius:.3125rem;white-space:nowrap;box-shadow:var(--hub-sys-shadow-sm, 0 2px 6px rgba(0, 0, 0, .12))}.hub-speed-dial-item__btn{width:2.625rem;height:2.625rem;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:var(--hub-sys-color-surface-default, #fff);box-shadow:var(--hub-sys-shadow-md, 0 4px 12px rgba(0, 0, 0, .15));transition:transform .15s ease}.hub-speed-dial-item__btn:hover{transform:scale(1.1)}.hub-speed-dial-item__btn:disabled{opacity:.45;pointer-events:none}.hub-speed-dial-item__btn--primary{background:var(--hub-sys-color-primary-default, var(--hub-sys-color-primary));color:var(--hub-sys-color-primary-on-default, #fff)}.hub-speed-dial-item__btn--secondary{background:var(--hub-sys-color-secondary-default, var(--hub-sys-color-secondary));color:var(--hub-sys-color-secondary-on-default, #fff)}.hub-speed-dial-item__btn--success{background:var(--hub-sys-color-success-default, var(--hub-sys-color-success));color:var(--hub-sys-color-success-on-default, #fff)}.hub-speed-dial-item__btn--danger{background:var(--hub-sys-color-danger-default, var(--hub-sys-color-danger));color:var(--hub-sys-color-danger-on-default, #fff)}.hub-speed-dial-item__btn--warning{background:var(--hub-sys-color-warning-default, var(--hub-sys-color-warning));color:var(--hub-sys-color-warning-on-default, #fff)}.hub-speed-dial-item__btn--info{background:var(--hub-sys-color-info-default, var(--hub-sys-color-info));color:var(--hub-sys-color-info-on-default, #fff)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSpeedDialItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hub-speed-dial-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (label()) {\n\t<span class=\"hub-speed-dial-item__label\">{{ label() }}</span>\n}\n<button\n\tclass=\"hub-speed-dial-item__btn\"\n\t[class]=\"'hub-speed-dial-item__btn--' + color()\"\n\t[disabled]=\"disabled() || null\"\n\t(click)=\"itemClick.emit()\"\n\ttype=\"button\"\n\t[attr.aria-label]=\"label() || icon()\">\n\t<i [class]=\"icon()\" aria-hidden=\"true\"></i>\n</button>\n", styles: [":host{display:flex;align-items:center;gap:.625rem}.hub-speed-dial-item__label{font-size:.8rem;font-weight:500;background:var(--hub-sys-color-surface-default, #1e293b);color:var(--hub-sys-text-primary, #fff);padding:.1875rem .5rem;border-radius:.3125rem;white-space:nowrap;box-shadow:var(--hub-sys-shadow-sm, 0 2px 6px rgba(0, 0, 0, .12))}.hub-speed-dial-item__btn{width:2.625rem;height:2.625rem;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:var(--hub-sys-color-surface-default, #fff);box-shadow:var(--hub-sys-shadow-md, 0 4px 12px rgba(0, 0, 0, .15));transition:transform .15s ease}.hub-speed-dial-item__btn:hover{transform:scale(1.1)}.hub-speed-dial-item__btn:disabled{opacity:.45;pointer-events:none}.hub-speed-dial-item__btn--primary{background:var(--hub-sys-color-primary-default, var(--hub-sys-color-primary));color:var(--hub-sys-color-primary-on-default, #fff)}.hub-speed-dial-item__btn--secondary{background:var(--hub-sys-color-secondary-default, var(--hub-sys-color-secondary));color:var(--hub-sys-color-secondary-on-default, #fff)}.hub-speed-dial-item__btn--success{background:var(--hub-sys-color-success-default, var(--hub-sys-color-success));color:var(--hub-sys-color-success-on-default, #fff)}.hub-speed-dial-item__btn--danger{background:var(--hub-sys-color-danger-default, var(--hub-sys-color-danger));color:var(--hub-sys-color-danger-on-default, #fff)}.hub-speed-dial-item__btn--warning{background:var(--hub-sys-color-warning-default, var(--hub-sys-color-warning));color:var(--hub-sys-color-warning-on-default, #fff)}.hub-speed-dial-item__btn--info{background:var(--hub-sys-color-info-default, var(--hub-sys-color-info));color:var(--hub-sys-color-info-on-default, #fff)}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+
+/**
+ * Styled container for dropdown content.
+ * Renders a shadowed panel with an optional semantic color top-border accent.
+ * Place hub-dropdown-item, hub-dropdown-divider, and hub-dropdown-header children inside.
+ */
+class HubDropdownPanelComponent {
+    /** Adds a semantic color accent to the panel top border. */
+    color = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    get _hostClass() {
+        return this.color() !== 'default' ? `hub-dropdown-panel-${this.color()}` : '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubDropdownPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: HubDropdownPanelComponent, isStandalone: true, selector: "hub-dropdown-panel", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this._hostClass" }, classAttribute: "hub-dropdown-panel" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":where(:host){--hub-dropdown-panel-min-width: 11.25rem;--hub-dropdown-panel-max-height: 20rem;--hub-dropdown-panel-padding-y: .25rem;--hub-dropdown-panel-bg: var(--hub-sys-color-surface-default, #fff);--hub-dropdown-panel-border-color: var(--hub-sys-color-border-subtle, #e2e8f0);--hub-dropdown-panel-border-radius: var(--hub-sys-radius-md, .5rem);--hub-dropdown-panel-shadow: var(--hub-sys-shadow-lg, 0 8px 24px rgba(0, 0, 0, .12));--hub-dropdown-panel-z-index: 1000}:host{display:block;min-width:var(--hub-dropdown-panel-min-width);max-height:var(--hub-dropdown-panel-max-height);overflow-y:auto;padding-block:var(--hub-dropdown-panel-padding-y);background:var(--hub-dropdown-panel-bg);border:1px solid var(--hub-dropdown-panel-border-color);border-radius:var(--hub-dropdown-panel-border-radius);box-shadow:var(--hub-dropdown-panel-shadow);z-index:var(--hub-dropdown-panel-z-index)}:host(.hub-dropdown-panel-primary){border-top:3px solid var(--hub-sys-color-primary-default, var(--hub-sys-color-primary))}:host(.hub-dropdown-panel-secondary){border-top:3px solid var(--hub-sys-color-secondary-default, var(--hub-sys-color-secondary))}:host(.hub-dropdown-panel-success){border-top:3px solid var(--hub-sys-color-success-default, var(--hub-sys-color-success))}:host(.hub-dropdown-panel-danger){border-top:3px solid var(--hub-sys-color-danger-default, var(--hub-sys-color-danger))}:host(.hub-dropdown-panel-warning){border-top:3px solid var(--hub-sys-color-warning-default, var(--hub-sys-color-warning))}:host(.hub-dropdown-panel-info){border-top:3px solid var(--hub-sys-color-info-default, var(--hub-sys-color-info))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubDropdownPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hub-dropdown-panel', standalone: true, template: `<ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'hub-dropdown-panel' }, styles: [":where(:host){--hub-dropdown-panel-min-width: 11.25rem;--hub-dropdown-panel-max-height: 20rem;--hub-dropdown-panel-padding-y: .25rem;--hub-dropdown-panel-bg: var(--hub-sys-color-surface-default, #fff);--hub-dropdown-panel-border-color: var(--hub-sys-color-border-subtle, #e2e8f0);--hub-dropdown-panel-border-radius: var(--hub-sys-radius-md, .5rem);--hub-dropdown-panel-shadow: var(--hub-sys-shadow-lg, 0 8px 24px rgba(0, 0, 0, .12));--hub-dropdown-panel-z-index: 1000}:host{display:block;min-width:var(--hub-dropdown-panel-min-width);max-height:var(--hub-dropdown-panel-max-height);overflow-y:auto;padding-block:var(--hub-dropdown-panel-padding-y);background:var(--hub-dropdown-panel-bg);border:1px solid var(--hub-dropdown-panel-border-color);border-radius:var(--hub-dropdown-panel-border-radius);box-shadow:var(--hub-dropdown-panel-shadow);z-index:var(--hub-dropdown-panel-z-index)}:host(.hub-dropdown-panel-primary){border-top:3px solid var(--hub-sys-color-primary-default, var(--hub-sys-color-primary))}:host(.hub-dropdown-panel-secondary){border-top:3px solid var(--hub-sys-color-secondary-default, var(--hub-sys-color-secondary))}:host(.hub-dropdown-panel-success){border-top:3px solid var(--hub-sys-color-success-default, var(--hub-sys-color-success))}:host(.hub-dropdown-panel-danger){border-top:3px solid var(--hub-sys-color-danger-default, var(--hub-sys-color-danger))}:host(.hub-dropdown-panel-warning){border-top:3px solid var(--hub-sys-color-warning-default, var(--hub-sys-color-warning))}:host(.hub-dropdown-panel-info){border-top:3px solid var(--hub-sys-color-info-default, var(--hub-sys-color-info))}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], _hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * Menu item for use inside HubDropdownPanelComponent.
+ * Emits itemClick when activated. Supports an optional icon, selected state and semantic color.
+ */
+class HubDropdownItemComponent {
+    color = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Optional icon character or ligature displayed before the label. */
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Shows a checkmark indicator when selected. */
+    selected = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    itemClick = output();
+    get _hostClass() {
+        return [
+            this.color() !== 'default' ? `hub-dropdown-item-${this.color()}` : '',
+            this.disabled() ? 'hub-dropdown-item-disabled' : '',
+            this.selected() ? 'hub-dropdown-item-selected' : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    _handleClick() {
+        if (this.disabled())
+            return;
+        this.itemClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubDropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubDropdownItemComponent, isStandalone: true, selector: "hub-dropdown-item", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { properties: { "class": "this._hostClass" }, classAttribute: "hub-dropdown-item" }, ngImport: i0, template: "<button\n\tclass=\"hub-dropdown-item__inner\"\n\ttype=\"button\"\n\t[disabled]=\"disabled() || null\"\n\t(click)=\"_handleClick()\">\n\t@if (icon()) {\n\t\t<i [class]=\"icon()\" aria-hidden=\"true\"></i>\n\t}\n\t<span class=\"hub-dropdown-item__label\"><ng-content></ng-content></span>\n\t@if (selected()) {\n\t\t<span class=\"hub-dropdown-item__check\" aria-hidden=\"true\">\u2713</span>\n\t}\n</button>\n", styles: [":where(:host){--hub-dropdown-item-padding-y: .4375rem;--hub-dropdown-item-padding-x: .875rem;--hub-dropdown-item-hover-bg: var(--hub-sys-color-surface-subtle, #f8fafc);--hub-dropdown-item-border-radius: var(--hub-sys-radius-sm, .25rem);--hub-dropdown-item-disabled-opacity: .45}:host{display:block}.hub-dropdown-item__inner{display:flex;align-items:center;gap:.5rem;width:100%;padding:var(--hub-dropdown-item-padding-y) var(--hub-dropdown-item-padding-x);border:none;background:transparent;font-size:.875rem;color:inherit;cursor:pointer;text-align:start;border-radius:var(--hub-dropdown-item-border-radius);transition:background .1s ease}.hub-dropdown-item__inner:hover{background:var(--hub-dropdown-item-hover-bg)}.hub-dropdown-item__inner:disabled{opacity:var(--hub-dropdown-item-disabled-opacity);pointer-events:none}.hub-dropdown-item__label{flex:1}.hub-dropdown-item__check{margin-inline-start:auto}:host(.hub-dropdown-item-disabled) .hub-dropdown-item__inner{opacity:var(--hub-dropdown-item-disabled-opacity);pointer-events:none}:host(.hub-dropdown-item-primary) .hub-dropdown-item__inner{color:var(--hub-sys-color-primary-emphasis)}:host(.hub-dropdown-item-primary) .hub-dropdown-item__inner:hover{background:var(--hub-sys-color-primary-subtle)}:host(.hub-dropdown-item-secondary) .hub-dropdown-item__inner{color:var(--hub-sys-color-secondary-emphasis)}:host(.hub-dropdown-item-secondary) .hub-dropdown-item__inner:hover{background:var(--hub-sys-color-secondary-subtle)}:host(.hub-dropdown-item-success) .hub-dropdown-item__inner{color:var(--hub-sys-color-success-emphasis)}:host(.hub-dropdown-item-success) .hub-dropdown-item__inner:hover{background:var(--hub-sys-color-success-subtle)}:host(.hub-dropdown-item-danger) .hub-dropdown-item__inner{color:var(--hub-sys-color-danger-emphasis)}:host(.hub-dropdown-item-danger) .hub-dropdown-item__inner:hover{background:var(--hub-sys-color-danger-subtle)}:host(.hub-dropdown-item-warning) .hub-dropdown-item__inner{color:var(--hub-sys-color-warning-emphasis)}:host(.hub-dropdown-item-warning) .hub-dropdown-item__inner:hover{background:var(--hub-sys-color-warning-subtle)}:host(.hub-dropdown-item-info) .hub-dropdown-item__inner{color:var(--hub-sys-color-info-emphasis)}:host(.hub-dropdown-item-info) .hub-dropdown-item__inner:hover{background:var(--hub-sys-color-info-subtle)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubDropdownItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hub-dropdown-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'hub-dropdown-item' }, template: "<button\n\tclass=\"hub-dropdown-item__inner\"\n\ttype=\"button\"\n\t[disabled]=\"disabled() || null\"\n\t(click)=\"_handleClick()\">\n\t@if (icon()) {\n\t\t<i [class]=\"icon()\" aria-hidden=\"true\"></i>\n\t}\n\t<span class=\"hub-dropdown-item__label\"><ng-content></ng-content></span>\n\t@if (selected()) {\n\t\t<span class=\"hub-dropdown-item__check\" aria-hidden=\"true\">\u2713</span>\n\t}\n</button>\n", styles: [":where(:host){--hub-dropdown-item-padding-y: .4375rem;--hub-dropdown-item-padding-x: .875rem;--hub-dropdown-item-hover-bg: var(--hub-sys-color-surface-subtle, #f8fafc);--hub-dropdown-item-border-radius: var(--hub-sys-radius-sm, .25rem);--hub-dropdown-item-disabled-opacity: .45}:host{display:block}.hub-dropdown-item__inner{display:flex;align-items:center;gap:.5rem;width:100%;padding:var(--hub-dropdown-item-padding-y) var(--hub-dropdown-item-padding-x);border:none;background:transparent;font-size:.875rem;color:inherit;cursor:pointer;text-align:start;border-radius:var(--hub-dropdown-item-border-radius);transition:background .1s ease}.hub-dropdown-item__inner:hover{background:var(--hub-dropdown-item-hover-bg)}.hub-dropdown-item__inner:disabled{opacity:var(--hub-dropdown-item-disabled-opacity);pointer-events:none}.hub-dropdown-item__label{flex:1}.hub-dropdown-item__check{margin-inline-start:auto}:host(.hub-dropdown-item-disabled) .hub-dropdown-item__inner{opacity:var(--hub-dropdown-item-disabled-opacity);pointer-events:none}:host(.hub-dropdown-item-primary) .hub-dropdown-item__inner{color:var(--hub-sys-color-primary-emphasis)}:host(.hub-dropdown-item-primary) .hub-dropdown-item__inner:hover{background:var(--hub-sys-color-primary-subtle)}:host(.hub-dropdown-item-secondary) .hub-dropdown-item__inner{color:var(--hub-sys-color-secondary-emphasis)}:host(.hub-dropdown-item-secondary) .hub-dropdown-item__inner:hover{background:var(--hub-sys-color-secondary-subtle)}:host(.hub-dropdown-item-success) .hub-dropdown-item__inner{color:var(--hub-sys-color-success-emphasis)}:host(.hub-dropdown-item-success) .hub-dropdown-item__inner:hover{background:var(--hub-sys-color-success-subtle)}:host(.hub-dropdown-item-danger) .hub-dropdown-item__inner{color:var(--hub-sys-color-danger-emphasis)}:host(.hub-dropdown-item-danger) .hub-dropdown-item__inner:hover{background:var(--hub-sys-color-danger-subtle)}:host(.hub-dropdown-item-warning) .hub-dropdown-item__inner{color:var(--hub-sys-color-warning-emphasis)}:host(.hub-dropdown-item-warning) .hub-dropdown-item__inner:hover{background:var(--hub-sys-color-warning-subtle)}:host(.hub-dropdown-item-info) .hub-dropdown-item__inner{color:var(--hub-sys-color-info-emphasis)}:host(.hub-dropdown-item-info) .hub-dropdown-item__inner:hover{background:var(--hub-sys-color-info-subtle)}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], _hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/** Horizontal separator for grouping items inside HubDropdownPanelComponent. */
+class HubDropdownDividerComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubDropdownDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: HubDropdownDividerComponent, isStandalone: true, selector: "hub-dropdown-divider", host: { attributes: { "role": "separator", "aria-hidden": "true" }, classAttribute: "hub-dropdown-divider" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;height:1px;background:var(--hub-dropdown-divider-color, var(--hub-sys-color-border-subtle, #e2e8f0));margin:.25rem 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubDropdownDividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hub-dropdown-divider', standalone: true, template: '', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'hub-dropdown-divider',
+                        role: 'separator',
+                        'aria-hidden': 'true'
+                    }, styles: [":host{display:block;height:1px;background:var(--hub-dropdown-divider-color, var(--hub-sys-color-border-subtle, #e2e8f0));margin:.25rem 0}\n"] }]
+        }] });
+
+/** Group label for organizing items inside HubDropdownPanelComponent. */
+class HubDropdownHeaderComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubDropdownHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: HubDropdownHeaderComponent, isStandalone: true, selector: "hub-dropdown-header", host: { classAttribute: "hub-dropdown-header" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block;padding:.375rem var(--hub-dropdown-header-padding-x, .875rem) .1875rem;font-size:var(--hub-dropdown-header-font-size, .6875rem);font-weight:700;color:var(--hub-dropdown-header-color, var(--hub-sys-color-text-subtle, #94a3b8));text-transform:uppercase;letter-spacing:.06em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubDropdownHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hub-dropdown-header', standalone: true, template: `<ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'hub-dropdown-header' }, styles: [":host{display:block;padding:.375rem var(--hub-dropdown-header-padding-x, .875rem) .1875rem;font-size:var(--hub-dropdown-header-font-size, .6875rem);font-weight:700;color:var(--hub-dropdown-header-color, var(--hub-sys-color-text-subtle, #94a3b8));text-transform:uppercase;letter-spacing:.06em}\n"] }]
+        }] });
+
+/**
+ * Applies hub-btn styles to any host element (button, a, div, etc.).
+ * Use this when the element type must stay native and cannot be replaced by <hub-btn>.
+ * Exposes the same inputs as HubBtnComponent.
+ */
+class HubBtnDirective {
+    variant = input('solid', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    color = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    iconOnly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    get _hostClass() {
+        return [
+            `hub-btn-${this.variant()}`,
+            `hub-btn-${this.color()}`,
+            `hub-btn-${this.size()}`,
+            this.iconOnly() ? 'hub-btn-icon' : '',
+            this.loading() ? 'hub-btn-loading' : '',
+            this.disabled() ? 'hub-btn-disabled' : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    get _disabledAttr() {
+        return this.disabled() ? true : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubBtnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: HubBtnDirective, isStandalone: true, selector: "[hubBtn]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this._hostClass", "attr.disabled": "this._disabledAttr" }, classAttribute: "hub-btn" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubBtnDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hubBtn]',
+                    standalone: true,
+                    host: { class: 'hub-btn' }
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], _hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], _disabledAttr: [{
+                type: HostBinding,
+                args: ['attr.disabled']
+            }] } });
+
+/**
+ * Turns any host element into a dropdown trigger.
+ * Renders an ng-template in a body-level overlay managed by OverlayService (no CDK).
+ * When closeOnSelect is true, any click inside the panel closes the overlay automatically.
+ */
+class HubDropdownDirective {
+    /** The ng-template to render inside the overlay panel. */
+    tpl = input.required({ ...(ngDevMode ? { debugName: "tpl" } : /* istanbul ignore next */ {}), alias: 'hubDropdown' });
+    placement = input('bottom-start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    trigger = input('click', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    /** When true, any click inside the panel content closes the dropdown. */
+    closeOnSelect = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Vertical offset in pixels between the trigger and the panel. */
+    offsetY = input(4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "offsetY" }] : /* istanbul ignore next */ []));
+    panelClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    isOpen = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    opened = output();
+    closed = output();
+    _overlayRef = null;
+    _el = inject((ElementRef));
+    _vcr = inject(ViewContainerRef);
+    _overlay = inject(OverlayService);
+    _destroyRef = inject(DestroyRef);
+    constructor() {
+        fromEvent(document, 'keydown')
+            .pipe(filter((e) => e.key === 'Escape' && this.isOpen()), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => this.close());
+    }
+    /** Open the dropdown and mount the overlay. */
+    open() {
+        if (this.disabled() || this.isOpen())
+            return;
+        const positionStrategy = this._overlay.position().flexibleConnectedTo(this._el).withPositions(this._buildPositions());
+        const panelClasses = ['hub-dropdown-overlay'];
+        if (this.panelClass())
+            panelClasses.push(this.panelClass());
+        this._overlayRef = this._overlay.create({ positionStrategy, panelClass: panelClasses });
+        const panelEl = this._overlayRef.attach(this.tpl(), this._vcr);
+        // Close on click-outside via backdrop
+        this._overlayRef.onBackdropClick(() => this.close());
+        // Close on click-inside when closeOnSelect is true
+        if (this.closeOnSelect() && panelEl) {
+            fromEvent(panelEl, 'click')
+                .pipe(take(1), takeUntilDestroyed(this._destroyRef))
+                .subscribe(() => this.close());
+        }
+        this.isOpen.set(true);
+        this.opened.emit();
+        // Close on scroll so the panel stays aligned with the trigger
+        fromEvent(document, 'scroll', { passive: true, capture: true })
+            .pipe(take(1), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => this.close());
+        // Click-outside detection (document-level)
+        fromEvent(document, 'click')
+            .pipe(filter((e) => !this._el.nativeElement.contains(e.target) && !!this._overlayRef?.hasAttached()), take(1), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => this.close());
+    }
+    /** Close the dropdown and destroy the overlay. */
+    close() {
+        if (!this.isOpen())
+            return;
+        this._overlayRef?.detach();
+        this._overlayRef?.dispose();
+        this._overlayRef = null;
+        this.isOpen.set(false);
+        this.closed.emit();
+    }
+    /** Toggle between open and closed. */
+    toggle() {
+        this.isOpen() ? this.close() : this.open();
+    }
+    _onHostClick() {
+        if (this.trigger() === 'click')
+            this.toggle();
+    }
+    _onHostEnter() {
+        if (this.trigger() === 'hover')
+            this.open();
+    }
+    _onHostLeave() {
+        if (this.trigger() === 'hover')
+            this.close();
+    }
+    /**
+     * Translates HubDropdownPlacement tokens to ConnectionPosition arrays.
+     * The OverlayPosition tries each entry in order, using the first that fits.
+     */
+    _buildPositions() {
+        const o = this.offsetY();
+        const map = {
+            'bottom-start': [{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: o }],
+            bottom: [{ originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: o }],
+            'bottom-end': [{ originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: o }],
+            'top-start': [{ originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -o }],
+            top: [{ originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -o }],
+            'top-end': [{ originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -o }],
+            start: [{ originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -o }],
+            end: [{ originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: o }]
+        };
+        return map[this.placement()];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: HubDropdownDirective, isStandalone: true, selector: "[hubDropdown]", inputs: { tpl: { classPropertyName: "tpl", publicName: "hubDropdown", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, offsetY: { classPropertyName: "offsetY", publicName: "offsetY", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", opened: "opened", closed: "closed" }, host: { listeners: { "click": "_onHostClick()", "mouseenter": "_onHostEnter()", "mouseleave": "_onHostLeave()" } }, exportAs: ["hubDropdown"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubDropdownDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hubDropdown]',
+                    standalone: true,
+                    exportAs: 'hubDropdown',
+                    host: {
+                        '(click)': '_onHostClick()',
+                        '(mouseenter)': '_onHostEnter()',
+                        '(mouseleave)': '_onHostLeave()'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { tpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubDropdown", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], offsetY: [{ type: i0.Input, args: [{ isSignal: true, alias: "offsetY", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+/*
+ * Public API Surface of ng-hub-ui-buttons
+ */
+// Types
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DROPDOWN_CONTEXT, HubBtnComponent, HubBtnDirective, HubDropdownDirective, HubDropdownDividerComponent, HubDropdownHeaderComponent, HubDropdownItemComponent, HubDropdownPanelComponent, HubFabComponent, HubSpeedDialComponent, HubSpeedDialItemComponent };
+//# sourceMappingURL=ng-hub-ui-buttons.mjs.map