clairity.css 0.4.0 → 0.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8d704d6af159d7e27bc4335c02879082a51cd44de52386ba389e443f5f6c3b00
-  data.tar.gz: 5aeb1befabeee3ca01620860a7bbf07c4295b5b798d2528b1d5eb1eb883590d4
+  metadata.gz: c65c6029ccabe42eb67a360010a78668fa3c70710a1f39a855d362dea1dd7fa8
+  data.tar.gz: 82c3bdb27894954730a381bf55ea21b9b07737e95c7807314754377ec37aea14
 SHA512:
-  metadata.gz: 8af3fc784433f394887e2b785017c18654bb117bf5ed19e456d83f9b465c769f500b56ef60c2f8260fe1db56fed0a4c1a2c850be4b4a2deb1e51f7d013cfb044
-  data.tar.gz: 06cdfb1f48eab9b1f3c9a5db6bdb4108be49a07b043c173e1267094522bdfb42f35b2ea4c4273f4e63dc3b66ac8e86337dcd78b52132332ef907403f02f19da5
+  metadata.gz: 7e4baab2ddda8fd5c268d8975814e1066d774134e09bb618d3858e3bd2c36b8e558b264c354838429b8d234f2b90375b3b26de9eb4e967dece49ea720fa6bdb0
+  data.tar.gz: f20400f2e224b380cc1f189842bd44c806317eebeed85bdc8cc604073077fef047a24952a5c62b4a2d509b75f520abd31e1b02cd31adfe12a786c09bc36c8a89

data/CHANGELOG.md

@@ -29,6 +29,41 @@ This section is for recording changes committed since the last release.
 ### Security
 
 
+## [v0.5.1] - 20230628
+
+### Changed
+
+* [classes.css]: decreased spacing between heading classes (like `.h1`) and the following paragraph - EXPERIMENTAL
+
+### Fixed
+
+* [cosmetic.css]: forgot to add `place-self: start` to checkbox/radio label
+
+
+## [v0.5.0] - 20230628
+
+### Added
+
+* [icons.css]: `--i-crown` icon and the associated icon class in [classes.css]
+* [cosmetic.css]: swap the grid placement of radio/checkboxes & their labels
+* `components.html`: add a long label to one of the form fields and a checkbox field with a trailing label for visualization/testing
+
+
+### Changed
+
+* [base.css]: make `h5` and `h6` headers use `--regular` instead of `--bold` font weight for better visual balance with other heading styles
+  * also made the same change for `.h5` and `.h6` in [classes.css]
+* [components.css]: from [cosmetic.css] (and originally in [states.css] for some reason), moved fieldset grid styles for browsers supporting `:has()` here   
+* [shims.css]: from [cosmetic.css] (and originally in [states.css] for some reason), moved form styles related to sectioning elements (`<section>`, `<p>`, and `<div>`) here
+  * in modern css (particularly with the advent of `:has()` and container queries), we shouldn't need these extra container divs, so [shims.css] is the right place to put them, since they're still not uncommon but shouldn't be encouraged going forward
+
+
+### Fixed
+
+* fixed alignment of bare checkboxes next to labels in the standard form grid, which got out of sync when labels became `inline-grid` with a default height
+* [classes.css]: re-added common `.h1`, `.h2`, `.h3`, `.h4`, `.h5`, `.h6` styling (these were removed from [cosmetic.css] at some point, to be moved to a more appropriate spot, and then not added back in again)
+
+
 ## [v0.4.0] - 20230622
 
 ### Added
@@ -682,7 +717,9 @@ After a number of diversions, including developing a (as yet unreleased) Jekyll
 - `palette.css` - separate out the color scheme into its own css file
 
 
