semantic-forms 5.3.6 → 5.3.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/CONTRIBUTING.md +1 -1
  3. package/dist/semantic-forms.css +9 -2
  4. package/dist/semantic-forms.css.map +1 -1
  5. package/docs/statics/pages/fullDemo.html +109 -0
  6. package/docs/statics/pages/inputs.html +1 -1
  7. package/docs/statics/pages/layout.html +6 -6
  8. package/docs/statics/pages/usage.html +1 -1
  9. package/package.json +2 -2
  10. package/semanticForms.scss +2 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,13 @@
1
+ ## 5.3.8
2
+
3
+ - Fixed tabs in a nested fieldset.
4
+ - Updated dependencies.
5
+
6
+ ## 5.3.7
7
+
8
+ - Fixed details/summary styling.
9
+ - Updated dependencies.
10
+
1
11
  ## 5.3.6
2
12
 
3
13
  - Added support for the HTML `switch` attribute on checkboxes. Browsers with native support render their own switch; elsewhere Semantic Forms draws one, applies the `switch` ARIA role, and supports dragging the thumb to toggle it.
package/CONTRIBUTING.md CHANGED
@@ -38,7 +38,7 @@ A failed comparison writes `-expected.png`, `-actual.png` and `-diff.png` into `
38
38
  npm run test-visual-docker -- --update-snapshots
39
39
  ```
40
40
 
41
- If the visual diff is not a diff you meant to make, then you have found a regression.
41
+ If the visual diff is not a diff you meant to make, then you may have found a regression. We say you "may" have found a regression, because sometimes the visual regression tests are off by a pixel or so, which can be caused by other UI elements on the page shifting around. So if you add something new to the "full demo" page, then several visual regression tests may fail simply because UI controls were moved up or down, without an actual visual regression being present. Don't try to chase pixel perfect rendering. It's a rabbit hole. Just make sure things look as close to right as possible.
42
42
 
43
43
  #### Updating the Playwright dependency
44
44
 
