ply-css 1.5.0 → 1.6.1

package/llms-full.txt

@@ -1,6 +1,6 @@
 # plycss (ply) — Complete Documentation
 
-> ply is a ratio-based, AI-ready CSS framework with built-in dark mode, WCAG 2.1 AA accessibility, and a small footprint (~21KB gzipped). 457 utility classes, 120+ CSS custom properties, 13 auto-styled semantic elements. No JavaScript. No build step. Install via npm as `plycss` or use the CDN.
+> ply is a ratio-based, AI-ready CSS framework with built-in dark mode, WCAG 2.1 AA accessibility, and a small footprint (~21KB gzipped). 458 utility classes, 120+ CSS custom properties, 13 auto-styled semantic elements. No JavaScript. No build step. Install via npm as `plycss` or use the CDN.
 
 ---
 
@@ -246,6 +246,7 @@ Override `--ply-*` custom properties to theme the entire app with one CSS block:
   --ply-color-body: #1a1a1a;
   --ply-color-headings: #78350f;
   --ply-border-color: #fbbf24;
+  --ply-border-radius: 0.375rem;
   --ply-btn-default-bg: #b45309;
   --ply-btn-default-bg-hover: #92400e;
   --ply-btn-default-bg-active: #7c2d12;
@@ -266,6 +267,36 @@ Setting any `data-theme` value prevents auto dark mode from interfering. All 120
 
 **Important:** If you override colors, verify 4.5:1 contrast for normal text and 3:1 for large text (18px bold / 24px) and UI components (WCAG 1.4.3).
 
+### Third-Party Components & Dark Mode
+
+When integrating third-party components that don't use `--ply-*` variables, map ply's variables to their styling:
+
+```css
+/* Map ply variables to a third-party date picker */
+.third-party-datepicker {
+  background: var(--ply-bg-surface);
+  color: var(--ply-color-body);
+  border-color: var(--ply-border-color);
+}
+.third-party-datepicker .selected {
+  background: var(--ply-btn-default-bg);
+  color: var(--ply-color-text-inverse);
+}
+.third-party-datepicker .header {
+  background: var(--ply-bg-surface-alt);
+  color: var(--ply-color-headings);
+}
+```
+
+Key variables for mapping:
+- Backgrounds: `--ply-bg-body`, `--ply-bg-surface`, `--ply-bg-surface-alt`, `--ply-bg-muted`
+- Text: `--ply-color-body`, `--ply-color-secondary`, `--ply-color-muted`
+- Borders: `--ply-border-color`, `--ply-border-strong`, `--ply-border-radius`
+- Interactive: `--ply-btn-default-bg`, `--ply-color-link`, `--ply-color-focus`
+- Inverse text: `--ply-color-text-inverse` (white in light, dark in dark)
+
+This ensures third-party components follow ply's theme automatically, including dark mode and custom themes.
+
 ---
 
 ## Navigation — Semantic and Responsive
