@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/collection/components/sui-sidebar/sui-sidebar.css

@@ -0,0 +1,696 @@
+@charset "UTF-8";
+/* ═══ SUI Sidebar — SUI Design System 2.0 ═══════════════════════════
+ * Specs: Figma 8p1k72aKKvzJV4XcvPS4VO node 3802:11759 (base 3802:11758).
+ * Tokens: --sui-bg-*, --sui-text-*, --sui-stroke-*, --sui-radius-*,
+ *         --sui-state-information-base (azul, Figma indicator canon),
+ *         --sui-primary-base (naranja brand), --sui-state-error-base,
+ *         --sui-red-alpha-10/-16, --sui-orange-alpha-10, --sui-state-verified-base.
+ * ════════════════════════════════════════════════════════════════════════ */
+:host {
+  display: contents;
+  font-family: var(--sui-font-sans, "Satoshi", system-ui, sans-serif);
+}
+
+/* iOS: sin esto, mantener presionado un item abre el menú nativo de enlace con
+   la URL cruda encima del sidebar ("capacitor://localhost/master/..."). En un
+   navegador ese menú tiene sentido; dentro de una app envuelta, la URL interna
+   no le dice nada a nadie y el menú tapa la navegación. Va en el sidebar
+   entero: cada item es un enlace y el gesto es el mismo en todos.
+   `user-select` acompaña para que el long-press tampoco seleccione el texto. */
+:host a,
+:host button {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+/* ── Backdrop overlay (mobile drawer) ──────────────────────────────── */
+.sui-sidebar-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 299;
+  /* Canon = overlay del sui-modal (Figma 480:2474 Modal Overlay [1.1]):
+     overlay-gray rgba(51,51,51,0.24). Mismo valor, sin blur (el drawer no
+     es glass). */
+  background: rgba(51, 51, 51, 0.24);
+  /* Fade-in suave para no aparecer abruptamente al abrir el drawer */
+  animation: sui-sidebar-fade-in 200ms ease-out;
+}
+
+/* ── Container ─────────────────────────────────────────────────────── */
+.sui-sidebar {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  /* 272 = canon Figma 3802:11759. Estuvo en 240 como DEVIATION sin sign-off:
+     a 240 el contenido real desbordaba (FAVS + atajos, nombre del user) y
+     aparecía scroll horizontal — verificado con medición DOM 2026-07-23. */
+  width: 272px;
+  height: 100dvh;
+  background: var(--sui-bg-white-0, #ffffff);
+  border-right: 1px solid var(--sui-stroke-soft-200, #ebebeb);
+  font-feature-settings: "ss11" 1, "calt" 0, "liga" 0;
+}
+
+/* ── Header ────────────────────────────────────────────────────────── */
+.sui-sidebar__header {
+  position: relative;
+  padding: 12px;
+  padding-top: calc(12px + env(safe-area-inset-top, 0px));
+}
+
+.sui-sidebar__header-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  border-radius: var(--sui-radius-10, 10px);
+  background: var(--sui-bg-white-0, #ffffff);
+  overflow: hidden;
+}
+
+.sui-sidebar__brand-logo {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--sui-bg-weak-50, #f7f7f7);
+  color: var(--sui-text-sub-600, #5c5c5c);
+  overflow: hidden;
+}
+.sui-sidebar__brand-logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.sui-sidebar__brand-fallback {
+  font-size: 18px;
+  line-height: 1;
+}
+
+/* ── Compact Button (header workspace switcher / footer dropdown) ────── */
+.sui-sidebar__compact-btn {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  /* Figma Compact Button = 24×24 (node I3789:8820;3802:10831). El icono 20 +
+     padding 2·2 = 24 ya iguala el frame; con padding 2px el border 1px×2 se
+     SUMABA por encima → 26×26 (falla-patrón #9). padding 1px lo absorbe:
+     1 + 20 + 1 + border 1·2 = 24 exacto. */
+  padding: 1px;
+  border-radius: var(--sui-radius-6, 6px);
+  border: 1px solid var(--sui-stroke-soft-200, #ebebeb);
+  background: var(--sui-bg-white-0, #ffffff);
+  box-shadow: var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, 0.031372549));
+  color: var(--sui-text-sub-600, #5c5c5c);
+  cursor: pointer;
+  transition: background-color 120ms ease-out, color 120ms ease-out;
+}
+@media (hover: hover) and (pointer: fine) {
+  .sui-sidebar__compact-btn:hover {
+    background: var(--sui-bg-weak-50, #f7f7f7);
+    color: var(--sui-text-strong-950, #171717);
+  }
+}
+.sui-sidebar__compact-btn:focus-visible {
+  outline: 2px solid var(--sui-state-information-base, #335cff);
+  outline-offset: -1px;
+}
+.sui-sidebar__compact-btn:active {
+  background: var(--sui-bg-weak-50, #f7f7f7);
+}
+.sui-sidebar__compact-btn {
+  /* Footer dropdown: sin border ni shadow (Figma UserProfileCard Compact Button) */
+}
+.sui-sidebar__compact-btn--ghost {
+  border-color: transparent;
+  box-shadow: none;
+  background: transparent;
+}
+.sui-sidebar__compact-btn {
+  /* Switcher abierto: botón oscuro (canon del template de marketing SUI) —
+     bg strong-950 + icono blanco mientras el dropdown esté desplegado. */
+}
+.sui-sidebar__compact-btn--active, .sui-sidebar__compact-btn--active:hover, .sui-sidebar__compact-btn--active:active {
+  background: var(--sui-bg-strong-950, #171717);
+  border-color: var(--sui-bg-strong-950, #171717);
+  color: var(--sui-text-white-0, #ffffff);
+}
+
+.sui-sidebar__header-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  /* Figma header card Text group gap-[4px] (node I3802:8859;3802:10827). */
+  gap: 4px;
+  min-width: 0;
+  align-items: flex-start;
+}
+
+.sui-sidebar__header-name {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  /* Figma -0.084px @14px ≈ -0.006em (shortcut 1.23). */
+  letter-spacing: -0.006em;
+  color: var(--sui-text-strong-950, #171717);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.sui-sidebar__header-subtitle {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  color: var(--sui-text-sub-600, #5c5c5c);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+/* Header divider — bottom edge, inset 20px L/R según Figma */
+.sui-sidebar__divider {
+  position: absolute;
+  bottom: 0;
+  left: 20px;
+  right: 20px;
+  height: 1px;
+  background: var(--sui-stroke-soft-200, #ebebeb);
+}
+.sui-sidebar__divider--top {
+  top: 0;
+  bottom: auto;
+}
+
+/* ── Content ───────────────────────────────────────────────────────── */
+.sui-sidebar__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 20px 20px 16px;
+  overflow-y: auto;
+  /* Nunca scroll horizontal: si un item excede el ancho se trunca con su
+     ellipsis, no scrollea (el síntoma a 240px era barra horizontal). */
+  overflow-x: hidden;
+  min-height: 0;
+  /* Figma no muestra scrollbar; en Windows la clásica (~17px) empuja el
+     contenido y descentra los iconos del rail de 80px. Scroll sigue vivo. */
+  scrollbar-width: none;
+}
+.sui-sidebar__content::-webkit-scrollbar {
+  display: none;
+}
+
+.sui-sidebar__section {
+  /* Figma: Main Content gap 8 (label↔nav). */
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  /* Sin esto, con viewport bajo las secciones colapsaban (h=0) y se pintaban
+     encima de la anterior en vez de disparar el overflow-y del content. */
+  flex-shrink: 0;
+  /* Figma: Side Content & Supporting Content usan gap 6 (label↔nav). La
+     separación entre Main Content y Side Content es SOLO el gap:20px del
+     content flex container — Figma NO incluye border-top divisor (node
+     3789:8834). El Text Divider es el label de sección (ej. "FAVS"), no
+     una línea horizontal. */
+}
+.sui-sidebar__section--secondary, .sui-sidebar__section--supporting {
+  gap: 6px;
+}
+.sui-sidebar__section {
+  /* Supporting Content anclado al fondo: margin-top:auto ancla con espacio de
+     sobra y, cuando falta altura, deja scrollear el content (flex:1+min-height:0
+     colapsaba la sección a 0px). */
+}
+.sui-sidebar__section--anchor-bottom {
+  margin-top: auto;
+}
+
+.sui-sidebar__section-label {
+  padding: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  /* Figma 0.48px @12px = 0.04em (shortcut 1.23: em en lugar de px). */
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--sui-text-soft-400, #a3a3a3);
+  /* Collapsed=On (Figma 3802:11756): labels (MAIN, OTHERS) siguen visibles,
+     centrados dentro del bar de 80px, sin padding horizontal (py-[4px] only). */
+}
+.sui-sidebar__section-label--collapsed {
+  padding: 4px 0;
+  text-align: center;
+}
+
+/* ── Search slot (Figma Text Input search=true) ─────────────────────── */
+.sui-sidebar__search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 8px 8px 10px;
+  border-radius: var(--sui-radius-8, 8px);
+  border: 1px solid var(--sui-stroke-soft-200, #ebebeb);
+  background: var(--sui-bg-white-0, #ffffff);
+  box-shadow: var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, 0.031372549));
+  box-sizing: border-box;
+}
+
+.sui-sidebar__search-icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  color: var(--sui-text-soft-400, #a3a3a3);
+}
+
+.sui-sidebar__search-input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.006em;
+  color: var(--sui-text-strong-950, #171717);
+}
+.sui-sidebar__search-input::placeholder {
+  color: var(--sui-text-soft-400, #a3a3a3);
+}
+.sui-sidebar__search-input {
+  /* ≤767 px el texto sube a 16: con menos, iOS hace zoom al enfocar (mismo
+     criterio que sui-input). Hallazgo de organismos 03-10-2026. */
+}
+@media (max-width: 767px) {
+  .sui-sidebar__search-input {
+    font-size: 16px;
+  }
+}
+
+/* ── Shortcut pill (Figma "Shortcut") ───────────────────────────────── */
+.sui-sidebar__shortcut {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  /* Figma Shortcut = 20px de alto (texto 12/16 + py-2). Sin box-sizing el
+     pill se inflaba a 22 (16 + py 2·2 + border 1·2) y empujaba el item FAV a
+     38px en vez de los 36 de Figma (node 3789:8838 = h-36). border-box mete el
+     border hacia adentro → 16 + 2·2 = 20 (falla-patrón #9). */
+  box-sizing: border-box;
+  padding: 2px 6px;
+  border-radius: var(--sui-radius-4, 4px);
+  border: 1px solid var(--sui-stroke-soft-200, #ebebeb);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--sui-text-soft-400, #a3a3a3);
+  white-space: nowrap;
+}
+
+.sui-sidebar__nav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+/* ── Item ──────────────────────────────────────────────────────────── */
+.sui-sidebar__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: var(--sui-radius-8, 8px);
+  width: 100%;
+  /* Sin reset global en el proyecto: los items <a> (route) son content-box y
+     width:100% + padding los infla 24px sobre los <button>. */
+  box-sizing: border-box;
+  background: transparent;
+  border: none;
+  font-family: inherit;
+  text-align: left;
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+  position: relative;
+  /* Fast transition para que el hover/active se sienta responsive */
+  transition: background-color 120ms ease-out, color 120ms ease-out;
+  /* Solo hover en devices que realmente tienen pointer fino — sino, en
+     mobile el hover queda "pegado" tras tap. */
+}
+@media (hover: hover) and (pointer: fine) {
+  .sui-sidebar__item:hover {
+    background: var(--sui-bg-weak-50, #f7f7f7);
+  }
+  .sui-sidebar__item:hover .sui-sidebar__item-label,
+  .sui-sidebar__item:hover .sui-sidebar__item-icon {
+    color: var(--sui-text-strong-950, #171717);
+  }
+}
+.sui-sidebar__item {
+  /* El focus ring usa la misma var dinámica que el indicator bar para que
+     indicatorColor='information' tiña ambos coherentemente (no naranja
+     hardcoded contra indicator azul). */
+}
+.sui-sidebar__item:focus-visible {
+  outline: 2px solid var(--_sui-sidebar-indicator, var(--sui-primary-base, #fa7319));
+  outline-offset: -2px;
+}
+.sui-sidebar__item {
+  /* iOS WKWebView: el touchstart binding del template engage el touch
+     pipeline; aquí solo definimos el feedback visual mientras se mantiene
+     el tap. */
+}
+.sui-sidebar__item:active {
+  background: var(--sui-bg-weak-50, #f7f7f7);
+}
+
+.sui-sidebar__item-icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: var(--sui-text-sub-600, #5c5c5c);
+  transition: color 120ms ease-out;
+}
+
+.sui-sidebar__item-label {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  /* Figma -0.084px @14px ≈ -0.006em (shortcut 1.23: em en lugar de px). */
+  letter-spacing: -0.006em;
+  color: var(--sui-text-sub-600, #5c5c5c);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 120ms ease-out;
+}
+
+.sui-sidebar__item-badge {
+  flex-shrink: 0;
+}
+
+/* Color-dot icon (Figma Chart Legend Dots — Side Content "FAVS") */
+.sui-sidebar__item-dot {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  margin: 6px;
+  border-radius: 999px;
+}
+
+/* Chevron del item activo (Figma arrow-right-s-line). Oculto por default. */
+.sui-sidebar__item-chevron {
+  flex-shrink: 0;
+  display: none;
+  color: var(--sui-text-sub-600, #5c5c5c);
+}
+
+/* ── Active state ──────────────────────────────────────────────────── */
+/* Color del indicator: default = naranja primary-base — el accent del DS es la
+   marca Master Pedidos (ver .claude/sui-audit/DECISIONES.md §1). El consumer puede
+   pasar indicatorColor='information' → azul SUI (opt-in). Var local
+   --_sui-sidebar-indicator resuelta por el data-attr del host. */
+:host {
+  --_sui-sidebar-indicator: var(--sui-primary-base, #fa7319);
+}
+
+:host([data-sui-indicator=information]) {
+  --_sui-sidebar-indicator: var(--sui-state-information-base, #335cff);
+}
+
+.sui-sidebar__item--active {
+  background: var(--sui-bg-weak-50, #f7f7f7);
+}
+.sui-sidebar__item--active .sui-sidebar__item-label {
+  /* Figma canon (node 3789:8826): el active item solo cambia el color del
+     label (sub-600 → strong-950), mantiene el weight 500 — NO sube a 600. */
+  color: var(--sui-text-strong-950, #171717);
+}
+.sui-sidebar__item--active .sui-sidebar__item-icon {
+  color: var(--_sui-sidebar-indicator);
+}
+.sui-sidebar__item--active {
+  /* Chevron arrow-right-s-line visible solo en el item activo (Figma). */
+}
+.sui-sidebar__item--active .sui-sidebar__item-chevron {
+  display: inline-flex;
+  color: var(--sui-text-sub-600, #5c5c5c);
+}
+.sui-sidebar__item--active {
+  /* Indicator bar 4×20 a la izquierda — emula el Figma */
+}
+.sui-sidebar__item--active::before {
+  content: "";
+  position: absolute;
+  left: -20px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 20px;
+  background: var(--_sui-sidebar-indicator);
+  border-radius: 0 4px 4px 0;
+}
+@media (hover: hover) and (pointer: fine) {
+  .sui-sidebar__item--active:hover {
+    background: var(--sui-bg-weak-50, #f7f7f7);
+  }
+}
+
+/* ── Danger variant (logout, destructive) ──────────────────────────── */
+.sui-sidebar__item--danger .sui-sidebar__item-icon,
+.sui-sidebar__item--danger .sui-sidebar__item-label {
+  color: var(--sui-state-error-base, #fb3748);
+}
+@media (hover: hover) and (pointer: fine) {
+  .sui-sidebar__item--danger:hover {
+    background: var(--sui-red-alpha-10, rgba(251, 55, 72, 0.0980392157));
+  }
+  .sui-sidebar__item--danger:hover .sui-sidebar__item-icon,
+  .sui-sidebar__item--danger:hover .sui-sidebar__item-label {
+    color: var(--sui-state-error-base, #fb3748);
+  }
+}
+.sui-sidebar__item--danger:active {
+  background: var(--sui-red-alpha-16, rgba(251, 55, 72, 0.1607843137));
+}
+
+/* ── Footer (profile) ──────────────────────────────────────────────── */
+.sui-sidebar__footer {
+  position: relative;
+  padding: 12px;
+  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
+}
+
+.sui-sidebar__profile {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  border-radius: var(--sui-radius-10, 10px);
+  overflow: hidden;
+}
+
+.sui-sidebar__profile-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  height: 40px;
+  justify-content: center;
+}
+
+.sui-sidebar__profile-name-row {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+}
+
+.sui-sidebar__profile-name {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  /* Figma -0.084px @14px ≈ -0.006em (shortcut 1.23). */
+  letter-spacing: -0.006em;
+  color: var(--sui-text-strong-950, #171717);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Verified badge (Figma verified-fill, state-verified-base #47c2ff) */
+.sui-sidebar__profile-verified {
+  flex-shrink: 0;
+  display: inline-flex;
+  color: var(--sui-state-verified-base, #47c2ff);
+}
+
+.sui-sidebar__profile-email {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  color: var(--sui-text-sub-600, #5c5c5c);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ── Feature Card slot (Figma FeatureCard=On) ───────────────────────── */
+/* Contenedor del slot. Si no se proyecta nada, colapsa a 0 (no margin
+   ni gap fantasma): el :empty no aplica con el slot, así que usamos
+   :has() para detectar contenido proyectado. */
+.sui-sidebar__feature-card {
+  width: 100%;
+}
+.sui-sidebar__feature-card:not(:has(*)) {
+  display: none;
+}
+
+/* ═══ Collapsed (icon-only, 80px — Figma Collapsed=On) ══════════════════ */
+:host([data-sui-collapsed]) .sui-sidebar {
+  width: 80px;
+}
+:host([data-sui-collapsed]) .sui-sidebar__header-card,
+:host([data-sui-collapsed]) .sui-sidebar__profile {
+  justify-content: center;
+}
+:host([data-sui-collapsed]) {
+  /* Figma collapsed content: px-[12px] (80 − 2×12 = 56px inner zone) en lugar
+     del px-[20px] expandido. Mantiene 56px para centrar los items de 8px pad. */
+}
+:host([data-sui-collapsed]) .sui-sidebar__content {
+  padding-inline: 12px;
+}
+:host([data-sui-collapsed]) {
+  /* Items EXACT Figma 3802:11756: 36×36 (icon 20 + padding 8), centrados en
+     la columna de 56px (x=10 → margin auto). NO full-width. */
+}
+:host([data-sui-collapsed]) .sui-sidebar__item {
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 8px;
+  margin-inline: auto;
+}
+:host([data-sui-collapsed]) {
+  /* Indicator bar: Figma 3802:11756 deja la barra flush contra el border
+     izquierdo del sidebar (no flotando en medio). El `.sui-sidebar__content`
+     tiene overflow-y:auto, lo que fuerza overflow-x a clip en el padding box
+     (x=0 = border del sidebar). El item de 36px centrado queda con su borde
+     izquierdo en x=22 (12 padding + 10 de centrado); left:-22px coloca la
+     barra en x=0→4, pegada al border izquierdo (visible, no clipeada). */
+}
+:host([data-sui-collapsed]) .sui-sidebar__item--active::before {
+  left: -22px;
+}
+
+/* ═══ Mobile: drawer / sheet fixed con slide ════════════════════════════
+ * Default: drawer compact 86vw / 360px max.
+ * mobileMode='sheet': drawer ancho que ocupa casi todo el viewport (deja
+ * solo 40px de backdrop visible a la derecha). Mantiene shadow + radius +
+ * backdrop del drawer — solo cambia el width.
+ *
+ * Shadow exact del MasterLayout pre-migración: rgba(14,18,27,0.10).
+ * ════════════════════════════════════════════════════════════════════════ */
+@media (max-width: 767px) {
+  .sui-sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    height: 100dvh;
+    z-index: 300;
+    width: min(86vw, 360px);
+    box-sizing: border-box;
+    /* Safe-area left (Capacitor edge-to-edge, notch en landscape). El top ya
+       lo maneja el header (safe-area-inset-top) y el bottom el footer. */
+    padding-left: env(safe-area-inset-left, 0px);
+    transform: translateX(-100%);
+    /* ~240ms ease-out (curva out-quint, misma de los items) — slide suave. */
+    transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1);
+    border-right: none;
+    border-radius: 0 24px 24px 0;
+    overflow: hidden;
+    /* No hay --sui-regular-shadow-large en tokens (solo x-small/medium, ambos
+       verticales); el drawer necesita sombra LATERAL → valor probado del
+       MasterLayout: rgba(14,18,27,0.10). Alpha 0 cerrado para transicionar. */
+    box-shadow: 4px 0 24px rgba(14, 18, 27, 0);
+  }
+  .sui-sidebar--open {
+    transform: translateX(0);
+    box-shadow: 4px 0 24px rgba(14, 18, 27, 0.1);
+  }
+  /* sheet variant — solo cambia el width para que se vea más fullscreen.
+     Todo lo demás (shadow, radius, items, hovers, padding) lo hereda del
+     drawer base de arriba. */
+  :host([data-sui-mobile-mode=sheet]) .sui-sidebar {
+    width: calc(100vw - 40px);
+    max-width: none;
+  }
+  /* Items mobile: tap target 48px+, icon 24, font 17 — Apple HIG mínimo */
+  .sui-sidebar__item {
+    gap: 14px;
+    padding: 14px 12px;
+    border-radius: var(--sui-radius-10, 10px);
+    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms cubic-bezier(0.23, 1, 0.32, 1);
+  }
+  .sui-sidebar__item:active {
+    transform: scale(0.98);
+    background: var(--sui-bg-weak-50, #f7f7f7);
+  }
+  .sui-sidebar__item-icon {
+    width: 24px;
+    height: 24px;
+  }
+  .sui-sidebar__item-label {
+    font-size: 17px;
+    line-height: 24px;
+    letter-spacing: -0.01em;
+  }
+}
+@keyframes sui-sidebar-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+/* X de limpiar del search — visible solo con texto (reemplaza al shortcut). */
+.sui-sidebar__search-clear {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--sui-text-soft-400, #99a0ae);
+}
+.sui-sidebar__search-clear:hover {
+  color: var(--sui-text-sub-600, #525866);
+}

package/dist/collection/components/sui-sidebar/sui-sidebar.data.js

@@ -0,0 +1 @@
+export {};