RTL support #34

.gitignore

@@ -1,4 +1,4 @@
 node_modules/
 *.DS_Store
 TODO.md
-test.html
+tests/

css/pico.classless.css

@@ -739,7 +739,12 @@ small {
 
 ul,
 ol {
+  padding-right: 0;
   padding-left: var(--spacing);
+  -webkit-padding-end: 0;
+          padding-inline-end: 0;
+  -webkit-padding-start: var(--spacing);
+          padding-inline-start: var(--spacing);
 }
 ul li,
 ol li {
@@ -761,7 +766,12 @@ blockquote {
   display: block;
   margin: var(--typography-spacing-vertical) 0;
   padding: var(--spacing);
+  border-right: none;
   border-left: 0.25rem solid var(--blockquote-border-color);
+  -webkit-border-end: none;
+          border-inline-end: none;
+  -webkit-border-start: 0.25rem solid var(--blockquote-border-color);
+          border-inline-start: 0.25rem solid var(--blockquote-border-color);
 }
 blockquote footer {
   margin-top: calc(var(--typography-spacing-vertical) * 0.5);
@@ -1101,7 +1111,12 @@ textarea[disabled] {
 input[aria-invalid],
 select[aria-invalid],
 textarea[aria-invalid] {
-  padding-right: 2rem !important;
+  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
+  padding-left: var(--form-element-spacing-horizontal);
+  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
+          padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
+  -webkit-padding-start: var(--form-element-spacing-horizontal) !important;
+          padding-inline-start: var(--form-element-spacing-horizontal) !important;
   background-position: center right 0.75rem;
   background-repeat: no-repeat;
   background-size: 1rem auto;
@@ -1133,6 +1148,12 @@ textarea[aria-invalid=true]:focus {
   --border-color: var(--form-element-invalid-active-border-color) !important;
 }
 
+[dir=rtl] input[aria-invalid],
+[dir=rtl] select[aria-invalid],
+[dir=rtl] textarea[aria-invalid] {
+  background-position: center left 0.75rem;
+}
+
 input::placeholder,
 input::-webkit-input-placeholder,
 textarea::placeholder,
@@ -1154,12 +1175,21 @@ select::-ms-expand {
 }
 select:not([multiple]):not([size]) {
   padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+  padding-left: var(--form-element-spacing-horizontal);
+  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+          padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+  -webkit-padding-start: var(--form-element-spacing-horizontal);
+          padding-inline-start: var(--form-element-spacing-horizontal);
   background-image: var(--icon-chevron);
   background-position: center right 0.75rem;
   background-repeat: no-repeat;
   background-size: 1rem auto;
 }
 
+[dir=rtl] select:not([multiple]):not([size]) {
+  background-position: center left 0.75rem;
+}
+
 input + small,
 select + small,
 textarea + small {
@@ -1187,6 +1217,11 @@ label > input, label > select, label > textarea {
   height: 1.25em;
   margin-top: -0.125em;
   margin-right: 0.375em;
+  margin-left: 0;
+  -webkit-margin-end: 0.375em;
+          margin-inline-end: 0.375em;
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
   border-width: var(--border-width);
   vertical-align: middle;
   cursor: pointer;
@@ -1266,6 +1301,10 @@ label > input, label > select, label > textarea {
 [type=checkbox][role=switch]:checked::before {
   margin-right: 0;
   margin-left: calc(1.125em - var(--border-width));
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
+  -webkit-margin-start: calc(1.125em - var(--border-width));
+          margin-inline-start: calc(1.125em - var(--border-width));
 }
 
 /**
@@ -1287,25 +1326,24 @@ label > input, label > select, label > textarea {
   border-radius: calc(var(--border-radius) * 0.5);
 }
 
-[type=date],
+:not(:dir(rtl)) [type=date],
-[type=datetime-local],
+:not(:dir(rtl)) [type=datetime-local],
-[type=month],
+:not(:dir(rtl)) [type=month],
-[type=time],
+:not(:dir(rtl)) [type=time],
-[type=week] {
+:not(:dir(rtl)) [type=week] {
   background-image: var(--icon-date);
   background-position: center right 0.75rem;
   background-repeat: no-repeat;
   background-size: 1rem auto;
 }
-[type=date]::-webkit-calendar-picker-indicator,
+:not(:dir(rtl)) [type=date]::-webkit-calendar-picker-indicator,
-[type=datetime-local]::-webkit-calendar-picker-indicator,
+:not(:dir(rtl)) [type=datetime-local]::-webkit-calendar-picker-indicator,
-[type=month]::-webkit-calendar-picker-indicator,
+:not(:dir(rtl)) [type=month]::-webkit-calendar-picker-indicator,
-[type=time]::-webkit-calendar-picker-indicator,
+:not(:dir(rtl)) [type=time]::-webkit-calendar-picker-indicator,
-[type=week]::-webkit-calendar-picker-indicator {
+:not(:dir(rtl)) [type=week]::-webkit-calendar-picker-indicator {
   opacity: 0;
 }
-
+:not(:dir(rtl)) [type=time] {
-[type=time] {
   background-image: var(--icon-time);
 }
 
@@ -1325,6 +1363,11 @@ label > input, label > select, label > textarea {
   --border-color: var(--secondary);
   --color: var(--secondary-inverse);
   margin-right: calc(var(--spacing) / 2);
+  margin-left: 0;
+  -webkit-margin-end: calc(var(--spacing) / 2);
+          margin-inline-end: calc(var(--spacing) / 2);
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
   padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius);
@@ -1345,6 +1388,11 @@ label > input, label > select, label > textarea {
   --border-color: var(--secondary);
   --color: var(--secondary-inverse);
   margin-right: calc(var(--spacing) / 2);
+  margin-left: 0;
+  -webkit-margin-end: calc(var(--spacing) / 2);
+          margin-inline-end: calc(var(--spacing) / 2);
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
   padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius);
@@ -1372,6 +1420,11 @@ label > input, label > select, label > textarea {
   --border-color: var(--secondary);
   --color: var(--secondary-inverse);
   margin-right: calc(var(--spacing) / 2);
+  margin-left: 0;
+  -webkit-margin-end: calc(var(--spacing) / 2);
+          margin-inline-end: calc(var(--spacing) / 2);
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
   padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius);
@@ -1396,6 +1449,9 @@ label > input, label > select, label > textarea {
   --border-color: var(--secondary);
   --color: var(--secondary-inverse);
   margin-right: calc(var(--spacing) / 2);
+  margin-left: 0;
+  margin-inline-end: calc(var(--spacing) / 2);
+  margin-inline-start: 0;
   padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius);
@@ -1533,6 +1589,7 @@ td {
   font-size: var(--font-size);
   font-weight: var(--font-weight);
   text-align: left;
+  text-align: start;
 }
 
 tr {
@@ -1713,6 +1770,10 @@ details[open] > summary::after {
   transform: rotate(0);
 }
 
+[dir=rtl] details summary::after {
+  float: left;
+}
+
 /**
  * Card (<article>)
  */
@@ -1888,6 +1949,11 @@ progress::-moz-progress-bar {
 }
 [aria-busy=true]:not(input):not(select):not(textarea):not(:empty)::before {
   margin-right: calc(var(--spacing) * 0.5);
+  margin-left: 0;
+  -webkit-margin-end: calc(var(--spacing) * 0.5);
+          margin-inline-end: calc(var(--spacing) * 0.5);
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
 }
 [aria-busy=true]:not(input):not(select):not(textarea):empty {
   text-align: center;
@@ -2048,6 +2114,10 @@ textarea,
   -ms-touch-action: manipulation;
 }
 
+[dir=rtl] {
+  direction: rtl;
+}
+
 /**
  * Reduce Motion Features
  */

css/pico.css

@@ -782,7 +782,12 @@ small {
 
 ul,
 ol {
+  padding-right: 0;
   padding-left: var(--spacing);
+  -webkit-padding-end: 0;
+          padding-inline-end: 0;
+  -webkit-padding-start: var(--spacing);
+          padding-inline-start: var(--spacing);
 }
 ul li,
 ol li {
@@ -804,7 +809,12 @@ blockquote {
   display: block;
   margin: var(--typography-spacing-vertical) 0;
   padding: var(--spacing);
+  border-right: none;
   border-left: 0.25rem solid var(--blockquote-border-color);
+  -webkit-border-end: none;
+          border-inline-end: none;
+  -webkit-border-start: 0.25rem solid var(--blockquote-border-color);
+          border-inline-start: 0.25rem solid var(--blockquote-border-color);
 }
 blockquote footer {
   margin-top: calc(var(--typography-spacing-vertical) * 0.5);
@@ -1278,7 +1288,12 @@ textarea[disabled] {
 input[aria-invalid],
 select[aria-invalid],
 textarea[aria-invalid] {
-  padding-right: 2rem !important;
+  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
+  padding-left: var(--form-element-spacing-horizontal);
+  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
+          padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
+  -webkit-padding-start: var(--form-element-spacing-horizontal) !important;
+          padding-inline-start: var(--form-element-spacing-horizontal) !important;
   background-position: center right 0.75rem;
   background-repeat: no-repeat;
   background-size: 1rem auto;
@@ -1310,6 +1325,12 @@ textarea[aria-invalid=true]:focus {
   --border-color: var(--form-element-invalid-active-border-color) !important;
 }
 
+[dir=rtl] input[aria-invalid],
+[dir=rtl] select[aria-invalid],
+[dir=rtl] textarea[aria-invalid] {
+  background-position: center left 0.75rem;
+}
+
 input::placeholder,
 input::-webkit-input-placeholder,
 textarea::placeholder,
@@ -1331,12 +1352,21 @@ select::-ms-expand {
 }
 select:not([multiple]):not([size]) {
   padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+  padding-left: var(--form-element-spacing-horizontal);
+  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+          padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+  -webkit-padding-start: var(--form-element-spacing-horizontal);
+          padding-inline-start: var(--form-element-spacing-horizontal);
   background-image: var(--icon-chevron);
   background-position: center right 0.75rem;
   background-repeat: no-repeat;
   background-size: 1rem auto;
 }
 
+[dir=rtl] select:not([multiple]):not([size]) {
+  background-position: center left 0.75rem;
+}
+
 input + small,
 select + small,
 textarea + small {
@@ -1364,6 +1394,11 @@ label > input, label > select, label > textarea {
   height: 1.25em;
   margin-top: -0.125em;
   margin-right: 0.375em;
+  margin-left: 0;
+  -webkit-margin-end: 0.375em;
+          margin-inline-end: 0.375em;
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
   border-width: var(--border-width);
   vertical-align: middle;
   cursor: pointer;
@@ -1443,6 +1478,10 @@ label > input, label > select, label > textarea {
 [type=checkbox][role=switch]:checked::before {
   margin-right: 0;
   margin-left: calc(1.125em - var(--border-width));
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
+  -webkit-margin-start: calc(1.125em - var(--border-width));
+          margin-inline-start: calc(1.125em - var(--border-width));
 }
 
 /**
@@ -1464,25 +1503,24 @@ label > input, label > select, label > textarea {
   border-radius: calc(var(--border-radius) * 0.5);
 }
 
-[type=date],
+:not(:dir(rtl)) [type=date],
-[type=datetime-local],
+:not(:dir(rtl)) [type=datetime-local],
-[type=month],
+:not(:dir(rtl)) [type=month],
-[type=time],
+:not(:dir(rtl)) [type=time],
-[type=week] {
+:not(:dir(rtl)) [type=week] {
   background-image: var(--icon-date);
   background-position: center right 0.75rem;
   background-repeat: no-repeat;
   background-size: 1rem auto;
 }
-[type=date]::-webkit-calendar-picker-indicator,
+:not(:dir(rtl)) [type=date]::-webkit-calendar-picker-indicator,
-[type=datetime-local]::-webkit-calendar-picker-indicator,
+:not(:dir(rtl)) [type=datetime-local]::-webkit-calendar-picker-indicator,
-[type=month]::-webkit-calendar-picker-indicator,
+:not(:dir(rtl)) [type=month]::-webkit-calendar-picker-indicator,
-[type=time]::-webkit-calendar-picker-indicator,
+:not(:dir(rtl)) [type=time]::-webkit-calendar-picker-indicator,
-[type=week]::-webkit-calendar-picker-indicator {
+:not(:dir(rtl)) [type=week]::-webkit-calendar-picker-indicator {
   opacity: 0;
 }
-
+:not(:dir(rtl)) [type=time] {
-[type=time] {
   background-image: var(--icon-time);
 }
 
@@ -1502,6 +1540,11 @@ label > input, label > select, label > textarea {
   --border-color: var(--secondary);
   --color: var(--secondary-inverse);
   margin-right: calc(var(--spacing) / 2);
+  margin-left: 0;
+  -webkit-margin-end: calc(var(--spacing) / 2);
+          margin-inline-end: calc(var(--spacing) / 2);
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
   padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius);
@@ -1522,6 +1565,11 @@ label > input, label > select, label > textarea {
   --border-color: var(--secondary);
   --color: var(--secondary-inverse);
   margin-right: calc(var(--spacing) / 2);
+  margin-left: 0;
+  -webkit-margin-end: calc(var(--spacing) / 2);
+          margin-inline-end: calc(var(--spacing) / 2);
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
   padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius);
@@ -1549,6 +1597,11 @@ label > input, label > select, label > textarea {
   --border-color: var(--secondary);
   --color: var(--secondary-inverse);
   margin-right: calc(var(--spacing) / 2);
+  margin-left: 0;
+  -webkit-margin-end: calc(var(--spacing) / 2);
+          margin-inline-end: calc(var(--spacing) / 2);
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
   padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius);
@@ -1573,6 +1626,9 @@ label > input, label > select, label > textarea {
   --border-color: var(--secondary);
   --color: var(--secondary-inverse);
   margin-right: calc(var(--spacing) / 2);
+  margin-left: 0;
+  margin-inline-end: calc(var(--spacing) / 2);
+  margin-inline-start: 0;
   padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius);
@@ -1710,6 +1766,7 @@ td {
   font-size: var(--font-size);
   font-weight: var(--font-weight);
   text-align: left;
+  text-align: start;
 }
 
 tr {
@@ -1890,6 +1947,10 @@ details[open] > summary::after {
   transform: rotate(0);
 }
 
+[dir=rtl] details summary::after {
+  float: left;
+}
+
 /**
  * Card (<article>)
  */
@@ -2065,6 +2126,11 @@ progress::-moz-progress-bar {
 }
 [aria-busy=true]:not(input):not(select):not(textarea):not(:empty)::before {
   margin-right: calc(var(--spacing) * 0.5);
+  margin-left: 0;
+  -webkit-margin-end: calc(var(--spacing) * 0.5);
+          margin-inline-end: calc(var(--spacing) * 0.5);
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
 }
 [aria-busy=true]:not(input):not(select):not(textarea):empty {
   text-align: center;
@@ -2225,6 +2291,10 @@ textarea,
   -ms-touch-action: manipulation;
 }
 
+[dir=rtl] {
+  direction: rtl;
+}
+
 /**
  * Reduce Motion Features
  */

css/pico.fluid.classless.css

@@ -709,7 +709,12 @@ small {
 
 ul,
 ol {
+  padding-right: 0;
   padding-left: var(--spacing);
+  -webkit-padding-end: 0;
+          padding-inline-end: 0;
+  -webkit-padding-start: var(--spacing);
+          padding-inline-start: var(--spacing);
 }
 ul li,
 ol li {
@@ -731,7 +736,12 @@ blockquote {
   display: block;
   margin: var(--typography-spacing-vertical) 0;
   padding: var(--spacing);
+  border-right: none;
   border-left: 0.25rem solid var(--blockquote-border-color);
+  -webkit-border-end: none;
+          border-inline-end: none;
+  -webkit-border-start: 0.25rem solid var(--blockquote-border-color);
+          border-inline-start: 0.25rem solid var(--blockquote-border-color);
 }
 blockquote footer {
   margin-top: calc(var(--typography-spacing-vertical) * 0.5);
@@ -1071,7 +1081,12 @@ textarea[disabled] {
 input[aria-invalid],
 select[aria-invalid],
 textarea[aria-invalid] {
-  padding-right: 2rem !important;
+  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
+  padding-left: var(--form-element-spacing-horizontal);
+  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
+          padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
+  -webkit-padding-start: var(--form-element-spacing-horizontal) !important;
+          padding-inline-start: var(--form-element-spacing-horizontal) !important;
   background-position: center right 0.75rem;
   background-repeat: no-repeat;
   background-size: 1rem auto;
@@ -1103,6 +1118,12 @@ textarea[aria-invalid=true]:focus {
   --border-color: var(--form-element-invalid-active-border-color) !important;
 }
 
+[dir=rtl] input[aria-invalid],
+[dir=rtl] select[aria-invalid],
+[dir=rtl] textarea[aria-invalid] {
+  background-position: center left 0.75rem;
+}
+
 input::placeholder,
 input::-webkit-input-placeholder,
 textarea::placeholder,
@@ -1124,12 +1145,21 @@ select::-ms-expand {
 }
 select:not([multiple]):not([size]) {
   padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+  padding-left: var(--form-element-spacing-horizontal);
+  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+          padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+  -webkit-padding-start: var(--form-element-spacing-horizontal);
+          padding-inline-start: var(--form-element-spacing-horizontal);
   background-image: var(--icon-chevron);
   background-position: center right 0.75rem;
   background-repeat: no-repeat;
   background-size: 1rem auto;
 }
 
+[dir=rtl] select:not([multiple]):not([size]) {
+  background-position: center left 0.75rem;
+}
+
 input + small,
 select + small,
 textarea + small {
@@ -1157,6 +1187,11 @@ label > input, label > select, label > textarea {
   height: 1.25em;
   margin-top: -0.125em;
   margin-right: 0.375em;
+  margin-left: 0;
+  -webkit-margin-end: 0.375em;
+          margin-inline-end: 0.375em;
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
   border-width: var(--border-width);
   vertical-align: middle;
   cursor: pointer;
@@ -1236,6 +1271,10 @@ label > input, label > select, label > textarea {
 [type=checkbox][role=switch]:checked::before {
   margin-right: 0;
   margin-left: calc(1.125em - var(--border-width));
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
+  -webkit-margin-start: calc(1.125em - var(--border-width));
+          margin-inline-start: calc(1.125em - var(--border-width));
 }
 
 /**
@@ -1257,25 +1296,24 @@ label > input, label > select, label > textarea {
   border-radius: calc(var(--border-radius) * 0.5);
 }
 
-[type=date],
+:not(:dir(rtl)) [type=date],
-[type=datetime-local],
+:not(:dir(rtl)) [type=datetime-local],
-[type=month],
+:not(:dir(rtl)) [type=month],
-[type=time],
+:not(:dir(rtl)) [type=time],
-[type=week] {
+:not(:dir(rtl)) [type=week] {
   background-image: var(--icon-date);
   background-position: center right 0.75rem;
   background-repeat: no-repeat;
   background-size: 1rem auto;
 }
-[type=date]::-webkit-calendar-picker-indicator,
+:not(:dir(rtl)) [type=date]::-webkit-calendar-picker-indicator,
-[type=datetime-local]::-webkit-calendar-picker-indicator,
+:not(:dir(rtl)) [type=datetime-local]::-webkit-calendar-picker-indicator,
-[type=month]::-webkit-calendar-picker-indicator,
+:not(:dir(rtl)) [type=month]::-webkit-calendar-picker-indicator,
-[type=time]::-webkit-calendar-picker-indicator,
+:not(:dir(rtl)) [type=time]::-webkit-calendar-picker-indicator,
-[type=week]::-webkit-calendar-picker-indicator {
+:not(:dir(rtl)) [type=week]::-webkit-calendar-picker-indicator {
   opacity: 0;
 }
-
+:not(:dir(rtl)) [type=time] {
-[type=time] {
   background-image: var(--icon-time);
 }
 
@@ -1295,6 +1333,11 @@ label > input, label > select, label > textarea {
   --border-color: var(--secondary);
   --color: var(--secondary-inverse);
   margin-right: calc(var(--spacing) / 2);
+  margin-left: 0;
+  -webkit-margin-end: calc(var(--spacing) / 2);
+          margin-inline-end: calc(var(--spacing) / 2);
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
   padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius);
@@ -1315,6 +1358,11 @@ label > input, label > select, label > textarea {
   --border-color: var(--secondary);
   --color: var(--secondary-inverse);
   margin-right: calc(var(--spacing) / 2);
+  margin-left: 0;
+  -webkit-margin-end: calc(var(--spacing) / 2);
+          margin-inline-end: calc(var(--spacing) / 2);
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
   padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius);
@@ -1342,6 +1390,11 @@ label > input, label > select, label > textarea {
   --border-color: var(--secondary);
   --color: var(--secondary-inverse);
   margin-right: calc(var(--spacing) / 2);
+  margin-left: 0;
+  -webkit-margin-end: calc(var(--spacing) / 2);
+          margin-inline-end: calc(var(--spacing) / 2);
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
   padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius);
@@ -1366,6 +1419,9 @@ label > input, label > select, label > textarea {
   --border-color: var(--secondary);
   --color: var(--secondary-inverse);
   margin-right: calc(var(--spacing) / 2);
+  margin-left: 0;
+  margin-inline-end: calc(var(--spacing) / 2);
+  margin-inline-start: 0;
   padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius);
@@ -1503,6 +1559,7 @@ td {
   font-size: var(--font-size);
   font-weight: var(--font-weight);
   text-align: left;
+  text-align: start;
 }
 
 tr {
@@ -1683,6 +1740,10 @@ details[open] > summary::after {
   transform: rotate(0);
 }
 
+[dir=rtl] details summary::after {
+  float: left;
+}
+
 /**
  * Card (<article>)
  */
@@ -1858,6 +1919,11 @@ progress::-moz-progress-bar {
 }
 [aria-busy=true]:not(input):not(select):not(textarea):not(:empty)::before {
   margin-right: calc(var(--spacing) * 0.5);
+  margin-left: 0;
+  -webkit-margin-end: calc(var(--spacing) * 0.5);
+          margin-inline-end: calc(var(--spacing) * 0.5);
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
 }
 [aria-busy=true]:not(input):not(select):not(textarea):empty {
   text-align: center;
@@ -2018,6 +2084,10 @@ textarea,
   -ms-touch-action: manipulation;
 }
 
+[dir=rtl] {
+  direction: rtl;
+}
+
 /**
  * Reduce Motion Features
  */

css/pico.slim.css

@@ -728,7 +728,12 @@ small {
 
 ul,
 ol {
+  padding-right: 0;
   padding-left: var(--spacing);
+  -webkit-padding-end: 0;
+          padding-inline-end: 0;
+  -webkit-padding-start: var(--spacing);
+          padding-inline-start: var(--spacing);
 }
 ul li,
 ol li {
@@ -750,7 +755,12 @@ blockquote {
   display: block;
   margin: var(--typography-spacing-vertical) 0;
   padding: var(--spacing);
+  border-right: none;
   border-left: 0.25rem solid var(--blockquote-border-color);
+  -webkit-border-end: none;
+          border-inline-end: none;
+  -webkit-border-start: 0.25rem solid var(--blockquote-border-color);
+          border-inline-start: 0.25rem solid var(--blockquote-border-color);
 }
 blockquote footer {
   margin-top: calc(var(--typography-spacing-vertical) * 0.5);
@@ -1222,7 +1232,12 @@ textarea[disabled] {
 input[aria-invalid],
 select[aria-invalid],
 textarea[aria-invalid] {
-  padding-right: 2rem;
+  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+  padding-left: var(--form-element-spacing-horizontal);
+  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+          padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+  -webkit-padding-start: var(--form-element-spacing-horizontal);
+          padding-inline-start: var(--form-element-spacing-horizontal);
   background-position: center right 0.75rem;
   background-repeat: no-repeat;
   background-size: 1rem auto;
@@ -1254,6 +1269,12 @@ textarea[aria-invalid=true]:focus {
   --border-color: var(--form-element-invalid-active-border-color);
 }
 
+[dir=rtl] input[aria-invalid],
+[dir=rtl] select[aria-invalid],
+[dir=rtl] textarea[aria-invalid] {
+  background-position: center left 0.75rem;
+}
+
 input::placeholder,
 input::-webkit-input-placeholder,
 textarea::placeholder,
@@ -1275,12 +1296,21 @@ select::-ms-expand {
 }
 select:not([multiple]):not([size]) {
   padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+  padding-left: var(--form-element-spacing-horizontal);
+  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+          padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+  -webkit-padding-start: var(--form-element-spacing-horizontal);
+          padding-inline-start: var(--form-element-spacing-horizontal);
   background-image: var(--icon-chevron);
   background-position: center right 0.75rem;
   background-repeat: no-repeat;
   background-size: 1rem auto;
 }
 
+[dir=rtl] select:not([multiple]):not([size]) {
+  background-position: center left 0.75rem;
+}
+
 input + small,
 select + small,
 textarea + small {
@@ -1314,6 +1344,7 @@ td {
   font-size: var(--font-size);
   font-weight: var(--font-weight);
   text-align: left;
+  text-align: start;
 }
 
 tr {
@@ -1356,3 +1387,7 @@ textarea,
 [tabindex] {
   -ms-touch-action: manipulation;
 }
+
+[dir=rtl] {
+  direction: rtl;
+}

scss/components/_accordion.scss

@@ -81,3 +81,13 @@ details {
     }
   }
 }
+
+[dir="rtl"] {
+  details{ 
+    summary {
+      &::after {
+        float: left;
+      }
+    }
+  }
+}

scss/content/_form-alt-input-types.scss

@@ -35,6 +35,7 @@
 }
 
 // Date & Time
+:not(:dir(rtl)) {
   [type="date"],
   [type="datetime-local"],
   [type="month"],
@@ -54,6 +55,7 @@
   [type="time"] {
     background-image: var(--icon-time);
   }
+}
 
 // File
 [type="file"] {
@@ -75,6 +77,9 @@
     --border-color: var(--secondary);
     --color: var(--secondary-inverse);
     margin-right: calc(var(--spacing) / 2);
+    margin-left: 0;
+    margin-inline-end: calc(var(--spacing) / 2);
+    margin-inline-start: 0;
     padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
     border: var(--border-width) solid var(--border-color);
     border-radius: var(--border-radius);

scss/content/_form-checkbox-radio.scss

@@ -12,6 +12,9 @@
   height: 1.25em;
   margin-top: -.125em;
   margin-right: .375em;
+  margin-left: 0;
+  margin-inline-end: .375em;
+  margin-inline-start: 0;
   border-width: var(--border-width);
   vertical-align: middle;
   cursor: pointer;
@@ -112,6 +115,8 @@
     &::before {
       margin-right: 0;
       margin-left: calc(#{$switch-width * 0.5} - var(--border-width));
+      margin-inline-end: 0;
+      margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width));
     }
   }
 }

scss/content/_form.scss

@@ -224,10 +224,16 @@ textarea {
 
   &[aria-invalid] {
     @if $enable-important {
-      padding-right: 2rem !important;
+      padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
+      padding-left: var(--form-element-spacing-horizontal);
+      padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
+      padding-inline-start: var(--form-element-spacing-horizontal) !important;
     }
     @else {
-      padding-right: 2rem;
+      padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+      padding-left: var(--form-element-spacing-horizontal);
+      padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+      padding-inline-start: var(--form-element-spacing-horizontal);
     }
     background-position: center right .75rem;
     background-repeat: no-repeat;
@@ -265,6 +271,16 @@ textarea {
   }
 }
 
+[dir="rtl"] {
+  input,
+  select,
+  textarea {
+    &[aria-invalid] {
+      background-position: center left .75rem;
+    }
+  }
+}
+
 // Placeholder
 input::placeholder,
 input::-webkit-input-placeholder,
@@ -293,6 +309,9 @@ select {
 
   &:not([multiple]):not([size]) {
     padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+    padding-left: var(--form-element-spacing-horizontal);
+    padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+    padding-inline-start: var(--form-element-spacing-horizontal);
     background-image: var(--icon-chevron);
     background-position: center right .75rem;
     background-repeat: no-repeat;
@@ -300,6 +319,14 @@ select {
   }
 }
 
+[dir="rtl"] {
+  select { 
+    &:not([multiple]):not([size]) {
+      background-position: center left .75rem;
+    }
+  }
+}
+
 // Helper
 input,
 select,

scss/content/_table.scss

@@ -32,6 +32,7 @@ td {
   font-size: var(--font-size);
   font-weight: var(--font-weight);
   text-align: left;
+  text-align: start;
 }
 
 // Rows

scss/content/_typography.scss

@@ -215,7 +215,10 @@ small {
 // Lists
 ul,
 ol {
+  padding-right: 0;
   padding-left: var(--spacing);
+  padding-inline-end: 0;
+  padding-inline-start: var(--spacing);
 
   li {
     margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
@@ -239,7 +242,10 @@ blockquote {
   display: block;
   margin: var(--typography-spacing-vertical) 0;
   padding: var(--spacing);
+  border-right: none;
   border-left: .25rem solid var(--blockquote-border-color);
+  border-inline-end: none;
+  border-inline-start: .25rem solid var(--blockquote-border-color);
 
   footer {
     margin-top: calc(var(--typography-spacing-vertical) * 0.5);

scss/utilities/_accessibility.scss

@@ -44,3 +44,11 @@ textarea,
 [tabindex] {
   -ms-touch-action: manipulation;
 }
+
+
+// Pico
+// ––––––––––––––––––––
+
+[dir="rtl"] {
+  direction: rtl;
+}

scss/utilities/_loading.scss

@@ -28,6 +28,9 @@
   &:not(:empty) {
     &::before {
       margin-right: calc(var(--spacing) * 0.5);
+      margin-left: 0;
+      margin-inline-end: calc(var(--spacing) * 0.5);
+      margin-inline-start: 0;
     }
   }