@inchurch/matcha-theme 20.0.8 → 20.276.0

package/components/matcha-accordion.scss

@@ -1,157 +1,294 @@
-@use "sass:map";
-
-// =============================================================================
-// matcha-accordion.scss — Collapsible card sections
-// Aligned with Figma matcha/accordion/item:
-//   Estado(3: Fechado, Aberto, Disabled)
-//   Card surface + chevron rotate + divider + content slot
-// =============================================================================
-
-@mixin matcha-accordion-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
-
-  matcha-accordion-item {
-    .accordion-item {
-      background: var(--matcha-color-surface, #{getSurface($theme)});
-      border-radius: var(--matcha-radius-lg, 8px);
-    }
-
-    // ── Header ──
-    .accordion-header-wrapper {
-      color: var(--matcha-color-fg, #{getForeground($theme)});
-
-      &:hover:not([disabled]) {
-        .accordion-header-state {
-          opacity: var(--matcha-state-hover, 0.08);
-        }
-      }
-
-      &:active:not([disabled]) {
-        .accordion-header-state {
-          opacity: var(--matcha-state-active, 0.12);
-        }
-      }
-
-      &:focus-visible {
-        outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
-        outline-offset: var(--matcha-state-focus-ring-offset, 2px);
-        border-radius: var(--matcha-radius-lg, 8px);
-      }
-    }
-
-    // ── Content text ──
-    .accordion-content {
-      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
-    }
-
-    // ── Chevron ──
-    .accordion-chevron {
-      color: var(--matcha-color-icon-default, #{getBlueGrey($theme)});
-    }
-
-    // ── Disabled ──
-    &.disabled {
-      opacity: 0.5;
-      pointer-events: none;
-    }
-  }
-}
-
-// ── Layout ──────────────────────────────────────────────────────────────────
-
-matcha-accordion {
-  display: flex;
-  flex-direction: column;
-  gap: var(--matcha-space-200, 16px);
-  width: 100%;
-
-  // Legacy stretch support
-  &[stretch]:not([stretch="false"]) {
-    .accordion-header-wrapper {
-      width: 100%;
-
-      matcha-accordion-header {
-        width: 100%;
-      }
-    }
-  }
-}
-
-matcha-accordion-item {
-  display: block;
-
-  .accordion-item {
-    display: flex;
-    flex-direction: column;
-    padding: var(--matcha-space-300, 24px);
-    gap: var(--matcha-space-300, 24px);
-    overflow: hidden;
-  }
-
-  // ── Header ──
-  .accordion-header-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--matcha-space-200, 16px);
-    cursor: pointer;
-    position: relative;
-    border: none;
-    background: none;
-    width: 100%;
-    padding: 0;
-    text-align: left;
-
-    // Figma matcha/accordion/item header: 20/800/28 (title-xl ExtraBold)
-    matcha-accordion-header {
-      flex: 1;
-      min-width: 0;
-      font-size: var(--matcha-text-title-xl, 20px);
-      font-weight: var(--matcha-weight-extrabold, 800);
-      line-height: var(--matcha-leading-title-xl, 28px);
-    }
-  }
-
-  // ── State layer on header ──
-  .accordion-header-state {
-    position: absolute;
-    inset: calc(var(--matcha-space-300, 24px) * -1);
-    background: currentColor;
-    opacity: 0;
-    pointer-events: none;
-    border-radius: var(--matcha-radius-lg, 8px);
-    transition: opacity var(--matcha-duration-instant, 80ms) linear;
-  }
-
-  // ── Chevron ──
-  .accordion-chevron {
-    flex-shrink: 0;
-    width: var(--matcha-icon-size-md, 24px);
-    height: var(--matcha-icon-size-md, 24px);
-    transition: transform var(--matcha-duration-moderate, 300ms) ease;
-  }
-
-  &.is-open .accordion-chevron {
-    transform: rotate(180deg);
-  }
-
-  // ── Content ──
-  .accordion-content {
-    overflow: hidden;
-    font-family: var(--matcha-font-family);
-    font-size: var(--matcha-text-body-lg, 16px);
-    line-height: var(--matcha-leading-body-lg, 24px);
-  }
-}
-
-// ── Reduced motion ──────────────────────────────────────────────────────────
-@media (prefers-reduced-motion: reduce) {
-  matcha-accordion-item {
-    .accordion-chevron {
-      transition: none;
-    }
-    .accordion-header-state {
-      transition: none;
-    }
-  }
-}
+@use "sass:map";
+
+// =============================================================================
+// matcha-accordion.scss — Collapsible card sections (Figma 15808:51)
+// Estado(3): Fechado, Aberto, Disabled.
+// CSS-only animation via grid-template-rows: 0fr → 1fr (modern, perf-friendly,
+// dispensa Angular Animations e medição JS de altura).
+// =============================================================================
+
+@mixin matcha-accordion-theme($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  matcha-accordion-item {
+    .accordion-item {
+      // Figma DSV3 (15808:51): bg = matcha/color/surface/card (canônico)
+      background: var(--matcha-color-surface-card, #{getSurface($theme)});
+      border-radius: var(--matcha-radius-lg, 8px);
+    }
+
+    // ── Native button reset + state layer ──
+    // Slot --matcha-accordion-header-color pra consumer override.
+    .accordion-header-button {
+      color: var(--matcha-accordion-header-color, var(--matcha-color-fg, #{getForeground($theme)}));
+
+      // Hover/active/focus só aplicam ao <button>; modificador --static (div, modo
+      // clickableHeader=false) não tem state-layer e não recebe focus-ring direto.
+      &:not(.accordion-header-button--static) {
+        &:hover:not(:disabled) {
+          .accordion-header-state {
+            opacity: var(--matcha-state-hover, 0.08);
+          }
+        }
+
+        &:active:not(:disabled) {
+          .accordion-header-state {
+            opacity: var(--matcha-state-active, 0.12);
+          }
+        }
+
+        &:focus-visible {
+          outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
+          outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+          border-radius: var(--matcha-radius-lg, 8px);
+        }
+      }
+    }
+
+    // ── Content text ──
+    .accordion-content {
+      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+    }
+
+    // ── Chevron ──
+    .accordion-chevron {
+      color: var(--matcha-color-icon-default, #{getBlueGrey($theme)});
+    }
+
+    // ── Disabled ──
+    &.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+matcha-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: var(--matcha-space-200, 16px);
+  width: 100%;
+}
+
+matcha-accordion-item {
+  display: block;
+
+  .accordion-item {
+    display: flex;
+    flex-direction: column;
+    // Figma DSV3 atualizado (15808:51): padding compactado pra 16 (space-200).
+    padding: var(--matcha-space-200, 16px);
+    overflow: hidden;
+  }
+
+  // ── Heading wrapper (role="heading") ──
+  .accordion-heading {
+    margin: 0;
+    font: inherit; // não herda H3 default do user-agent
+  }
+
+  // ── Header layout — aplica ao <button> (clickable) E ao <div> (--static).
+  //    cursor:pointer só no <button> via type-selector pra div estática herdar default.
+  .accordion-header-button {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--matcha-space-200, 16px);
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    border: none;
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    position: relative;
+
+    // Figma DSV3 atualizado (15808:51): título 18/24 SemiBold no accordion compact.
+    // Não bate nenhum size canônico do matcha-title (3=16/18, 4=20/28) — override
+    // contextual aqui no accordion. Canônico (15808:51): sempre 1 linha + ellipsis.
+    //
+    // DOM real após projeção:
+    //   .accordion-header-slot
+    //     └── matcha-accordion-header (slot wrapper do consumer — display: inline default)
+    //           └── matcha-title (host inline-flex: sign + text)
+    //                 └── .matcha-title__text (display: inline-block)
+    //
+    // Pra constraint de largura propagar até o text element, cada nível precisa
+    // ser flex + max-width: 100% + min-width: 0. Sem isso, o inline-flex/inline-block
+    // calcula largura pelo conteúdo (sem shrink) e o texto wrappa.
+    .accordion-header-slot {
+      flex: 1 1 auto;
+      min-width: 0;
+      overflow: hidden;
+      font-size: 18px;
+      font-weight: var(--matcha-weight-semibold, 600);
+      line-height: 24px;
+
+      matcha-accordion-header {
+        display: flex;
+        align-items: center;
+        max-width: 100%;
+        min-width: 0;
+      }
+
+      matcha-title {
+        display: flex;
+        align-items: center;
+        gap: var(--matcha-space-100, 8px);
+        flex: 1 1 auto;
+        max-width: 100%;
+        min-width: 0;
+
+        > .matcha-title__text {
+          flex: 1 1 auto;
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          // Override do matcha-title size 4 (20/28 ExtraBold) → 18/24 SemiBold (Figma DSV3 accordion compact)
+          font-size: 18px;
+          font-weight: var(--matcha-weight-semibold, 600);
+          line-height: 24px;
+        }
+      }
+    }
+  }
+
+  // Cursor pointer + disabled cursor só no <button>; <div>--static herda default.
+  button.accordion-header-button {
+    cursor: pointer;
+
+    &:disabled {
+      cursor: default;
+    }
+  }
+
+  // ── State layer on header (hover/active overlay) ──
+  // mask-image faz fade-out na parte de baixo pra não terminar abruptamente
+  // no divider (visível quando aberto). Gradiente: opaco até 60%, transparente em 100%.
+  .accordion-header-state {
+    position: absolute;
+    // Inset negativo cobre o padding 16 da card (estende state-layer até as bordas).
+    inset: calc(var(--matcha-space-200, 16px) * -1);
+    background: currentColor;
+    opacity: 0;
+    pointer-events: none;
+    border-radius: var(--matcha-radius-lg, 8px);
+    transition: opacity var(--matcha-duration-instant, 80ms) linear;
+
+    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
+            mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
+  }
+
+  // ── Trailing slot (chevron default ou conteúdo custom) ──
+  .accordion-trailing {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  // ── Chevron ──
+  // Figma DSV3 atualizado: chevron 16×16 (sm), reduzido de 24 (md).
+  .accordion-chevron {
+    width: var(--matcha-icon-size-sm, 16px);
+    height: var(--matcha-icon-size-sm, 16px);
+    transition: transform var(--matcha-duration-moderate, 300ms) cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  &.is-open .accordion-chevron {
+    transform: rotate(180deg);
+  }
+
+  // ── Content (CSS grid-template-rows trick para altura animada) ──
+  // Closed: grid-template-rows: 0fr → inner colapsa (overflow:hidden).
+  // Open:   grid-template-rows: 1fr → inner expande até altura natural.
+  // Browser support: Chrome 117+, Safari 17.2+, Firefox 134+ (Jan 2025).
+  .accordion-content {
+    display: grid;
+    grid-template-rows: 0fr;
+    margin-top: 0;
+    opacity: 0;
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-body-lg, 16px);
+    line-height: var(--matcha-leading-body-lg, 24px);
+    transition:
+      grid-template-rows var(--matcha-duration-moderate, 260ms) cubic-bezier(0.4, 0, 0.2, 1),
+      margin-top var(--matcha-duration-moderate, 260ms) cubic-bezier(0.4, 0, 0.2, 1),
+      opacity var(--matcha-duration-moderate, 260ms) cubic-bezier(0.4, 0, 0.2, 1);
+
+    // Override do `[hidden]` HTML — precisamos animar pra/de hidden, então
+    // mantemos grid display + animação. SR ainda anuncia oculto via aria.
+    &[hidden] {
+      display: grid;
+    }
+  }
+
+  &.is-open .accordion-content {
+    grid-template-rows: 1fr;
+    // Figma DSV3 atualizado: gap header→divider 16 (space-200), reduzido de 24.
+    margin-top: var(--matcha-space-200, 16px);
+    opacity: 1;
+  }
+
+  // Wrapper interno: overflow hidden é o que faz o grid trick funcionar
+  .accordion-content-inner {
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  // Divider canônico — 1px text-hint @ 30% opacity, padding 16px até o conteúdo.
+  // Usa border-top no body em vez de elemento <matcha-divider> separado pra
+  // evitar "flutuar" durante o collapse.
+  // Figma DSV3 atualizado: gap divider→content 16 (space-200), reduzido de 24.
+  .accordion-content-body {
+    padding-top: var(--matcha-space-200, 16px);
+    border-top: 1px solid color-mix(in srgb, var(--matcha-color-text-hint, #9aa0a6) 30%, transparent);
+  }
+}
+
+// ── Reduced motion ──────────────────────────────────────────────────────────
+@media (prefers-reduced-motion: reduce) {
+  matcha-accordion-item {
+    .accordion-chevron,
+    .accordion-header-state,
+    .accordion-content {
+      transition: none;
+    }
+  }
+}
+
+// ── Forced colors (Windows High Contrast) ──
+@media (forced-colors: active) {
+  matcha-accordion-item {
+    border: 1px solid CanvasText;
+
+    .accordion-header:focus-visible {
+      outline: 2px solid CanvasText !important;
+    }
+
+    .accordion-chevron {
+      color: CanvasText;
+    }
+  }
+}
+
+// ── Print ──
+// Accordion EXPANDE todos os items pra não esconder conteúdo do leitor.
+// Chevron some (sem semântica de "click" em papel).
+@media print {
+  matcha-accordion-item {
+    .accordion-content {
+      display: block !important;
+      height: auto !important;
+      visibility: visible !important;
+      overflow: visible !important;
+    }
+
+    .accordion-chevron {
+      display: none !important;
+    }
+  }
+}