-[unreleased]: https://github.com/clairity/clairity.css/compare/v0.4.0...HEAD
+[unreleased]: https://github.com/clairity/clairity.css/compare/v0.5.1...HEAD
+[v0.5.1]: https://github.com/clairity/clairity.css/compare/v0.5.0...v0.5.1
+[v0.5.0]: https://github.com/clairity/clairity.css/compare/v0.4.0...v0.5.0
 [v0.4.0]: https://github.com/clairity/clairity.css/compare/v0.3.1...v0.4.0
 [v0.3.1]: https://github.com/clairity/clairity.css/compare/v0.3.0...v0.3.1
 [v0.3.0]: https://github.com/clairity/clairity.css/compare/v0.2.0...v0.3.0

data/lib/assets/css/clairity/base.css

@@ -168,7 +168,7 @@ h3 {  --min-font: 1.375;  --max-font: 1.667;  }
 h4 {  --min-font: 1.25;   --max-font: 1.5;    }
 h5 {  --min-font: 1.125;  --max-font: 1.25;   }
 h6 {  --min-font: 1;      --max-font: 1.125;  }
-h5, h6 { font-weight:     var(--bold);        }     /* lighter --heading colors 
+h5, h6 { font-weight:     var(--regular);     }     /* lighter --heading colors 
                   typically need bolder font-weight for the smallest headings */
 
 

data/lib/assets/css/clairity/classes.css

@@ -72,19 +72,26 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
 
 
 /* -----------------------------------------------------------------------------
-//  #headings - 
+//  #headings #h1 #h2 #h3 #h4 #h5 #h6 - allows changing visual heading hierarchy 
+   independent of document outline. keep values in sync with those in base.css
 // -------------------------------------------------------------------------- */
 
-/* #h1 #h2 #h3 #h4 #h5 #h6 - allows changing visual heading hierarchy 
-   independent of document outline. keep values in sync with those in base.css
-   .......................................................................... */
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  color:                  var(--heading);
+  font-weight:            var(--lighter);
+  line-height:            var(--compact);
+  margin:                 var(--margin);
+  font-size:              var(--clamp, calc(var(--max-font) * 1rem));
+}
+
+/* fluid type scale settings for headings */
 .h1 { --min-font: 1.75;   --max-font: 2.5;    }
 .h2 { --min-font: 1.5;    --max-font: 2;      }
 .h3 { --min-font: 1.375;  --max-font: 1.667;  }
 .h4 { --min-font: 1.25;   --max-font: 1.5;    }
 .h5 { --min-font: 1.125;  --max-font: 1.25;   }
 .h6 { --min-font: 1;      --max-font: 1.125;  }
-.h5, .h6 { font-weight:   var(--bold);        }
+.h5, .h6 { font-weight:   var(--regular);     }
 
 /* dampen the prominence of links in headings; keep in sync with cosmetic.css */
 :where(.h1, .h2, .h3, .h4, .h5, .h6) :is(a, :visited) {
@@ -93,6 +100,14 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
   text-decoration-style:  dotted;
 }
 
+/* decrease space between headings and paragraphs - EXPERIMENTAL */
+:is(.h1,.h2,.h3,.h4,.h5,.h6):has(+ p) {
+  margin-bottom:          0.25em;
+}
+:where(.h1,.h2,.h3,.h4,.h5,.h6) + p {
+  margin-top:             0.25em;
+}
+
 /* text providing extra detail to a heading. p-subtitle is a microformat 
    (plaintext) alternative class name for .subtitle
 // .......................................................................... */
@@ -190,6 +205,7 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
 .i-burger       { --icon: var(--i-burger);        }
 .i-check        { --icon: var(--i-check);         }
 .i-chevron      { --icon: var(--i-chevron);       }
+.i-crown        { --icon: var(--i-crown);         }
 .i-dash         { --icon: var(--i-dash);          }
 .i-edit         { --icon: var(--i-edit);          }
 .i-home-edit    { --icon: var(--i-home-edit);     }

data/lib/assets/css/clairity/components.css

@@ -906,8 +906,11 @@ selectmenu::part(listbox) {
   }
 }
 
