crdx-components 1.0.0

package/src/lib/components/header/header.ts

@@ -0,0 +1,101 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Output, computed, input } from '@angular/core';
+import { resolveUiIconResource, UiIconName, UI_ICON_NAMES } from '../../icons/register-icons';
+
+export interface HeaderAction {
+  icon: string;
+  ariaLabel: string;
+  id?: string;
+  iconPath?: string;
+}
+
+@Component({
+  selector: 'lib-header',
+  standalone: true,
+  imports: [],
+  templateUrl: './header.html',
+  styleUrl: './header.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HeaderComponent {
+  readonly showLeading = input(true);
+  readonly leadingIcon = input('icon-menu');
+  readonly leadingIconPath = input<string | null>(null);
+  readonly leadingActionLabel = input('Abrir navegación');
+  readonly brandLabel = input('Credix');
+  readonly brandIcon = input('smiley');
+  readonly brandIconPath = input<string | null>(null);
+  readonly trailingActions = input<readonly HeaderAction[]>([
+    { icon: 'search', ariaLabel: 'Abrir buscador' },
+  ]);
+  readonly iconBasePath = input('assets/icons');
+
+  @Output() readonly leadingClick = new EventEmitter<void>();
+  @Output() readonly actionClick = new EventEmitter<HeaderAction>();
+
+  protected readonly iconAssetBasePath = computed(() =>
+    this.normalizeAssetBasePath(this.iconBasePath())
+  );
+
+  protected readonly leadingIconUrl = computed(() =>
+    this.resolveIconUrl(this.leadingIcon(), this.leadingIconPath())
+  );
+
+  protected readonly brandIconUrl = computed(() =>
+    this.resolveIconUrl(this.brandIcon(), this.brandIconPath())
+  );
+
+  protected onLeadingClick(): void {
+    this.leadingClick.emit();
+  }
+
+  protected onActionClick(action: HeaderAction): void {
+    this.actionClick.emit(action);
+  }
+
+  protected trackByAction(_index: number, action: HeaderAction): string {
+    return action.id ?? action.icon;
+  }
+
+  protected actionIconUrl(action: HeaderAction): string | null {
+    return this.resolveIconUrl(action.icon, action.iconPath ?? null);
+  }
+
+  private resolveIconUrl(iconName: string | null | undefined, explicitPath: string | null): string | null {
+    if (explicitPath) {
+      if (explicitPath.includes('#')) {
+        const spriteSymbol = explicitPath.split('#')[1];
+        if (spriteSymbol) {
+          const fallback = this.resolveIconUrl(spriteSymbol, null);
+          if (fallback) {
+            return fallback;
+          }
+        }
+      }
+      return explicitPath;
+    }
+
+    if (!iconName) {
+      return null;
+    }
+
+    if (KNOWN_UI_ICON_NAMES.has(iconName as UiIconName)) {
+      return resolveUiIconResource(iconName as UiIconName, {
+        basePath: this.iconAssetBasePath(),
+      });
+    }
+
+    return `${this.iconAssetBasePath()}/${iconName}.svg`;
+  }
+
+  private normalizeAssetBasePath(basePath: string | null | undefined): string {
+    const targetPath = basePath ?? 'assets/icons';
+
+    if (/^(https?:)?\/\//.test(targetPath)) {
+      return targetPath.replace(/\/$/, '');
+    }
+
+    return targetPath.replace(/\/$/, '');
+  }
+}
+
+const KNOWN_UI_ICON_NAMES = new Set<UiIconName>(UI_ICON_NAMES);

package/src/lib/components/icon-button/icon-button.css

@@ -0,0 +1,445 @@
+/* Colores, paddings y tamaños desde Figma: _tokens-icon-buttons / _app-tokens (icon-buttons-*).
+   Space: narrow, default, wide (leading/trailing por tamaño). */
+.ui-icon-btn {
+  --ui-icon-btn-size: calc(var(--icon-buttons-size-small-icon-button-small-container-height) * 1px);
+  --ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-small-icon-button-small-default-leading-space) * 1px);
+  --ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-small-icon-button-small-default-trailing-space) * 1px);
+  --ui-icon-btn-radius: calc(var(--icon-buttons-icon-button-enabled-icon-button-container-shape-round, var(--app-icon-buttons-icon-button-enabled-icon-button-container-shape-round)) * 1px);
+  --ui-icon-btn-pressed-radius: calc(var(--icon-buttons-icon-button-enabled-icon-button-shape-pressed-morph, var(--app-icon-buttons-icon-button-enabled-icon-button-shape-pressed-morph, 0)) * 1px);
+  --ui-icon-btn-outline-width: calc(var(--icon-buttons-size-small-icon-button-small-outline-width) * 1px);
+  --ui-icon-btn-icon-size: calc(var(--icon-buttons-size-small-icon-button-small-icon-size) * 1px);
+  --ui-icon-btn-border-width: 0;
+  --ui-icon-btn-border-color: transparent;
+  --ui-icon-btn-container-color: var(--icon-buttons-icon-button-enabled-icon-button-container-color, var(--app-icon-buttons-icon-button-enabled-icon-button-container-color));
+  --ui-icon-btn-icon-color: var(--icon-buttons-icon-button-enabled-icon-button-icon-color, var(--app-icon-buttons-icon-button-enabled-icon-button-icon-color));
+  --ui-icon-btn-hover-layer-color: var(--icon-buttons-icon-button-hovered-icon-button-hovered-state-layer-color, var(--app-icon-buttons-icon-button-hovered-icon-button-hovered-state-layer-color, transparent));
+  --ui-icon-btn-focus-layer-color: var(--icon-buttons-icon-button-focused-icon-button-focused-state-layer-color, var(--app-icon-buttons-icon-button-focused-icon-button-focused-state-layer-color, transparent));
+  --ui-icon-btn-focus-layer-opacity: calc(var(--icon-buttons-icon-button-focused-icon-button-focused-state-layer-opacity, var(--app-icon-buttons-icon-button-focused-icon-button-focused-state-layer-opacity, 0)) / 100);
+  --ui-icon-btn-pressed-layer-color: var(--icon-buttons-icon-button-pressed-icon-button-pressed-state-layer-color, var(--app-icon-buttons-icon-button-pressed-icon-button-pressed-state-layer-color, transparent));
+  --ui-icon-btn-ripple-boost: 2.4;
+  --ui-icon-btn-ripple-min-opacity: 0.18;
+  --ui-icon-btn-ripple-opacity: min(
+    1,
+    max(
+      var(--ui-icon-btn-ripple-min-opacity),
+      calc(var(--ui-icon-btn-pressed-layer-opacity, 0) * var(--ui-icon-btn-ripple-boost))
+    )
+  );
+  --ui-icon-btn-ripple-color: color-mix(
+    in srgb,
+    var(--ui-icon-btn-pressed-layer-color) calc(var(--ui-icon-btn-ripple-opacity) * 100%),
+    transparent
+  );
+  --ui-icon-btn-focus-ring-color: var(--icon-buttons-icon-button-enabled-icon-button-focus-indicator-color, var(--app-icon-buttons-icon-button-enabled-icon-button-focus-indicator-color, transparent));
+  --ui-icon-btn-focus-ring-width: calc(var(--icon-buttons-icon-button-enabled-icon-button-focus-indicator-thickness, var(--app-icon-buttons-icon-button-enabled-icon-button-focus-indicator-thickness, 0)) * 1px);
+  --ui-icon-btn-focus-ring-offset: calc(var(--icon-buttons-icon-button-enabled-icon-button-focus-indicator-offset, var(--app-icon-buttons-icon-button-enabled-icon-button-focus-indicator-offset, 0)) * 1px);
+  --ui-icon-btn-disabled-container-color: var(--icon-buttons-icon-button-disabled-icon-button-disabled-container-color, var(--ui-icon-btn-container-color));
+  --ui-icon-btn-disabled-container-opacity: var(--icon-buttons-icon-button-disabled-icon-button-disabled-container-opacity, 100);
+  --ui-icon-btn-disabled-icon-color: var(--icon-buttons-icon-button-disabled-icon-button-disabled-icon-color, var(--ui-icon-btn-icon-color));
+  --ui-icon-btn-disabled-border-color: var(--ui-icon-btn-border-color);
+  --ui-icon-btn-disabled-border-opacity: var(--icon-buttons-icon-button-disabled-icon-button-disabled-container-opacity, 100);
+  --ui-icon-btn-disabled-opacity: 1;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: var(--ui-icon-btn-size);
+  min-width: var(--ui-icon-btn-size);
+  padding-inline-start: var(--ui-icon-btn-padding-inline-start);
+  padding-inline-end: var(--ui-icon-btn-padding-inline-end);
+  border-radius: var(--ui-icon-btn-radius);
+  border-style: solid;
+  border-width: var(--ui-icon-btn-border-width);
+  border-color: var(--ui-icon-btn-border-color);
+  background-color: var(--ui-icon-btn-container-color);
+  color: var(--ui-icon-btn-icon-color);
+  cursor: pointer;
+  overflow: hidden;
+  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, border-radius 0.15s ease;
+}
+
+.ui-icon-btn::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  background-color: transparent;
+  opacity: 0;
+  transition: opacity 0.15s ease, background-color 0.15s ease;
+}
+
+.ui-icon-btn__content {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-icon-btn mat-icon,
+.ui-icon-btn .mat-icon,
+.ui-icon-btn > svg {
+  width: var(--ui-icon-btn-icon-size);
+  height: var(--ui-icon-btn-icon-size);
+  font-size: var(--ui-icon-btn-icon-size);
+  color: currentColor;
+  fill: currentColor;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.ui-icon-btn mat-icon svg,
+.ui-icon-btn .mat-icon svg,
+.ui-icon-btn > svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+.ui-icon-btn:hover:not(:disabled)::after {
+  background-color: var(--ui-icon-btn-hover-layer-color);
+  opacity: var(--ui-icon-btn-hover-layer-opacity);
+}
+
+.ui-icon-btn:focus-visible:not(:disabled)::after {
+  background-color: var(--ui-icon-btn-focus-layer-color);
+  opacity: var(--ui-icon-btn-focus-layer-opacity);
+}
+
+.ui-icon-btn:active:not(:disabled)::after {
+  background-color: var(--ui-icon-btn-pressed-layer-color);
+  opacity: var(--ui-icon-btn-pressed-layer-opacity);
+}
+
+.ui-icon-btn:active:not(:disabled) {
+  border-radius: var(--ui-icon-btn-pressed-radius);
+}
+
+.ui-icon-btn:focus-visible {
+  outline: var(--ui-icon-btn-focus-ring-width) solid var(--ui-icon-btn-focus-ring-color);
+  outline-offset: var(--ui-icon-btn-focus-ring-offset);
+}
+
+.ui-icon-btn:disabled {
+  cursor: not-allowed;
+  background-color: color-mix(
+    in srgb,
+    var(--ui-icon-btn-disabled-container-color) calc(var(--ui-icon-btn-disabled-container-opacity) * 1%),
+    transparent
+  );
+  border-color: color-mix(
+    in srgb,
+    var(--ui-icon-btn-disabled-border-color) calc(var(--ui-icon-btn-disabled-border-opacity) * 1%),
+    transparent
+  );
+  color: color-mix(
+    in srgb,
+    var(--ui-icon-btn-disabled-icon-color) calc(var(--ui-icon-btn-disabled-icon-opacity) * 1%),
+    transparent
+  );
+  opacity: var(--ui-icon-btn-disabled-opacity);
+}
+
+.ui-icon-btn:disabled::after {
+  opacity: 0;
+}
+
+.ui-icon-btn--xsmall {
+  --ui-icon-btn-size: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-container-height) * 1px);
+  --ui-icon-btn-icon-size: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-icon-size) * 1px);
+  --ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-default-leading-space) * 1px);
+  --ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-default-trailing-space) * 1px);
+  --ui-icon-btn-outline-width: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-outline-width) * 1px);
+}
+
+.ui-icon-btn--small {
+  --ui-icon-btn-size: calc(var(--icon-buttons-size-small-icon-button-small-container-height) * 1px);
+  --ui-icon-btn-icon-size: calc(var(--icon-buttons-size-small-icon-button-small-icon-size) * 1px);
+  --ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-small-icon-button-small-default-leading-space) * 1px);
+  --ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-small-icon-button-small-default-trailing-space) * 1px);
+  --ui-icon-btn-outline-width: calc(var(--icon-buttons-size-small-icon-button-small-outline-width) * 1px);
+}
+
+.ui-icon-btn--medium {
+  --ui-icon-btn-size: calc(var(--icon-buttons-size-medium-icon-button-medium-container-height) * 1px);
+  --ui-icon-btn-icon-size: calc(var(--icon-buttons-size-medium-icon-button-medium-icon-size) * 1px);
+  --ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-medium-icon-button-medium-default-leading-space) * 1px);
+  --ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-medium-icon-button-medium-default-trailing-space) * 1px);
+  --ui-icon-btn-outline-width: calc(var(--icon-buttons-size-medium-icon-button-medium-outline-width) * 1px);
+}
+
+.ui-icon-btn--large {
+  --ui-icon-btn-size: calc(var(--icon-buttons-size-large-icon-button-large-container-height) * 1px);
+  --ui-icon-btn-icon-size: calc(var(--icon-buttons-size-large-icon-button-large-icon-size) * 1px);
+  --ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-large-icon-button-large-default-leading-space) * 1px);
+  --ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-large-icon-button-large-default-trailing-space) * 1px);
+  --ui-icon-btn-outline-width: calc(var(--icon-buttons-size-large-icon-button-large-outline-width) * 1px);
+}
+
+.ui-icon-btn--xlarge {
+  --ui-icon-btn-size: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-container-height) * 1px);
+  --ui-icon-btn-icon-size: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-icon-size) * 1px);
+  --ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-default-leading-space) * 1px);
+  --ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-default-trailing-space) * 1px);
+  --ui-icon-btn-outline-width: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-outline-width) * 1px);
+}
+
+/* Space: narrow (Figma node 396-15028), default, wide */
+.ui-icon-btn--xsmall.ui-icon-btn--space-narrow {
+  --ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-narrow-leading-space) * 1px);
+  --ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-narrow-trailing-space) * 1px);
+}
+
+.ui-icon-btn--xsmall.ui-icon-btn--space-wide {
+  --ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-wide-leading-space) * 1px);
+  --ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-wide-trailing-space) * 1px);
+}
+
+.ui-icon-btn--small.ui-icon-btn--space-narrow {
+  --ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-small-icon-button-small-narrow-leading-space) * 1px);
+  --ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-small-icon-button-small-narrow-trailing-space) * 1px);
+}
+
+.ui-icon-btn--small.ui-icon-btn--space-wide {
+  --ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-small-icon-button-small-wide-leading-space) * 1px);
+  --ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-small-icon-button-small-wide-trailing-space) * 1px);
+}
+
+.ui-icon-btn--medium.ui-icon-btn--space-narrow {
+  --ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-medium-icon-button-medium-narrow-leading-space) * 1px);
+  --ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-medium-icon-button-medium-narrow-trailing-space) * 1px);
+}
+
+.ui-icon-btn--medium.ui-icon-btn--space-wide {
+  --ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-medium-icon-button-medium-wide-leading-space) * 1px);
+  --ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-medium-icon-button-medium-wide-trailing-space) * 1px);
+}
+
+.ui-icon-btn--large.ui-icon-btn--space-narrow {
+  --ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-large-icon-button-large-narrow-leading-space) * 1px);
+  --ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-large-icon-button-large-narrow-trailing-space) * 1px);
+}
+
+.ui-icon-btn--large.ui-icon-btn--space-wide {
+  --ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-large-icon-button-large-wide-leading-space) * 1px);
+  --ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-large-icon-button-large-wide-trailing-space) * 1px);
+}
+
+.ui-icon-btn--xlarge.ui-icon-btn--space-narrow {
+  --ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-narrow-leading-space) * 1px);
+  --ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-narrow-trailing-space) * 1px);
+}
+
+.ui-icon-btn--xlarge.ui-icon-btn--space-wide {
+  --ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-wide-leading-space) * 1px);
+  --ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-wide-trailing-space) * 1px);
+}
+
+.ui-icon-btn--shape-round {
+  --ui-icon-btn-radius: calc(var(--icon-buttons-icon-button-enabled-icon-button-container-shape-round, var(--app-icon-buttons-icon-button-enabled-icon-button-container-shape-round)) * 1px);
+}
+
+.ui-icon-btn--shape-square {
+  --ui-icon-btn-radius: calc(var(--icon-buttons-icon-button-enabled-icon-button-container-shape-square, var(--app-icon-buttons-icon-button-enabled-icon-button-container-shape-square)) * 1px);
+}
+
+.ui-icon-btn--toggle-selected.ui-icon-btn--shape-round {
+  --ui-icon-btn-radius: calc(var(--icon-buttons-icon-button-enabled-icon-button-selected-container-shape-round, var(--app-icon-buttons-icon-button-enabled-icon-button-selected-container-shape-round)) * 1px);
+}
+
+.ui-icon-btn--toggle-selected.ui-icon-btn--shape-square {
+  --ui-icon-btn-radius: calc(var(--icon-buttons-icon-button-enabled-icon-button-selected-container-shape-square, var(--app-icon-buttons-icon-button-enabled-icon-button-selected-container-shape-square)) * 1px);
+}
+
+.ui-icon-btn--toggle {
+  --ui-icon-btn-container-color: var(--icon-buttons-icon-button-enabled-icon-button-container-color-toggle-unselected, var(--app-icon-buttons-icon-button-enabled-icon-button-container-color-toggle-unselected, var(--ui-icon-btn-container-color)));
+  --ui-icon-btn-icon-color: var(--icon-buttons-icon-button-enabled-icon-button-icon-color-toggle-unselected, var(--app-icon-buttons-icon-button-enabled-icon-button-icon-color-toggle-unselected, var(--ui-icon-btn-icon-color)));
+  --ui-icon-btn-hover-layer-color: var(--icon-buttons-icon-button-hovered-icon-button-hovered-state-layer-color-toggle-unselected, var(--app-icon-buttons-icon-button-hovered-icon-button-hovered-state-layer-color-toggle-unselected, var(--ui-icon-btn-hover-layer-color)));
+  --ui-icon-btn-focus-layer-color: var(--icon-buttons-icon-button-focused-icon-button-focused-state-layer-color-toggle-unselected, var(--app-icon-buttons-icon-button-focused-icon-button-focused-state-layer-color-toggle-unselected, var(--ui-icon-btn-focus-layer-color)));
+  --ui-icon-btn-pressed-layer-color: var(--icon-buttons-icon-button-pressed-icon-button-pressed-state-layer-color-toggle-unselected, var(--app-icon-buttons-icon-button-pressed-icon-button-pressed-state-layer-color-toggle-unselected, var(--ui-icon-btn-pressed-layer-color)));
+}
+
+.ui-icon-btn--toggle-selected {
+  --ui-icon-btn-container-color: var(--icon-buttons-icon-button-enabled-icon-button-container-color-toggle-selected, var(--app-icon-buttons-icon-button-enabled-icon-button-container-color-toggle-selected, var(--ui-icon-btn-container-color)));
+  --ui-icon-btn-icon-color: var(--icon-buttons-icon-button-enabled-icon-button-icon-color-toggle-selected, var(--app-icon-buttons-icon-button-enabled-icon-button-icon-color-toggle-selected, var(--ui-icon-btn-icon-color)));
+  --ui-icon-btn-hover-layer-color: var(--icon-buttons-icon-button-hovered-icon-button-hovered-state-layer-color-toggle-selected, var(--app-icon-buttons-icon-button-hovered-icon-button-hovered-state-layer-color-toggle-selected, var(--ui-icon-btn-hover-layer-color)));
+  --ui-icon-btn-focus-layer-color: var(--icon-buttons-icon-button-focused-icon-button-focused-state-layer-color-toggle-selected, var(--app-icon-buttons-icon-button-focused-icon-button-focused-state-layer-color-toggle-selected, var(--ui-icon-btn-focus-layer-color)));
+  --ui-icon-btn-pressed-layer-color: var(--icon-buttons-icon-button-pressed-icon-button-pressed-state-layer-color-toggle-selected, var(--app-icon-buttons-icon-button-pressed-icon-button-pressed-state-layer-color-toggle-selected, var(--ui-icon-btn-pressed-layer-color)));
+}
+
+.ui-icon-btn--variant-filled {
+  --ui-icon-btn-container-color: var(--icon-buttons-color-filled-enabled-icon-button-filled-container-color);
+  --ui-icon-btn-icon-color: var(--icon-buttons-color-filled-enabled-icon-button-filled-icon-color);
+  --ui-icon-btn-ripple-boost: 2.8;
+  --ui-icon-btn-ripple-min-opacity: 0.24;
+  --ui-icon-btn-ripple-color: color-mix(
+    in srgb,
+    var(--ui-icon-btn-icon-color) calc(var(--ui-icon-btn-ripple-opacity) * 100%),
+    transparent
+  );
+  --ui-icon-btn-border-width: 0;
+  --ui-icon-btn-border-color: transparent;
+  --ui-icon-btn-hover-layer-color: var(--icon-buttons-color-filled-hovered-icon-button-filled-hovered-state-layer-color);
+  --ui-icon-btn-hover-layer-opacity: calc(var(--icon-buttons-color-filled-hovered-icon-button-filled-hovered-state-layer-opacity) / 100);
+  --ui-icon-btn-focus-layer-color: var(--icon-buttons-color-filled-focused-icon-button-filled-focused-state-layer-color);
+  --ui-icon-btn-focus-layer-opacity: calc(var(--icon-buttons-color-filled-focused-icon-button-filled-focused-state-layer-opacity) / 100);
+  --ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-filled-pressed-icon-button-filled-pressed-state-layer-color);
+  --ui-icon-btn-pressed-layer-opacity: calc(var(--icon-buttons-color-filled-pressed-icon-button-filled-pressed-state-layer-opacity) / 100);
+  --ui-icon-btn-disabled-container-color: var(--icon-buttons-color-filled-disabled-icon-button-filled-disabled-container-color);
+  --ui-icon-btn-disabled-container-opacity: var(--icon-buttons-color-filled-disabled-icon-button-filled-disabled-container-opacity);
+  --ui-icon-btn-disabled-icon-color: var(--icon-buttons-color-filled-disabled-icon-button-filled-disabled-icon-color);
+  --ui-icon-btn-disabled-icon-opacity: var(--icon-buttons-color-filled-disabled-icon-button-filled-disabled-icon-opacity);
+}
+
+.ui-icon-btn--variant-filled.ui-icon-btn--toggle {
+  --ui-icon-btn-container-color: var(--icon-buttons-color-filled-enabled-icon-button-filled-container-color-toggle-unselected);
+  --ui-icon-btn-icon-color: var(--icon-buttons-color-filled-enabled-icon-button-filled-icon-color-toggle-unselected);
+  --ui-icon-btn-hover-layer-color: var(--icon-buttons-color-filled-hovered-icon-button-filled-hovered-state-layer-color-toggle-unselected);
+  --ui-icon-btn-focus-layer-color: var(--icon-buttons-color-filled-focused-icon-button-filled-focused-state-layer-color-toggle-unselected);
+  --ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-filled-pressed-icon-button-filled-pressed-state-layer-color-toggle-unselected);
+}
+
+.ui-icon-btn--variant-filled.ui-icon-btn--toggle-selected {
+  --ui-icon-btn-container-color: var(--icon-buttons-color-filled-enabled-icon-button-filled-container-color-toggle-selected);
+  --ui-icon-btn-icon-color: var(--icon-buttons-color-filled-enabled-icon-button-filled-icon-color-toggle-selected);
+  --ui-icon-btn-hover-layer-color: var(--icon-buttons-color-filled-hovered-icon-button-filled-hovered-state-layer-color-toggle-selected);
+  --ui-icon-btn-focus-layer-color: var(--icon-buttons-color-filled-focused-icon-button-filled-focused-state-layer-color-toggle-selected);
+  --ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-filled-pressed-icon-button-filled-pressed-state-layer-color-toggle-selected);
+}
+
+.ui-icon-btn--variant-tonal {
+  --ui-icon-btn-container-color: var(--icon-buttons-color-tonal-enabled-icon-button-tonal-container-color);
+  --ui-icon-btn-icon-color: var(--icon-buttons-color-tonal-enabled-icon-button-tonal-icon-color);
+  --ui-icon-btn-border-width: 0;
+  --ui-icon-btn-border-color: transparent;
+  --ui-icon-btn-hover-layer-color: var(--icon-buttons-color-tonal-hovered-icon-button-tonal-hovered-state-layer-color);
+  --ui-icon-btn-hover-layer-opacity: calc(var(--icon-buttons-color-tonal-hovered-icon-button-tonal-hovered-state-layer-opacity) / 100);
+  --ui-icon-btn-focus-layer-color: var(--icon-buttons-color-tonal-focused-icon-button-tonal-focused-state-layer-color);
+  --ui-icon-btn-focus-layer-opacity: calc(var(--icon-buttons-color-tonal-focused-icon-button-tonal-focused-state-layer-opacity) / 100);
+  --ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-tonal-pressed-icon-button-tonal-pressed-state-layer-color);
+  --ui-icon-btn-pressed-layer-opacity: calc(var(--icon-buttons-color-tonal-pressed-icon-button-tonal-pressed-state-layer-opacity) / 100);
+  --ui-icon-btn-disabled-container-color: var(--icon-buttons-color-tonal-disabled-icon-button-tonal-disabled-container-color);
+  --ui-icon-btn-disabled-container-opacity: var(--icon-buttons-color-tonal-disabled-icon-button-tonal-disabled-container-opacity);
+  --ui-icon-btn-disabled-icon-color: var(--icon-buttons-color-tonal-disabled-icon-button-tonal-disabled-icon-color);
+  --ui-icon-btn-disabled-icon-opacity: var(--icon-buttons-color-tonal-disabled-icon-button-tonal-disabled-icon-opacity);
+}
+
+.ui-icon-btn--variant-tonal.ui-icon-btn--shape-round {
+  --ui-icon-btn-focus-layer-color: var(--icon-buttons-color-tonal-focused-icon-button-tonal-focused-state-layer-color);
+}
+
+.ui-icon-btn--variant-tonal.ui-icon-btn--toggle {
+  --ui-icon-btn-container-color: var(--icon-buttons-color-tonal-enabled-icon-button-tonal-container-color-toggle-unselected);
+  --ui-icon-btn-icon-color: var(--icon-buttons-color-tonal-enabled-icon-button-tonal-icon-color-toggle-unselected);
+  --ui-icon-btn-hover-layer-color: var(--icon-buttons-color-tonal-hovered-icon-button-tonal-hovered-state-layer-color);
+  --ui-icon-btn-focus-layer-color: var(--icon-buttons-color-tonal-focused-icon-button-tonal-focused-state-layer-color);
+  --ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-tonal-pressed-icon-button-tonal-pressed-state-layer-color-toggle-unselected);
+}
+
+.ui-icon-btn--variant-tonal.ui-icon-btn--toggle-selected {
+  --ui-icon-btn-container-color: var(--icon-buttons-color-tonal-enabled-icon-button-tonal-container-color-toggle-selected);
+  --ui-icon-btn-icon-color: var(--icon-buttons-color-tonal-enabled-icon-button-tonal-icon-color-toggle-selected);
+  --ui-icon-btn-hover-layer-color: var(--icon-buttons-color-tonal-hovered-icon-button-tonal-hovered-state-layer-color-toggle-selected);
+  --ui-icon-btn-focus-layer-color: var(--icon-buttons-color-tonal-focused-icon-button-tonal-focused-state-layer-color-toggle-selected);
+  --ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-tonal-pressed-icon-button-tonal-pressed-state-layer-color-toggle-selected);
+}
+
+.ui-icon-btn--variant-outlined {
+  --ui-icon-btn-container-color: transparent;
+  --ui-icon-btn-icon-color: var(--icon-buttons-color-outlined-enabled-icon-button-outlined-icon-color);
+  --ui-icon-btn-border-width: var(--ui-icon-btn-outline-width);
+  --ui-icon-btn-border-color: var(--icon-buttons-color-outlined-enabled-icon-button-outlined-color);
+  --ui-icon-btn-hover-layer-color: #434749;
+  --ui-icon-btn-hover-layer-opacity: 0.08;
+  --ui-icon-btn-focus-layer-color: #434749;
+  --ui-icon-btn-focus-layer-opacity: 0.10;
+  --ui-icon-btn-pressed-layer-color: #434749;
+  --ui-icon-btn-pressed-layer-opacity: 0.08;
+  --ui-icon-btn-disabled-border-color: var(--icon-buttons-color-outlined-disabled-icon-button-outlined-disabled-outline-color);
+  --ui-icon-btn-disabled-border-opacity: 100;
+  --ui-icon-btn-disabled-container-color: var(--icon-buttons-color-outlined-disabled-icon-button-outlined-disabled-container-color-selected, transparent);
+  --ui-icon-btn-disabled-container-opacity: var(--icon-buttons-color-outlined-disabled-icon-button-outlined-disabled-container-opacity-selected, 0);
+  --ui-icon-btn-disabled-icon-color: var(--icon-buttons-color-outlined-disabled-icon-button-outlined-disabled-icon-color);
+  --ui-icon-btn-disabled-icon-opacity: var(--icon-buttons-color-outlined-disabled-icon-button-outlined-disabled-icon-opacity);
+}
+
+.ui-icon-btn--variant-outlined.ui-icon-btn--toggle {
+  --ui-icon-btn-icon-color: var(--icon-buttons-color-outlined-enabled-icon-button-outlined-icon-color-toggle-unselected);
+  --ui-icon-btn-hover-layer-color: #434749;
+  --ui-icon-btn-focus-layer-color: #434749;
+  --ui-icon-btn-pressed-layer-color: #434749;
+  --ui-icon-btn-hover-layer-opacity: 0.08;
+  --ui-icon-btn-focus-layer-opacity: 0.10;
+  --ui-icon-btn-pressed-layer-opacity: 0.08;
+}
+
+.ui-icon-btn--variant-outlined.ui-icon-btn--toggle-selected {
+  --ui-icon-btn-container-color: var(--icon-buttons-color-outlined-enabled-icon-button-container-color-toggle-selected, transparent);
+  --ui-icon-btn-icon-color: var(--icon-buttons-color-outlined-enabled-icon-button-outlined-icon-color-toggle-selected);
+  --ui-icon-btn-hover-layer-color: #434749;
+  --ui-icon-btn-focus-layer-color: #434749;
+  --ui-icon-btn-pressed-layer-color: #434749;
+  --ui-icon-btn-hover-layer-opacity: 0.08;
+  --ui-icon-btn-focus-layer-opacity: 0.10;
+  --ui-icon-btn-pressed-layer-opacity: 0.08;
+}
+
+.ui-icon-btn--variant-standard {
+  --ui-icon-btn-container-color: transparent;
+  --ui-icon-btn-icon-color: var(--icon-buttons-color-standard-enabled-icon-button-icon-color);
+  --ui-icon-btn-border-width: 0;
+  --ui-icon-btn-border-color: transparent;
+  /* Color ya incluye alpha (ej. rgba(67,71,73,0.08)); opacity 1 para no duplicar */
+  --ui-icon-btn-hover-layer-color: var(--icon-buttons-color-standard-hovered-icon-button-hovered-state-layer-color, var(--app-icon-buttons-color-standard-hovered-icon-button-hovered-state-layer-color, rgba(67, 71, 73, 0.08)));
+  --ui-icon-btn-hover-layer-opacity: 1;
+  --ui-icon-btn-focus-layer-color: var(--icon-buttons-color-standard-focused-icon-button-focused-state-layer-color, var(--app-icon-buttons-color-standard-focused-icon-button-focused-state-layer-color, rgba(67, 71, 73, 0.08)));
+  --ui-icon-btn-focus-layer-opacity: 1;
+  --ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-standard-pressed-icon-button-pressed-state-layer-color, var(--app-icon-buttons-color-standard-pressed-icon-button-pressed-state-layer-color, rgba(67, 71, 73, 0.12)));
+  --ui-icon-btn-pressed-layer-opacity: 1;
+  --ui-icon-btn-disabled-icon-color: var(--icon-buttons-color-standard-disabled-icon-button-disabled-icon-color);
+  --ui-icon-btn-disabled-icon-opacity: var(--icon-buttons-color-standard-disabled-icon-button-disabled-opacity);
+  --ui-icon-btn-disabled-opacity: 1;
+}
+
+.ui-icon-btn--variant-standard.ui-icon-btn--toggle {
+  --ui-icon-btn-icon-color: var(--icon-buttons-color-standard-enabled-icon-button-icon-color-toggle-unselected);
+  --ui-icon-btn-hover-layer-color: var(--icon-buttons-color-standard-hovered-icon-button-hovered-state-layer-color-toggle-unselected);
+  --ui-icon-btn-focus-layer-color: var(--icon-buttons-color-standard-focused-icon-button-focused-state-layer-color-toggle-unselected);
+  --ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-standard-pressed-icon-button-pressed-state-layer-color-toggle-unselected);
+}
+
+.ui-icon-btn--variant-standard.ui-icon-btn--toggle-selected {
+  --ui-icon-btn-icon-color: var(--icon-buttons-color-standard-enabled-icon-button-icon-color-toggle-selected);
+  --ui-icon-btn-hover-layer-color: var(--icon-buttons-color-standard-hovered-icon-button-hovered-state-layer-color-toggle-selected);
+  --ui-icon-btn-focus-layer-color: var(--icon-buttons-color-standard-focused-icon-button-focused-state-layer-color-toggle-selected);
+  --ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-standard-pressed-icon-button-pressed-state-layer-color-toggle-selected);
+}
+
+.ui-icon-btn--variant-action {
+  --ui-icon-btn-container-color: transparent;
+  --ui-icon-btn-icon-color: var(--icon-buttons-color-action-enabled-icon-button-icon-color);
+  --ui-icon-btn-border-width: 0;
+  --ui-icon-btn-border-color: transparent;
+  --ui-icon-btn-hover-layer-color: var(--icon-buttons-color-action-hovered-icon-button-hovered-state-layer-color, var(--app-icon-buttons-color-action-hovered-icon-button-hovered-state-layer-color, transparent));
+  --ui-icon-btn-focus-layer-color: var(--icon-buttons-color-action-focused-icon-button-focused-state-layer-color, var(--app-icon-buttons-color-action-focused-icon-button-focused-state-layer-color, transparent));
+  --ui-icon-btn-focus-layer-opacity: calc(var(--icon-buttons-color-action-focused-icon-button-focused-state-layer-opacity, var(--app-icon-buttons-color-action-focused-icon-button-focused-state-layer-opacity, 0)) / 100);
+  --ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-action-pressed-icon-button-pressed-state-layer-color, var(--app-icon-buttons-color-action-pressed-icon-button-pressed-state-layer-color, transparent));
+  --ui-icon-btn-disabled-icon-color: var(--icon-buttons-color-action-disabled-icon-button-disabled-icon-color);
+  --ui-icon-btn-disabled-icon-opacity: var(--icon-buttons-color-action-disabled-icon-button-disabled-opacity);
+  --ui-icon-btn-disabled-opacity: 1;
+}
+
+.ui-icon-btn--variant-action.ui-icon-btn--toggle,
+.ui-icon-btn--variant-action.ui-icon-btn--toggle-selected {
+  --ui-icon-btn-hover-layer-color: var(--icon-buttons-color-action-hovered-icon-button-hovered-state-layer-color, var(--app-icon-buttons-color-action-hovered-icon-button-hovered-state-layer-color, transparent));
+  --ui-icon-btn-hover-layer-opacity: calc((var(--icon-buttons-color-action-hovered-icon-button-hovered-state-layer-opacity, var(--app-icon-buttons-color-action-hovered-icon-button-hovered-state-layer-opacity, 0)) * 3) / 100);
+  --ui-icon-btn-focus-layer-color: var(--icon-buttons-color-action-focused-icon-button-focused-state-layer-color, var(--app-icon-buttons-color-action-focused-icon-button-focused-state-layer-color, transparent));
+  --ui-icon-btn-focus-layer-opacity: calc(var(--icon-buttons-color-action-focused-icon-button-focused-state-layer-opacity, var(--app-icon-buttons-color-action-focused-icon-button-focused-state-layer-opacity, 0)) / 100);
+  --ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-action-pressed-icon-button-pressed-state-layer-color, var(--app-icon-buttons-color-action-pressed-icon-button-pressed-state-layer-color, transparent));
+  --ui-icon-btn-pressed-layer-opacity: calc(var(--icon-buttons-color-action-pressed-icon-button-pressed-state-layer-opacity, var(--app-icon-buttons-color-action-pressed-icon-button-pressed-state-layer-opacity, 0)) / 100);
+}

