ply-css 1.7.1 → 1.8.0

package/llms-full.txt

@@ -297,6 +297,15 @@ Key variables for mapping:
 
 This ensures third-party components follow ply's theme automatically, including dark mode and custom themes.
 
+### Token Scales
+
+ply exposes three scales so size and shape are themeable from a few variables:
+
+- **Border radius** — `--ply-radius-none/xs/sm/md/lg/xl/full` scale, consumed by semantic aliases `--ply-border-radius` (`= radius-sm`), `--ply-btn-border-radius` (`= radius-full`), `--ply-label-radius` (`= radius-sm`), `--ply-badge-radius` (`= radius-full`), `--ply-input-radius` (`= radius-sm`). Override the scale once or retarget one alias.
+- **Control sizing** — `--ply-control-{font,py,px,lh}` (+ `-lg`/`-sm`/`-xs`) are shared by inputs, buttons, selects, and textareas, so a given size renders the same height across every control. Height is emergent (`padding-y × 2 + line-height`), never fixed.
+- **Spacing** — `--ply-space-xs/sm/md`, `--ply-space` (the 16px default unit), `--ply-space-lg/xl/xxl`.
+- **Inverse & black** — `--ply-bg-inverse` and `--ply-layer-inverse-0/1` reference the text-color variables (flip opposite the body automatically); `--ply-color-black` is `#000` in every mode.
+
 ---
 
 ## Navigation — Semantic and Responsive

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ply-css",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "ply — A ratio-based, AI-ready CSS framework with dark mode, accessibility, and a small footprint",
   "main": "dist/css/ply.css",
   "style": "dist/css/ply.min.css",

package/ply-classes.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.1",
+  "version": "1.8.0",
   "framework": "ply",
   "totalClasses": 457,
   "uniqueClasses": 457,