-/* #form #grid - general purpose 2-column grid, as used on forms by default
-// .......................................................................... */
+
+/* -----------------------------------------------------------------------------
+//  #form #grid - general purpose 2-column grid, as used on forms by default
+// -------------------------------------------------------------------------- */
+
 .form.grid {
   display:                grid; 
   grid-template-columns:  [labels full-start]  3fr  [elements]  7fr  [full-end];
@@ -939,6 +942,77 @@ selectmenu::part(listbox) {
 }
 
 
+/* -----------------------------------------------------------------------------
+//  #fieldset #grid - form grid for fieldsets for browsers that support :has()
+// -------------------------------------------------------------------------- */
+
+@supports selector(:has(*)) {
+  /* set up a form grid on fieldsets that include form elements */
+  fieldset:where(:has(label, input, button, textarea, select, fieldset)) {
+    margin:               0;
+    display:              grid;
+    grid-template-columns:[labels full-start] 3fr [elements] 7fr [full-end];
+    gap:                  var(--m);
+  }
+  /* for fieldsets containing <p> tags that encompass checkboxes/radios, but no
+     other form inputs, remove extraneous gap between label and element */
+  fieldset:where(:has(p :is([type='checkbox'], [type='radio'])):not(:has(select,
+      textarea, [type="text"], [type="date"], [type="email"], [type="password"],
+      [type="datetime-local"], [type="search"]))) {
+    row-gap:              0;
+  }
+  /* since grid properties fall through p tags, assign margin-top to first child
+  elements to get a gap between paragraphs of different input types */
+  fieldset p:has([type='checkbox'], [type='radio']) + p:has([type='radio'], 
+      [type='checkbox']) :is([type='radio'], [type='checkbox'], 
+      label):first-of-type {
+    margin-top:           var(--m);
+  }
+  /* chrome/edge doesn't support subgrid, so pierce the grid barrier instead  */
+  fieldset :where(p:has(label, input, button, textarea, select, fieldset)) {
+    display:              contents;
+  }
+  /* labels go on the labels gridline */
+  :where(fieldset :is(p, div)) label {
+    grid-column:          labels;
+  }
+  /* lists that contain radios/checkboxes go on the elements gridline */
+  form:has(fieldset :where(select, textarea, [type="text"], [type="date"], 
+      [type="email"], [type="password"], [type="datetime-local"], 
+      [type="search"])) fieldset ul:has(li label :where([type='radio'], 
+      [type='checkbox'])) {
+    grid-column:          elements;
+  }
+
+  /* inputs on the elements gridline; pad right side away from fieldset line  */
+  :where(fieldset) :where(p):has(input, button, textarea, select, fieldset) 
+      :where(input:not(:is([type='checkbox'],[type='radio']), button, 
+      textarea, select, fieldset)) {
+    grid-column:          elements;
+    margin-right:         var(--m);
+  }
+  /* for radios & checks, invert the placement of the input and label */
+  /* NOTE: align-self & justify-self are not properly supported for grid by IE
+     anyway, so just use the combined property `place-self` here */
+  :where(fieldset) :where(p):has(label) :where([type='checkbox'], 
+      [type='radio']):has(+ label) {
+    grid-column:          labels;
+    place-self:           center end;
+  }
+  :where(fieldset p:has(label) :is([type='checkbox'], 
+      [type='radio']):has(+ label)) + label {
+    grid-column:          elements;
+    justify-self:         start;
+  }
+  /* for paragraph tags that aren't form element containers, span the grid */
+  :where(fieldset) :where(p, div, h2, h3, h4, h5, h6):not(:has(label, input, 
+      button, textarea, select, fieldset)) {
+    display:              block;
+    grid-column:          full;
+  }
+}
+
+
 /* -----------------------------------------------------------------------------
 //  #progressbar - a circular progress bar component - from almond.css
 // -------------------------------------------------------------------------- */

data/lib/assets/css/clairity/cosmetic.css

@@ -49,7 +49,8 @@ nav > menu > li {    display: inline;        } /* only direct children, as menu
   margin:                 0;
 }
 
-/* dampen the prominence of links in headings */
+/* dampen the prominence of links in headings - needs to be [0010] specificity 
+   to override the :visited default */
 :where(h1, h2, h3, h4, h5, h6) :is(a, :visited) {
   color:                  var(--heading);
   font-weight:            unset;
@@ -149,19 +150,14 @@ tfoot :where(td, th)     {box-shadow: inset 0  2px var(--secondary, --neutral);}
 //  #forms - for submitting data to the server
 // -------------------------------------------------------------------------- */
 
-/* #form #section #p #div - would prefer subgrid to have containers layout 
-   contents on the grid, but its not yet supported by chrome/edge. use 
-   display: contents; to pierce the grid instead          - [0002] specificity
-// .......................................................................... */
-form section, form p, form div {         /* TODO: should be a shim eventually */
-  display:                contents;       /* make contents align to form grid */
-  margin:                 0;      /* let contents, not container, set spacing */
-  container-type:         unset; /*let contents adjust to outer form container*/
-}
 /* #h2 - make form headers/paragraphs span the full width - [0002] specificity*/
 form h2, form p { grid-column: full; }
 
-/* #fieldset grid should span full form grid in narrower form containers
+/* #form #ul - since lists in forms typically list out form controls, remove
+   the bullet styling from them - [0002] specificity */
+form ul { list-style:     none; }
+
+/*  #fieldset should span full form grid in narrower form containers
 // .......................................................................... */
 @container form (width <= 35rem) {
   fieldset {
@@ -177,121 +173,19 @@ form h2, form p { grid-column: full; }
   }
 }
 
-/* #label becomes inline-grid to take full row --height          - EXPERIMENTAL
-// TODO: fix label-to-textarea baseline alignment, and radio/checkbox height
+fieldset > :last-child {                    /* #fieldset - [0002] specificity */
+  margin-bottom:          0;
+}
+
+/*  #label becomes inline-grid to take full row --height          - EXPERIMENTAL
+//  TODO: fix label-to-textarea baseline alignment
 // .......................................................................... */
 label {
   display:                inline-grid;
   grid-auto-flow:         column;
   height:                 var(--height);
-  align-content:          center;
-}
-
-/* TEMP: moved from states.css ++++++++++++++++++++++++++++++++++++++++++++++ */
-/* #form #ul - since lists in forms typically list out form controls, remove
-   the bullet styling from them - [0002] specificity */
-form ul { list-style:     none; }
-
-/* #form #section #p #div - extend the subgrid into common, but strictly 
-// non-semantic, container elements used within forms - subgrid is firefox 71+ &
-// safari 16+ only 20221001
-// .......................................................................... */
-@supports (grid-template-columns: subgrid) {
-  /* :where() can be used here, since @supports is also a recent addition     */
-  form :where(section, p, div) {                        /* [0001] specificity */
-    grid-column:            full;
-    display:                grid;
-    grid-template-columns:  subgrid;
-    gap:                    inherit;
-  }
-
-  /* TEMP: swap the grid placement of radio/checkboxes & their labels */
-  :where(form) :where(section, p, div) :is([type='checkbox'], [type='radio']) {
-    grid-column:          labels;
-    justify-self:         right;
-  }
-  :where(form) :is(:where(section, p, div) 
-      :is([type='checkbox'], [type='radio'])+label) {
-    grid-column:          elements;
-    justify-self:         left;
-  }
-}
-/*form section :where(h1,h2,h3,h4,h5,h6) + p { display: block; }*/
-
-/* chrome/edge doesn't support subgrid yet but does support :has() & :where() */
-@supports selector(:has(*)) {
-  /* set up a form grid on fieldsets that include form elements */
-  fieldset:where(:has(label, input, button, textarea, select, fieldset)) {
-    margin:               0;
-    display:              grid;
-    grid-template-columns:[labels full-start] 3fr [elements] 7fr [full-end];
-    gap:                  var(--m);
-  }
-  /* for fieldsets containing <p> tags that encompass checkboxes/radios, but no
-     other form inputs, remove extraneous gap between label and element */
-  fieldset:where(:has(p :is([type='checkbox'], [type='radio'])):not(:has(select,
-      textarea, [type="text"], [type="date"], [type="email"], [type="password"],
-      [type="datetime-local"], [type="search"]))) {
-    row-gap:              0;
-  }
-  /* since grid properties fall through p tags, assign margin-top to first child
-  elements to get a gap between paragraphs of different input types */
-  fieldset p:has([type='checkbox'], [type='radio']) + p:has([type='radio'], 
-      [type='checkbox']) :is([type='radio'], [type='checkbox'], 
-      label):first-of-type {
-    margin-top:           var(--m);
-  }
-  /* chrome/edge doesn't support subgrid, so pierce the grid barrier instead  */
-  fieldset :where(p:has(label, input, button, textarea, select, fieldset)) {
-    display:              contents;
-  }
-  /* labels go on the labels gridline */
-  :where(fieldset :is(p, div)) label {
-    grid-column:          labels;
-  }
-  /* lists that contain radios/checkboxes go on the elements gridline */
-  form:has(fieldset :where(select, textarea, [type="text"], [type="date"], 
-      [type="email"], [type="password"], [type="datetime-local"], 
-      [type="search"])) fieldset ul:has(li label :where([type='radio'], 
-      [type='checkbox'])) {
-    grid-column:          elements;
-  }
-
-  /* inputs on the elements gridline; pad right side away from fieldset line  */
-  :where(fieldset) :where(p):has(input, button, textarea, select, fieldset) 
-      :where(input:not(:is([type='checkbox'],[type='radio']), button, 
-      textarea, select, fieldset)) {
-    grid-column:          elements;
-    margin-right:         var(--m);
-  }
-  /* for radios & checks, invert the placement of the input and label */
-  /* NOTE: align-self & justify-self are not properly supported for grid by IE
-     anyway, so just use the combined property `place-self` here */
-  :where(fieldset) :where(p):has(label) :where([type='checkbox'], 
-      [type='radio']):has(+ label) {
-    grid-column:          labels;
-    place-self:           center end;
-  }
-  :where(fieldset p:has(label) :is([type='checkbox'], 
-      [type='radio']):has(+ label)) + label {
-    grid-column:          elements;
-    justify-self:         start;
-  }
-  /* for paragraph tags that aren't form element containers, span the grid */
-  :where(fieldset) :where(p, div, h2, h3, h4, h5, h6):not(:has(label, input, 
-      button, textarea, select, fieldset)) {
-    display:              block;
-    grid-column:          full;
-  }
+  align-content:          center;                   /* works with inline-grid */
 }
-/*form :where(fieldset, input, select, button, input[type="button"]) { 
-  grid-column:            elements; 
-}*/
-
-fieldset > :last-child {
-  margin-bottom:          0;
-}
-/* END: moved from states.css +++++++++++++++++++++++++++++++++++++++++++++++ */
 
 
 /* -----------------------------------------------------------------------------
@@ -323,12 +217,23 @@ label:where(:has(+ [multiple],+ textarea,+ select[size])){/*[0001] specificity*/
     only understands simple :has() selectors, so can't use the direct descendent
     selector > here until it understands it                - [0011] specificity
 // .......................................................................... */
-label:has([type="checkbox"]) {
+label:has([type='checkbox']) {
   grid-column:            elements;
   justify-self:           left;
 }
 
-label + [type="image"] {
+/* swap the grid placement of radio/checkboxes & their labels */
+:where(form) :is([type='checkbox'], [type='radio']) {
+  grid-column:          labels;
+  place-self:           center end;
+}
+
+:where(form) :is([type='checkbox'], [type='radio']) + label {
+  grid-column:          elements;
+  place-self:           center start;
+}
+
+label + [type='image'] {
   max-height:             var(--height);
   object-fit:             contain;
   vertical-align:         middle;

data/lib/assets/css/clairity/icons.css

@@ -23,6 +23,7 @@
   --i-browser:            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>browser</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><rect x='4' y='4' width='16' height='16' rx='1' /><line x1='4' y1='8' x2='20' y2='8' /><line x1='8' y1='4' x2='8' y2='8' /></svg>");
   --i-calendar:           url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>calendar</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><rect x='4' y='5' width='16' height='16' rx='2' /><line x1='16' y1='3' x2='16' y2='7' /><line x1='8' y1='3' x2='8' y2='7' /><line x1='4' y1='11' x2='20' y2='11' /><line x1='11' y1='15' x2='12' y2='15' /><line x1='12' y1='15' x2='12' y2='18' /></svg>");
   --i-calendar-time:      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>calendar time</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4' /><circle cx='18' cy='18' r='4' /><path d='M15 3v4' /><path d='M7 3v4' /><path d='M3 11h16' /><path d='M18 16.496v1.504l1 1' /></svg>");
+  --i-crown:              url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>crown</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M12 6l4 6l5 -4l-2 10h-14l-2 -10l5 4z' /></svg>");
   --i-external-link:      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>external link</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5' /><line x1='10' y1='14' x2='20' y2='4' /><polyline points='15 4 20 4 20 9' /></svg>");
   --i-edit:               url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>edit</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1' /><path d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z' /><path d='M16 5l3 3' /></svg>");
   --i-file:               url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>file</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M14 3v4a1 1 0 0 0 1 1h4' /><path d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z' /></svg>");

data/lib/assets/css/clairity/legacy.css

@@ -34,6 +34,13 @@ body > *:not(.fluid) {
 }}
 
 
+/* -----------------------------------------------------------------------------
+//  #forms - 
+// -------------------------------------------------------------------------- */
+
+
+
+
 /* -----------------------------------------------------------------------------
 //  #card - 
 // -------------------------------------------------------------------------- */

data/lib/assets/css/clairity/shims.css

@@ -6,6 +6,48 @@
 
 
 
+/* -----------------------------------------------------------------------------
+//  #forms - for submitting data to the server
+// -------------------------------------------------------------------------- */
+
+
+/* #form #section #p #div - would prefer subgrid to have containers layout 
+   contents on the grid, but its not yet supported by chrome/edge. use 
+   display: contents; to pierce the grid instead          - [0002] specificity
+// .......................................................................... */
+form section, form p, form div {
+  display:                contents;       /* make contents align to form grid */
+  margin:                 0;      /* let contents, not container, set spacing */
+  container-type:         unset; /*let contents adjust to outer form container*/
+}
+
+/* #form #section #p #div - extend the subgrid into common, but strictly 
+   non-semantic, container elements used within forms - subgrid is firefox 71+ &
+   safari 16+ only 20221001
+// .......................................................................... */
+@supports (grid-template-columns: subgrid) {
+  /* :where() can be used here, since @supports is also a recent addition     */
+  form :where(section, p, div) {                        /* [0001] specificity */
+    grid-column:            full;
+    display:                grid;
+    grid-template-columns:  subgrid;
+    gap:                    inherit;
+  }
+
+  /* TEMP: swap the grid placement of radio/checkboxes & their labels */
+  :where(form) :where(section, p, div) :is([type='checkbox'], [type='radio']) {
+    grid-column:          labels;
+    justify-self:         right;
+  }
+  :where(form) :is(:where(section, p, div) 
+      :is([type='checkbox'], [type='radio'])+label) {
+    grid-column:          elements;
+    justify-self:         left;
+  }
+}
+/*form section :where(h1,h2,h3,h4,h5,h6) + p { display: block; }*/
+
+
 /* -----------------------------------------------------------------------------
 //  #card - add class-based versions of cards
 // -------------------------------------------------------------------------- */

data/lib/clairity.css/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ClairityCss
-  VERSION = '0.4.0'
+  VERSION = '0.5.1'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: clairity.css
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.1
 platform: ruby
 authors:
 - clairity
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-06-23 00:00:00.000000000 Z
+date: 2023-06-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties