codebase-frontend-library
diff --git a/‎CHANGELOG.md
+8-1 b/‎CHANGELOG.md
+8-1
diff --git a/‎README.md
+1-1 b/‎README.md
+1-1
diff --git a/‎docs/dist/codebase.css
+2-2 b/‎docs/dist/codebase.css
+2-2
diff --git a/‎docs/dist/codebase.css.map
+1-1 b/‎docs/dist/codebase.css.map
+1-1
diff --git a/‎docs/docs/1-getting-started/accessibility/index.html
+5-4 b/‎docs/docs/1-getting-started/accessibility/index.html
+5-4
diff --git a/‎docs/docs/1-getting-started/css-variables/index.html
+6-5 b/‎docs/docs/1-getting-started/css-variables/index.html
+6-5
diff --git a/‎docs/docs/1-getting-started/element-grid/index.html
+5-4 b/‎docs/docs/1-getting-started/element-grid/index.html
+5-4
diff --git a/‎docs/docs/1-getting-started/improvements-since-codebase-4/index.html
+5-4 b/‎docs/docs/1-getting-started/improvements-since-codebase-4/index.html
+5-4
diff --git a/‎docs/docs/1-getting-started/introduction/index.html
+5-4 b/‎docs/docs/1-getting-started/introduction/index.html
+5-4
diff --git a/‎docs/docs/1-getting-started/responsive-design/index.html
+5-4 b/‎docs/docs/1-getting-started/responsive-design/index.html
+5-4
@@ -2,6 +2,13 @@
 
 <!-- Note: update version numbers need updating every time in `metadata.json`, `package.json`, `package-lock.json` (×2), `README.md`, `CHANGELOG.md`, and `codebase.scss` -->
 
