crdx-components 1.0.0

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

@@ -0,0 +1,371 @@
+.lib-mat-btn {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  box-sizing: border-box !important;
+  overflow: hidden !important;
+}
+
+.lib-mat-btn ::ng-deep .mdc-button__label {
+  overflow: visible !important;
+  position: static !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: var(--lib-mat-btn-gap) !important;
+}
+
+.lib-mat-btn ::ng-deep .mdc-button__label > .mat-icon {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  align-self: center !important;
+  margin: 0 !important;
+  line-height: 1 !important;
+  vertical-align: middle !important;
+}
+
+.lib-mat-btn ::ng-deep .mdc-button__label > span {
+  display: inline-flex !important;
+  align-items: center !important;
+  line-height: var(--lib-mat-btn-line-height) !important;
+  vertical-align: middle !important;
+}
+
+.lib-mat-btn:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 calc(var(--buttons-wip-button-enabled-button-focus-ring-outline-offset, 2) * 1px) var(--buttons-wip-button-enabled-button-focus-ring-indicator-color, #5b5f61),
+    0 0 0 calc((var(--buttons-wip-button-enabled-button-focus-ring-indicator-thickness, 3) + var(--buttons-wip-button-enabled-button-focus-ring-outline-offset, 2)) * 1px) var(--buttons-wip-button-enabled-button-focus-ring-indicator-color, #5b5f61);
+}
+
+.lib-mat-btn.lib-mat-btn--pressed:not([disabled]) {
+  border-radius: calc(var(--lib-mat-btn-pressed-radius, var(--buttons-wip-size-medium-button-medium-shape-pressed-morph, 8)) * 1px);
+}
+
+.lib-mat-btn.lib-mat-btn--debug-padding {
+  box-shadow:
+    inset var(--lib-mat-btn-padding-x) 0 0 0 rgba(255, 0, 0, 0.6),
+    inset calc(100% - var(--lib-mat-btn-padding-x-right) - 2px) 0 0 0 rgba(0, 100, 255, 0.6);
+}
+
+.lib-mat-btn__content {
+  position: relative;
+  z-index: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--lib-mat-btn-gap);
+}
+
+.lib-mat-btn--align-start .lib-mat-btn__content,
+.lib-mat-btn--align-center .lib-mat-btn__content,
+.lib-mat-btn--align-end .lib-mat-btn__content {
+  width: 100%;
+}
+
+.lib-mat-btn--align-start .lib-mat-btn__content {
+  justify-content: flex-start;
+}
+
+.lib-mat-btn--align-center .lib-mat-btn__content {
+  justify-content: center;
+}
+
+.lib-mat-btn--align-end .lib-mat-btn__content {
+  justify-content: flex-end;
+}
+
+:host .lib-mat-btn--align-start .mdc-button__label,
+:host ::ng-deep .lib-mat-btn--align-start .mdc-button__label {
+  width: 100% !important;
+  justify-content: flex-start !important;
+}
+
+:host .lib-mat-btn--align-center .mdc-button__label,
+:host ::ng-deep .lib-mat-btn--align-center .mdc-button__label {
+  width: 100% !important;
+  justify-content: center !important;
+}
+
+:host .lib-mat-btn--align-end .mdc-button__label,
+:host ::ng-deep .lib-mat-btn--align-end .mdc-button__label {
+  width: 100% !important;
+  justify-content: flex-end !important;
+}
+
+/* Variables base (medium) */
+.lib-mat-btn {
+  --lib-mat-btn-height: calc(var(--buttons-wip-size-medium-button-medium-container-height) * 1px);
+  --lib-mat-btn-padding-x: calc(var(--buttons-wip-size-medium-button-medium-leading-space) * 1px);
+  --lib-mat-btn-padding-x-right: calc(var(--buttons-wip-size-medium-button-medium-leading-space) * 1px);
+  --lib-mat-btn-gap: calc(var(--buttons-wip-size-medium-button-medium-between-icon-label-space) * 1px);
+  --lib-mat-btn-radius-round: calc(var(--buttons-wip-size-medium-button-medium-shape-round, 1000) * 1px);
+  --lib-mat-btn-radius-square: calc(var(--buttons-wip-size-medium-button-medium-shape-square, 12) * 1px);
+  --lib-mat-btn-radius: var(--lib-mat-btn-radius-round);
+  --lib-mat-btn-font-size: calc(var(--buttons-wip-size-medium-button-medium-label-text-size) * 1px);
+  --lib-mat-btn-line-height: calc(var(--buttons-wip-size-medium-button-medium-label-text-line-height) * 1px);
+  --lib-mat-btn-tracking: calc(var(--buttons-wip-size-medium-button-medium-label-text-tracking) * 1px);
+  --lib-mat-btn-icon-size: calc(var(--buttons-wip-size-medium-button-medium-icon-size) * 1px);
+
+  min-height: var(--lib-mat-btn-height);
+  height: var(--lib-mat-btn-height);
+  padding-left: var(--lib-mat-btn-padding-x) !important;
+  padding-right: var(--lib-mat-btn-padding-x) !important;
+  color: var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff);
+  font-family: var(--buttons-wip-size-medium-button-medium-label-text-font, Heebo);
+  font-size: var(--lib-mat-btn-font-size);
+  font-style: normal;
+  font-weight: var(--buttons-wip-size-medium-button-medium-label-text-weight, 500);
+  line-height: var(--lib-mat-btn-line-height);
+  letter-spacing: var(--lib-mat-btn-tracking);
+  border-radius: var(--lib-mat-btn-radius);
+}
+
+.lib-mat-btn--variant-outlined {
+  color: var(--buttons-wip-color-outlined-enabled-button-outlined-label-color, #434749) !important;
+}
+
+.lib-mat-btn--variant-outlined:focus-visible {
+  color: var(--buttons-wip-color-outlined-focused-button-outlined-focused-label-color, #434749) !important;
+}
+
+.lib-mat-btn--variant-outlined .lib-mat-btn__content,
+.lib-mat-btn--variant-outlined .mdc-button__label {
+  color: inherit !important;
+}
+
+.lib-mat-btn--variant-tonal {
+  background-color: var(--buttons-wip-color-tonal-enabled-button-tonal-container-color, #e0e3e5) !important;
+  color: var(--buttons-wip-color-tonal-enabled-button-tonal-label-color, #434749) !important;
+  --mat-button-tonal-ripple-color: var(--buttons-wip-color-tonal-pressed-button-tonal-pressed-ripple-color, rgba(67, 71, 73, 0.1));
+}
+
+:host ::ng-deep .lib-mat-btn--variant-tonal:hover:not([disabled]) .mat-mdc-button-persistent-ripple::before {
+  background-color: var(--buttons-wip-color-tonal-hovered-button-tonal-hovered-container-state-layer-color, rgba(67, 71, 73, 0.08)) !important;
+  opacity: 1 !important;
+}
+
+:host ::ng-deep .lib-mat-btn--variant-tonal.cdk-program-focused .mat-mdc-button-persistent-ripple::before,
+:host ::ng-deep .lib-mat-btn--variant-tonal.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before {
+  background-color: var(--buttons-wip-color-tonal-focused-button-tonal-focused-container-state-layer-color, rgba(67, 71, 73, 0.1)) !important;
+  opacity: 1 !important;
+}
+
+:host ::ng-deep .lib-mat-btn--variant-tonal:active:not([disabled]) .mat-mdc-button-persistent-ripple::before {
+  background-color: var(--buttons-wip-color-tonal-pressed-button-tonal-pressed-container-state-layer-color, rgba(67, 71, 73, 0.1)) !important;
+  opacity: 1 !important;
+}
+
+:host ::ng-deep .lib-mat-btn--variant-tonal .mat-ripple-element {
+  background-color: var(--buttons-wip-color-tonal-pressed-button-tonal-pressed-ripple-color, rgba(67, 71, 73, 0.1)) !important;
+}
+
+.lib-mat-btn--full {
+  width: 100%;
+}
+
+/* xsmall */
+.lib-mat-btn--xsmall {
+  --lib-mat-btn-height: calc(var(--buttons-wip-size-xsmall-button-xsmall-container-height) * 1px);
+  --lib-mat-btn-padding-x: calc(var(--buttons-wip-size-xsmall-button-xsmall-leading-space) * 1px);
+  --lib-mat-btn-padding-x-right: calc(var(--buttons-wip-size-xsmall-button-xsmall-trailing-space) * 1px);
+  --lib-mat-btn-gap: calc(var(--buttons-wip-size-xsmall-button-xsmall-between-icon-label-space) * 1px);
+  --lib-mat-btn-radius-round: calc(var(--buttons-wip-size-xsmall-button-xsmall-shape-round, 1000) * 1px);
+  --lib-mat-btn-radius-square: calc(var(--buttons-wip-size-xsmall-button-xsmall-shape-square, 8) * 1px);
+  --lib-mat-btn-radius: var(--lib-mat-btn-radius-round);
+  --lib-mat-btn-pressed-radius: var(--buttons-wip-size-xsmall-button-xsmall-shape-pressed-morph);
+  --lib-mat-btn-font-size: calc(var(--buttons-wip-size-xsmall-button-xsmall-label-text-size) * 1px);
+  --lib-mat-btn-line-height: calc(var(--buttons-wip-size-xsmall-button-xsmall-label-text-line-height) * 1px);
+  --lib-mat-btn-tracking: calc(var(--buttons-wip-size-xsmall-button-xsmall-label-text-tracking) * 1px);
+  --lib-mat-btn-icon-size: calc(var(--buttons-wip-size-xsmall-button-xsmall-icon-size) * 1px);
+
+  min-height: var(--lib-mat-btn-height);
+  height: var(--lib-mat-btn-height);
+  padding-left: var(--lib-mat-btn-padding-x) !important;
+  padding-right: var(--lib-mat-btn-padding-x-right) !important;
+  color: var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff);
+  font-family: var(--buttons-wip-size-xsmall-button-xsmall-label-text-font, Heebo);
+  font-size: var(--lib-mat-btn-font-size);
+  font-style: normal;
+  font-weight: var(--buttons-wip-size-xsmall-button-xsmall-label-text-weight, 500);
+  line-height: var(--lib-mat-btn-line-height);
+  letter-spacing: var(--lib-mat-btn-tracking);
+  border-radius: var(--lib-mat-btn-radius);
+}
+
+.lib-mat-btn--xsmall .mat-icon,
+.lib-mat-btn--xsmall .mat-mdc-button-touch-target {
+  width: var(--lib-mat-btn-icon-size);
+  height: var(--lib-mat-btn-icon-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* small */
+.lib-mat-btn--small {
+  --lib-mat-btn-height: calc(var(--buttons-wip-size-small-button-small-container-height) * 1px);
+  --lib-mat-btn-padding-x: calc(var(--buttons-wip-size-small-button-small-leading-space) * 1px);
+  --lib-mat-btn-padding-x-right: calc(var(--buttons-wip-size-small-button-small-trailing-space) * 1px);
+  --lib-mat-btn-gap: calc(var(--buttons-wip-size-small-button-small-between-icon-label-space) * 1px);
+  --lib-mat-btn-radius-round: calc(var(--buttons-wip-size-small-button-small-shape-round, 1000) * 1px);
+  --lib-mat-btn-radius-square: calc(var(--buttons-wip-size-small-button-small-shape-square, 8) * 1px);
+  --lib-mat-btn-radius: var(--lib-mat-btn-radius-round);
+  --lib-mat-btn-pressed-radius: var(--buttons-wip-size-small-button-small-shape-pressed-morph);
+  --lib-mat-btn-font-size: calc(var(--buttons-wip-size-small-button-small-label-text-size) * 1px);
+  --lib-mat-btn-line-height: calc(var(--buttons-wip-size-small-button-small-label-text-line-height) * 1px);
+  --lib-mat-btn-tracking: calc(var(--buttons-wip-size-small-button-small-label-text-tracking) * 1px);
+  --lib-mat-btn-icon-size: calc(var(--buttons-wip-size-small-button-small-icon-size) * 1px);
+
+  min-height: var(--lib-mat-btn-height);
+  height: var(--lib-mat-btn-height);
+  padding-left: var(--lib-mat-btn-padding-x) !important;
+  padding-right: var(--lib-mat-btn-padding-x-right) !important;
+  color: var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff);
+  font-family: var(--buttons-wip-size-small-button-small-label-text-font, Heebo);
+  font-size: var(--lib-mat-btn-font-size);
+  font-style: normal;
+  font-weight: var(--buttons-wip-size-small-button-small-label-text-weight, 500) !important;
+  line-height: var(--lib-mat-btn-line-height);
+  letter-spacing: var(--lib-mat-btn-tracking);
+  border-radius: var(--lib-mat-btn-radius);
+}
+
+.lib-mat-btn--small .mat-icon,
+.lib-mat-btn--small .mat-mdc-button-touch-target {
+  width: var(--lib-mat-btn-icon-size);
+  height: var(--lib-mat-btn-icon-size);
+  font-size: var(--lib-mat-btn-icon-size);
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* medium */
+.lib-mat-btn--medium {
+  --lib-mat-btn-height: calc(var(--buttons-wip-size-medium-button-medium-container-height) * 1px);
+  --lib-mat-btn-padding-x: calc(var(--buttons-wip-size-medium-button-medium-leading-space) * 1px);
+  --lib-mat-btn-gap: calc(var(--buttons-wip-size-medium-button-medium-between-icon-label-space) * 1px);
+  --lib-mat-btn-radius-round: calc(var(--buttons-wip-size-medium-button-medium-shape-round, 1000) * 1px);
+  --lib-mat-btn-radius-square: calc(var(--buttons-wip-size-medium-button-medium-shape-square, 12) * 1px);
+  --lib-mat-btn-radius: var(--lib-mat-btn-radius-round);
+  --lib-mat-btn-pressed-radius: var(--buttons-wip-size-medium-button-medium-shape-pressed-morph);
+  --lib-mat-btn-font-size: calc(var(--buttons-wip-size-medium-button-medium-label-text-size) * 1px);
+  --lib-mat-btn-line-height: calc(var(--buttons-wip-size-medium-button-medium-label-text-line-height) * 1px);
+  --lib-mat-btn-tracking: calc(var(--buttons-wip-size-medium-button-medium-label-text-tracking) * 1px);
+  --lib-mat-btn-icon-size: calc(var(--buttons-wip-size-medium-button-medium-icon-size) * 1px);
+
+  min-height: var(--lib-mat-btn-height);
+  height: var(--lib-mat-btn-height);
+  padding-left: var(--lib-mat-btn-padding-x) !important;
+  padding-right: var(--lib-mat-btn-padding-x-right) !important;
+  color: var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff);
+  font-family: var(--buttons-wip-size-medium-button-medium-label-text-font, Heebo);
+  font-size: var(--lib-mat-btn-font-size);
+  font-style: normal;
+  font-weight: var(--buttons-wip-size-medium-button-medium-label-text-weight, 500) !important;
+  line-height: var(--lib-mat-btn-line-height);
+  letter-spacing: var(--lib-mat-btn-tracking);
+  border-radius: var(--lib-mat-btn-radius);
+}
+
+.lib-mat-btn--medium .mat-icon,
+.lib-mat-btn--medium .mat-mdc-button-touch-target {
+  width: var(--lib-mat-btn-icon-size);
+  height: var(--lib-mat-btn-icon-size);
+  font-size: var(--lib-mat-btn-icon-size);
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* large */
+.lib-mat-btn--large {
+  --lib-mat-btn-height: calc(var(--buttons-wip-size-large-button-large-container-height) * 1px);
+  --lib-mat-btn-padding-x: calc(var(--buttons-wip-size-large-button-large-leading-space) * 1px);
+  --lib-mat-btn-padding-x-right: calc(var(--buttons-wip-size-large-button-large-trailing-space) * 1px);
+  --lib-mat-btn-gap: calc(var(--buttons-wip-size-large-button-large-between-icon-label-space) * 1px);
+  --lib-mat-btn-radius-round: calc(var(--buttons-wip-size-large-button-large-shape-round, 1000) * 1px);
+  --lib-mat-btn-radius-square: calc(var(--buttons-wip-size-large-button-large-shape-square, 16) * 1px);
+  --lib-mat-btn-radius: var(--lib-mat-btn-radius-round);
+  --lib-mat-btn-pressed-radius: var(--buttons-wip-size-large-button-large-shape-pressed-morph);
+  --lib-mat-btn-font-size: calc(var(--buttons-wip-size-large-button-large-label-text-size) * 1px);
+  --lib-mat-btn-line-height: calc(var(--buttons-wip-size-large-button-large-label-text-line-height) * 1px);
+  --lib-mat-btn-tracking: calc(var(--buttons-wip-size-large-button-large-label-text-tracking) * 1px);
+  --lib-mat-btn-icon-size: calc(var(--buttons-wip-size-large-button-large-icon-size) * 1px);
+
+  min-height: var(--lib-mat-btn-height);
+  height: var(--lib-mat-btn-height);
+  padding-left: var(--lib-mat-btn-padding-x) !important;
+  padding-right: var(--lib-mat-btn-padding-x-right) !important;
+  color: var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff);
+  font-family: var(--buttons-wip-size-large-button-large-label-text-font, Heebo);
+  font-size: var(--lib-mat-btn-font-size);
+  font-style: normal;
+  font-weight: var(--buttons-wip-size-large-button-large-label-text-weight, 400) !important;
+  line-height: var(--lib-mat-btn-line-height);
+  letter-spacing: var(--lib-mat-btn-tracking);
+  border-radius: var(--lib-mat-btn-radius);
+}
+
+.lib-mat-btn--large .mat-icon,
+.lib-mat-btn--large .mat-mdc-button-touch-target {
+  width: var(--lib-mat-btn-icon-size);
+  height: var(--lib-mat-btn-icon-size);
+  font-size: var(--lib-mat-btn-icon-size);
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* xlarge */
+.lib-mat-btn--xlarge {
+  --lib-mat-btn-height: calc(var(--buttons-wip-size-xlarge-button-xlarge-container-height) * 1px);
+  --lib-mat-btn-padding-x: calc(var(--buttons-wip-size-xlarge-button-xlarge-leading-space) * 1px);
+  --lib-mat-btn-padding-x-right: calc(var(--buttons-wip-size-xlarge-button-xlarge-trailing-space) * 1px);
+  --lib-mat-btn-gap: calc(var(--buttons-wip-size-xlarge-button-xlarge-between-icon-label-space) * 1px);
+  --lib-mat-btn-radius-round: calc(var(--buttons-wip-size-xlarge-button-xlarge-shape-round, 1000) * 1px);
+  --lib-mat-btn-radius-square: calc(var(--buttons-wip-size-xlarge-button-xlarge-shape-square, 16) * 1px);
+  --lib-mat-btn-radius: var(--lib-mat-btn-radius-round);
+  --lib-mat-btn-pressed-radius: var(--buttons-wip-size-xlarge-button-xlarge-shape-pressed-morph);
+  --lib-mat-btn-font-size: calc(var(--buttons-wip-size-xlarge-button-xlarge-label-text-size) * 1px);
+  --lib-mat-btn-line-height: calc(var(--buttons-wip-size-xlarge-button-xlarge-label-text-line-height) * 1px);
+  --lib-mat-btn-tracking: calc(var(--buttons-wip-size-xlarge-button-xlarge-label-text-tracking) * 1px);
+  --lib-mat-btn-icon-size: calc(var(--buttons-wip-size-xlarge-button-xlarge-icon-size) * 1px);
+
+  min-height: var(--lib-mat-btn-height);
+  height: var(--lib-mat-btn-height);
+  padding-left: var(--lib-mat-btn-padding-x) !important;
+  padding-right: var(--lib-mat-btn-padding-x-right) !important;
+  color: var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff);
+  font-family: var(--buttons-wip-size-xlarge-button-xlarge-label-text-font, Heebo);
+  font-size: var(--lib-mat-btn-font-size);
+  font-style: normal;
+  font-weight: var(--buttons-wip-size-xlarge-button-xlarge-label-text-weight, 400) !important;
+  line-height: var(--lib-mat-btn-line-height);
+  letter-spacing: var(--lib-mat-btn-tracking);
+  border-radius: var(--lib-mat-btn-radius);
+}
+
+.lib-mat-btn--xlarge .mat-icon,
+.lib-mat-btn--xlarge .mat-mdc-button-touch-target {
+  width: var(--lib-mat-btn-icon-size);
+  height: var(--lib-mat-btn-icon-size);
+  font-size: var(--lib-mat-btn-icon-size);
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.lib-mat-btn--shape-round {
+  --lib-mat-btn-radius: var(--lib-mat-btn-radius-round);
+}
+
+.lib-mat-btn--shape-square {
+  --lib-mat-btn-radius: var(--lib-mat-btn-radius-square);
+}

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

@@ -0,0 +1,187 @@
+@switch (variant()) {
+  @case ('filled') {
+    <button
+      mat-flat-button
+      class="lib-mat-btn"
+      [attr.type]="type()"
+      [disabled]="disabled()"
+      [ngClass]="classes()"
+      [attr.aria-pressed]="toggle() ? selected() : null"
+      (pointerdown)="onPressStart()"
+      (pointerup)="onPressEnd()"
+      (pointerleave)="onPressCancel()"
+      (pointercancel)="onPressCancel()"
+      (keydown)="onKeyDown($event)"
+      (keyup)="onKeyUp()"
+      (blur)="onPressEnd()"
+    >
+      @if (hasInputContent()) {
+        @if (iconPosition() === 'leading' && icon()) {
+          <mat-icon [svgIcon]="icon()">{{ icon() }}</mat-icon>
+        }
+        @if (label()) {
+          <span [class]="labelClass()">{{ label() }}</span>
+        }
+        @if (iconPosition() === 'trailing' && icon()) {
+          <mat-icon [svgIcon]="icon()">{{ icon() }}</mat-icon>
+        }
+      } @else {
+        <ng-content></ng-content>
+      }
+    </button>
+  }
+  @case ('outlined') {
+    <button
+      mat-stroked-button
+      class="lib-mat-btn"
+      [attr.type]="type()"
+      [disabled]="disabled()"
+      [ngClass]="classes()"
+      [attr.aria-pressed]="toggle() ? selected() : null"
+      (pointerdown)="onPressStart()"
+      (pointerup)="onPressEnd()"
+      (pointerleave)="onPressCancel()"
+      (pointercancel)="onPressCancel()"
+      (keydown)="onKeyDown($event)"
+      (keyup)="onKeyUp()"
+      (blur)="onPressEnd()"
+    >
+      @if (hasInputContent()) {
+        @if (iconPosition() === 'leading' && icon()) {
+          <mat-icon [svgIcon]="icon()">{{ icon() }}</mat-icon>
+        }
+        @if (label()) {
+          <span [class]="labelClass()">{{ label() }}</span>
+        }
+        @if (iconPosition() === 'trailing' && icon()) {
+          <mat-icon [svgIcon]="icon()">{{ icon() }}</mat-icon>
+        }
+      } @else {
+        <ng-content></ng-content>
+      }
+    </button>
+  }
+  @case ('tonal') {
+    <button
+      matButton
+      appearance="tonal"
+      class="lib-mat-btn lib-mat-btn--variant-tonal"
+      [attr.type]="type()"
+      [disabled]="disabled()"
+      [ngClass]="classes()"
+      [attr.aria-pressed]="toggle() ? selected() : null"
+      (pointerdown)="onPressStart()"
+      (pointerup)="onPressEnd()"
+      (pointerleave)="onPressCancel()"
+      (pointercancel)="onPressCancel()"
+      (keydown)="onKeyDown($event)"
+      (keyup)="onKeyUp()"
+      (blur)="onPressEnd()"
+    >
+      @if (hasInputContent()) {
+        @if (iconPosition() === 'leading' && icon()) {
+          <mat-icon [svgIcon]="icon()">{{ icon() }}</mat-icon>
+        }
+        @if (label()) {
+          <span [class]="labelClass()">{{ label() }}</span>
+        }
+        @if (iconPosition() === 'trailing' && icon()) {
+          <mat-icon [svgIcon]="icon()">{{ icon() }}</mat-icon>
+        }
+      } @else {
+        <ng-content></ng-content>
+      }
+    </button>
+  }
+  @case ('text') {
+    <button
+      mat-button
+      class="lib-mat-btn"
+      [attr.type]="type()"
+      [disabled]="disabled()"
+      [ngClass]="classes()"
+      (pointerdown)="onPressStart()"
+      (pointerup)="onPressEnd()"
+      (pointerleave)="onPressCancel()"
+      (pointercancel)="onPressCancel()"
+      (keydown)="onKeyDown($event)"
+      (keyup)="onKeyUp()"
+      (blur)="onPressEnd()"
+    >
+      @if (hasInputContent()) {
+        @if (iconPosition() === 'leading' && icon()) {
+          <mat-icon [svgIcon]="icon()">{{ icon() }}</mat-icon>
+        }
+        @if (label()) {
+          <span [class]="labelClass()">{{ label() }}</span>
+        }
+        @if (iconPosition() === 'trailing' && icon()) {
+          <mat-icon [svgIcon]="icon()">{{ icon() }}</mat-icon>
+        }
+      } @else {
+        <ng-content></ng-content>
+      }
+    </button>
+  }
+  @case ('elevated') {
+    <button
+      mat-raised-button
+      class="lib-mat-btn"
+      [attr.type]="type()"
+      [disabled]="disabled()"
+      [ngClass]="classes()"
+      [attr.aria-pressed]="toggle() ? selected() : null"
+      (pointerdown)="onPressStart()"
+      (pointerup)="onPressEnd()"
+      (pointerleave)="onPressCancel()"
+      (pointercancel)="onPressCancel()"
+      (keydown)="onKeyDown($event)"
+      (keyup)="onKeyUp()"
+      (blur)="onPressEnd()"
+    >
+      @if (hasInputContent()) {
+        @if (iconPosition() === 'leading' && icon()) {
+          <mat-icon [svgIcon]="icon()">{{ icon() }}</mat-icon>
+        }
+        @if (label()) {
+          <span [class]="labelClass()">{{ label() }}</span>
+        }
+        @if (iconPosition() === 'trailing' && icon()) {
+          <mat-icon [svgIcon]="icon()">{{ icon() }}</mat-icon>
+        }
+      } @else {
+        <ng-content></ng-content>
+      }
+    </button>
+  }
+  @default {
+    <button
+      mat-flat-button
+      class="lib-mat-btn"
+      [attr.type]="type()"
+      [disabled]="disabled()"
+      [ngClass]="classes()"
+      (pointerdown)="onPressStart()"
+      (pointerup)="onPressEnd()"
+      (pointerleave)="onPressCancel()"
+      (pointercancel)="onPressCancel()"
+      (keydown)="onKeyDown($event)"
+      (keyup)="onKeyUp()"
+      (blur)="onPressEnd()"
+    >
+      @if (hasInputContent()) {
+        @if (iconPosition() === 'leading' && icon()) {
+          <mat-icon [svgIcon]="icon()">{{ icon() }}</mat-icon>
+        }
+        @if (label()) {
+          <span [class]="labelClass()">{{ label() }}</span>
+        }
+        @if (iconPosition() === 'trailing' && icon()) {
+          <mat-icon [svgIcon]="icon()">{{ icon() }}</mat-icon>
+        }
+      } @else {
+        <ng-content></ng-content>
+      }
+    </button>
+  }
+}

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

@@ -0,0 +1,103 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  signal,
+} from '@angular/core';
+import { NgClass } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+export type LibButtonSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+
+export type LibButtonVariant = 'filled' | 'outlined' | 'tonal' | 'text' | 'elevated';
+
+export type LibButtonShape = 'round' | 'square';
+
+export type LibButtonIconPosition = 'leading' | 'trailing';
+
+export type LibButtonContentAlign = 'start' | 'center' | 'end';
+
+@Component({
+  selector: 'lib-button',
+  standalone: true,
+  imports: [MatButtonModule, MatIconModule, NgClass],
+  templateUrl: './button.html',
+  styleUrl: './button.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class.lib-mat-btn-host--full]': 'fullWidth()',
+  },
+})
+export class LibButtonComponent {
+  size = input<LibButtonSize>('medium');
+  disabled = input(false);
+  type = input<'button' | 'submit' | 'reset'>('button');
+  fullWidth = input(false);
+  variant = input<LibButtonVariant>('filled');
+  shape = input<LibButtonShape>('round');
+  toggle = input(false);
+  selected = input(false);
+  label = input<string>('');
+  icon = input<string>('');
+  iconPosition = input<LibButtonIconPosition>('leading');
+  contentAlign = input<LibButtonContentAlign>('center');
+  labelClass = input<string>('');
+  pressed = input<boolean>(false);
+  debugPadding = input<boolean>(false);
+  readonly isPressed = signal(false);
+
+  /** Si hay label o icon por input, se usa contenido interno; si no, ng-content. */
+  readonly hasInputContent = computed(
+    () => this.label().length > 0 || this.icon().length > 0
+  );
+
+  /** contentAlign ya es 'start' | 'center' | 'end'; se usa directo para las clases CSS. */
+  private readonly contentAlignNormalized = computed(() => this.contentAlign());
+
+  readonly classes = computed(() => ({
+    'lib-mat-btn': true,
+    'lib-mat-btn--xsmall': this.size() === 'xsmall',
+    'lib-mat-btn--small': this.size() === 'small',
+    'lib-mat-btn--medium': this.size() === 'medium',
+    'lib-mat-btn--large': this.size() === 'large',
+    'lib-mat-btn--xlarge': this.size() === 'xlarge',
+    'lib-mat-btn--full': this.fullWidth(),
+    'lib-mat-btn--variant-filled': this.variant() === 'filled',
+    'lib-mat-btn--variant-outlined': this.variant() === 'outlined',
+    'lib-mat-btn--variant-tonal': this.variant() === 'tonal',
+    'lib-mat-btn--variant-text': this.variant() === 'text',
+    'lib-mat-btn--variant-elevated': this.variant() === 'elevated',
+    'lib-mat-btn--shape-round': this.shape() === 'round',
+    'lib-mat-btn--shape-square': this.shape() === 'square',
+    'lib-mat-btn--toggle': this.toggle(),
+    'lib-mat-btn--selected': this.toggle() && this.selected(),
+    'lib-mat-btn--pressed': this.isPressed() || this.pressed(),
+    'lib-mat-btn--debug-padding': this.debugPadding(),
+    'lib-mat-btn--align-start': this.contentAlignNormalized() === 'start',
+    'lib-mat-btn--align-center': this.contentAlignNormalized() === 'center',
+    'lib-mat-btn--align-end': this.contentAlignNormalized() === 'end',
+  }));
+
+  onPressStart(): void {
+    if (!this.disabled()) this.isPressed.set(true);
+  }
+
+  onPressEnd(): void {
+    this.isPressed.set(false);
+  }
+
+  onPressCancel(): void {
+    this.isPressed.set(false);
+  }
+
+  onKeyDown(event: KeyboardEvent): void {
+    if (this.disabled()) return;
+    if (event.code === 'Space' || event.code === 'Enter') this.isPressed.set(true);
+  }
+
+  onKeyUp(): void {
+    this.isPressed.set(false);
+  }
+}