clairity.css 0.3.1 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b6dfecc40f87b3e965d45a65ab3a0deff5a20c30bfd926687c9cc4c081e3140a
-  data.tar.gz: 5649183f29ca7a7075463b7be03d2137538ba276327aefe4feabdf2ba86e0886
+  metadata.gz: 356b88afa2ad21ee85317b10189c1153c359346cb1e6b3a56275d6b551383177
+  data.tar.gz: e9d8ed00fa08e18572626aacf722bf76fff9cbb048a56de6f7f4d8291bfe661d
 SHA512:
-  metadata.gz: 8749996eeb6591996d31e714ba9407780bfd1796a609c20e3241755725870731fc074031d0b1ef075b07c668163a8ad86767247ec25f23e665057b84afb4b79c
-  data.tar.gz: db53f1e55534067439fc8b2675133ae572a6343d4f245dabb60e2f55c5a16b514be6191acd0998a73ad838614752759a8308d243def99dc16479f0d669f14ac6
+  metadata.gz: eb93dc1feacfc0b6086eb764538057f1355f33d45f3acad38c5939d8bf5529e053a2bd54565f094170f8c56a357362d7ab816efd06c83893772b3b397cdd7b9e
+  data.tar.gz: a13a003c9a64b3b7ad3f78e6be8d81c228b7c5cdaf03679c1e3160244820662624a45c702765532ce44c83b096f98a2ae48e962570b47f6edf3fb299d97279ef

data/CHANGELOG.md

@@ -29,6 +29,46 @@ This section is for recording changes committed since the last release.
 ### Security
 
 
+## [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
+
+* [icons.css]: `--i-key` icon and the associated icon class in [classes.css]
+* add `.button_to` example to `clairity.html` and `components.html`, tweaking `clairity.html.css` in the process
+  * note that forms cannot exist inside `<p>` tags, so a form button like `.button_to` has to go in a `<div>` or similar container-type tag
+
+### Fixed
+
+* [components.css]: `inline-block` `i[class^='i-']` elements to avoid background color bleed on buttons with non-square `svg` icons (safari)
+  * this makes the icon take up all of its reserved square (24×24px by default) even if the underlying svg is not square
+  * also add `vertical-align: middle;` to better align these icons with button text
+* [components.css]: `display: flex` on `.button_to` forms (rails-specific) allows such form buttons to inline properly with other buttons without added spacing (firefox) or overlap (safari)
+
+
 ## [v0.3.1] - 20230620
 
 ### Added
@@ -666,7 +706,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.3.1...HEAD
+[unreleased]: https://github.com/clairity/clairity.css/compare/v0.5.0...HEAD
+[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
 [v0.2.0]: https://github.com/clairity/clairity.css/compare/v0.1.2...v0.2.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) {
@@ -190,9 +197,11 @@ 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);     }
+.i-key          { --icon: var(--i-key);           }
 .i-mail         { --icon: var(--i-mail);          }
 .i-mail-check   { --icon: var(--i-mail-check);    }
 .i-mail-x       { --icon: var(--i-mail-x);        }

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

@@ -179,6 +179,8 @@ i[class^='i-'] {
   background-color:       var(--icon-color);
   padding:                var(--inline-padding);
   min-height:             var(--ml); /* else naked icons collapse into a line */
+  display:                inline-block;
+  vertical-align:         middle;
 }
 
 