+## 19 Nov 2024 -- v.5.3.3
+
+* Reinvention of the way Codebase handles rounded corners. Breaking changes:
+  * Different border radius size classes now only provide _values_ — e.g. they need to be paired with `rounded`, `rounded-tl` etc. class as a modifier;
+  * Now there is only one `unrounded` reset. Four corner-specific rounding corner classes have been added.
+  * Removed `rounded-circle` and `rounded-full` (you only need `rounded-pill` to accomplish all thay they were used for).
+
 ## 11 Nov 2024 -- v.5.3.2
 
 * Focus ring now copying the [Accessability Style Guide](https://a11y-style-guide.com/style-guide/section-general.html#kssref-general-link-focus).
@@ -25,7 +32,7 @@
 * Improved `.t-decoration-none` and `.t-link-inside` (panel links).
 * All tables now need the `.table` class.
 * Paddings utility `.p-block` renamed `.p-cell` (alias `.p-block` is still available.)
-* Removed `  -webkit-overflow-scrolling: touch;` from the body tag.
+* Removed `-webkit-overflow-scrolling: touch;` from the body tag.
 
 ## 30 Oct 2024 -- v.5.2.4
 
 
@@ -19,7 +19,7 @@ Install via Git: https://github.com/codebase-frontend-library/codebase-5.git
 
 ***
 
-* Current version: 5.3.2 -- see [changelog](https://github.com/codebase-frontend-library/codebase-5/blob/main/CHANGELOG.md)
+* Current version: 5.3.3 -- see [changelog](https://github.com/codebase-frontend-library/codebase-5/blob/main/CHANGELOG.md)
 * CSS file size: 94 KB
 * Licence: MIT
 * Developer: Simon Padbury
@@ -8,7 +8,7 @@
   <title>Accessibility - Codebase</title>
 
   <link href="/codebase-5/prism/prism.css" rel="stylesheet">
-  <link href="/codebase-5/dist/codebase.css?v=5.3.2" rel="stylesheet">
+  <link href="/codebase-5/dist/codebase.css?v=5.3.3" rel="stylesheet">
 
   <link rel="icon" type="image/svg+xml" href="/codebase-5/favicon.svg">
   <link rel="apple-touch-icon" sizes="180x180" href="/codebase-5/apple-touch-icon.png">
@@ -255,8 +255,9 @@
 
     <div class="grow">
       <div class="menu pr-1 flex flex-end sm:hidden-below">
-        <div><a class="p-cell t-gray-100 t-decoration-none t-semibold hover:t-decoration-underline hover:t-white" href="/codebase-5/dist/codebase.css?v=5.3.2">Download CSS</a></div>
+        <div><a class="p-cell t-gray-100 t-decoration-none t-semibold hover:t-decoration-underline hover:t-white" href="/codebase-5/dist/codebase.css?v=5.3.3">Download CSS</a></div>
         <div><a class="p-cell t-gray-100 t-decoration-none hover:t-decoration-underline hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
+        <div><a class="p-cell t-gray-100 t-decoration-none hover:t-decoration-underline hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5/blob/main/CHANGELOG.md">Changelog</a></div>
       </div>  
     </div>
 
@@ -310,7 +311,7 @@
       <div id="side-menu-wrap" class="p-2 md:pt-4 pb-6">
 
         <div class="mb-3 sm:hidden">
-          <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.3.2">Download</a></div>
+          <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.3.3">Download</a></div>
           <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
         </div>
 
@@ -686,7 +687,7 @@ <h3 id="apps-and-browser-extensions" tabindex="-1">Apps and browser extensions</
   </p>
 
   <div class="container-lg py-3 grid xs:equal-2-cols sm:equal-3-cols md:equal-4-cols lg:equal-6-cols gap-2 t-center">
-    <div>Version: 5.3.2</div>
+    <div>Version: 5.3.3</div>
     <div><a class="t-gray-200 hover:t-white" href="/codebase-5/docs/1-getting-started/introduction/">Documentation</a></div>
     <div><a class="t-gray-200 hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5">GitHub Repository</a></div>
     <div><a class="t-gray-200 hover:t-white" href="/codebase-5/dist/codebase.css">CSS (minified)</a> (94 KB)</div>
 
@@ -8,7 +8,7 @@
   <title>CSS Variables - Codebase</title>
 
   <link href="/codebase-5/prism/prism.css" rel="stylesheet">
-  <link href="/codebase-5/dist/codebase.css?v=5.3.2" rel="stylesheet">
+  <link href="/codebase-5/dist/codebase.css?v=5.3.3" rel="stylesheet">
 
   <link rel="icon" type="image/svg+xml" href="/codebase-5/favicon.svg">
   <link rel="apple-touch-icon" sizes="180x180" href="/codebase-5/apple-touch-icon.png">
@@ -255,8 +255,9 @@
 
     <div class="grow">
       <div class="menu pr-1 flex flex-end sm:hidden-below">
-        <div><a class="p-cell t-gray-100 t-decoration-none t-semibold hover:t-decoration-underline hover:t-white" href="/codebase-5/dist/codebase.css?v=5.3.2">Download CSS</a></div>
+        <div><a class="p-cell t-gray-100 t-decoration-none t-semibold hover:t-decoration-underline hover:t-white" href="/codebase-5/dist/codebase.css?v=5.3.3">Download CSS</a></div>
         <div><a class="p-cell t-gray-100 t-decoration-none hover:t-decoration-underline hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
+        <div><a class="p-cell t-gray-100 t-decoration-none hover:t-decoration-underline hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5/blob/main/CHANGELOG.md">Changelog</a></div>
       </div>  
     </div>
 
@@ -310,7 +311,7 @@
       <div id="side-menu-wrap" class="p-2 md:pt-4 pb-6">
 
         <div class="mb-3 sm:hidden">
-          <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.3.2">Download</a></div>
+          <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.3.3">Download</a></div>
           <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
         </div>
 
@@ -542,7 +543,7 @@ <h2 id="the-codebase-root-selector" tabindex="-1">The Codebase root selector</h2
 <ol>
 <li>Font stacks</li>
 <li>UI colors (base and hover state colors for <label class="label label-warning">warning</label>, <label class="label label-danger">danger</label>, <label class="label label-success">success</label>, <label class="label label-info">info</label>, <label class="label label-primary">primary</label>, <label class="label label-secondary">secondary</label>, and <label class="label label-tertiary">tertiary</label>), generated from the Sass map <code>$ui-setup</code></li>
-<li>A color variable generator that outputs all the shade variations <code>-100</code> through <code>-900</code> of the Codebase color swatches amber <label class="label bg-amber-500 t-white">  </label>, red <label class="label bg-red-500 t-white">  </label>, green <label class="label bg-green-500 t-white">  </label>, blue <label class="label bg-blue-500 t-white">  </label>, purple <label class="label bg-purple-500 t-white">  </label>, teal <label class="label bg-teal-500 t-white">  </label>, and gray <label class="label bg-gray-500 t-white">  </label> (<strong>note:</strong> the UI colors are the <code>-600</code> shades of these colors, and the hover states for buttons are the <code>-700</code> shades)</li>
+<li>A color variable generator that outputs all the shade variations <code>-100</code> through <code>-900</code> of the Codebase color swatches <label class="label bg-amber-500 t-white"> amber </label>, <label class="label bg-red-500 t-white"> red </label>, <label class="label bg-green-500 t-white"> green </label>, <label class="label bg-blue-500 t-white"> blue </label>, <label class="label bg-purple-500 t-white"> purple </label>, <label class="label bg-teal-500 t-white"> teal </label>, and <label class="label bg-gray-500 t-white"> gray </label> (<strong>note:</strong> the UI colors are the <code>-600</code> shades of these colors, and the hover states for buttons are the <code>-700</code> shades)</li>
 <li>Base theme colors — for page background, default text color, line details (e.g. <code>&lt;hr&gt;</code>, form input borders, table cell borders), links (various states), default buttons, code blocks, and highlight and selection colors</li>
 <li>Widths (generated by Sass map) — used in media query breakpoint widths, containers and width utilities</li>
 <li>Spacing (generated by Sass map) — used in utilities for margins, paddings, and flexbox/grid gaps</li>
@@ -601,7 +602,7 @@ <h3 id="example%3A-how-codebase-uses-color-variables" tabindex="-1">Example: How
   </p>
 
   <div class="container-lg py-3 grid xs:equal-2-cols sm:equal-3-cols md:equal-4-cols lg:equal-6-cols gap-2 t-center">
-    <div>Version: 5.3.2</div>
+    <div>Version: 5.3.3</div>
     <div><a class="t-gray-200 hover:t-white" href="/codebase-5/docs/1-getting-started/introduction/">Documentation</a></div>
     <div><a class="t-gray-200 hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5">GitHub Repository</a></div>
     <div><a class="t-gray-200 hover:t-white" href="/codebase-5/dist/codebase.css">CSS (minified)</a> (94 KB)</div>
 
@@ -8,7 +8,7 @@
   <title>Element grid - Codebase</title>
 
   <link href="/codebase-5/prism/prism.css" rel="stylesheet">
-  <link href="/codebase-5/dist/codebase.css?v=5.3.2" rel="stylesheet">
+  <link href="/codebase-5/dist/codebase.css?v=5.3.3" rel="stylesheet">
 
   <link rel="icon" type="image/svg+xml" href="/codebase-5/favicon.svg">
   <link rel="apple-touch-icon" sizes="180x180" href="/codebase-5/apple-touch-icon.png">
@@ -255,8 +255,9 @@
 
     <div class="grow">
       <div class="menu pr-1 flex flex-end sm:hidden-below">
-        <div><a class="p-cell t-gray-100 t-decoration-none t-semibold hover:t-decoration-underline hover:t-white" href="/codebase-5/dist/codebase.css?v=5.3.2">Download CSS</a></div>
+        <div><a class="p-cell t-gray-100 t-decoration-none t-semibold hover:t-decoration-underline hover:t-white" href="/codebase-5/dist/codebase.css?v=5.3.3">Download CSS</a></div>
         <div><a class="p-cell t-gray-100 t-decoration-none hover:t-decoration-underline hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
+        <div><a class="p-cell t-gray-100 t-decoration-none hover:t-decoration-underline hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5/blob/main/CHANGELOG.md">Changelog</a></div>
       </div>  
     </div>
 
@@ -310,7 +311,7 @@
       <div id="side-menu-wrap" class="p-2 md:pt-4 pb-6">
 
         <div class="mb-3 sm:hidden">
-          <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.3.2">Download</a></div>
+          <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.3.3">Download</a></div>
           <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
         </div>
 
@@ -621,7 +622,7 @@ <h2 id="utility-class-spacing" tabindex="-1">Utility class spacing</h2>
   </p>
 
   <div class="container-lg py-3 grid xs:equal-2-cols sm:equal-3-cols md:equal-4-cols lg:equal-6-cols gap-2 t-center">
-    <div>Version: 5.3.2</div>
+    <div>Version: 5.3.3</div>
     <div><a class="t-gray-200 hover:t-white" href="/codebase-5/docs/1-getting-started/introduction/">Documentation</a></div>
     <div><a class="t-gray-200 hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5">GitHub Repository</a></div>
     <div><a class="t-gray-200 hover:t-white" href="/codebase-5/dist/codebase.css">CSS (minified)</a> (94 KB)</div>
 
@@ -8,7 +8,7 @@
   <title>Improvements - Codebase</title>
 
   <link href="/codebase-5/prism/prism.css" rel="stylesheet">
-  <link href="/codebase-5/dist/codebase.css?v=5.3.2" rel="stylesheet">
+  <link href="/codebase-5/dist/codebase.css?v=5.3.3" rel="stylesheet">
 
   <link rel="icon" type="image/svg+xml" href="/codebase-5/favicon.svg">
   <link rel="apple-touch-icon" sizes="180x180" href="/codebase-5/apple-touch-icon.png">
@@ -255,8 +255,9 @@
 
     <div class="grow">
       <div class="menu pr-1 flex flex-end sm:hidden-below">
-        <div><a class="p-cell t-gray-100 t-decoration-none t-semibold hover:t-decoration-underline hover:t-white" href="/codebase-5/dist/codebase.css?v=5.3.2">Download CSS</a></div>
+        <div><a class="p-cell t-gray-100 t-decoration-none t-semibold hover:t-decoration-underline hover:t-white" href="/codebase-5/dist/codebase.css?v=5.3.3">Download CSS</a></div>
         <div><a class="p-cell t-gray-100 t-decoration-none hover:t-decoration-underline hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
+        <div><a class="p-cell t-gray-100 t-decoration-none hover:t-decoration-underline hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5/blob/main/CHANGELOG.md">Changelog</a></div>
       </div>  
     </div>
 
@@ -310,7 +311,7 @@
       <div id="side-menu-wrap" class="p-2 md:pt-4 pb-6">
 
         <div class="mb-3 sm:hidden">
-          <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.3.2">Download</a></div>
+          <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.3.3">Download</a></div>
           <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
         </div>
 
@@ -635,7 +636,7 @@ <h2 id="gulp-is-no-longer-required" tabindex="-1">Gulp is no longer required</h2
   </p>
 
   <div class="container-lg py-3 grid xs:equal-2-cols sm:equal-3-cols md:equal-4-cols lg:equal-6-cols gap-2 t-center">
-    <div>Version: 5.3.2</div>
+    <div>Version: 5.3.3</div>
     <div><a class="t-gray-200 hover:t-white" href="/codebase-5/docs/1-getting-started/introduction/">Documentation</a></div>
     <div><a class="t-gray-200 hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5">GitHub Repository</a></div>
     <div><a class="t-gray-200 hover:t-white" href="/codebase-5/dist/codebase.css">CSS (minified)</a> (94 KB)</div>
 
@@ -8,7 +8,7 @@
   <title>Introduction - Codebase</title>
 
   <link href="/codebase-5/prism/prism.css" rel="stylesheet">
-  <link href="/codebase-5/dist/codebase.css?v=5.3.2" rel="stylesheet">
+  <link href="/codebase-5/dist/codebase.css?v=5.3.3" rel="stylesheet">
 
   <link rel="icon" type="image/svg+xml" href="/codebase-5/favicon.svg">
   <link rel="apple-touch-icon" sizes="180x180" href="/codebase-5/apple-touch-icon.png">
@@ -255,8 +255,9 @@
 
     <div class="grow">
       <div class="menu pr-1 flex flex-end sm:hidden-below">
-        <div><a class="p-cell t-gray-100 t-decoration-none t-semibold hover:t-decoration-underline hover:t-white" href="/codebase-5/dist/codebase.css?v=5.3.2">Download CSS</a></div>
+        <div><a class="p-cell t-gray-100 t-decoration-none t-semibold hover:t-decoration-underline hover:t-white" href="/codebase-5/dist/codebase.css?v=5.3.3">Download CSS</a></div>
         <div><a class="p-cell t-gray-100 t-decoration-none hover:t-decoration-underline hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
+        <div><a class="p-cell t-gray-100 t-decoration-none hover:t-decoration-underline hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5/blob/main/CHANGELOG.md">Changelog</a></div>
       </div>  
     </div>
 
@@ -310,7 +311,7 @@
       <div id="side-menu-wrap" class="p-2 md:pt-4 pb-6">
 
         <div class="mb-3 sm:hidden">
-          <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.3.2">Download</a></div>
+          <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.3.3">Download</a></div>
           <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
         </div>
 
@@ -645,7 +646,7 @@ <h2 id="browser-support" tabindex="-1">Browser support</h2>
   </p>
 
   <div class="container-lg py-3 grid xs:equal-2-cols sm:equal-3-cols md:equal-4-cols lg:equal-6-cols gap-2 t-center">
-    <div>Version: 5.3.2</div>
+    <div>Version: 5.3.3</div>
     <div><a class="t-gray-200 hover:t-white" href="/codebase-5/docs/1-getting-started/introduction/">Documentation</a></div>
     <div><a class="t-gray-200 hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5">GitHub Repository</a></div>
     <div><a class="t-gray-200 hover:t-white" href="/codebase-5/dist/codebase.css">CSS (minified)</a> (94 KB)</div>
 
@@ -8,7 +8,7 @@
   <title>Responsive design - Codebase</title>
 
   <link href="/codebase-5/prism/prism.css" rel="stylesheet">
-  <link href="/codebase-5/dist/codebase.css?v=5.3.2" rel="stylesheet">
+  <link href="/codebase-5/dist/codebase.css?v=5.3.3" rel="stylesheet">
 
   <link rel="icon" type="image/svg+xml" href="/codebase-5/favicon.svg">
   <link rel="apple-touch-icon" sizes="180x180" href="/codebase-5/apple-touch-icon.png">
@@ -255,8 +255,9 @@
 
     <div class="grow">
       <div class="menu pr-1 flex flex-end sm:hidden-below">
-        <div><a class="p-cell t-gray-100 t-decoration-none t-semibold hover:t-decoration-underline hover:t-white" href="/codebase-5/dist/codebase.css?v=5.3.2">Download CSS</a></div>
+        <div><a class="p-cell t-gray-100 t-decoration-none t-semibold hover:t-decoration-underline hover:t-white" href="/codebase-5/dist/codebase.css?v=5.3.3">Download CSS</a></div>
         <div><a class="p-cell t-gray-100 t-decoration-none hover:t-decoration-underline hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
+        <div><a class="p-cell t-gray-100 t-decoration-none hover:t-decoration-underline hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5/blob/main/CHANGELOG.md">Changelog</a></div>
       </div>  
     </div>
 
@@ -310,7 +311,7 @@
       <div id="side-menu-wrap" class="p-2 md:pt-4 pb-6">
 
         <div class="mb-3 sm:hidden">
-          <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.3.2">Download</a></div>
+          <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.3.3">Download</a></div>
           <div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
         </div>
 
@@ -694,7 +695,7 @@ <h2 id="infographic%3A-responsive-css-classes-in-codebase" tabindex="-1">Infogra
   </p>
 
   <div class="container-lg py-3 grid xs:equal-2-cols sm:equal-3-cols md:equal-4-cols lg:equal-6-cols gap-2 t-center">
-    <div>Version: 5.3.2</div>
+    <div>Version: 5.3.3</div>
     <div><a class="t-gray-200 hover:t-white" href="/codebase-5/docs/1-getting-started/introduction/">Documentation</a></div>
     <div><a class="t-gray-200 hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5">GitHub Repository</a></div>
     <div><a class="t-gray-200 hover:t-white" href="/codebase-5/dist/codebase.css">CSS (minified)</a> (94 KB)</div>