crdx-components 1.0.0 → 2.0.0

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

@@ -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

@@ -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

@@ -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(),
-  }));
-}

package/src/lib/components/list-item/list-item.css

@@ -1,122 +0,0 @@
-/* Host: flex column para que el contenedor interno ocupe toda la altura y no quede hueco antes del padding. */
-:host {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-height: 0;
-}
-
-.ui-list-item__container {
-  display: flex;
-  flex-direction: column;
-  /* Ocupa toda la altura del host para no dejar espacio vacío antes del padding */
-  flex: 1 1 0;
-  min-height: 0;
-}
-
-.ui-list-item__header {
-  padding-bottom: 0.5rem;
-}
-
-/* Quitar padding del MDC list item; el padding lo define el diseño Figma en .ui-list-item. */
-:host ::ng-deep .ui-list-option.mdc-list-item {
-  padding: 0;
-  min-height: calc(var(--lists-wip-common-typography-one-line-list-item-container-height, 56) * 1px);
-  background-color: var(--lists-wip-common-color-enabled-list-list-item-container-color,
-      var(--app-pallete-scheme-surface-surface-container-lowest, #FFFFFF));
-}
-
-/* Layout interno del list-item según Figma (7878:52476, state-layer): gap 16px, padding 16px horizontal, 8px vertical. */
-.ui-list-item {
-  display: flex;
-  align-items: center;
-  padding: 8px 16px;
-  min-height: calc(var(--lists-wip-common-typography-one-line-list-item-container-height, 56) * 1px);
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-/* Bordes entre items según Figma (List 7878:52476, Horizontal/Full-width divider).
-   Se aplica al contenedor del item para línea full-width entre cada elemento. */
-:host ::ng-deep mat-list .ui-list-option.ui-list-item--with-divider {
-  border-bottom: calc(var(--divider-enabled-container-divider-thickness, 1) * 1px) solid
-    var(--divider-enabled-container-divider-color, #c3c7c9);
-}
-
-/* Sin borde después del último item (diseño Figma). */
-:host ::ng-deep mat-list .ui-list-option.ui-list-item--with-divider:last-child {
-  border-bottom: none;
-}
-
-.ui-list-item__content {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-height: 0;
-  flex: 1;
-  min-width: 0;
-}
-
-/* Tipografía del label según __app-tokens (lists-wip + date-pickers-docked menu list item) */
-.ui-list-item__label {
-  color: var(--lists-wip-common-color-enabled-list-list-item-label-text-color, #181c1e);
-  font-family: var(--date-pickers-docked-enabled-label-text-menu-list-item-label-text-font, Heebo), sans-serif;
-  font-size: calc(var(--date-pickers-docked-enabled-label-text-menu-list-item-label-text-size, 16) * 1px);
-  font-style: normal;
-  font-weight: var(--date-pickers-docked-enabled-label-text-menu-list-item-label-text-weight, 400);
-  line-height: calc(var(--date-pickers-docked-enabled-label-text-menu-list-item-label-text-line-height, 24) * 1px);
-  letter-spacing: calc(var(--date-pickers-docked-enabled-label-text-menu-list-item-label-text-tracking, 0.5) * 1px);
-}
-
-.ui-list-item__description {
-  line-height: 1.25;
-}
-
-/* Estilos compartidos para checkbox (leading y trailing) — inlineados desde el placeholder @extend */
-.ui-list-item__leading--checkbox {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  align-self: center;
-}
-
-.ui-list-item__leading--checkbox .mat-mdc-checkbox {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.ui-list-item__leading--checkbox .mat-mdc-checkbox .mdc-checkbox__ripple,
-.ui-list-item__leading--checkbox .mat-mdc-checkbox .mdc-checkbox__state-layer {
-  left: 50% !important;
-  top: 50% !important;
-  right: auto !important;
-  bottom: auto !important;
-  transform: translate(-50%, -50%) !important;
-}
-
-.ui-list-item__trailing--checkbox {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  align-self: center;
-  margin-left: auto;
-}
-
-.ui-list-item__trailing--checkbox .mat-mdc-checkbox {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.ui-list-item__trailing--checkbox .mat-mdc-checkbox .mdc-checkbox__ripple,
-.ui-list-item__trailing--checkbox .mat-mdc-checkbox .mdc-checkbox__state-layer {
-  left: 50% !important;
-  top: 50% !important;
-  right: auto !important;
-  bottom: auto !important;
-  transform: translate(-50%, -50%) !important;
-}