@@ -369,7 +400,7 @@ Always include: `<meta name="viewport" content="width=device-width, initial-scal
 - `padding-xs` (0.25rem), `padding-sm` (0.5rem), `padding` (default), `padding-lg` (1.5rem), `padding-xl` (2rem)
 - `margin-bottom`, `margin-top-lg`, `margin-xl` — directional + size variants
 - `border` — 1px solid using `--ply-border-color` (theme-aware)
-- `border-radius` (default), `border-radius-lg` (0.75rem), `border-radius-xl` (1.5rem)
+- `border-radius` — uses `var(--ply-border-radius)` (default 0.25rem, themeable). `border-radius-lg`, `border-radius-xl`
 
 Equal-height cards in a row:
 
@@ -454,6 +485,48 @@ Outline buttons in input groups automatically match the input border. Button sca
 
 ---
 
+## Tables
+
+ply auto-styles `<table>` with borders, padding, and readable spacing. No classes needed for a basic table.
+
+| Class | Effect |
+|---|---|
+| `table-bordered` | Borders on all cells |
+| `table-stroked` | Bottom borders only |
+| `table-stripped` | Striped odd rows |
+| `table-hovered` | Row highlight on hover |
+| `table-simple` | Remove borders and left padding |
+| `table-flat` | Remove all borders and padding |
+| `table-container` | Responsive horizontal scroll wrapper |
+| `sortable` | Sort arrows on `<th>` (add to individual headers) |
+| `sort-asc` / `sort-desc` | Active sort direction indicator |
+| `table-filter` | Auto-size selects for filter bars |
+| `table-actions` | Right-aligned toolbar above table |
+
+```html
+<div class="table-container">
+  <table class="table-stripped table-hovered">
+    <thead>
+      <tr>
+        <th class="sortable sort-asc">Name</th>
+        <th class="sortable">Email</th>
+        <th>Role</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr><td>Jane Doe</td><td>jane@example.com</td><td>Admin</td></tr>
+      <tr><td>John Smith</td><td>john@example.com</td><td>Editor</td></tr>
+    </tbody>
+  </table>
+</div>
+```
+
+Tables respond to dark mode automatically — borders, stripe colors, and hover colors adapt via `--ply-color-table-border`, `--ply-color-table-stripped`, and `--ply-color-table-hovered`. Combine classes freely: `table-stripped table-hovered table-bordered` gives striped rows with hover highlights and full borders.
+
+Wrap any table in `<div class="table-container">` to get horizontal scrolling on small screens instead of layout overflow.
+
+---
+
 ## Alerts and Notifications
 
 ```html
@@ -799,7 +872,7 @@ ply is built for AI code generation:
 
 1. **Single-dash class names** read like English — `units-row`, `equal-height`, `padding`, `border-radius`
 2. **No abbreviation guessing** — `padding-lg` not `pl-6`, `margin-top` not `mt-4`
-3. **457 documented classes** in `ply-classes.json` — machine-readable reference
+3. **458 documented classes** in `ply-classes.json` — machine-readable reference
 4. **Semantic HTML first** — auto-styled elements reduce class clutter
 5. **AI-friendly aliases** — `btn-lg`/`btn-big`, `btn-sm`/`btn-small`, `alert`/`tools-alert` all work
 

package/llms.txt

@@ -1,13 +1,13 @@
 # plycss (ply)
 