@@ -63,7 +63,7 @@
   },
   "themeTemplate": {
     "description": "Copy-paste starting point for custom themes. Replace placeholder values with your design colors. Every ply component respects these variables.",
-    "css": "[data-theme=\"my-theme\"] {\n  /* Background */\n  --ply-bg-body: #___;\n  --ply-bg-surface: #___;\n  --ply-bg-surface-alt: #___;\n  --ply-bg-muted: #___;\n\n  /* Text */\n  --ply-color-body: #___;\n  --ply-color-headings: #___;\n  --ply-color-secondary: #___;\n  --ply-color-muted: #___;\n  --ply-color-placeholder: #___;\n  --ply-color-text-inverse: #___;\n\n  /* Borders */\n  --ply-border-color: #___;\n  --ply-border-strong: #___;\n  --ply-border-radius: 0.25rem;\n\n  /* Interactive */\n  --ply-color-accent: #___;\n  --ply-color-focus: #___;\n  --ply-color-link-hover: #___;\n\n  /* Buttons */\n  --ply-btn-default-bg: #___;\n  --ply-btn-default-color: #___;\n  --ply-btn-default-bg-hover: #___;\n  --ply-btn-default-bg-active: #___;\n  --ply-btn-secondary-bg: #___;\n  --ply-btn-secondary-color: #___;\n  --ply-btn-secondary-bg-hover: #___;\n  --ply-btn-secondary-bg-active: #___;\n  --ply-btn-border-radius: 2rem;\n  --ply-btn-font-size: 1em;\n  --ply-btn-gap: 0.5em;\n\n  /* Forms */\n  --ply-color-input-bg: #___;\n  --ply-color-input-border: #___;\n  --ply-color-error: #___;\n  --ply-color-success: #___;\n\n  /* Navigation */\n  --ply-nav-bg: #___;\n  --ply-nav-color: #___;\n  --ply-nav-border: #___;\n  --ply-nav-hover: #___;\n\n  /* Code */\n  --ply-color-code-bg: #___;\n  --ply-color-code-border: #___;\n\n  /* Tables */\n  --ply-color-table-border: #___;\n  --ply-color-table-striped: #___;\n\n  /* Elevation */\n  --ply-layer-0: #___;\n  --ply-layer-1: #___;\n  --ply-layer-2: #___;\n  --ply-layer-3: #___;\n  --ply-shadow-1: rgba(0, 0, 0, 0.08);\n  --ply-shadow-2: rgba(0, 0, 0, 0.1);\n  --ply-shadow-3: rgba(0, 0, 0, 0.12);\n\n  /* Typography (optional) */\n  --ply-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  --ply-font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  --ply-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n}"
+    "css": "[data-theme=\"my-theme\"] {\n  /* Background */\n  --ply-bg-body: #___;\n  --ply-bg-surface: #___;\n  --ply-bg-surface-alt: #___;\n  --ply-bg-muted: #___;\n\n  /* Text */\n  --ply-color-body: #___;\n  --ply-color-headings: #___;\n  --ply-color-secondary: #___;\n  --ply-color-muted: #___;\n  --ply-color-placeholder: #___;\n  --ply-color-text-inverse: #___;\n\n  /* Borders */\n  --ply-border-color: #___;\n  --ply-border-strong: #___;\n  --ply-border-radius: 0.25rem;\n\n  /* Interactive */\n  --ply-color-accent: #___;\n  --ply-color-focus: #___;\n  --ply-color-link-hover: #___;\n\n  /* Buttons */\n  --ply-btn-default-bg: #___;\n  --ply-btn-default-color: #___;\n  --ply-btn-default-bg-hover: #___;\n  --ply-btn-default-bg-active: #___;\n  --ply-btn-secondary-bg: #___;\n  --ply-btn-secondary-color: #___;\n  --ply-btn-secondary-bg-hover: #___;\n  --ply-btn-secondary-bg-active: #___;\n  --ply-btn-border-radius: 2rem;\n  --ply-btn-font-size: 1em;\n  --ply-btn-gap: 0.5em;\n\n  /* Forms */\n  --ply-color-input-bg: #___;\n  --ply-color-input-border: #___;\n  --ply-color-error: #___;\n  --ply-color-success: #___;\n\n  /* Navigation */\n  --ply-nav-bg: #___;\n  --ply-nav-color: #___;\n  --ply-nav-border: #___;\n  --ply-nav-hover: #___;\n\n  /* Code */\n  --ply-color-code-bg: #___;\n  --ply-color-code-border: #___;\n\n  /* Tables */\n  --ply-color-table-border: #___;\n  --ply-color-table-striped: #___;\n\n  /* Elevation */\n  --ply-layer-0: #___;\n  --ply-layer-1: #___;\n  --ply-layer-2: #___;\n  --ply-layer-3: #___;\n  --ply-shadow-1: rgba(0, 0, 0, 0.08);\n  --ply-shadow-2: rgba(0, 0, 0, 0.1);\n  --ply-shadow-3: rgba(0, 0, 0, 0.12);\n\n  /* Typography (optional) */\n  --ply-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  --ply-font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  --ply-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n\n  /* Border radius scale */\n  --ply-radius-sm: 0.25rem;\n  --ply-radius-md: 0.5rem;\n  --ply-radius-lg: 0.75rem;\n  --ply-radius-full: 9999px;\n  --ply-border-radius: var(--ply-radius-sm);\n  --ply-btn-border-radius: var(--ply-radius-full);\n  --ply-label-radius: var(--ply-radius-sm);\n  --ply-badge-radius: var(--ply-radius-full);\n\n  /* Control sizing (inputs, buttons, selects, textareas share these) */\n  --ply-control-font: 1rem;\n  --ply-control-py: 0.625rem;\n  --ply-control-px: 1.5rem;\n  --ply-control-lh: 1.5rem;\n\n  /* Spacing */\n  --ply-space: 1rem;\n\n  /* Inverse / black */\n  --ply-bg-inverse: var(--ply-color-body);\n  --ply-color-black: #000000;\n}"
   },
   "classes": {
     "units-container": {
@@ -2450,7 +2450,8 @@
       "--ply-bg-surface": "Card/panel background. Light: #ffffff, Dark: #262626",
       "--ply-bg-surface-alt": "Alternate surface. Light: #f4f4f4, Dark: #333333",
       "--ply-bg-muted": "Muted/hover background. Light: #e0e0e0, Dark: #393939",
-      "--ply-bg-glass": "Frosted glass overlay. backdrop-filter: blur(8px). Light: rgba(255,255,255,0.15), Dark: rgba(38,38,38,0.25)"
+      "--ply-bg-glass": "Frosted glass overlay. backdrop-filter: blur(8px). Light: rgba(255,255,255,0.15), Dark: rgba(38,38,38,0.25)",
+      "--ply-bg-inverse": "Surface opposite the body (= --ply-color-body). Light: #161616, Dark: #f4f4f4"
     },
     "text": {
       "--ply-color-body": "Primary text color. Light: #161616, Dark: #f4f4f4",
@@ -2458,13 +2459,28 @@
       "--ply-color-secondary": "Secondary text. Light: #525252, Dark: #c6c6c6",
       "--ply-color-muted": "Muted/tertiary text (supplementary content). Light: #767676, Dark: #8d8d8d",
       "--ply-color-placeholder": "Input placeholder text. Light: #a8a8a8, Dark: #6f6f6f",
-      "--ply-color-text-inverse": "Inverse text (for colored backgrounds). Light: #fff, Dark: #fff"
+      "--ply-color-text-inverse": "Inverse text (for colored backgrounds). Light: #fff, Dark: #fff",
+      "--ply-color-black": "Absolute black, mode-independent. #000000"
     },
     "borders": {
       "--ply-border-color": "Standard border. Light: #e0e0e0, Dark: #525252",
       "--ply-border-strong": "Emphasized border. Light: #8d8d8d, Dark: #6f6f6f",
       "--ply-border-radius": "Global border-radius for inputs, cards, dialogs, details, notifications, and other components. Default: 0.25rem. Override to change the overall shape language (e.g., 0 for sharp, 0.5rem for softer)."
     },
+    "radius": {
+      "--ply-radius-none": "Radius scale: square. Default: 0",
+      "--ply-radius-xs": "Radius scale. Default: 0.125rem (2px)",
+      "--ply-radius-sm": "Radius scale. Default: 0.25rem (4px)",
+      "--ply-radius-md": "Radius scale. Default: 0.5rem (8px)",
+      "--ply-radius-lg": "Radius scale. Default: 0.75rem (12px)",
+      "--ply-radius-xl": "Radius scale. Default: 1rem (16px)",
+      "--ply-radius-full": "Radius scale: pill/circle. Default: 9999px",
+      "--ply-border-radius": "Default element radius alias. Default: var(--ply-radius-sm)",
+      "--ply-btn-border-radius": "Button radius alias. Default: var(--ply-radius-full)",
+      "--ply-label-radius": "Label radius alias. Default: var(--ply-radius-sm)",
+      "--ply-badge-radius": "Badge radius alias. Default: var(--ply-radius-full)",
+      "--ply-input-radius": "Input radius alias. Default: var(--ply-radius-sm)"
+    },
     "interactive": {
       "--ply-color-accent": "Brand accent color for icons, badges, and section accents. Independent of button color and focus rings. Light: #0353e9, Dark: #4589ff. Override in custom themes without affecting buttons.",
       "--ply-color-link": "Link color. Light: #0f62fe, Dark: #78a9ff",
@@ -2479,6 +2495,24 @@
       "--ply-color-error": "Error state color for borders and text. Defaults to var(--ply-red-1). Used by .input-error, .error, .required, and stepper error states.",
       "--ply-color-success": "Success state color for borders and text. Defaults to var(--ply-green-1). Used by .input-success, .success, and stepper completed states."
     },
+    "controlSizing": {
+      "--ply-control-font-lg": "Control font-size (Large). Default: 1.125rem",
+      "--ply-control-font": "Control font-size (Default). Default: 1rem",
+      "--ply-control-font-sm": "Control font-size (Small). Default: 0.875rem",
+      "--ply-control-font-xs": "Control font-size (XSmall). Default: 0.75rem",
+      "--ply-control-py-lg": "Control vertical padding (Large). Default: 0.875rem",
+      "--ply-control-py": "Control vertical padding (Default). Default: 0.625rem",
+      "--ply-control-py-sm": "Control vertical padding (Small). Default: 0.375rem",
+      "--ply-control-py-xs": "Control vertical padding (XSmall). Default: 0.25rem",
+      "--ply-control-px-lg": "Control horizontal padding (Large). Default: 2rem",
+      "--ply-control-px": "Control horizontal padding (Default). Default: 1.5rem",
+      "--ply-control-px-sm": "Control horizontal padding (Small). Default: 1rem",
+      "--ply-control-px-xs": "Control horizontal padding (XSmall). Default: 0.75rem",
+      "--ply-control-lh-lg": "Control line-height (Large). Default: 1.75rem",
+      "--ply-control-lh": "Control line-height (Default). Default: 1.5rem",
+      "--ply-control-lh-sm": "Control line-height (Small). Default: 1.25rem",
+      "--ply-control-lh-xs": "Control line-height (XSmall). Default: 1rem"
+    },
     "code": {
       "--ply-color-code-bg": "Inline code background. Light: #f4f4f4, Dark: #333333",
       "--ply-color-code-border": "Inline code border. Light: #e0e0e0, Dark: #525252"
@@ -2510,7 +2544,9 @@
       "--ply-layer-3": "Highest layer. Light: #c6c6c6, Dark: #525252",
       "--ply-shadow-1": "Subtle shadow. Light: rgba(0,0,0,0.08), Dark: rgba(0,0,0,0.2)",
       "--ply-shadow-2": "Medium shadow. Light: rgba(0,0,0,0.1), Dark: rgba(0,0,0,0.3)",
-      "--ply-shadow-3": "Heavy shadow. Light: rgba(0,0,0,0.12), Dark: rgba(0,0,0,0.4)"
+      "--ply-shadow-3": "Heavy shadow. Light: rgba(0,0,0,0.12), Dark: rgba(0,0,0,0.4)",
+      "--ply-layer-inverse-0": "Base inverse layer (= --ply-color-body). Light: #161616, Dark: #f4f4f4",
+      "--ply-layer-inverse-1": "Raised inverse layer (= --ply-color-secondary). Light: #525252, Dark: #c6c6c6"
     },
     "brand": {
       "--ply-bg-blue": "Blue button/badge bg. #0f62fe (same both themes)",
@@ -2542,6 +2578,7 @@
       "--ply-space-xs": "Extra-small spacing unit. Default: 0.25rem",
       "--ply-space-sm": "Small spacing unit. Default: 0.5rem",
       "--ply-space-md": "Medium spacing unit. Default: 0.75rem",
+      "--ply-space": "Default spacing unit. Default: 1rem (16px)",
       "--ply-space-lg": "Large spacing unit. Default: 1.5rem",
       "--ply-space-xl": "Extra-large spacing unit. Default: 2rem",
       "--ply-space-xxl": "Extra extra large spacing unit. Default: 3rem"
@@ -2568,7 +2605,7 @@
       "--ply-cyan-surface": "Theme-aware cyan pastel background. Light: cyan pastel, Dark: dark muted cyan. For cards, badges, alerts.",
       "--ply-cyan-border": "Theme-aware cyan border. Light: light cyan tint, Dark: medium-dark cyan. For colored card borders."
     },
-    "totalCustomProperties": 92
+    "totalCustomProperties": 131
   },
   "semanticElements": {
     "dialog": {

package/src/scss/components/_buttons.scss

@@ -19,10 +19,10 @@ button.btn {
   gap: var(--ply-btn-gap, 0.5em);
 
   font-family: var(--ply-font-body, #{variables.$font-family-controls});
-  font-size: var(--ply-btn-font-size, 1em);
+  font-size: var(--ply-btn-font-size, var(--ply-control-font));
   font-weight: 400;
 
-  line-height: variables.$base-line;
+  line-height: var(--ply-control-lh);
 
   text-decoration: none;
   color: var(--ply-btn-secondary-color, var(--ply-color-text-inverse, #fff));
@@ -36,7 +36,7 @@ button.btn {
   box-shadow: none;
   cursor: pointer;
   background: var(--ply-btn-secondary-bg, #393939);
-  padding: variables.$padding-btn;
+  padding: var(--ply-control-py) var(--ply-control-px);
 
   &:hover,
   &:active,
@@ -77,8 +77,9 @@ input[type="submit"].btn-lg,
 input[type="button"].btn-lg,
 input[type="reset"].btn-lg,
 button.btn-lg {
-  font-size: variables.$font-size-big;
-  padding: 0.875rem 2rem;
+  font-size: var(--ply-control-font-lg);
+  line-height: var(--ply-control-lh-lg);
+  padding: var(--ply-control-py-lg) var(--ply-control-px-lg);
 }
 
 .btn-sm,
@@ -86,8 +87,9 @@ input[type="submit"].btn-sm,
 input[type="button"].btn-sm,
 input[type="reset"].btn-sm,
 button.btn-sm {
-  font-size: variables.$font-size-small;
-  padding: 0.375rem 1rem;
+  font-size: var(--ply-control-font-sm);
+  line-height: var(--ply-control-lh-sm);
+  padding: var(--ply-control-py-sm) var(--ply-control-px-sm);
 }
 
 .btn-xs,
@@ -95,8 +97,9 @@ input[type="submit"].btn-xs,
 input[type="button"].btn-xs,
 input[type="reset"].btn-xs,
 button.btn-xs {
-  font-size: variables.$font-size-smaller;
-  padding: 0.25rem 0.75rem;
+  font-size: var(--ply-control-font-xs);
+  line-height: var(--ply-control-lh-xs);
+  padding: var(--ply-control-py-xs) var(--ply-control-px-xs);
   vertical-align: baseline;
 }
 

package/src/scss/components/_colors.scss

@@ -31,6 +31,16 @@ $btn-secondary-dark-active: #bebebe;
   --ply-bg-surface-alt: #f4f4f4;
   --ply-bg-muted: #e0e0e0;
 
+  // Inverse surface = the body text color (flips opposite the body automatically).
+  // Referencing the parent vars means a themer who changes the text color gets the
+  // inverse surface for free, or can override these directly to manage independently.
+  --ply-bg-inverse: var(--ply-color-body);
+  --ply-layer-inverse-0: var(--ply-color-body);
+  --ply-layer-inverse-1: var(--ply-color-secondary);
+
+  // Absolute black — stays #000 in every mode/theme (intentionally not derived)
+  --ply-color-black: #000000;
+
   // Text
   --ply-color-body: #161616;
   --ply-color-headings: #161616;
@@ -81,8 +91,42 @@ $btn-secondary-dark-active: #bebebe;
   --ply-btn-secondary-bg-hover: color-mix(in oklch, var(--ply-btn-secondary-bg), black 15%);
   --ply-btn-secondary-bg-active: #{$btn-secondary-light-active};
   --ply-btn-secondary-bg-active: color-mix(in oklch, var(--ply-btn-secondary-bg), black 25%);
-  --ply-border-radius: #{variables.$border-radius};
-  --ply-btn-border-radius: #{variables.$button-radius};
+
+  // Border radius scale
+  --ply-radius-none: 0;
+  --ply-radius-xs: 0.125rem;   // 2px
+  --ply-radius-sm: 0.25rem;    // 4px
+  --ply-radius-md: 0.5rem;     // 8px
+  --ply-radius-lg: 0.75rem;    // 12px
+  --ply-radius-xl: 1rem;       // 16px
+  --ply-radius-full: 9999px;   // pill / circle
+
+  // Semantic component radius aliases — components consume these, themers can override either layer
+  --ply-border-radius: var(--ply-radius-sm);
+  --ply-btn-border-radius: var(--ply-radius-full);
+  --ply-label-radius: var(--ply-radius-sm);    // labels: small radius by default
+  --ply-badge-radius: var(--ply-radius-full);  // badges: pill by default
+
+  // Control sizing scale — shared by inputs, buttons, selects, textareas so a given
+  // size produces the same height across every form control. Height is emergent
+  // (font-size + vertical padding + line-height), never a fixed dimension.
+  --ply-control-font-lg: 1.125rem;   // 18px
+  --ply-control-font:     1rem;       // 16px
+  --ply-control-font-sm:  0.875rem;   // 14px
+  --ply-control-font-xs:  0.75rem;    // 12px
+  --ply-control-py-lg: 0.875rem;      // 14px
+  --ply-control-py:     0.625rem;     // 10px
+  --ply-control-py-sm:  0.375rem;     // 6px
+  --ply-control-py-xs:  0.25rem;      // 4px
+  --ply-control-px-lg: 2rem;          // 32px
+  --ply-control-px:     1.5rem;       // 24px
+  --ply-control-px-sm:  1rem;         // 16px
+  --ply-control-px-xs:  0.75rem;      // 12px
+  --ply-control-lh-lg: 1.75rem;       // 28px
+  --ply-control-lh:     1.5rem;       // 24px
+  --ply-control-lh-sm:  1.25rem;      // 20px
+  --ply-control-lh-xs:  1rem;         // 16px
+  --ply-input-radius: var(--ply-radius-sm);
 
   // Navigation
   --ply-nav-bg: var(--ply-bg-body);
@@ -182,6 +226,7 @@ $btn-secondary-dark-active: #bebebe;
   --ply-space-xs: 0.25rem;
   --ply-space-sm: 0.5rem;
   --ply-space-md: 0.75rem;
+  --ply-space: 1rem;           // 16px — the default ply spacing unit
   --ply-space-lg: 1.5rem;
   --ply-space-xl: 2rem;
   --ply-space-xxl: 3rem;
@@ -194,6 +239,10 @@ $btn-secondary-dark-active: #bebebe;
   --ply-bg-surface-alt: #262626;
   --ply-bg-muted: #393939;
 
+  // --ply-bg-inverse / --ply-layer-inverse-* / --ply-color-black are not redefined here:
+  // the inverse vars reference --ply-color-body/secondary (which flip in this mixin), and
+  // black is mode-independent.
+
   // Text
   --ply-color-body: #f4f4f4;
   --ply-color-headings: #f4f4f4;

package/src/scss/components/_forms.scss

@@ -74,7 +74,9 @@
     border-radius: var(--ply-border-radius);
     display: block;
     width: 100%;
-    padding: 0.5em 0.75em;
+    font-size: var(--ply-control-font);
+    line-height: var(--ply-control-lh);
+    padding: var(--ply-control-py) var(--ply-control-px);
   }
 }
 
@@ -264,26 +266,33 @@ input.input-on-black {
   }
 }
 
-/* Sizes */
+/* Sizes — share the control sizing scale with buttons so a given size is the
+   same height across inputs, buttons, selects and textareas */
 .form .input-lg,
 input.input-lg[type],
 textarea.input-lg,
 select.input-lg {
-  font-size: variables.$font-size-xl;
+  font-size: var(--ply-control-font-lg);
+  line-height: var(--ply-control-lh-lg);
+  padding: var(--ply-control-py-lg) var(--ply-control-px-lg);
 }
 
 .form .input-sm,
 input.input-sm[type],
 textarea.input-sm,
 select.input-sm {
-  font-size: variables.$font-size-small;
+  font-size: var(--ply-control-font-sm);
+  line-height: var(--ply-control-lh-sm);
+  padding: var(--ply-control-py-sm) var(--ply-control-px-sm);
 }
 
 .form .input-xs,
 input.input-xs[type],
 textarea.input-xs,
 select.input-xs {
-  font-size: variables.$font-size-smaller;
+  font-size: var(--ply-control-font-xs);
+  line-height: var(--ply-control-lh-xs);
+  padding: var(--ply-control-py-xs) var(--ply-control-px-xs);
 }
 
 /* Append & Prepend */
@@ -394,7 +403,7 @@ select.input-xs {
   }
 }
 
-/* Select */
+// Select — the native dropdown / picker for choosing one option from a list
 .form select {
   appearance: none;
   background-color: var(--ply-color-input-bg);

package/src/scss/components/_labels.scss

@@ -15,13 +15,16 @@
   font-weight: normal;
   text-transform: uppercase;
 }
+.label {
+  border-radius: var(--ply-label-radius);
+}
 .label-outline {
   background: none;
   border: 1px solid var(--ply-color-body, colors.$color-black);
   padding: 3px 6px 2px 6px;
 }
 .badge {
-  border-radius: 15px;
+  border-radius: var(--ply-badge-radius);
 }
 .badge-small {
   font-size: variables.$font-size-smaller;

package/src/scss/components/_reset.scss

@@ -275,23 +275,31 @@ summary {
   font-weight: 600;
   padding: 0.25rem 0;
   list-style: none;
+  display: flex;
+  align-items: center;
 
   &::marker,
   &::-webkit-details-marker {
     display: none;
   }
 
-  &::before {
-    content: '\25B6';
-    display: inline-block;
-    margin-right: 0.5rem;
-    font-size: 0.75em;
+  // Caret sits on the right and rotates when open. Drawn with borders (symmetric
+  // bounding box) so the 180° rotation pivots cleanly with no vertical shift.
+  &::after {
+    content: '';
+    flex: none;
+    margin-left: auto;
+    width: 0;
+    height: 0;
+    border-left: 0.3em solid transparent;
+    border-right: 0.3em solid transparent;
+    border-top: 0.35em solid var(--ply-color-secondary);
     transition: transform 0.15s ease;
   }
 }
 
-details[open] > summary::before {
-  transform: rotate(90deg);
+details[open] > summary::after {
+  transform: rotate(180deg);
 }
 
 details[open] > summary {