Typo fixed in docs for the table

Added basic padding and margin classes: 0 for none, 1 for half the spacing size, 2 for normal spacing, and 3 for 1.5 spacing
Minor clean up on the accordion.scss

docs/basics.css

@@ -8,21 +8,79 @@
  * @link https://yohn.github.io/PicoCSS
  */
 
-.m-0 { margin: 0 !important; }
-.mt-0 { margin-top: 0 !important; }
-.mb-0 { margin-bottom: 0 !important; }
-.ms-0 { margin-left: 0 !important; }
-.me-0 { margin-right: 0 !important; }
-.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
-.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
-
-.p-0 { padding: 0 !important; }
-.pt-0 { padding-top: 0 !important; }
-.pb-0 { padding-bottom: 0 !important; }
-.ps-0 { padding-left: 0 !important; }
-.pe-0 { padding-right: 0 !important; }
-.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
-.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
+:host, :root {
+	--yoco-spacing-block-1: calc(var(--pico-block-spacing-vertical) * .5);
+	--yoco-spacing-inline-1: calc(var(--pico-block-spacing-horizontal) * .5);
+	--yoco-spacing-block-2: var(--pico-block-spacing-vertical);
+	--yoco-spacing-inline-2: var(--pico-block-spacing-horizontal);
+	--yoco-spacing-block-3: calc(var(--pico-block-spacing-vertical) * 1.5);
+	--yoco-spacing-inline-3: calc(var(--pico-block-spacing-horizontal) * 1.5);
+}
+
+ .m-0 { margin: 0 !important; }
+.mt-0 { margin-block-start: 0 !important; }
+.mb-0 { margin-block-end: 0 !important; }
+.my-0 { margin-block: 0 !important; }
+.ms-0 { margin-inline-start: 0 !important; }
+.me-0 { margin-inline-end: 0 !important; }
+.mx-0 { margin-inline: 0 !important; }
+
+ .m-1  { margin: var(--yoco-spacing-block-1) var(--yoco-spacing-inline-1) !important; }
+.mt-1 { margin-block-start: var(--yoco-spacing-block-1) !important; }
+.mb-1 { margin-block-end: var(--yoco-spacing-block-1) !important; }
+.my-1 { margin-block: var(--yoco-spacing-block-1) !important; }
+.ms-1 { margin-inline-start: var(--yoco-spacing-inline-1) !important; }
+.me-1 { margin-inline-end: var(--yoco-spacing-inline-1) !important; }
+.mx-1 { margin-inline: var(--yoco-spacing-inline-1) !important; }
+
+ .m-2 { margin: var(--yoco-spacing-block-2) var(--yoco-spacing-inline-2) !important; }
+.mt-2 { margin-block-start: var(--yoco-spacing-block-2) !important; }
+.mb-2 { margin-block-end: var(--yoco-spacing-block-2) !important; }
+.my-2 { margin-block: var(--yoco-spacing-block-2) !important; }
+.ms-2 { margin-inline-start: var(--yoco-spacing-inline-2) !important; }
+.me-2 { margin-inline-end: var(--yoco-spacing-inline-2) !important; }
+.mx-2 { margin-inline: var(--yoco-spacing-inline-2) !important; }
+
+ .m-3 { margin: var(--yoco-spacing-block-3) var(--yoco-spacing-inline-3) !important; }
+.mt-3 { margin-block-start: var(--yoco-spacing-block-3) !important; }
+.mb-3 { margin-block-end: var(--yoco-spacing-block-3) !important; }
+.my-3 { margin-block: var(--yoco-spacing-block-3) !important; }
+.ms-3 { margin-inline-start: var(--yoco-spacing-inline-3) !important; }
+.me-3 { margin-inline-end: var(--yoco-spacing-inline-3) !important; }
+.mx-3 { margin-inline: var(--yoco-spacing-inline-3) !important; }
+
+ .p-0 { padding: 0 !important; }
+.pt-0 { padding-block-start: 0 !important; }
+.pb-0 { padding-block-end: 0 !important; }
+.py-0 { padding-block: 0 !important; }
+.ps-0 { padding-inline-start: 0 !important; }
+.pe-0 { padding-inline-end: 0 !important; }
+.px-0 { padding-inline: 0 !important; }
+
+ .p-1 { padding: var(--yoco-spacing-block-1) var(--yoco-spacing-inline-1) !important; }
+.pt-1 { padding-block-start: var(--yoco-spacing-block-1) !important; }
+.pb-1 { padding-block-end: var(--yoco-spacing-block-1) !important; }
+.py-1 { padding-block: var(--yoco-spacing-block-1) !important; }
+.ps-1 { padding-inline-start: var(--yoco-spacing-inline-1) !important; }
+.pe-1 { padding-inline-end: var(--yoco-spacing-inline-1) !important; }
+.px-1 { padding-inline: var(--yoco-spacing-inline-1) !important; }
+
+ .p-2 { padding: var(--yoco-spacing-block-2) var(--yoco-spacing-inline-2) !important; }
+.pt-2 { padding-block-start: var(--yoco-spacing-block-2) !important; }
+.pb-2 { padding-block-end: var(--yoco-spacing-block-2) !important; }
+.py-2 { padding-block: var(--yoco-spacing-block-2) !important; }
+.ps-2 { padding-inline-start: var(--yoco-spacing-inline-2) !important; }
+.pe-2 { padding-inline-end: var(--yoco-spacing-inline-2) !important; }
+.px-2 { padding-inline: var(--yoco-spacing-inline-2) !important; }
+
+ .p-3 { padding: var(--yoco-spacing-block-3) var(--yoco-spacing-inline-3) !important; }
+.pt-3 { padding-block-start: var(--yoco-spacing-block-3) !important; }
+.pb-3 { padding-block-end: var(--yoco-spacing-block-3) !important; }
+.py-3 { padding-block: var(--yoco-spacing-block-3) !important; }
+.ps-3 { padding-inline-start: var(--yoco-spacing-inline-3) !important; }
+.pe-3 { padding-inline-end: var(--yoco-spacing-inline-3) !important; }
+.px-3 { padding-inline: var(--yoco-spacing-inline-3) !important; }
+
 
 .fw-n { font-weight: normal !important; }
 

docs/index.html

@@ -238,7 +238,7 @@ <h3>&lt;details class="hide-arrow"&gt;</h3>
 					</footer>
 				</article>
 				<hr>
-				<iv id="tables">
+				<article id="tables">
 					<header>
 						<h2>Tables</h2>
 						<h6 class="fw-n">Striped rows require .striped class</h6>

scss/components/_accordion.scss

@@ -101,10 +101,8 @@
       > summary {
         margin-block-end: var(#{$css-var-prefix}spacing);
 
-        &:not([role]) {
-          &:not(:focus) {
-            color: var(#{$css-var-prefix}accordion-open-summary-color);
-          }
+        &:not([role]):not(:focus) {
+          color: var(#{$css-var-prefix}accordion-open-summary-color);
         }
 
         &::after {