package/src/lib/components/icon-button/icon-button.html

@@ -0,0 +1,15 @@
+<button
+  class="ui-icon-btn"
+  [attr.type]="type()"
+  [disabled]="disabled()"
+  matRipple
+  [matRippleDisabled]="disabled()"
+  [matRippleColor]="'var(--ui-icon-btn-ripple-color)'"
+  [matRippleCentered]="true"
+  [ngClass]="classes()"
+  [attr.aria-pressed]="toggle() ? selected() : null"
+>
+  <span class="ui-icon-btn__content">
+    <ng-content></ng-content>
+  </span>
+</button>

package/src/lib/components/icon-button/icon-button.ts

@@ -0,0 +1,49 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { MatRippleModule } from '@angular/material/core';
+
+export type LibIconButtonSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export type LibIconButtonVariant = 'filled' | 'tonal' | 'outlined' | 'standard' | 'action';
+export type LibIconButtonShape = 'round' | 'square';
+/** Espacio horizontal (padding) según Figma: narrow, default, wide. */
+export type LibIconButtonSpace = 'narrow' | 'default' | 'wide';
+
+@Component({
+  selector: 'lib-icon-button',
+  standalone: true,
+  imports: [NgClass, MatRippleModule],
+  templateUrl: './icon-button.html',
+  styleUrl: './icon-button.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LibIconButtonComponent {
+  size = input<LibIconButtonSize>('small');
+  variant = input<LibIconButtonVariant>('standard');
+  shape = input<LibIconButtonShape>('round');
+  /** Variante de espacio (padding inline) desde Figma: narrow, default, wide. */
+  space = input<LibIconButtonSpace>('default');
+  disabled = input(false);
+  type = input<'button' | 'submit' | 'reset'>('button');
+  toggle = input(false);
+  selected = input(false);
+
+  readonly classes = computed(() => ({
+    'ui-icon-btn--xsmall': this.size() === 'xsmall',
+    'ui-icon-btn--small': this.size() === 'small',
+    'ui-icon-btn--medium': this.size() === 'medium',
+    'ui-icon-btn--large': this.size() === 'large',
+    'ui-icon-btn--xlarge': this.size() === 'xlarge',
+    'ui-icon-btn--shape-round': this.shape() === 'round',
+    'ui-icon-btn--shape-square': this.shape() === 'square',
+    'ui-icon-btn--space-narrow': this.space() === 'narrow',
+    'ui-icon-btn--space-default': this.space() === 'default',
+    'ui-icon-btn--space-wide': this.space() === 'wide',
+    'ui-icon-btn--variant-filled': this.variant() === 'filled',
+    'ui-icon-btn--variant-tonal': this.variant() === 'tonal',
+    'ui-icon-btn--variant-outlined': this.variant() === 'outlined',
+    'ui-icon-btn--variant-standard': this.variant() === 'standard',
+    'ui-icon-btn--variant-action': this.variant() === 'action',
+    'ui-icon-btn--toggle': this.toggle(),
+    'ui-icon-btn--toggle-selected': this.toggle() && this.selected(),
+  }));
+}