-> ply is a ratio-based, AI-ready CSS framework with dark mode, WCAG 2.1 AA accessibility, and a small footprint (~21KB gzipped). 457 utility classes, 120+ CSS custom properties, 13 auto-styled semantic elements. No JavaScript. No build step.
+> ply is a ratio-based, AI-ready CSS framework with dark mode, WCAG 2.1 AA accessibility, and a small footprint (~21KB gzipped). 458 utility classes, 120+ CSS custom properties, 13 auto-styled semantic elements. No JavaScript. No build step.
 
 ply is standalone — do not use Tailwind, Bootstrap, or other CSS frameworks alongside it. Class names are single-dash and human-readable: `btn-primary`, `unit-50`, `padding-lg`, `text-secondary`. Install via npm (`plycss`) or CDN.
 
 ## Documentation
 
 - [Full AI Reference (PLY.md)](https://raw.githubusercontent.com/thatgibbyguy/ply/master/PLY.md): Complete class reference, usage rules, accessibility patterns, keyboard navigation, custom widget ARIA patterns, and code snippets
-- [Machine-Readable Class Map (ply-classes.json)](https://raw.githubusercontent.com/thatgibbyguy/ply/master/ply-classes.json): All 457 classes, 120+ CSS custom properties, and 13 semantic elements with descriptions, categories, and examples
+- [Machine-Readable Class Map (ply-classes.json)](https://raw.githubusercontent.com/thatgibbyguy/ply/master/ply-classes.json): All 458 classes, 120+ CSS custom properties, and 13 semantic elements with descriptions, categories, and examples
 - [VPAT 2.5 Accessibility Conformance](https://raw.githubusercontent.com/thatgibbyguy/ply/master/docs/VPAT.md): Full WCAG 2.1 Level A and AA conformance report
 
 ## Snippets

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ply-css",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "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.5.0",
+  "version": "1.6.1",
   "framework": "ply",
   "totalClasses": 457,
   "uniqueClasses": 457,
@@ -14,6 +14,7 @@
       "--ply-color-headings",
       "--ply-color-secondary",
       "--ply-border-color",
+      "--ply-border-radius",
       "--ply-btn-default-bg",
       "--ply-btn-secondary-bg",
       "--ply-color-accent",
@@ -54,12 +55,13 @@
       "--ply-btn-secondary-bg-active",
       "--ply-color-link-hover",
       "--ply-color-accent",
+      "--ply-border-radius",
       "--ply-btn-border-radius"
     ]
   },
   "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\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\n  /* Forms */\n  --ply-color-input-bg: #___;\n  --ply-color-input-border: #___;\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-stripped: #___;\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\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-stripped: #___;\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}"
   },
   "classes": {
     "units-container": {
@@ -494,7 +496,7 @@
     },
     "split": {
       "category": "grid",
-      "description": "Remove gap between child units. Applied to units-row.",
+      "description": "Remove gap between child units. Applied to units-row. Kept for backwards compatibility — prefer joined.",
       "example": "<div class=\"units-row split\">...</div>"
     },
     "centered-content": {
@@ -1497,7 +1499,7 @@
     },
     "border-radius": {
       "category": "helpers",
-      "description": "Apply default border-radius."
+      "description": "Apply border-radius using var(--ply-border-radius). Default 0.25rem, themeable."
     },
     "color-black": {
       "category": "helpers",
@@ -1610,6 +1612,11 @@
       "description": "Round the outer corners of a btn-group.",
       "parent": "btn-group"
     },
+    "joined": {
+      "category": "buttons",
+      "description": "Remove gap so children connect as a single visual unit. On btn-group: buttons touch with a 1px divider, connected border-radius on outer edges. On units-row: removes column gutters (alias for split, which is kept for backwards compatibility).",
+      "example": "<div class=\"btn-group joined\"><button class=\"btn\">Left</button><button class=\"btn\">Middle</button><button class=\"btn\">Right</button></div>\n<div class=\"units-row joined\"><div class=\"unit-50\">...</div><div class=\"unit-50\">...</div></div>"
+    },
     "unit-role-right": {
       "category": "grid",
       "description": "Float a grid unit to the right."
@@ -1748,11 +1755,11 @@
     },
     "border-radius-lg": {
       "category": "helpers",
-      "description": "Large border radius (0.75rem)."
+      "description": "Large border radius (3x --ply-border-radius)."
     },
     "border-radius-xl": {
       "category": "helpers",
-      "description": "Extra large border radius (1.5rem)."
+      "description": "Extra large border radius (6x --ply-border-radius)."
     },
     "spinning": {
       "category": "helpers",
@@ -2461,7 +2468,8 @@
     },
     "borders": {
       "--ply-border-color": "Standard border. Light: #e0e0e0, Dark: #525252",
-      "--ply-border-strong": "Emphasized border. Light: #8d8d8d, Dark: #6f6f6f"
+      "--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)."
     },
     "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.",
@@ -2487,7 +2495,9 @@
     "buttons": {
       "--ply-btn-default-bg": "Primary button background. Controls btn-primary color and link colors. Light: #0353e9, Dark: #78a9ff. Override in custom themes to change primary + links together.",
       "--ply-btn-secondary-bg": "Secondary button background. Controls btn, btn-secondary color. Light: #393939, Dark: #4c4c4c.",
-      "--ply-btn-default-color": "Default button text color. Light: inherits --ply-color-text-inverse (#fff), Dark: #f4f4f4"
+      "--ply-btn-default-color": "Default button text color. Light: inherits --ply-color-text-inverse (#fff), Dark: #f4f4f4",
+      "--ply-btn-font-size": "Button font size. Default: 1em (inherits from context). Override to set a fixed size for all buttons in a theme.",
+      "--ply-btn-gap": "Gap between icon and text inside a button. Default: 0.5em. Applies to all btn variants via inline-flex layout."
     },
     "navigation": {
       "--ply-nav-bg": "Navbar background. Light: #ffffff, Dark: #262626",

package/snippets/custom-theme.html

@@ -39,6 +39,7 @@
       /* Borders */
       --ply-border-color: #334155;
       --ply-border-strong: #475569;
+      --ply-border-radius: 0.5rem;
 
       /* Interactive */
       --ply-color-link: #60a5fa;
@@ -102,6 +103,7 @@
       /* Borders */
       --ply-border-color: #d6d3d1;
       --ply-border-strong: #a8a29e;
+      --ply-border-radius: 0.375rem;
 
       /* Interactive */
       --ply-color-link: #b45309;
@@ -259,6 +261,7 @@
           <tr><td><code>--ply-color-text-inverse</code></td><td>Text on dark buttons</td></tr>
           <tr><td><code>--ply-border-color</code></td><td>Default borders</td></tr>
           <tr><td><code>--ply-border-strong</code></td><td>Prominent borders</td></tr>
+          <tr><td><code>--ply-border-radius</code></td><td>Global border radius (inputs, cards, dialogs)</td></tr>
           <tr><td><code>--ply-color-link</code></td><td>Link color</td></tr>
           <tr><td><code>--ply-color-link-hover</code></td><td>Link hover</td></tr>
           <tr><td><code>--ply-color-focus</code></td><td>Focus ring</td></tr>

package/src/scss/components/_buttons.scss

@@ -12,16 +12,18 @@ input[type="reset"].btn,
 button.btn {
   transition: all 150ms ease-in-out, transform 50ms ease, background 150ms ease-in-out;
 
-  display: inline-block;
+  display: inline-flex;
   vertical-align: top;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ply-btn-gap, 0.5em);
 
   font-family: var(--ply-font-body, #{variables.$font-family-controls});
-  font-size: 1em;
+  font-size: var(--ply-btn-font-size, 1em);
   font-weight: 400;
 
   line-height: variables.$base-line;
 
-  text-align: center;
   text-decoration: none;
   color: var(--ply-btn-secondary-color, var(--ply-color-text-inverse, #fff));
 
@@ -431,21 +433,26 @@ button.btn-white {
     border-radius: 0;
 
     &:first-child {
-      border-radius: (variables.$border-radius * 0.5) 0 0 (variables.$border-radius * 0.5);
+      border-radius: calc(var(--ply-border-radius) * 0.5) 0 0 calc(var(--ply-border-radius) * 0.5);
     }
     &:last-child {
-      border-radius: 0 (variables.$border-radius * 0.5) (variables.$border-radius * 0.5) 0;
+      border-radius: 0 calc(var(--ply-border-radius) * 0.5) calc(var(--ply-border-radius) * 0.5) 0;
     }
   }
 
+  // Joined — no gap between buttons, connected as a single unit
+  &.joined {
+    gap: 0;
+  }
+
   &.rounded {
     .btn,
     .input-search {
       &:first-child {
-        border-radius: (variables.$border-radius * 2) 0 0 (variables.$border-radius * 2);
+        border-radius: calc(var(--ply-border-radius) * 2) 0 0 calc(var(--ply-border-radius) * 2);
       }
       &:last-child {
-        border-radius: 0 (variables.$border-radius * 2) (variables.$border-radius * 2) 0;
+        border-radius: 0 calc(var(--ply-border-radius) * 2) calc(var(--ply-border-radius) * 2) 0;
       }
     }
   }

package/src/scss/components/_colors.scss

@@ -78,6 +78,7 @@ $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};
 
   // Navigation
@@ -203,9 +204,9 @@ $btn-secondary-dark-active: #bebebe;
   --ply-border-strong: #6f6f6f;
 
   // Interactive
-  --ply-color-link: var(--ply-btn-default-bg);
+  --ply-color-link: #{$btn-primary-dark};
   --ply-color-link-hover: #{$btn-primary-dark-hover};
-  --ply-color-link-hover: color-mix(in oklch, var(--ply-btn-default-bg), white 15%);
+  --ply-color-link-hover: color-mix(in oklch, #{$btn-primary-dark}, white 15%);
   --ply-color-focus: #0f62fe;
 
   // Fields

package/src/scss/components/_dialog-patterns.scss

@@ -61,7 +61,7 @@ dialog {
     color: var(--ply-color-secondary);
     font-size: variables.$font-size-xl;
     cursor: pointer;
-    border-radius: variables.$border-radius;
+    border-radius: var(--ply-border-radius);
     transition: background-color 0.15s ease;
 
     &:hover {

package/src/scss/components/_forms.scss

@@ -71,7 +71,7 @@
   input[type="datetime-local"],
   textarea,
   select {
-    border-radius: variables.$border-radius;
+    border-radius: var(--ply-border-radius);
     display: block;
     width: 100%;
     padding: 0.5em 0.75em;
@@ -161,7 +161,7 @@ textarea {
 
 // Fieldset
 fieldset {
-  border-radius: variables.$border-radius;
+  border-radius: var(--ply-border-radius);
 
   background-color: var(--ply-bg-surface);
   padding: variables.$base-line;
@@ -308,7 +308,7 @@ select.input-xs {
     min-width: 0;
     display: block !important;
     margin-bottom: 0;
-    border-radius: variables.$border-radius;
+    border-radius: var(--ply-border-radius);
   }
 
   // Zero out joining edges
@@ -316,13 +316,13 @@ select.input-xs {
   textarea:not(:last-child),
   select:not(:last-child) {
     border-right: none;
-    border-radius: variables.$border-radius 0 0 variables.$border-radius;
+    border-radius: var(--ply-border-radius) 0 0 var(--ply-border-radius);
   }
 
   input:not(:first-child),
   textarea:not(:first-child),
   select:not(:first-child) {
-    border-radius: 0 variables.$border-radius variables.$border-radius 0;
+    border-radius: 0 var(--ply-border-radius) var(--ply-border-radius) 0;
   }
 
   // Middle element (both prepend and append)
@@ -348,12 +348,12 @@ select.input-xs {
 
   .input-prepend {
     border-right: none;
-    border-radius: variables.$border-radius 0 0 variables.$border-radius;
+    border-radius: var(--ply-border-radius) 0 0 var(--ply-border-radius);
   }
 
   .input-append {
     border-left: none;
-    border-radius: 0 variables.$border-radius variables.$border-radius 0;
+    border-radius: 0 var(--ply-border-radius) var(--ply-border-radius) 0;
 
     &:has(.btn) {
       padding: 0;
@@ -363,7 +363,7 @@ select.input-xs {
     .btn {
       display: flex;
       align-items: center;
-      border-radius: 0 variables.$border-radius variables.$border-radius 0;
+      border-radius: 0 var(--ply-border-radius) var(--ply-border-radius) 0;
       margin: 0;
       border-left: none;
       white-space: nowrap;
@@ -383,7 +383,7 @@ select.input-xs {
     .btn {
       display: flex;
       align-items: center;
-      border-radius: 0 variables.$border-radius variables.$border-radius 0;
+      border-radius: 0 var(--ply-border-radius) var(--ply-border-radius) 0;
       margin: 0;
       white-space: nowrap;
 
@@ -428,7 +428,7 @@ select.select-outlined {
   background-size: 0.75em;
   padding: 0.5em 2.5em 0.5em 0.75em;
   border: 1px solid var(--ply-border-strong, colors.$color-neutral-300);
-  border-radius: variables.$border-radius;
+  border-radius: var(--ply-border-radius);
   color: var(--ply-color-body);
   font-size: 1em;
   line-height: variables.$base-line;

package/src/scss/components/_grid.scss

@@ -31,6 +31,7 @@
     flex-direction: row-reverse;
   }
 
+  &.joined,
   &.split {
     --units-gap: 0px;
     gap: 0;

package/src/scss/components/_helpers-core.scss

@@ -211,7 +211,7 @@
 }
 
 .border-radius {
-  border-radius: variables.$border-radius;
+  border-radius: var(--ply-border-radius);
 }
 
 // UX Helpers

package/src/scss/components/_helpers.scss

@@ -276,11 +276,11 @@ $width-breakpoints: (
 }
 
 .border-radius-lg {
-  border-radius: 0.75rem;
+  border-radius: calc(var(--ply-border-radius) * 3);
 }
 
 .border-radius-xl {
-  border-radius: 1.5rem;
+  border-radius: calc(var(--ply-border-radius) * 6);
 }
 
 // Text color helpers (theme-compatible)
@@ -386,7 +386,7 @@ $width-breakpoints: (
 
 .code {
   border: 1px solid colors.$color-gray-light;
-  border-radius: variables.$border-radius;
+  border-radius: var(--ply-border-radius);
   display: inline-block;
   font-size: .8rem;
   font-family: variables.$font-family-code;

package/src/scss/components/_livesearch.scss

@@ -16,7 +16,7 @@
   }
 
   &.active input {
-    border-radius: variables.$border-radius variables.$border-radius 0 0;
+    border-radius: var(--ply-border-radius) var(--ply-border-radius) 0 0;
     border-bottom-color: var(--ply-border-color, colors.$color-gray);
   }
 }
@@ -35,7 +35,7 @@
   background: var(--ply-bg-surface, colors.$color-white);
   border: 1px solid var(--ply-color-input-border, colors.$color-input-border);
   border-top: none;
-  border-radius: 0 0 variables.$border-radius variables.$border-radius;
+  border-radius: 0 0 var(--ply-border-radius) var(--ply-border-radius);
   box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
   max-height: 240px;
   overflow-y: auto;
@@ -98,7 +98,7 @@
   min-height: 2.5rem;
   background: var(--ply-color-input-bg, colors.$color-white);
   border: 1px solid var(--ply-color-input-border, colors.$color-input-border);
-  border-radius: variables.$border-radius;
+  border-radius: var(--ply-border-radius);
   cursor: text;
   transition: border-color 0.15s ease;
   align-items: center;
@@ -109,7 +109,7 @@
   }
 
   .multiselect.active & {
-    border-radius: variables.$border-radius variables.$border-radius 0 0;
+    border-radius: var(--ply-border-radius) var(--ply-border-radius) 0 0;
     border-bottom-color: var(--ply-border-color, colors.$color-gray);
   }
 
@@ -138,7 +138,7 @@
   padding: 0.125rem 0.375rem;
   background: var(--ply-bg-muted, colors.$color-gray);
   color: var(--ply-color-body, colors.$color-body);
-  border-radius: variables.$border-radius;
+  border-radius: var(--ply-border-radius);
   font-size: variables.$font-size-sm;
   line-height: 1.5;
   white-space: nowrap;
@@ -191,7 +191,7 @@
   background: var(--ply-bg-surface, colors.$color-white);
   border: 1px solid var(--ply-color-input-border, colors.$color-input-border);
   border-top: none;
-  border-radius: 0 0 variables.$border-radius variables.$border-radius;
+  border-radius: 0 0 var(--ply-border-radius) var(--ply-border-radius);
   box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
   max-height: 240px;
   overflow-y: auto;

package/src/scss/components/_navigation.scss

@@ -291,7 +291,7 @@ nav {
     display: block;
     padding: 0.25rem 0.75rem;
     font-size: variables.$font-size-sm;
-    border-radius: var(--ply-nav-stacked-radius, 0.25rem);
+    border-radius: var(--ply-nav-stacked-radius, var(--ply-border-radius));
   }
 
   & a {
@@ -505,7 +505,7 @@ nav {
     height: variables.$base-line * 1.5;
     padding: variables.$grid-gutter-width * 0.5 variables.$padding;
     border: 1px solid var(--ply-border-color);
-    border-radius: variables.$border-radius;
+    border-radius: var(--ply-border-radius);
     background: var(--ply-bg-surface, #fff);
     color: var(--ply-color-body);
     text-decoration: none;

package/src/scss/components/_notifications.scss

@@ -19,7 +19,7 @@ $alert-colors: (
   background: var(--ply-bg-surface-alt, colors.$color-gray-pastel);
   color: var(--ply-color-body, colors.$color-black);
   margin-bottom: variables.$base-line;
-  border-radius: variables.$border-radius;
+  border-radius: var(--ply-border-radius);
   border-left: 4px solid colors.$color-gray-dark;
   display: flex;
   align-items: flex-start;
@@ -63,7 +63,7 @@ $alert-colors: (
     align-items: center;
     justify-content: center;
     margin: -0.5rem -0.375rem -0.5rem 0;
-    border-radius: variables.$border-radius;
+    border-radius: var(--ply-border-radius);
 
     &:hover {
       opacity: 1;

package/src/scss/components/_reset.scss

@@ -265,7 +265,7 @@ img {
 /* Native <details>/<summary> — Swiss/Modernist accordion */
 details {
   border: 1px solid var(--ply-border-color, #e0e0e0);
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
   padding: 0.75rem 1rem;
   margin-bottom: 1.5rem;
 }
@@ -303,7 +303,7 @@ details[open] > summary {
 /* Native <dialog> — modal styling */
 dialog {
   border: none;
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
   padding: 1.5rem;
   max-width: 32rem;
   width: 90%;
@@ -322,23 +322,23 @@ progress {
   width: 100%;
   height: 0.5rem;
   border: none;
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
   background: var(--ply-bg-muted, #e0e0e0);
   margin-bottom: 1.5rem;
 
   &::-webkit-progress-bar {
     background: var(--ply-bg-muted, #e0e0e0);
-    border-radius: 0.25rem;
+    border-radius: var(--ply-border-radius);
   }
 
   &::-webkit-progress-value {
     background: var(--ply-color-link, #0f62fe);
-    border-radius: 0.25rem;
+    border-radius: var(--ply-border-radius);
   }
 
   &::-moz-progress-bar {
     background: var(--ply-color-link, #0f62fe);
-    border-radius: 0.25rem;
+    border-radius: var(--ply-border-radius);
   }
 }
 
@@ -347,7 +347,7 @@ meter {
   width: 100%;
   height: 0.5rem;
   border: none;
-  border-radius: 0.25rem;
+  border-radius: var(--ply-border-radius);
   background: var(--ply-bg-muted, #e0e0e0);
   margin-bottom: 1.5rem;
 }

package/src/scss/components/_rtl.scss

@@ -104,25 +104,25 @@
     select:not(:last-child) {
       border-right: initial;
       border-left: none;
-      border-radius: 0 variables.$border-radius variables.$border-radius 0;
+      border-radius: 0 var(--ply-border-radius) var(--ply-border-radius) 0;
     }
 
     input:not(:first-child),
     textarea:not(:first-child),
     select:not(:first-child) {
-      border-radius: variables.$border-radius 0 0 variables.$border-radius;
+      border-radius: var(--ply-border-radius) 0 0 var(--ply-border-radius);
     }
 
     .input-prepend {
       border-right: initial;
       border-left: none;
-      border-radius: 0 variables.$border-radius variables.$border-radius 0;
+      border-radius: 0 var(--ply-border-radius) var(--ply-border-radius) 0;
     }
 
     .input-append {
       border-left: initial;
       border-right: none;
-      border-radius: variables.$border-radius 0 0 variables.$border-radius;
+      border-radius: var(--ply-border-radius) 0 0 var(--ply-border-radius);
     }
   }