package/dist/semantic-forms.css CHANGED
@@ -1386,7 +1386,7 @@ form.semanticForms fieldset {
1386
1386
  .semanticForms .tabs.semanticFormsTabsActive button[role=tab][aria-selected=true] {
1387
1387
  background-image: none;
1388
1388
  background-color: var(--semanticFormsFormSubBgColor);
1389
- border-bottom-color: var(--semanticFormsFormSubBgColor);
1389
+ border-bottom-color: transparent;
1390
1390
  padding-bottom: 12px;
1391
1391
  }
1392
1392
  .semanticForms .tabs.semanticFormsTabsActive button[role=tab]:focus-visible {
@@ -1401,6 +1401,13 @@ form.semanticForms fieldset {
1401
1401
  .semanticForms .tabs.semanticFormsTabsActive fieldset[hidden] {
1402
1402
  display: none;
1403
1403
  }
1404
+ .semanticForms fieldset .tabs.semanticFormsTabsActive button[role=tab] {
1405
+ border: var(--semanticFormsNestedFieldsetBorder);
1406
+ }
1407
+ .semanticForms fieldset .tabs.semanticFormsTabsActive button[role=tab][aria-selected=true] {
1408
+ background-color: var(--semanticFormsFormSubBgColor);
1409
+ background-image: linear-gradient(var(--semanticFormsNestedFieldsetBgColor), var(--semanticFormsNestedFieldsetBgColor));
1410
+ }
1404
1411
 
1405
1412
  form.semanticForms.lowFlow,
1406
1413
  form.semanticForms:not(.semanticFormsActive) {
@@ -1622,7 +1629,7 @@ form.semanticForms:not(.semanticFormsActive) dd input[type=button]:not(.clear, .
1622
1629
  border-style: solid;
1623
1630
  border-color: transparent transparent transparent var(--semanticFormsTextColor);
1624
1631
  position: absolute;
1625
- top: 0;
1632
+ top: calc((1em - 0.8rem) / 2 + var(--semanticFormsFieldTextInkOffset, 0px));
1626
1633
  left: -14px;
1627
1634
  transform: rotate(0);
1628
1635
  transform-origin: 0.2rem 50%;
package/dist/semantic-forms.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../styles/globals.scss","../styles/inputs.scss","../styles/labels.scss","../styles/colspan.scss","../styles/tabs.scss","../styles/lowFlow.scss","../semanticForms.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EA9BF;AAAA;AAAA;IA+BI;;;AA/BJ;AAAA;AAAA;EAkCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACE;EACA;EACA;;AAIF;EA7DF;AAAA;AAAA;IA8DI;;;AAIF;AAAA;AAAA;EACE;;AAIF;AAAA;AAAA;EACE;;AAIF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAYE;EACA;EACA;;AAIF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;;;AA4CJ;EAGM;IA1CJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;;EAEA;IA2BI;MA1BF;;;EA0BE;IAvBJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;;AAgBA;EAnDF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EAoCE;IAnCA;;;AAmCA;EAhCF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAsBJ;AAAA;EAzDE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EA0CF;AAAA;IAzCI;;;AAyCJ;AAAA;EAtCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;;ACpIF;AAAA;EAEE;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAUJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIF;EAnCF;IAoCI;IACA;IACA;IACA;;;AAGF;EA1CF;IA2CI;;;AAIJ;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKA;AAAA;AAAA;EACE;EACA;;AAMF;AAAA;AAAA;EACE;;AAIF;AAAA;AAAA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAIE;AAAA;AAAA;AAAA;AAAA;EACE;;AAKJ;AAAA;AAAA;EACE;;AAIJ;AAAA;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;EACE;EACA;EACA;;AAGF;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;EACA;;AAEA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;;AAKN;EACE;EAEA;;AAGA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;;AAMR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA,OAnNc;EAoNd,QApNc;EAqNd;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAKJ;EACE;;AAIF;AAAA;AAAA;AAAA;EAIE;;AAIF;AAAA;EAEE;;AAIF;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EACE;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAIJ;EACE;;AAEA;EAEE;;AAKJ;EACE;EACA;;AAMA;AAAA;AAAA;AAAA;AAAA;EAEE;;AAEA;AAAA;AAAA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EACE;EACA;;AAIJ;AAAA;AAAA;EACE;;AAEA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;;AAMN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAYE;EACA;EACA;EACA;;AAIF;EACE;IACE;;EAEA;IACE;IACA;IACA;IACA;IACA;IACA;;EAIJ;IACE;;;;AClXJ;AAAA;EAKE;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAOF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAOF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AASF;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAKJ;EACE;;AAOA;AAAA;AAAA;AAAA;AAAA;EAEE;;AAIJ;EAEE;;AAGF;AAAA;EAEE;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,aAjIa;EAkIb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAQJ;EACE;;AAGF;EAEE;;AAEA;EACE;;AAMF;EACE;;AAMN;EACE;EACA;EACA;EACA;;AAGF;AAAA;AAAA;EAGE;;AAGF;AAAA;EAEE;;AAGA;AAAA;EACE;EACA;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;EACE;EACA;;AAKA;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAMN;EACE;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;;AAEA;EACE;;AAMF;EACE;;AAKF;EACE;;AAMN;EACE;EACA;;AAEA;EACE;;AAEA;EAEE;EACA;EACA;;AAON;EACE;EACA;;;AC7SJ;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAMF;AAAA;EACE;;AAIJ;AAAA;EAEE;;AAGF;AAAA;EAEE;;AAGF;AAAA;EAEE;;AAGF;AAAA;EAEE;;AAGF;AAAA;EAEE;;AAGF;AAAA;EAEE;;AAKA;AAAA;AAAA;AAAA;EAEE;;AAMF;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAEE;;AAMF;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAEE;;AAMF;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAEE;;AAMF;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAEE;;;AAMN;AAAA;EAEE;;AAGA;EACE;AAAA;AAAA;IAEE;;;AAKJ;EACE;AAAA;AAAA;IAEE;;;AAKJ;EACE;AAAA;AAAA;IAEE;;;AAKJ;EACE;AAAA;AAAA;AAAA;AAAA;IAIE;;EAEA;AAAA;AAAA;AAAA;AAAA;IACE;;EAGF;AAAA;AAAA;AAAA;AAAA;IACE;;;AAMN;EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAME;;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAEE;;EAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAEE;;;AAMN;EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAQE;;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAGE;;EAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAGE;;;AAMN;EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAUE;;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAIE;;EAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAIE;;;;AC1SN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EAGA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAGA;EACE;;;ACjER;AAAA;EAEE;;AAEA;AAAA;EACE;EACA;;AAMF;AAAA;EACE;;AAEA;AAAA;EACE;;AAIA;AAAA;EACE;EACA;EACA;;AAKJ;AAAA;EACE;;AAGF;AAAA;EACE;;AAGA;AAAA;EACE;EACA;EACA;;AAKN;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;;AAIJ;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;;AAIJ;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;;AAIJ;AAAA;EACE;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKA;AAAA;EACE;EACA;;AASF;AAAA;AAAA;EACE;;AAKN;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;EACE;EACA;;AAGA;AAAA;AAAA;EAEE;;AAGE;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;EACA;;AAKJ;AAAA;AAAA;EACE;EACA;;AAKJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAIF;AAAA;EACE;EACA;EACA;EACA;;AAIF;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;ACvJJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAGA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EAnBF;IAoBI;;EAEA;IACE;IACA;IACA;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EAEE;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;IACE;;;AAKF;EACE;;AAIJ;EACE;EACA;;AAKN;AAAA;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAEA;EAEE;EACA;EACA;;AAOJ;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAGA;EAEE;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EACE;;AAIF;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAKA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAKJ;EACE;EACA;EACA;;AAKJ;EACE;;AAEA;EACE;;AAKJ;EACE;EACA;;AAEA;EACE;;AAIF;EACE;EACA;;AAIF;AAAA;AAAA;EAGE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;;AASR;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;EACA;;AAGF;AAAA;AAAA;EACE;;AAKE;AAAA;AAAA;EACE;;AAMN;AAAA;EACE","file":"semantic-forms.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../styles/globals.scss","../styles/inputs.scss","../styles/labels.scss","../styles/colspan.scss","../styles/tabs.scss","../styles/lowFlow.scss","../semanticForms.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EA9BF;AAAA;AAAA;IA+BI;;;AA/BJ;AAAA;AAAA;EAkCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACE;EACA;EACA;;AAIF;EA7DF;AAAA;AAAA;IA8DI;;;AAIF;AAAA;AAAA;EACE;;AAIF;AAAA;AAAA;EACE;;AAIF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAYE;EACA;EACA;;AAIF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;;;AA4CJ;EAGM;IA1CJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;;EAEA;IA2BI;MA1BF;;;EA0BE;IAvBJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;;AAgBA;EAnDF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EAoCE;IAnCA;;;AAmCA;EAhCF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAsBJ;AAAA;EAzDE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EA0CF;AAAA;IAzCI;;;AAyCJ;AAAA;EAtCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;;ACpIF;AAAA;EAEE;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAUJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIF;EAnCF;IAoCI;IACA;IACA;IACA;;;AAGF;EA1CF;IA2CI;;;AAIJ;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKA;AAAA;AAAA;EACE;EACA;;AAMF;AAAA;AAAA;EACE;;AAIF;AAAA;AAAA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAIE;AAAA;AAAA;AAAA;AAAA;EACE;;AAKJ;AAAA;AAAA;EACE;;AAIJ;AAAA;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;EACE;EACA;EACA;;AAGF;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;EACA;;AAEA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;;AAKN;EACE;EAEA;;AAGA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;;AAMR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA,OAnNc;EAoNd,QApNc;EAqNd;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAKJ;EACE;;AAIF;AAAA;AAAA;AAAA;EAIE;;AAIF;AAAA;EAEE;;AAIF;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EACE;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAIJ;EACE;;AAEA;EAEE;;AAKJ;EACE;EACA;;AAMA;AAAA;AAAA;AAAA;AAAA;EAEE;;AAEA;AAAA;AAAA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EACE;EACA;;AAIJ;AAAA;AAAA;EACE;;AAEA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;;AAMN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAYE;EACA;EACA;EACA;;AAIF;EACE;IACE;;EAEA;IACE;IACA;IACA;IACA;IACA;IACA;;EAIJ;IACE;;;;AClXJ;AAAA;EAKE;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAOF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAOF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AASF;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAKJ;EACE;;AAOA;AAAA;AAAA;AAAA;AAAA;EAEE;;AAIJ;EAEE;;AAGF;AAAA;EAEE;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,aAjIa;EAkIb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAQJ;EACE;;AAGF;EAEE;;AAEA;EACE;;AAMF;EACE;;AAMN;EACE;EACA;EACA;EACA;;AAGF;AAAA;AAAA;EAGE;;AAGF;AAAA;EAEE;;AAGA;AAAA;EACE;EACA;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;EACE;EACA;;AAKA;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAMN;EACE;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;;AAEA;EACE;;AAMF;EACE;;AAKF;EACE;;AAMN;EACE;EACA;;AAEA;EACE;;AAEA;EAEE;EACA;EACA;;AAON;EACE;EACA;;;AC7SJ;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAMF;AAAA;EACE;;AAIJ;AAAA;EAEE;;AAGF;AAAA;EAEE;;AAGF;AAAA;EAEE;;AAGF;AAAA;EAEE;;AAGF;AAAA;EAEE;;AAGF;AAAA;EAEE;;AAKA;AAAA;AAAA;AAAA;EAEE;;AAMF;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAEE;;AAMF;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAEE;;AAMF;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAEE;;AAMF;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAEE;;;AAMN;AAAA;EAEE;;AAGA;EACE;AAAA;AAAA;IAEE;;;AAKJ;EACE;AAAA;AAAA;IAEE;;;AAKJ;EACE;AAAA;AAAA;IAEE;;;AAKJ;EACE;AAAA;AAAA;AAAA;AAAA;IAIE;;EAEA;AAAA;AAAA;AAAA;AAAA;IACE;;EAGF;AAAA;AAAA;AAAA;AAAA;IACE;;;AAMN;EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAME;;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAEE;;EAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAEE;;;AAMN;EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAQE;;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAGE;;EAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAGE;;;AAMN;EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAUE;;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAIE;;EAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAIE;;;;AC1SN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EAGA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAGA;EACE;;AAMN;EACE;;AAEA;EAEE;EACA;;;AC7EN;AAAA;EAEE;;AAEA;AAAA;EACE;EACA;;AAMF;AAAA;EACE;;AAEA;AAAA;EACE;;AAIA;AAAA;EACE;EACA;EACA;;AAKJ;AAAA;EACE;;AAGF;AAAA;EACE;;AAGA;AAAA;EACE;EACA;EACA;;AAKN;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;;AAIJ;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;;AAIJ;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;;AAIJ;AAAA;EACE;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKA;AAAA;EACE;EACA;;AASF;AAAA;AAAA;EACE;;AAKN;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;EACE;EACA;;AAGA;AAAA;AAAA;EAEE;;AAGE;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;EACA;;AAKJ;AAAA;AAAA;EACE;EACA;;AAKJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAIF;AAAA;EACE;EACA;EACA;EACA;;AAIF;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;ACvJJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAGA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EAnBF;IAoBI;;EAEA;IACE;IACA;IACA;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EAEE;;AAGF;EAEE;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;IACE;;;AAKF;EACE;;AAIJ;EACE;EACA;;AAKN;AAAA;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAEA;EAEE;EACA;EACA;;AAOJ;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAGA;EAEE;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EACE;;AAIF;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAKA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAKJ;EACE;EACA;EACA;;AAKJ;EACE;;AAEA;EACE;;AAKJ;EACE;EACA;;AAEA;EACE;;AAIF;EACE;EACA;;AAIF;AAAA;AAAA;EAGE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;;AASR;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;EACA;;AAGF;AAAA;AAAA;EACE;;AAKE;AAAA;AAAA;EACE;;AAMN;AAAA;EACE","file":"semantic-forms.css"}
package/docs/statics/pages/fullDemo.html CHANGED
@@ -65,6 +65,7 @@
65
65
  <li><a href="#low-flow-colspan_classes" data-section="colspan_classes">Colspan classes</a></li>
66
66
  <li><a href="#low-flow-col_classes" data-section="col_classes">Col classes</a></li>
67
67
  <li><a href="#low-flow-tabs" data-section="tabs">Tabs</a></li>
68
+ <li><a href="#low-flow-nested_tabs" data-section="nested_tabs">Tabs in a nested fieldset</a></li>
68
69
  <li><a href="#low-flow-tables" data-section="tables">Tables</a></li>
69
70
  <li><a href="#low-flow-nested_fieldsets" data-section="nested_fieldsets">Nested fieldsets</a></li>
70
71
  <li><a href="#low-flow-details" data-section="details">Detail elements</a></li>
@@ -938,6 +939,60 @@
938
939
  </fieldset>
939
940
  </div>
940
941
 
942
+ <fieldset id="nested_tabs">
943
+ <legend>Tabs in a nested fieldset</legend>
944
+
945
+ <div class="tabs" id="nested_tab_group">
946
+ <fieldset>
947
+ <legend>Account</legend>
948
+ <dl>
949
+ <div>
950
+ <dt><label for="nested-tab-username">Username</label></dt>
951
+ <dd><input type="text" name="nested-tab-username" id="nested-tab-username"></dd>
952
+ </div>
953
+ <div>
954
+ <dt><label for="nested-tab-email">Email</label></dt>
955
+ <dd><input type="email" name="nested-tab-email" id="nested-tab-email"></dd>
956
+ </div>
957
+ </dl>
958
+ </fieldset>
959
+
960
+ <fieldset>
961
+ <legend>Profile</legend>
962
+ <dl>
963
+ <div>
964
+ <dt><label for="nested-tab-display-name">Display name</label></dt>
965
+ <dd><input type="text" name="nested-tab-display-name" id="nested-tab-display-name"></dd>
966
+ </div>
967
+ <div>
968
+ <dt><label for="nested-tab-bio">Bio</label></dt>
969
+ <dd><textarea name="nested-tab-bio" id="nested-tab-bio"></textarea></dd>
970
+ </div>
971
+ </dl>
972
+ </fieldset>
973
+
974
+ <fieldset>
975
+ <legend>Preferences</legend>
976
+ <dl>
977
+ <div>
978
+ <dt><label for="nested-tab-newsletter">Newsletter</label></dt>
979
+ <dd><input type="checkbox" switch name="nested-tab-newsletter" id="nested-tab-newsletter"></dd>
980
+ </div>
981
+ <div>
982
+ <dt><label for="nested-tab-theme">Theme</label></dt>
983
+ <dd>
984
+ <select name="nested-tab-theme" id="nested-tab-theme">
985
+ <option>System</option>
986
+ <option>Light</option>
987
+ <option>Dark</option>
988
+ </select>
989
+ </dd>
990
+ </div>
991
+ </dl>
992
+ </fieldset>
993
+ </div>
994
+ </fieldset>
995
+
941
996
  <fieldset id="tables">
942
997
  <legend>Tables</legend>
943
998
  <h4>Table with inputs and buttons</h4>
@@ -2143,6 +2198,60 @@
2143
2198
  </fieldset>
2144
2199
  </div>
2145
2200
 
2201
+ <fieldset id="low-flow-nested_tabs">
2202
+ <legend>Tabs in a nested fieldset</legend>
2203
+
2204
+ <div class="tabs" id="low-flow-nested_tab_group">
2205
+ <fieldset>
2206
+ <legend>Account</legend>
2207
+ <dl>
2208
+ <div>
2209
+ <dt><label for="low-flow-nested-tab-username">Username</label></dt>
2210
+ <dd><input type="text" name="low-flow-nested-tab-username" id="low-flow-nested-tab-username"></dd>
2211
+ </div>
2212
+ <div>
2213
+ <dt><label for="low-flow-nested-tab-email">Email</label></dt>
2214
+ <dd><input type="email" name="low-flow-nested-tab-email" id="low-flow-nested-tab-email"></dd>
2215
+ </div>
2216
+ </dl>
2217
+ </fieldset>
2218
+
2219
+ <fieldset>
2220
+ <legend>Profile</legend>
2221
+ <dl>
2222
+ <div>
2223
+ <dt><label for="low-flow-nested-tab-display-name">Display name</label></dt>
2224
+ <dd><input type="text" name="low-flow-nested-tab-display-name" id="low-flow-nested-tab-display-name"></dd>
2225
+ </div>
2226
+ <div>
2227
+ <dt><label for="low-flow-nested-tab-bio">Bio</label></dt>
2228
+ <dd><textarea name="low-flow-nested-tab-bio" id="low-flow-nested-tab-bio"></textarea></dd>
2229
+ </div>
2230
+ </dl>
2231
+ </fieldset>
2232
+
2233
+ <fieldset>
2234
+ <legend>Preferences</legend>
2235
+ <dl>
2236
+ <div>
2237
+ <dt><label for="low-flow-nested-tab-newsletter">Newsletter</label></dt>
2238
+ <dd><input type="checkbox" switch name="low-flow-nested-tab-newsletter" id="low-flow-nested-tab-newsletter"></dd>
2239
+ </div>
2240
+ <div>
2241
+ <dt><label for="low-flow-nested-tab-theme">Theme</label></dt>
2242
+ <dd>
2243
+ <select name="low-flow-nested-tab-theme" id="low-flow-nested-tab-theme">
2244
+ <option>System</option>
2245
+ <option>Light</option>
2246
+ <option>Dark</option>
2247
+ </select>
2248
+ </dd>
2249
+ </div>
2250
+ </dl>
2251
+ </fieldset>
2252
+ </div>
2253
+ </fieldset>
2254
+
2146
2255
  <fieldset id="low-flow-tables">
2147
2256
  <legend>Tables</legend>
2148
2257
  <h4>Table with inputs and buttons</h4>
package/docs/statics/pages/inputs.html CHANGED
@@ -226,7 +226,7 @@
226
226
 
227
227
  <h2 id="selects">Selects</h2>
228
228
 
229
- <p>A <code><!--#&lt;select&gt;--></code> takes the same markup as any other field and is styled to match, with the browser's dropdown arrow replaced by the graphic in the <code>--semanticFormsSelectIcon</code> variable. A <code>multiple</code> select is styled as a scrolling list instead, and keeps its label above it rather than floating.</p>
229
+ <p>A <code><!--#<select>--></code> takes the same markup as any other field and is styled to match, with the browser's dropdown arrow replaced by the graphic in the <code>--semanticFormsSelectIcon</code> variable. A <code>multiple</code> select is styled as a scrolling list instead, and keeps its label above it rather than floating.</p>
230
230
 
231
231
  <pre><code class='language-html' lang='html'><escape>
232
232
  <form class="semanticForms">
package/docs/statics/pages/layout.html CHANGED
@@ -290,7 +290,7 @@
290
290
 
291
291
  <h3 id="setcolnumber">Set which column a single input field goes in</h3>
292
292
 
293
- <p>You can place a field in a particular column using the <code>col-#</code> class on the <code><!--#&lt;dd&gt;--></code> element. Available numbered classes are <code>col-1</code> through <code>col-5</code>. It can be combined with <code>colspan-#</code>, in which case <code>col-#</code> decides where the field starts and <code>colspan-#</code> decides how wide it is.</p>
293
+ <p>You can place a field in a particular column using the <code>col-#</code> class on the <code><!--#<dd>--></code> element. Available numbered classes are <code>col-1</code> through <code>col-5</code>. It can be combined with <code>colspan-#</code>, in which case <code>col-#</code> decides where the field starts and <code>colspan-#</code> decides how wide it is.</p>
294
294
 
295
295
  <p>Positions are responsive in the same way spans are: when the form narrows to fewer columns than the class asks for, the field falls back to flowing into the next free space rather than forcing a column that is no longer there.</p>
296
296
 
@@ -343,7 +343,7 @@
343
343
 
344
344
  <h2 id="tables">Tables</h2>
345
345
 
346
- <p>Applying the <code>semanticForms</code> class to a <code><!--#&lt;table&gt;--></code> styles the table itself and any fields inside its cells. A <code><!--#&lt;tr&gt;--></code> with a class of <code>title</code> is styled as a title row spanning the table.</p>
346
+ <p>Applying the <code>semanticForms</code> class to a <code><!--#<table>--></code> styles the table itself and any fields inside its cells. A <code><!--#<tr>--></code> with a class of <code>title</code> is styled as a title row spanning the table.</p>
347
347
 
348
348
  <pre><code class='language-html' lang='html'><escape>
349
349
  <table class="semanticForms">
@@ -373,11 +373,11 @@
373
373
  </tbody>
374
374
  </table>
375
375
 
376
- <p>A whole <code><!--#&lt;form class="semanticForms"&gt;--></code> can also go inside a single cell of a table that has no <code>semanticForms</code> class of its own, if you would rather leave the table unstyled.</p>
376
+ <p>A whole <code><!--#<form class="semanticForms">--></code> can also go inside a single cell of a table that has no <code>semanticForms</code> class of its own, if you would rather leave the table unstyled.</p>
377
377
 
378
378
  <h2 id="fieldsets">Fieldsets and details</h2>
379
379
 
380
- <p>A <code><!--#&lt;fieldset&gt;--></code> groups fields under its <code><!--#&lt;legend&gt;--></code>. Nesting one inside another darkens it, so the levels stay distinguishable, and <code><!--#&lt;details&gt;--></code> elements are styled and animated the same way as a nested fieldset.</p>
380
+ <p>A <code><!--#<fieldset>--></code> groups fields under its <code><!--#<legend>--></code>. Nesting one inside another darkens it, so the levels stay distinguishable, and <code><!--#<details>--></code> elements are styled and animated the same way as a nested fieldset.</p>
381
381
 
382
382
  <pre><code class='language-html' lang='html'><escape>
383
383
  <form class="semanticForms">
@@ -433,7 +433,7 @@
433
433
 
434
434
  <h2 id="ptags">Fields in p tags</h2>
435
435
 
436
- <p>Where a <code><!--#&lt;dl&gt;--></code> is more structure than you need, a field and its label can go in a <code><!--#&lt;p&gt;--></code> instead. These do not get the float label treatment, so the label stays beside the field.</p>
436
+ <p>Where a <code><!--#<dl>--></code> is more structure than you need, a field and its label can go in a <code><!--#<p>--></code> instead. These do not get the float label treatment, so the label stays beside the field.</p>
437
437
 
438
438
  <pre><code class='language-html' lang='html'><escape>
439
439
  <form class="semanticForms">
@@ -461,7 +461,7 @@
461
461
 
462
462
  <h2 id="tabs">Tabs</h2>
463
463
 
464
- <p>Add the <code>tabs</code> class to an element holding one <code><!--#&lt;fieldset&gt;--></code> per tab. Each fieldset's <code><!--#&lt;legend&gt;--></code> names its tab.</p>
464
+ <p>Add the <code>tabs</code> class to an element holding one <code><!--#<fieldset>--></code> per tab. Each fieldset's <code><!--#<legend>--></code> names its tab.</p>
465
465
 
466
466
  <p>Semantic Forms builds the tab strip, wires up the <code>tab</code> and <code>tabpanel</code> roles, and moves between tabs with the left and right arrow keys, <kbd>Home</kbd>, and <kbd>End</kbd>. Left alone the markup is a stack of labelled field groups, which is what a visitor without JavaScript gets, so nothing is hidden from them.</p>
467
467
 
package/docs/statics/pages/usage.html CHANGED
@@ -44,7 +44,7 @@
44
44
 
45
45
  <p>Each tree you pass gets watched separately, so calling it for the document and for one or more shadow roots is fine and they do not interfere with each other. <code>semanticForms.reinitialize(formElement)</code> works out which tree the form belongs to on its own.</p>
46
46
 
47
- <p>Shadow roots do not inherit the page's stylesheets, so the shadow root needs its own copy of the CSS, either through a <code><!--#&lt;link&gt;--></code> inside it or by adopting a stylesheet:</p>
47
+ <p>Shadow roots do not inherit the page's stylesheets, so the shadow root needs its own copy of the CSS, either through a <code><!--#<link>--></code> inside it or by adopting a stylesheet:</p>
48
48
 
49
49
  <pre><code class='language-javascript'><escape>const sheet = new CSSStyleSheet()
50
50
  await sheet.replace(await (await fetch('/path/to/semantic-forms.css')).text())
package/package.json CHANGED
@@ -8,7 +8,7 @@
8
8
  "url": "https://github.com/rooseveltframework/semantic-forms/graphs/contributors"
9
9
  }
10
10
  ],
11
- "version": "5.3.6",
11
+ "version": "5.3.8",
12
12
  "files": [
13
13
  "dist",
14
14
  "semanticForms.scss",
@@ -39,7 +39,7 @@
39
39
  "sass": "1.104.1",
40
40
  "standard": "17.1.2",
41
41
  "terser-webpack-plugin": "5.6.1",
42
- "webpack": "5.110.3",
42
+ "webpack": "5.111.0",
43
43
  "webpack-cli": "7.2.3"
44
44
  },
45
45
  "scripts": {
package/semanticForms.scss CHANGED
@@ -84,7 +84,8 @@
84
84
  border-style: solid;
85
85
  border-color: transparent transparent transparent var(--semanticFormsTextColor);
86
86
  position: absolute;
87
- top: 0;
87
+ // centered on the line of text beside it: the arrow is 0.8rem tall and the line is 1em, so half the difference puts it in the middle, less the measured ink offset because the letters do not sit in the middle of their own line either. it was pinned to the top of the line before
88
+ top: calc((1em - 0.8rem) / 2 + var(--semanticFormsFieldTextInkOffset, 0px));
88
89
  // far enough from the words to read as a separate mark rather than part of the first letter
89
90
  left: -14px;
90
91
  transform: rotate(0);