@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-accordion.scss

@@ -1,293 +1,293 @@
-@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) {
-
-  matcha-accordion-item {
-    .accordion-item {
-      // Figma DSV3 (15808:51): bg = matcha/color/surface/card (canônico)
-      background: var(--matcha-color-surface-card);
-      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));
-
-      // 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);
-          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);
-    }
-
-    // ── Chevron ──
-    .accordion-chevron {
-      color: var(--matcha-color-icon-default);
-    }
-
-    // ── 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;
-    }
-  }
-}
+@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) {
+
+  matcha-accordion-item {
+    .accordion-item {
+      // Figma DSV3 (15808:51): bg = matcha/color/surface/card (canônico)
+      background: var(--matcha-color-surface-card);
+      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));
+
+      // 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);
+          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);
+    }
+
+    // ── Chevron ──
+    .accordion-chevron {
+      color: var(--matcha-color-icon-default);
+    }
+
+    // ── 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;
+    }
+  }
+}

package/components/matcha-audio-player.scss

@@ -1,31 +1,31 @@
-@use "sass:map";
-
-// =============================================================================
-// matcha-audio-player.scss — Audio player component
-// Aligned with Figma matcha/audio-player
-// Angular: matcha-audio-player
-// =============================================================================
-
-@mixin matcha-audio-player-theme($theme) {
-
-  .matcha-audio-player {
-    .is-selected {
-      box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-accent);
-    }
-  }
-}
-
-// ── Layout ──────────────────────────────────────────────────────────────────
-
-.matcha-audio-player {
-  .audio-player {
-    audio {
-      // display: none
-    }
-
-    .audio & {
-      a { display: none; }
-      audio { display: inline-block; }
-    }
-  }
-}
+@use "sass:map";
+
+// =============================================================================
+// matcha-audio-player.scss — Audio player component
+// Aligned with Figma matcha/audio-player
+// Angular: matcha-audio-player
+// =============================================================================
+
+@mixin matcha-audio-player-theme($theme) {
+
+  .matcha-audio-player {
+    .is-selected {
+      box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-accent);
+    }
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+.matcha-audio-player {
+  .audio-player {
+    audio {
+      // display: none
+    }
+
+    .audio & {
+      a { display: none; }
+      audio { display: inline-block; }
+    }
+  }
+}