@@ -703,6 +705,7 @@ nav:has(.toggle[aria-expanded=false]) > menu {
 //              form width while maximizing the button within to that form width
 // .......................................................................... */
 .button_to {
+  display:                flex;
   width:                  min-content;
 /*HACK: an inline-size container-type make forms zero-width, so make it normal*/
   container-type:         normal;
@@ -903,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];
@@ -936,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;
+  justify-self:         left;
+}
+
+label + [type='image'] {
   max-height:             var(--height);
   object-fit:             contain;
   vertical-align:         middle;

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

@@ -19,20 +19,21 @@
   --i-sms:                url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M2,2 38,2 38,28 22,28 12,38 12,28 2,28Z' fill='none' stroke='%23999' stroke-width='1.5'/></svg>");
   --i-tel:                url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='none' stroke-width='1.5'><path d='M8,1 34,1 34,39 8,39Z M12,5 30,5 30,30 12,30Z' /><circle cx='21' cy='34' r='2'/></g></svg>");
   /* modified tabler icons */ 
-  --i-bookmark:           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'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M9 4h6a2 2 0 0 1 2 2v14l-5 -3l-5 3v-14a2 2 0 0 1 2 -2' /></svg>");
-  --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'><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'><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'><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-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'><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-bookmark:           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>bookmark</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M9 4h6a2 2 0 0 1 2 2v14l-5 -3l-5 3v-14a2 2 0 0 1 2 -2' /></svg>");
+  --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'><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>");
-  --i-file-download:      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'><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' /><path d='M12 17v-6' /><path d='M9.5 14.5l2.5 2.5l2.5 -2.5' /></svg>");
-  --i-home-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'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M9 21v-6a2 2 0 0 1 2 -2h2c.645 0 1.218 .305 1.584 .78' /><path d='M20.004 11.004l-8.004 -8.004l-9 9h2v7a2 2 0 0 0 2 2h4' /><path d='M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z' /></svg>");
-  --i-lock:               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'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><rect x='5' y='11' width='14' height='10' rx='2' /><circle cx='12' cy='16' r='1' /><path d='M8 11v-4a4 4 0 0 1 8 0v4' /></svg>");
-  --i-mail:               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'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><rect x='3' y='5' width='18' height='14' rx='2' /><polyline points='3 7 12 13 21 7' /></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>");
+  --i-file-download:      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 download</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' /><path d='M12 17v-6' /><path d='M9.5 14.5l2.5 2.5l2.5 -2.5' /></svg>");
+  --i-home-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>home edit</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M9 21v-6a2 2 0 0 1 2 -2h2c.645 0 1.218 .305 1.584 .78' /><path d='M20.004 11.004l-8.004 -8.004l-9 9h2v7a2 2 0 0 0 2 2h4' /><path d='M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z' /></svg>");
+  --i-key:                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>key</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1 -4.069 0l-.301 -.301l-6.558 6.558a2 2 0 0 1 -1.239 .578l-.175 .008h-1.172a1 1 0 0 1 -.993 -.883l-.007 -.117v-1.172a2 2 0 0 1 .467 -1.284l.119 -.13l.414 -.414h2v-2h2v-2l2.144 -2.144l-.301 -.301a2.877 2.877 0 0 1 0 -4.069l2.643 -2.643a2.877 2.877 0 0 1 4.069 0z' /><path d='M15 9h.01' /></svg>");
+  --i-lock:               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>lock</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><rect x='5' y='11' width='14' height='10' rx='2' /><circle cx='12' cy='16' r='1' /><path d='M8 11v-4a4 4 0 0 1 8 0v4' /></svg>");
+  --i-mail:               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>mail</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><rect x='3' y='5' width='18' height='14' rx='2' /><polyline points='3 7 12 13 21 7' /></svg>");
   --i-mail-check:         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>mail check</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M11 19h-6a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v6' /><path d='M3 7l9 6l9 -6' /><path d='M15 19l2 2l4 -4' /></svg>");
   --i-mail-x:             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>mail x</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M13.5 19h-8.5a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v6' /><path d='M3 7l9 6l9 -6' /><path d='M22 22l-5 -5' /><path d='M17 22l5 -5' /></svg>");
-
   --i-message-2:          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>message 2</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M12 20l-3 -3h-2a3 3 0 0 1 -3 -3v-6a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-2l-3 3' /><line x1='8' y1='9' x2='16' y2='9' /><line x1='8' y1='13' x2='14' y2='13' /></svg>");
   --i-mood-kid:           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>mood kid</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /><path d='M9 10l.01 0' /><path d='M15 10l.01 0' /><path d='M9.5 15a3.5 3.5 0 0 0 5 0' /><path d='M12 3a2 2 0 0 0 0 4' /></svg>");
   --i-numbers:            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>numbers</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M8 10v-7l-2 2' /><path d='M6 16a2 2 0 1 1 4 0c0 .591 -.601 1.46 -1 2l-3 3.001h4' /><path d='M15 14a2 2 0 1 0 2 -2a2 2 0 1 0 -2 -2' /><path d='M6.5 10h3' /></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.3.1'
+  VERSION = '0.5.0'
 end

metadata

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