npm - crdx-components - Versions diffs - 1.0.0 → 1.0.1 - Mend

crdx-components 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (99) hide show

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

@@ -1,101 +0,0 @@
-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 DELETED Viewed

@@ -1,445 +0,0 @@
-/* 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 DELETED Viewed

@@ -1,15 +0,0 @@
-<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 DELETED Viewed

@@ -1,49 +0,0 @@
-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(),
-  }));
-}