@inchurch/matcha-theme 21.3.3 → 22.0.0

package/components/matcha-list.scss

@@ -1,211 +1,211 @@
-@use "sass:map";
-
-// =============================================================================
-// matcha-list.scss — List & List Item (navigation, settings, content lists)
-// =============================================================================
-
-// ── State layer ─────────────────────────────────────────────────────────────
-
-.matcha-list-item {
-    position: relative;
-    overflow: hidden;
-
-    &::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background: currentColor;
-        opacity: 0;
-        border-radius: inherit;
-        pointer-events: none;
-        transition: opacity var(--matcha-duration-instant, 80ms) linear;
-    }
-
-    &:hover:not(.matcha-list-item--disabled)::before {
-        opacity: var(--matcha-state-hover, 0.08);
-    }
-
-    &:active:not(.matcha-list-item--disabled)::before {
-        opacity: var(--matcha-state-active, 0.12);
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-        &::before { transition: none; }
-    }
-}
-
-// =============================================================================
-// Theme mixin
-// =============================================================================
-
-@mixin matcha-list-theme($theme) {
-
-    // ── List container ──
-    matcha-list,
-    matcha-nav-list {
-        display: block;
-        padding: var(--matcha-space-100, 8px) 0;
-
-        &.matcha-list-dense {
-            matcha-list-item,
-            .matcha-list-item {
-                min-height: 36px;
-            }
-        }
-    }
-
-    // ── List item ──
-    matcha-list-item,
-    a[matcha-list-item],
-    button[matcha-list-item],
-    .matcha-list-item {
-        display: flex;
-        align-items: center;
-        min-height: 48px;
-        padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
-        border-radius: var(--matcha-radius-md, 4px);
-        cursor: pointer;
-        outline: none;
-        color: var(--matcha-list-item-text, var(--matcha-color-fg));
-        text-decoration: none;
-        transition: background-color 150ms;
-
-        // Focus ring
-        &:focus-visible {
-            outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
-            outline-offset: var(--matcha-state-focus-ring-offset, 2px);
-        }
-
-        // Disabled
-        &.matcha-list-item--disabled,
-        &.matcha-list-item-disabled {
-            opacity: var(--matcha-opacity-disabled, 0.38);
-            pointer-events: none;
-            cursor: default;
-        }
-
-        // Active/Selected
-        &.matcha-list-item--active {
-            background-color: var(--matcha-color-accent-surface, var(--matcha-color-accent-alpha));
-
-            .matcha-list-item__label {
-                color: var(--matcha-color-accent);
-                font-weight: 600;
-            }
-
-            .matcha-list-item__leading {
-                color: var(--matcha-color-accent);
-            }
-        }
-    }
-
-    // ── Item content layout ──
-    .matcha-list-item-content,
-    .matcha-list-item__content {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        gap: var(--matcha-space-150, 12px);
-    }
-
-    // ── Leading (icon, avatar) ──
-    .matcha-list-item__leading {
-        flex-shrink: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--matcha-color-hint, var(--matcha-color-text-muted));
-    }
-
-    // ── Text area (label + description) ──
-    .matcha-list-item__text {
-        flex: 1;
-        min-width: 0;
-        display: flex;
-        flex-direction: column;
-        gap: var(--matcha-space-025, 2px);
-    }
-
-    .matcha-list-item__label {
-        font-size: var(--matcha-text-body-md, 14px);
-        font-weight: var(--matcha-weight-regular, 400);
-        line-height: var(--matcha-leading-body-md, 20px);
-        color: var(--matcha-list-item-text, var(--matcha-color-fg));
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    .matcha-list-item__description {
-        font-size: var(--matcha-text-body-sm, 12px);
-        font-weight: var(--matcha-weight-regular, 400);
-        line-height: var(--matcha-leading-body-sm, 16px);
-        color: var(--matcha-color-hint, var(--matcha-color-text-muted));
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    // ── Trailing (chevron, badge, switch, meta) ──
-    .matcha-list-item__trailing {
-        flex-shrink: 0;
-        display: flex;
-        align-items: center;
-        gap: var(--matcha-space-100, 8px);
-        color: var(--matcha-color-hint, var(--matcha-color-text-muted));
-    }
-
-    // ── Divider between items ──
-    .matcha-list-divider {
-        height: var(--matcha-border-hairline, 1px);
-        margin: var(--matcha-space-050, 4px) var(--matcha-space-200, 16px);
-        background-color: var(--matcha-color-border);
-        opacity: var(--matcha-opacity-subtle, 0.10);
-    }
-
-    // ── Section header ──
-    .matcha-list-subheader {
-        display: flex;
-        align-items: center;
-        padding: var(--matcha-space-200, 16px) var(--matcha-space-200, 16px) var(--matcha-space-075, 6px);
-        font-size: var(--matcha-text-p-tiny, 11px);
-        font-weight: var(--matcha-weight-medium, 500);
-        line-height: var(--matcha-leading-p-tiny, 14px);
-        letter-spacing: var(--matcha-letter-spacing-wide, 0.5px);
-        text-transform: uppercase;
-        color: var(--matcha-color-hint, var(--matcha-color-text-muted));
-    }
-
-    // ── 2-line variant (with description) ──
-    .matcha-list-item--two-line,
-    matcha-list-item.matcha-list-item--two-line {
-        min-height: 64px;
-        padding-top: var(--matcha-space-150, 12px);
-        padding-bottom: var(--matcha-space-150, 12px);
-    }
-
-    // ── Dense variant ──
-    .matcha-list--dense {
-        matcha-list-item,
-        .matcha-list-item {
-            min-height: 36px;
-            padding: var(--matcha-space-050, 4px) var(--matcha-space-200, 16px);
-
-            .matcha-list-item__label {
-                font-size: var(--matcha-text-label-sm, 13px);
-            }
-        }
-    }
-
-    // ── Inset (leading space without icon) ──
-    .matcha-list-item--inset {
-        padding-left: calc(var(--matcha-space-200, 16px) + 36px);
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-        matcha-list-item,
-        .matcha-list-item {
-            transition: none;
-        }
-    }
-}
+@use "sass:map";
+
+// =============================================================================
+// matcha-list.scss — List & List Item (navigation, settings, content lists)
+// =============================================================================
+
+// ── State layer ─────────────────────────────────────────────────────────────
+
+.matcha-list-item {
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: currentColor;
+        opacity: 0;
+        border-radius: inherit;
+        pointer-events: none;
+        transition: opacity var(--matcha-duration-instant, 80ms) linear;
+    }
+
+    &:hover:not(.matcha-list-item--disabled)::before {
+        opacity: var(--matcha-state-hover, 0.08);
+    }
+
+    &:active:not(.matcha-list-item--disabled)::before {
+        opacity: var(--matcha-state-active, 0.12);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &::before { transition: none; }
+    }
+}
+
+// =============================================================================
+// Theme mixin
+// =============================================================================
+
+@mixin matcha-list-theme($theme) {
+
+    // ── List container ──
+    matcha-list,
+    matcha-nav-list {
+        display: block;
+        padding: var(--matcha-space-100, 8px) 0;
+
+        &.matcha-list-dense {
+            matcha-list-item,
+            .matcha-list-item {
+                min-height: 36px;
+            }
+        }
+    }
+
+    // ── List item ──
+    matcha-list-item,
+    a[matcha-list-item],
+    button[matcha-list-item],
+    .matcha-list-item {
+        display: flex;
+        align-items: center;
+        min-height: 48px;
+        padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
+        border-radius: var(--matcha-radius-md, 4px);
+        cursor: pointer;
+        outline: none;
+        color: var(--matcha-list-item-text, var(--matcha-color-fg));
+        text-decoration: none;
+        transition: background-color 150ms;
+
+        // Focus ring
+        &:focus-visible {
+            outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
+            outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+        }
+
+        // Disabled
+        &.matcha-list-item--disabled,
+        &.matcha-list-item-disabled {
+            opacity: var(--matcha-opacity-disabled, 0.38);
+            pointer-events: none;
+            cursor: default;
+        }
+
+        // Active/Selected
+        &.matcha-list-item--active {
+            background-color: var(--matcha-color-accent-surface, var(--matcha-color-accent-alpha));
+
+            .matcha-list-item__label {
+                color: var(--matcha-color-accent);
+                font-weight: 600;
+            }
+
+            .matcha-list-item__leading {
+                color: var(--matcha-color-accent);
+            }
+        }
+    }
+
+    // ── Item content layout ──
+    .matcha-list-item-content,
+    .matcha-list-item__content {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        gap: var(--matcha-space-150, 12px);
+    }
+
+    // ── Leading (icon, avatar) ──
+    .matcha-list-item__leading {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--matcha-color-hint, var(--matcha-color-text-muted));
+    }
+
+    // ── Text area (label + description) ──
+    .matcha-list-item__text {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--matcha-space-025, 2px);
+    }
+
+    .matcha-list-item__label {
+        font-size: var(--matcha-text-body-md, 14px);
+        font-weight: var(--matcha-weight-regular, 400);
+        line-height: var(--matcha-leading-body-md, 20px);
+        color: var(--matcha-list-item-text, var(--matcha-color-fg));
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .matcha-list-item__description {
+        font-size: var(--matcha-text-body-sm, 12px);
+        font-weight: var(--matcha-weight-regular, 400);
+        line-height: var(--matcha-leading-body-sm, 16px);
+        color: var(--matcha-color-hint, var(--matcha-color-text-muted));
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    // ── Trailing (chevron, badge, switch, meta) ──
+    .matcha-list-item__trailing {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        gap: var(--matcha-space-100, 8px);
+        color: var(--matcha-color-hint, var(--matcha-color-text-muted));
+    }
+
+    // ── Divider between items ──
+    .matcha-list-divider {
+        height: var(--matcha-border-hairline, 1px);
+        margin: var(--matcha-space-050, 4px) var(--matcha-space-200, 16px);
+        background-color: var(--matcha-color-border);
+        opacity: var(--matcha-opacity-subtle, 0.10);
+    }
+
+    // ── Section header ──
+    .matcha-list-subheader {
+        display: flex;
+        align-items: center;
+        padding: var(--matcha-space-200, 16px) var(--matcha-space-200, 16px) var(--matcha-space-075, 6px);
+        font-size: var(--matcha-text-p-tiny, 11px);
+        font-weight: var(--matcha-weight-medium, 500);
+        line-height: var(--matcha-leading-p-tiny, 14px);
+        letter-spacing: var(--matcha-letter-spacing-wide, 0.5px);
+        text-transform: uppercase;
+        color: var(--matcha-color-hint, var(--matcha-color-text-muted));
+    }
+
+    // ── 2-line variant (with description) ──
+    .matcha-list-item--two-line,
+    matcha-list-item.matcha-list-item--two-line {
+        min-height: 64px;
+        padding-top: var(--matcha-space-150, 12px);
+        padding-bottom: var(--matcha-space-150, 12px);
+    }
+
+    // ── Dense variant ──
+    .matcha-list--dense {
+        matcha-list-item,
+        .matcha-list-item {
+            min-height: 36px;
+            padding: var(--matcha-space-050, 4px) var(--matcha-space-200, 16px);
+
+            .matcha-list-item__label {
+                font-size: var(--matcha-text-label-sm, 13px);
+            }
+        }
+    }
+
+    // ── Inset (leading space without icon) ──
+    .matcha-list-item--inset {
+        padding-left: calc(var(--matcha-space-200, 16px) + 36px);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        matcha-list-item,
+        .matcha-list-item {
+            transition: none;
+        }
+    }
+}

package/components/matcha-menu.scss

@@ -1,99 +1,99 @@
-// =============================================================================
-// matcha-menu.scss — Dropdown context menu (modernized)
-// =============================================================================
-
-// matcha-menu é overlay-only: o host nunca deve ocupar espaço no fluxo.
-// display:contents tira o host (e o matcha-panel interno) do layout sem
-// afetar a popover — o overlay interno usa position:fixed/absolute. Sem isso,
-// quando o menu é filho direto de um container flex/grid com `gap` (ex.:
-// page-layout `.center.gap-outside` com gap 24px), o host vazio de altura ~0
-// vira um flex item que consome `gap` dos DOIS lados → "phantom gap" duplo
-// entre o elemento anterior e o seguinte. O matcha-toolbar já fazia isso
-// scoped (`> matcha-menu`); aqui generaliza pra qualquer container.
-matcha-menu,
-matcha-menu > matcha-panel {
-  display: contents;
-}
-
-.matcha-menu-content {
-  button,
-  [matcha-button] {
-    position: relative;
-    overflow: hidden;
-
-    &::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background: currentColor;
-      opacity: 0;
-      border-radius: inherit;
-      pointer-events: none;
-      transition: opacity var(--matcha-duration-instant, 80ms) linear;
-    }
-
-    &:hover:not([disabled])::before  { opacity: var(--matcha-state-hover, 0.08); }
-    &:active:not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
-
-    @media (prefers-reduced-motion: reduce) {
-      &::before { transition: none; }
-    }
-
-    &[disabled] { pointer-events: none; }
-  }
-}
-
-@mixin matcha-menu-theme($theme) {
-  .matcha-menu-content {
-    display: flex;
-    flex-direction: column;
-    padding: var(--matcha-space-100, 8px) 0;
-
-    button,
-    [matcha-button] {
-      width: 100%;
-      text-align: left;
-      justify-content: flex-start;
-      border-radius: 0;
-      padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
-      height: var(--matcha-space-500, 40px);
-      font-weight: var(--matcha-weight-medium, 500);
-
-      &:focus-visible:not([disabled]) {
-        outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
-        outline-offset: var(--matcha-state-focus-ring-offset, 2px);
-      }
-
-      matcha-icon,
-      .matcha-icon {
-        margin-right: var(--matcha-space-150, 12px);
-      }
-    }
-
-    .matcha-menu-item-has-submenu {
-      position: relative;
-      padding-right: calc(var(--matcha-space-400, 32px) + var(--matcha-space-050, 4px)); // 36
-
-      &::after {
-        content: '';
-        position: absolute;
-        right: var(--matcha-space-150, 12px);
-        top: 50%;
-        transform: translateY(-50%);
-        width: 0;
-        height: 0;
-        border-left: calc(var(--matcha-border-medium, 4px) + var(--matcha-border-hairline, 1px)) solid var(--matcha-color-hint, var(--matcha-color-text-muted));
-        border-top: var(--matcha-border-medium, 4px) solid transparent;
-        border-bottom: var(--matcha-border-medium, 4px) solid transparent;
-        opacity: var(--matcha-opacity-secondary, 0.54);
-        transition: opacity var(--matcha-duration-instant, 80ms) linear;
-      }
-
-      &:hover::after { opacity: var(--matcha-opacity-high, 0.87); }
-
-      @media (prefers-reduced-motion: reduce) {
-        &::after { transition: none; }
-      }
-    }
-  }
-}
+// =============================================================================
+// matcha-menu.scss — Dropdown context menu (modernized)
+// =============================================================================
+
+// matcha-menu é overlay-only: o host nunca deve ocupar espaço no fluxo.
+// display:contents tira o host (e o matcha-panel interno) do layout sem
+// afetar a popover — o overlay interno usa position:fixed/absolute. Sem isso,
+// quando o menu é filho direto de um container flex/grid com `gap` (ex.:
+// page-layout `.center.gap-outside` com gap 24px), o host vazio de altura ~0
+// vira um flex item que consome `gap` dos DOIS lados → "phantom gap" duplo
+// entre o elemento anterior e o seguinte. O matcha-toolbar já fazia isso
+// scoped (`> matcha-menu`); aqui generaliza pra qualquer container.
+matcha-menu,
+matcha-menu > matcha-panel {
+  display: contents;
+}
+
+.matcha-menu-content {
+  button,
+  [matcha-button] {
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: currentColor;
+      opacity: 0;
+      border-radius: inherit;
+      pointer-events: none;
+      transition: opacity var(--matcha-duration-instant, 80ms) linear;
+    }
+
+    &:hover:not([disabled])::before  { opacity: var(--matcha-state-hover, 0.08); }
+    &:active:not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
+
+    @media (prefers-reduced-motion: reduce) {
+      &::before { transition: none; }
+    }
+
+    &[disabled] { pointer-events: none; }
+  }
+}
+
+@mixin matcha-menu-theme($theme) {
+  .matcha-menu-content {
+    display: flex;
+    flex-direction: column;
+    padding: var(--matcha-space-100, 8px) 0;
+
+    button,
+    [matcha-button] {
+      width: 100%;
+      text-align: left;
+      justify-content: flex-start;
+      border-radius: 0;
+      padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
+      height: var(--matcha-space-500, 40px);
+      font-weight: var(--matcha-weight-medium, 500);
+
+      &:focus-visible:not([disabled]) {
+        outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
+        outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+      }
+
+      matcha-icon,
+      .matcha-icon {
+        margin-right: var(--matcha-space-150, 12px);
+      }
+    }
+
+    .matcha-menu-item-has-submenu {
+      position: relative;
+      padding-right: calc(var(--matcha-space-400, 32px) + var(--matcha-space-050, 4px)); // 36
+
+      &::after {
+        content: '';
+        position: absolute;
+        right: var(--matcha-space-150, 12px);
+        top: 50%;
+        transform: translateY(-50%);
+        width: 0;
+        height: 0;
+        border-left: calc(var(--matcha-border-medium, 4px) + var(--matcha-border-hairline, 1px)) solid var(--matcha-color-hint, var(--matcha-color-text-muted));
+        border-top: var(--matcha-border-medium, 4px) solid transparent;
+        border-bottom: var(--matcha-border-medium, 4px) solid transparent;
+        opacity: var(--matcha-opacity-secondary, 0.54);
+        transition: opacity var(--matcha-duration-instant, 80ms) linear;
+      }
+
+      &:hover::after { opacity: var(--matcha-opacity-high, 0.87); }
+
+      @media (prefers-reduced-motion: reduce) {
+        &::after { transition: none; }
+      }
+    }
+  }
+}