@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/collection/components/sui-checkbox-card/sui-checkbox-card.css

@@ -0,0 +1,251 @@
+@charset "UTF-8";
+/* ═══ SUI Checkbox Card — SUI Design System 2.0 ═════════════════════════════════════
+ * Portado 1:1 desde el Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-checkbox-card/).
+ * Specs pulled from Figma 8p1k72aKKvzJV4XcvPS4VO — component_set 261:3896.
+ * Espejo de sui-radio-card pero multi-select (renderea sui-checkbox interno).
+ * 6 types (basic/left-icon/avatar + card-provider/brand/company via slot); 4 states.
+ *
+ * Tokens: --sui-bg-*, --sui-stroke-*, --sui-radius-*, --sui-shadow-*,
+ *         --sui-text-*, --sui-primary-base. El accent del DS es NARANJA brand
+ *         (#fa7319 = --sui-primary-base), NO el azul de Figma.
+ * ══════════════════════════════════════════════════════════════════════════ */
+:host {
+  display: inline-flex;
+  box-sizing: border-box;
+  align-items: flex-start;
+  gap: 14px;
+  padding: 16px;
+  width: 100%;
+  background: var(--sui-bg-white-0, #fff);
+  border: 1px solid var(--sui-stroke-soft-200, #ebebeb);
+  border-radius: var(--sui-radius-12, 12px);
+  box-shadow: var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, 0.031372549));
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+  font-family: var(--sui-font-sans, var(--font-sans, sans-serif));
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out), border-color var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out), box-shadow var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out), transform var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out);
+}
+
+/* Hover — EXACT (Figma 262:210 Type=Basic, State=Hover): bg-weak-50, sin border
+   visible, sin shadow. Excluye checked E indeterminate para no pisarles el border
+   primary-base (esos states ganan vía las reglas de Active más abajo).
+   Gated detrás de (hover: hover) and (pointer: fine) para que iOS WKWebView no
+   deje el :hover sticky tras un tap. */
+@media (hover: hover) and (pointer: fine) {
+  :host(:hover:not([data-sui-disabled]):not([data-sui-checked]):not([data-sui-indeterminate])) {
+    background: var(--sui-bg-weak-50, #f7f7f7);
+    border-color: transparent;
+    box-shadow: none;
+  }
+}
+/* Active / Checked — espejo del Figma 262:232 (Type=Basic, State=Active de
+   Checkbox Card). Border primary-base, sin shadow, bg sigue blanco. */
+:host([data-sui-checked]),
+:host([data-sui-indeterminate]) {
+  border-color: var(--sui-primary-base, #fa7319);
+  box-shadow: none;
+  background: var(--sui-bg-white-0, #fff);
+}
+
+/* Hover sobre checked — solo desktop. */
+@media (hover: hover) and (pointer: fine) {
+  :host([data-sui-checked]:hover:not([data-sui-disabled])),
+  :host([data-sui-indeterminate]:hover:not([data-sui-disabled])) {
+    background: var(--sui-bg-weak-50, #f7f7f7);
+  }
+}
+:host(:focus-visible:not([data-sui-disabled])) {
+  border-color: var(--sui-primary-base, #fa7319);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sui-primary-base, #fa7319) 16%, transparent);
+}
+
+/* Disabled — EXACT (Figma 262:254 Basic Disabled + 264:2882 + 264:3050):
+   bg-white-0, border stroke-soft-200, sin shadow. Los textos NO se desvanecen
+   uniforme: label → text/sub-600, sublabel + description → text/soft-400. El
+   badge cambia a variant bordeada con texto disabled-300 (ver __badge--disabled). */
+:host([data-sui-disabled]) {
+  cursor: not-allowed;
+  background: var(--sui-bg-white-0, #fff);
+  border: 1px solid var(--sui-stroke-soft-200, #ebebeb);
+  box-shadow: none;
+}
+
+:host([data-sui-disabled]) .sui-checkbox-card__label {
+  color: var(--sui-text-sub-600, #5c5c5c);
+}
+
+:host([data-sui-disabled]) .sui-checkbox-card__sublabel,
+:host([data-sui-disabled]) .sui-checkbox-card__description {
+  color: var(--sui-text-soft-400, #a3a3a3);
+}
+
+/* Solo con mouse (16-10-2026): en touch el `:active` entra apenas el dedo
+   apoya, también cuando es para hacer scroll, y la card «se hunde» bajo el
+   pulgar. Mismo criterio que sui-accordion. */
+@media (hover: hover) and (pointer: fine) {
+  :host(:active:not([data-sui-disabled])) {
+    transform: scale(0.99);
+  }
+}
+/* ───── Leading slot — varía por type (Figma 264:2858/264:3023) ────────── */
+.sui-checkbox-card__leading {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* left-icon: 40×40 circle, white-0 bg, 1px stroke-soft-200, shadow x-small,
+   padding 10. Espejo del radio-card.
+   box-sizing: border-box → encierra el padding/border DENTRO de los 40×40
+   declarados. Sin esto, el container crece a 62×62 (40 + padding 10×2 +
+   border 1×2) porque el proyecto no tiene reset global de box-sizing. */
+.sui-checkbox-card__leading--icon {
+  box-sizing: border-box;
+  width: 40px;
+  height: 40px;
+  padding: 10px;
+  border-radius: var(--sui-radius-full, 999px);
+  background: var(--sui-bg-white-0, #fff);
+  border: 1px solid var(--sui-stroke-soft-200, #ebebeb);
+  box-shadow: var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, 0.031372549));
+  color: var(--sui-text-sub-600, #5c5c5c);
+}
+
+/* Leading-fill (iconSrc): emoji externo ocupa los 40×40 sin frame visual. */
+:host([data-sui-leading-fill]) .sui-checkbox-card__leading--icon {
+  padding: 0;
+  border: none;
+  background: none;
+  box-shadow: none;
+  border-radius: 0;
+  overflow: visible;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:host([data-sui-leading-fill]) .sui-checkbox-card__leading--icon sui-emoji {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* avatar: sui-avatar size=lg ya es 40×40 redondo nativo. */
+:host([data-sui-type=avatar]) .sui-checkbox-card__leading--avatar {
+  width: 40px;
+  height: 40px;
+}
+
+/* ───── Leading proyectado (card-provider / brand / company) ─────────────
+   El consumer proyecta el graphic con `slot="leading"`. El contenedor solo
+   fija dimensiones + clipping por type. Figma 265:539 / 265:699 / 265:863. */
+.sui-checkbox-card__leading--slot {
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.sui-checkbox-card__leading--slot > * {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* card-provider: formato tarjeta 32×24, radius-4 (Mastercard/Visa). */
+:host([data-sui-type=card-provider]) .sui-checkbox-card__leading--slot {
+  width: 32px;
+  height: 24px;
+  border-radius: 4px;
+}
+
+/* brand: 40×40 sin frame ni radius (logo de marca, ej. Spotify). */
+:host([data-sui-type=brand]) .sui-checkbox-card__leading--slot {
+  width: 40px;
+  height: 40px;
+}
+
+/* company: 40×40 redondo (logo de company sobre bg de color). */
+:host([data-sui-type=company]) .sui-checkbox-card__leading--slot {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--sui-radius-full, 999px);
+}
+
+/* ───── Texto (Title + description) ────────────────────────────────────── */
+.sui-checkbox-card__text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
+  flex: 1 1 auto;
+  min-width: 0;
+  align-self: stretch;
+}
+
+/* Sin description, centrar verticalmente respecto al leading. */
+.sui-checkbox-card__text:not(:has(.sui-checkbox-card__description)) {
+  justify-content: center;
+}
+
+.sui-checkbox-card__title {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.sui-checkbox-card__label {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  /* Figma Label/Small tracking -0.6% de 14px = -0.084px. `letter-spacing` NO
+     acepta %, se hardcodea el px exacto (espeja sui-checkbox-label). Usar px y
+     no em evita que un futuro cambio de font-size escale el tracking en silencio. */
+  letter-spacing: -0.084px;
+  color: var(--sui-text-strong-950, #171717);
+  font-feature-settings: "ss11" 1, "calt" 0, "liga" 0;
+}
+
+.sui-checkbox-card__sublabel {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  color: var(--sui-text-sub-600, #5c5c5c);
+  font-feature-settings: "ss11" 1, "calt" 0, "liga" 0;
+}
+
+.sui-checkbox-card__description {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  color: var(--sui-text-sub-600, #5c5c5c);
+  font-feature-settings: "ss11" 1, "calt" 0, "liga" 0;
+}
+
+/* Badge "NEW" — `<sui-badge>` real (defaults blue/light/small en el render →
+   color INFORMATION azul, fiel a Figma 261:3928). El naranja de marca aplica al
+   border active / focus ring, NO a este badge. Geometría y tipografía las
+   aporta sui-badge. */
+/* Badge en Disabled — EXACT (Figma 262:259): bg transparente, border
+   stroke-soft-200, texto disabled-300. */
+:host([data-sui-disabled]) .sui-checkbox-card__badge {
+  background: transparent;
+  border: 1px solid var(--sui-stroke-soft-200, #ebebeb);
+  color: var(--sui-text-disabled-300, #d1d1d1);
+}
+
+/* ───── Checkbox interno trailing ──────────────────────────────────────── */
+.sui-checkbox-card__checkbox {
+  flex-shrink: 0;
+  align-self: flex-start;
+  /* El click del host es la fuente de verdad — el checkbox interno tiene
+     tabindex=-1 y aria-hidden=true para no duplicar la a11y, y pointer-events:none
+     para que el click caiga siempre en el host (sin doble-toggle). */
+  pointer-events: none;
+}