@utrecht/component-library-css 1.0.0-alpha.364 → 1.0.0-alpha.366

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 (3) hide show
  1. package/dist/html.css +21 -2
  2. package/dist/index.css +158 -97
  3. package/package.json +2 -2
package/dist/html.css CHANGED
@@ -85,6 +85,16 @@
85
85
  * @license EUPL-1.2
86
86
  * Copyright (c) 2021 Robbert Broersma
87
87
  */
88
+ /**
89
+ * @license EUPL-1.2
90
+ * Copyright (c) 2020-2022 Gemeente Utrecht
91
+ * Copyright (c) 2020-2022 Frameless B.V.
92
+ */
93
+ /**
94
+ * @license EUPL-1.2
95
+ * Copyright (c) 2020-2022 Gemeente Utrecht
96
+ * Copyright (c) 2020-2022 Frameless B.V.
97
+ */
88
98
  /**
89
99
  * @license EUPL-1.2
90
100
  * Copyright (c) 2021 Robbert Broersma
@@ -655,9 +665,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
655
665
  margin-block-start: 0;
656
666
  margin-inline-end: 0;
657
667
  margin-inline-start: 0;
668
+ cursor: var(--utrecht-action-activate-cursor, revert);
658
669
  }
659
670
  .utrecht-html input[type=checkbox i]:disabled {
660
- cursor: var(--utrecht-action-disabled-cursor);
671
+ cursor: var(--utrecht-action-disabled-cursor, revert);
661
672
  }
662
673
  .utrecht-html input[type=checkbox i]:focus {
663
674
  box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
@@ -694,6 +705,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
694
705
  .utrecht-html fieldset {
695
706
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
696
707
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
708
+ all: revert;
697
709
  border: 0;
698
710
  margin-inline-end: 0;
699
711
  margin-inline-start: 0;
@@ -713,6 +725,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
713
725
  font-size: var(--utrecht-figure-caption-font-size);
714
726
  line-height: var(--utrecht-figure-caption-line-height);
715
727
  }
728
+ .utrecht-html form {
729
+ max-inline-size: var(--utrecht-form-max-inline-size);
730
+ }
716
731
  .utrecht-html legend {
717
732
  color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
718
733
  font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
@@ -722,6 +737,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
722
737
  page-break-after: avoid;
723
738
  page-break-inside: avoid;
724
739
  text-transform: var(--utrecht-form-fieldset-legend-text-transform);
740
+ display: table;
725
741
  inline-size: 100%;
726
742
  padding-inline-end: 0;
727
743
  padding-inline-start: 0;
@@ -738,10 +754,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
738
754
  }
739
755
  .utrecht-html input[type=checkbox i] ~ label {
740
756
  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
757
+ cursor: var(--utrecht-action-activate-cursor, revert);
741
758
  font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
742
759
  }
743
760
  .utrecht-html input[type=radio i] ~ label {
744
761
  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
762
+ cursor: var(--utrecht-action-activate-cursor, revert);
745
763
  font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
746
764
  }
747
765
  .utrecht-html h1 {
@@ -935,9 +953,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
935
953
  margin-block-start: 0;
936
954
  margin-inline-end: 0;
937
955
  margin-inline-start: 0;
956
+ cursor: var(--utrecht-action-activate-cursor, revert);
938
957
  }
939
958
  .utrecht-html input[type=radio i]:disabled {
940
- cursor: var(--utrecht-action-disabled-cursor);
959
+ cursor: var(--utrecht-action-disabled-cursor, revert);
941
960
  }
942
961
  .utrecht-html input[type=radio i]:focus {
943
962
  box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
package/dist/index.css CHANGED
@@ -1674,11 +1674,12 @@ ol.utrecht-breadcrumb__list {
1674
1674
  margin-block-start: 0;
1675
1675
  margin-inline-end: 0;
1676
1676
  margin-inline-start: 0;
1677
+ cursor: var(--utrecht-action-activate-cursor, revert);
1677
1678
  }
1678
1679
 
1679
1680
  /* stylelint-disable-next-line block-no-empty */
1680
1681
  .utrecht-checkbox--disabled {
1681
- cursor: var(--utrecht-action-disabled-cursor);
1682
+ cursor: var(--utrecht-action-disabled-cursor, revert);
1682
1683
  }
1683
1684
 
1684
1685
  .utrecht-checkbox--focus-visible {
@@ -1690,7 +1691,7 @@ ol.utrecht-breadcrumb__list {
1690
1691
  }
1691
1692
 
1692
1693
  .utrecht-checkbox--html-input:disabled {
1693
- cursor: var(--utrecht-action-disabled-cursor);
1694
+ cursor: var(--utrecht-action-disabled-cursor, revert);
1694
1695
  }
1695
1696
  .utrecht-checkbox--html-input:focus {
1696
1697
  box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
@@ -1719,6 +1720,7 @@ ol.utrecht-breadcrumb__list {
1719
1720
  * Copyright (c) 2021 Robbert Broersma
1720
1721
  */
1721
1722
  /* stylelint-disable-next-line block-no-empty */
1723
+ .utrecht-checkbox--custom,
1722
1724
  .utrecht-custom-checkbox {
1723
1725
  -webkit-appearance: none;
1724
1726
  -moz-appearance: none;
@@ -1729,7 +1731,7 @@ ol.utrecht-breadcrumb__list {
1729
1731
  border-color: var(--utrecht-custom-checkbox-border-color);
1730
1732
  border-style: solid;
1731
1733
  border-width: var(--utrecht-custom-checkbox-border-width);
1732
- cursor: var(--utrecht-action-activate-cursor);
1734
+ cursor: var(--utrecht-action-activate-cursor, revert);
1733
1735
  height: var(--utrecht-custom-checkbox-size);
1734
1736
  margin-block-start: var(--utrecht-custom-checkbox-margin-block-start);
1735
1737
  -webkit-print-color-adjust: exact;
@@ -1738,6 +1740,7 @@ ol.utrecht-breadcrumb__list {
1738
1740
  width: var(--utrecht-custom-checkbox-size);
1739
1741
  }
1740
1742
 
1743
+ .utrecht-checkbox--custom.utrecht-checkbox--checked,
1741
1744
  .utrecht-custom-checkbox--checked {
1742
1745
  background-color: var(--utrecht-custom-checkbox-checked-background-color, var(--utrecht-custom-checkbox-background-color));
1743
1746
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
@@ -1745,19 +1748,23 @@ ol.utrecht-breadcrumb__list {
1745
1748
  border-width: var(--utrecht-custom-checkbox-checked-border-width, var(--utrecht-custom-checkbox-border-width));
1746
1749
  }
1747
1750
 
1751
+ .utrecht-checkbox--custom.utrecht-checkbox--disabled,
1748
1752
  .utrecht-custom-checkbox--disabled {
1749
1753
  border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
1750
1754
  border-width: var(--utrecht-custom-checkbox-disabled-border-width, var(--utrecht-custom-checkbox-border-width));
1751
1755
  cursor: var(--utrecht-action-disabled-cursor);
1752
1756
  }
1757
+ .utrecht-checkbox--custom.utrecht-checkbox--disabled:checked,
1753
1758
  .utrecht-custom-checkbox--disabled:checked {
1754
1759
  background-color: var(--utrecht-custom-checkbox-disabled-background-color, var(--utrecht-custom-checkbox-background-color));
1755
1760
  border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
1756
1761
  }
1762
+ .utrecht-checkbox--custom.utrecht-checkbox--disabled:active,
1757
1763
  .utrecht-custom-checkbox--disabled:active {
1758
1764
  border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
1759
1765
  }
1760
1766
 
1767
+ .utrecht-checkbox--custom.utrecht-checkbox--indeterminate,
1761
1768
  .utrecht-custom-checkbox--indeterminate {
1762
1769
  background-color: var(--utrecht-custom-checkbox-indeterminate-background-color, var(--utrecht-custom-checkbox-background-color));
1763
1770
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
@@ -1766,11 +1773,13 @@ ol.utrecht-breadcrumb__list {
1766
1773
  color: var(--utrecht-custom-checkbox-indeterminate-color, var(--utrecht-custom-checkbox-color));
1767
1774
  }
1768
1775
 
1776
+ .utrecht-checkbox--custom.utrecht-checkbox--invalid,
1769
1777
  .utrecht-custom-checkbox--invalid {
1770
1778
  border-color: var(--utrecht-custom-checkbox-invalid-border-color, var(--utrecht-custom-checkbox-border-color));
1771
1779
  border-width: var(--utrecht-custom-checkbox-invalid-border-width, var(--utrecht-custom-checkbox-border-width));
1772
1780
  }
1773
1781
 
1782
+ .utrecht-checkbox--custom.utrecht-checkbox--active,
1774
1783
  .utrecht-custom-checkbox--active {
1775
1784
  background-color: var(--utrecht-custom-checkbox-active-background-color, var(--utrecht-custom-checkbox-background-color));
1776
1785
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
@@ -1779,6 +1788,7 @@ ol.utrecht-breadcrumb__list {
1779
1788
  color: var(--utrecht-custom-checkbox-active-color, var(--utrecht-custom-checkbox-color));
1780
1789
  }
1781
1790
 
1791
+ .utrecht-checkbox--custom.utrecht-checkbox--focus,
1782
1792
  .utrecht-custom-checkbox--focus {
1783
1793
  background-color: var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));
1784
1794
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
@@ -1786,6 +1796,7 @@ ol.utrecht-breadcrumb__list {
1786
1796
  border-width: var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width));
1787
1797
  }
1788
1798
 
1799
+ .utrecht-checkbox--custom.utrecht-checkbox--focus-visible,
1789
1800
  .utrecht-custom-checkbox--focus-visible {
1790
1801
  box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1791
1802
  outline-color: var(--utrecht-focus-outline-color, transparent);
@@ -1794,24 +1805,29 @@ ol.utrecht-breadcrumb__list {
1794
1805
  outline-width: var(--utrecht-focus-outline-width, 0);
1795
1806
  }
1796
1807
 
1808
+ .utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled,
1797
1809
  .utrecht-custom-checkbox--html-input:disabled {
1798
1810
  border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
1799
1811
  border-width: var(--utrecht-custom-checkbox-disabled-border-width, var(--utrecht-custom-checkbox-border-width));
1800
1812
  cursor: var(--utrecht-action-disabled-cursor);
1801
1813
  }
1814
+ .utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:checked,
1802
1815
  .utrecht-custom-checkbox--html-input:disabled:checked {
1803
1816
  background-color: var(--utrecht-custom-checkbox-disabled-background-color, var(--utrecht-custom-checkbox-background-color));
1804
1817
  border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
1805
1818
  }
1819
+ .utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:active,
1806
1820
  .utrecht-custom-checkbox--html-input:disabled:active {
1807
1821
  border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
1808
1822
  }
1823
+ .utrecht-checkbox--custom.utrecht-checkbox--html-input:focus,
1809
1824
  .utrecht-custom-checkbox--html-input:focus {
1810
1825
  background-color: var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));
1811
1826
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
1812
1827
  border-color: var(--utrecht-custom-checkbox-focus-border-color, var(--utrecht-custom-checkbox-border-color));
1813
1828
  border-width: var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width));
1814
1829
  }
1830
+ .utrecht-checkbox--custom.utrecht-checkbox--html-input:focus-visible,
1815
1831
  .utrecht-custom-checkbox--html-input:focus-visible {
1816
1832
  box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1817
1833
  outline-color: var(--utrecht-focus-outline-color, transparent);
@@ -1819,10 +1835,13 @@ ol.utrecht-breadcrumb__list {
1819
1835
  outline-style: var(--utrecht-focus-outline-style, solid);
1820
1836
  outline-width: var(--utrecht-focus-outline-width, 0);
1821
1837
  }
1822
- .utrecht-custom-checkbox--html-input:invalid, .utrecht-custom-checkbox--html-input[aria-invalid=true] {
1838
+ .utrecht-checkbox--custom.utrecht-checkbox--html-input:invalid, .utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid=true],
1839
+ .utrecht-custom-checkbox--html-input:invalid,
1840
+ .utrecht-custom-checkbox--html-input[aria-invalid=true] {
1823
1841
  border-color: var(--utrecht-custom-checkbox-invalid-border-color, var(--utrecht-custom-checkbox-border-color));
1824
1842
  border-width: var(--utrecht-custom-checkbox-invalid-border-width, var(--utrecht-custom-checkbox-border-width));
1825
1843
  }
1844
+ .utrecht-checkbox--custom.utrecht-checkbox--html-input:active,
1826
1845
  .utrecht-custom-checkbox--html-input:active {
1827
1846
  background-color: var(--utrecht-custom-checkbox-active-background-color, var(--utrecht-custom-checkbox-background-color));
1828
1847
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
@@ -1830,12 +1849,14 @@ ol.utrecht-breadcrumb__list {
1830
1849
  border-width: var(--utrecht-custom-checkbox-active-border-width, var(--utrecht-custom-checkbox-border-width));
1831
1850
  color: var(--utrecht-custom-checkbox-active-color, var(--utrecht-custom-checkbox-color));
1832
1851
  }
1852
+ .utrecht-checkbox--custom.utrecht-checkbox--html-input:checked,
1833
1853
  .utrecht-custom-checkbox--html-input:checked {
1834
1854
  background-color: var(--utrecht-custom-checkbox-checked-background-color, var(--utrecht-custom-checkbox-background-color));
1835
1855
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
1836
1856
  border-color: var(--utrecht-custom-checkbox-checked-border-color, var(--utrecht-custom-checkbox-border-color));
1837
1857
  border-width: var(--utrecht-custom-checkbox-checked-border-width, var(--utrecht-custom-checkbox-border-width));
1838
1858
  }
1859
+ .utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate,
1839
1860
  .utrecht-custom-checkbox--html-input:indeterminate {
1840
1861
  background-color: var(--utrecht-custom-checkbox-indeterminate-background-color, var(--utrecht-custom-checkbox-background-color));
1841
1862
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
@@ -1859,6 +1880,7 @@ ol.utrecht-breadcrumb__list {
1859
1880
  */
1860
1881
  /* stylelint-disable-next-line block-no-empty */
1861
1882
  /* stylelint-disable-next-line block-no-empty */
1883
+ .utrecht-radio-button--custom,
1862
1884
  .utrecht-custom-radio-button {
1863
1885
  -webkit-appearance: none;
1864
1886
  -moz-appearance: none;
@@ -1880,6 +1902,7 @@ ol.utrecht-breadcrumb__list {
1880
1902
  width: var(--utrecht-custom-radio-button-size);
1881
1903
  }
1882
1904
 
1905
+ .utrecht-radio-button--custom.utrecht-radio-button--checked,
1883
1906
  .utrecht-custom-radio-button--checked {
1884
1907
  background-color: var(--utrecht-custom-radio-button-checked-background-color, var(--utrecht-custom-radio-button-background-color));
1885
1908
  background-image: url("data:image/svg+xml,%3Csvg viewBox='-4 -4 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
@@ -1888,6 +1911,7 @@ ol.utrecht-breadcrumb__list {
1888
1911
  color: var(--utrecht-custom-radio-button-checked-color, var(--utrecht-custom-radio-button-color));
1889
1912
  }
1890
1913
 
1914
+ .utrecht-radio-button--custom.utrecht-radio-button--active,
1891
1915
  .utrecht-custom-radio-button--active {
1892
1916
  background-color: var(--utrecht-custom-radio-button-active-background-color, var(--utrecht-custom-radio-button-background-color));
1893
1917
  background-image: url("data:image/svg+xml,%3Csvg viewBox='-4 -4 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
@@ -1896,6 +1920,7 @@ ol.utrecht-breadcrumb__list {
1896
1920
  color: var(--utrecht-custom-radio-button-active-color, var(--utrecht-custom-radio-button-color));
1897
1921
  }
1898
1922
 
1923
+ .utrecht-radio-button--custom.utrecht-radio-button--focus,
1899
1924
  .utrecht-custom-radio-button--focus {
1900
1925
  background-color: var(--utrecht-custom-radio-button-focus-background-color, var(--utrecht-custom-radio-button-background-color));
1901
1926
  background-image: url("data:image/svg+xml,%3Csvg viewBox='-4 -4 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
@@ -1904,6 +1929,7 @@ ol.utrecht-breadcrumb__list {
1904
1929
  color: var(--utrecht-custom-radio-button-focus-color, var(--utrecht-custom-radio-button-color));
1905
1930
  }
1906
1931
 
1932
+ .utrecht-radio-button--custom.utrecht-radio-button--focus-visible,
1907
1933
  .utrecht-custom-radio-button--focus-visible {
1908
1934
  box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1909
1935
  outline-color: var(--utrecht-focus-outline-color, transparent);
@@ -1912,39 +1938,47 @@ ol.utrecht-breadcrumb__list {
1912
1938
  outline-width: var(--utrecht-focus-outline-width, 0);
1913
1939
  }
1914
1940
 
1941
+ .utrecht-radio-button--custom.utrecht-radio-button--disabled,
1915
1942
  .utrecht-custom-radio-button--disabled {
1916
1943
  border-color: var(--utrecht-custom-radio-button-disabled-border-color, var(--utrecht-custom-radio-button-border-color));
1917
1944
  border-width: var(--utrecht-custom-radio-button-disabled-border-width, var(--utrecht-custom-radio-button-border-width));
1918
1945
  color: var(--utrecht-custom-radio-button-disabled-color, var(--utrecht-custom-radio-button-color));
1919
1946
  cursor: var(--utrecht-action-disabled-cursor);
1920
1947
  }
1948
+ .utrecht-radio-button--custom.utrecht-radio-button--disabled:checked,
1921
1949
  .utrecht-custom-radio-button--disabled:checked {
1922
1950
  background-color: var(--utrecht-custom-radio-button-disabled-background-color, var(--utrecht-custom-radio-button-background-color));
1923
1951
  border-color: var(--utrecht-custom-radio-button-disabled-border-color, var(--utrecht-custom-radio-button-border-color));
1924
1952
  }
1953
+ .utrecht-radio-button--custom.utrecht-radio-button--disabled:active,
1925
1954
  .utrecht-custom-radio-button--disabled:active {
1926
1955
  border-color: var(--utrecht-custom-radio-button-disabled-border-color, var(--utrecht-custom-radio-button-border-color));
1927
1956
  }
1928
1957
 
1958
+ .utrecht-radio-button--custom.utrecht-radio-button--invalid,
1929
1959
  .utrecht-custom-radio-button--invalid {
1930
1960
  border-color: var(--utrecht-custom-radio-button-invalid-border-color, var(--utrecht-custom-radio-button-border-color));
1931
1961
  border-width: var(--utrecht-custom-radio-button-invalid-border-width, var(--utrecht-custom-radio-button-border-width));
1932
1962
  color: var(--utrecht-custom-radio-button-invalid-color, var(--utrecht-custom-radio-button-color));
1933
1963
  }
1934
1964
 
1965
+ .utrecht-radio-button--custom.utrecht-radio-button--html-input:disabled,
1935
1966
  .utrecht-custom-radio-button--html-input:disabled {
1936
1967
  border-color: var(--utrecht-custom-radio-button-disabled-border-color, var(--utrecht-custom-radio-button-border-color));
1937
1968
  border-width: var(--utrecht-custom-radio-button-disabled-border-width, var(--utrecht-custom-radio-button-border-width));
1938
1969
  color: var(--utrecht-custom-radio-button-disabled-color, var(--utrecht-custom-radio-button-color));
1939
1970
  cursor: var(--utrecht-action-disabled-cursor);
1940
1971
  }
1972
+ .utrecht-radio-button--custom.utrecht-radio-button--html-input:disabled:checked,
1941
1973
  .utrecht-custom-radio-button--html-input:disabled:checked {
1942
1974
  background-color: var(--utrecht-custom-radio-button-disabled-background-color, var(--utrecht-custom-radio-button-background-color));
1943
1975
  border-color: var(--utrecht-custom-radio-button-disabled-border-color, var(--utrecht-custom-radio-button-border-color));
1944
1976
  }
1977
+ .utrecht-radio-button--custom.utrecht-radio-button--html-input:disabled:active,
1945
1978
  .utrecht-custom-radio-button--html-input:disabled:active {
1946
1979
  border-color: var(--utrecht-custom-radio-button-disabled-border-color, var(--utrecht-custom-radio-button-border-color));
1947
1980
  }
1981
+ .utrecht-radio-button--custom.utrecht-radio-button--html-input:focus,
1948
1982
  .utrecht-custom-radio-button--html-input:focus {
1949
1983
  background-color: var(--utrecht-custom-radio-button-focus-background-color, var(--utrecht-custom-radio-button-background-color));
1950
1984
  background-image: url("data:image/svg+xml,%3Csvg viewBox='-4 -4 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
@@ -1952,6 +1986,7 @@ ol.utrecht-breadcrumb__list {
1952
1986
  border-width: var(--utrecht-custom-radio-button-focus-border-width, var(--utrecht-custom-radio-button-border-width));
1953
1987
  color: var(--utrecht-custom-radio-button-focus-color, var(--utrecht-custom-radio-button-color));
1954
1988
  }
1989
+ .utrecht-radio-button--custom.utrecht-radio-button--html-input:focus-visible,
1955
1990
  .utrecht-custom-radio-button--html-input:focus-visible {
1956
1991
  box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
1957
1992
  outline-color: var(--utrecht-focus-outline-color, transparent);
@@ -1959,11 +1994,14 @@ ol.utrecht-breadcrumb__list {
1959
1994
  outline-style: var(--utrecht-focus-outline-style, solid);
1960
1995
  outline-width: var(--utrecht-focus-outline-width, 0);
1961
1996
  }
1962
- .utrecht-custom-radio-button--html-input:invalid, .utrecht-custom-radio-button--html-input[aria-invalid=true] {
1997
+ .utrecht-radio-button--custom.utrecht-radio-button--html-input:invalid, .utrecht-radio-button--custom.utrecht-radio-button--html-input[aria-invalid=true],
1998
+ .utrecht-custom-radio-button--html-input:invalid,
1999
+ .utrecht-custom-radio-button--html-input[aria-invalid=true] {
1963
2000
  border-color: var(--utrecht-custom-radio-button-invalid-border-color, var(--utrecht-custom-radio-button-border-color));
1964
2001
  border-width: var(--utrecht-custom-radio-button-invalid-border-width, var(--utrecht-custom-radio-button-border-width));
1965
2002
  color: var(--utrecht-custom-radio-button-invalid-color, var(--utrecht-custom-radio-button-color));
1966
2003
  }
2004
+ .utrecht-radio-button--custom.utrecht-radio-button--html-input:active,
1967
2005
  .utrecht-custom-radio-button--html-input:active {
1968
2006
  background-color: var(--utrecht-custom-radio-button-active-background-color, var(--utrecht-custom-radio-button-background-color));
1969
2007
  background-image: url("data:image/svg+xml,%3Csvg viewBox='-4 -4 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
@@ -1971,6 +2009,7 @@ ol.utrecht-breadcrumb__list {
1971
2009
  border-width: var(--utrecht-custom-radio-button-active-border-width, var(--utrecht-custom-radio-button-border-width));
1972
2010
  color: var(--utrecht-custom-radio-button-active-color, var(--utrecht-custom-radio-button-color));
1973
2011
  }
2012
+ .utrecht-radio-button--custom.utrecht-radio-button--html-input:checked,
1974
2013
  .utrecht-custom-radio-button--html-input:checked {
1975
2014
  background-color: var(--utrecht-custom-radio-button-checked-background-color, var(--utrecht-custom-radio-button-background-color));
1976
2015
  background-image: url("data:image/svg+xml,%3Csvg viewBox='-4 -4 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
@@ -2108,56 +2147,16 @@ ol.utrecht-breadcrumb__list {
2108
2147
 
2109
2148
  /**
2110
2149
  * @license EUPL-1.2
2111
- * Copyright (c) 2021 Gemeente Utrecht
2112
- * Copyright (c) 2021 Robbert Broersma
2113
- */
2114
- /**
2115
- * @license EUPL-1.2
2116
- * Copyright (c) 2021 Gemeente Utrecht
2117
- * Copyright (c) 2021 Robbert Broersma
2118
- */
2119
- .utrecht-form-field-checkbox-group {
2120
- font-family: var(--utrecht-document-font-family, inherit);
2121
- font-size: var(--utrecht-paragraph-font-size);
2122
- margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
2123
- margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
2124
- }
2125
-
2126
- .utrecht-form-field-checkbox-group--distanced {
2127
- --utrecht-space-around: 1;
2128
- }
2129
-
2130
- .utrecht-form-field-checkbox-group__label {
2131
- margin-block-end: var(--utrecht-paragraph-margin-block-end);
2132
- margin-block-start: var(--utrecht-paragraph-margin-block-start);
2133
- }
2134
-
2135
- /**
2136
- * @license EUPL-1.2
2137
- * Copyright (c) 2021 Robbert Broersma
2138
- */
2139
- /**
2140
- * @license EUPL-1.2
2141
- * Copyright (c) 2021 Robbert Broersma
2150
+ * Copyright (c) 2020-2022 Gemeente Utrecht
2151
+ * Copyright (c) 2020-2022 Frameless B.V.
2142
2152
  */
2143
2153
  /**
2144
2154
  * @license EUPL-1.2
2145
- * Copyright (c) 2021 Robbert Broersma
2155
+ * Copyright (c) 2020-2022 Gemeente Utrecht
2156
+ * Copyright (c) 2020-2022 Frameless B.V.
2146
2157
  */
2147
- .utrecht-form-field {
2148
- font-family: var(--utrecht-document-font-family, inherit);
2149
- margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
2150
- margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
2151
- max-inline-size: var(--utrecht-form-field-max-inline-size);
2152
- page-break-inside: avoid;
2153
- }
2154
-
2155
- .utrecht-form-field--distanced {
2156
- --utrecht-space-around: 1;
2157
- }
2158
-
2159
- .utrecht-form-field__label--checkbox {
2160
- margin-inline-start: 1ch;
2158
+ .utrecht-form {
2159
+ max-inline-size: var(--utrecht-form-max-inline-size);
2161
2160
  }
2162
2161
 
2163
2162
  /**
@@ -2169,6 +2168,7 @@ ol.utrecht-breadcrumb__list {
2169
2168
  * Copyright (c) 2021 Robbert Broersma
2170
2169
  */
2171
2170
  .utrecht-form-field-description {
2171
+ --utrecht-document-color: currentColor;
2172
2172
  color: var(--utrecht-form-field-description-color);
2173
2173
  font-family: var(--utrecht-document-font-family, inherit);
2174
2174
  font-size: var(--utrecht-form-field-description-font-size, inherit);
@@ -2176,6 +2176,9 @@ ol.utrecht-breadcrumb__list {
2176
2176
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
2177
2177
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
2178
2178
  }
2179
+ .utrecht-form-field-description > * {
2180
+ --utrecht-space-around: 1;
2181
+ }
2179
2182
 
2180
2183
  .utrecht-form-field-description--distanced {
2181
2184
  --utrecht-space-around: 1;
@@ -2197,67 +2200,108 @@ ol.utrecht-breadcrumb__list {
2197
2200
  * @license EUPL-1.2
2198
2201
  * Copyright (c) 2021 Robbert Broersma
2199
2202
  */
2200
- .utrecht-form-field-radio-group {
2203
+ /**
2204
+ * @license EUPL-1.2
2205
+ * Copyright (c) 2021 Robbert Broersma
2206
+ */
2207
+ /* stylelint-disable-next-line block-no-empty */
2208
+ .utrecht-form-field {
2201
2209
  font-family: var(--utrecht-document-font-family, inherit);
2202
- font-size: var(--utrecht-paragraph-font-size);
2203
- margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
2204
- margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
2210
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
2211
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
2212
+ max-inline-size: var(--utrecht-form-field-max-inline-size);
2213
+ page-break-inside: avoid;
2205
2214
  }
2206
2215
 
2207
- .utrecht-form-field-radio-group--distanced {
2216
+ .utrecht-form-field--distanced {
2208
2217
  --utrecht-space-around: 1;
2209
2218
  }
2210
2219
 
2211
- .utrecht-form-field-radio-group__label {
2212
- margin-block-end: var(--utrecht-paragraph-margin-block-end);
2213
- margin-block-start: var(--utrecht-paragraph-margin-block-start);
2220
+ .utrecht-form-field--invalid {
2221
+ border-inline-start-color: var(--utrecht-form-field-invalid-border-inline-start-color);
2222
+ border-inline-start-style: solid;
2223
+ border-inline-start-width: var(--utrecht-form-field-invalid-border-inline-start-width);
2224
+ padding-inline-start: var(--utrecht-form-field-invalid-padding-inline-start);
2214
2225
  }
2215
2226
 
2216
- /**
2217
- * @license EUPL-1.2
2218
- * Copyright (c) 2021 Robbert Broersma
2219
- */
2220
- .utrecht-form-field-radio {
2221
- font-family: var(--utrecht-document-font-family, inherit);
2222
- font-size: var(--utrecht-paragraph-font-size);
2223
- margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
2224
- margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
2227
+ .utrecht-form-field--checkbox {
2228
+ display: grid;
2229
+ gap: 0 var(--utrecht-custom-checkbox-margin-inline-end, 12px);
2230
+ grid-template-areas: "input label" "input description" "input description-invalid";
2231
+ grid-template-columns: var(--utrecht-custom-checkbox-size) 100fr;
2232
+ /*
2233
+ .utrecht-form-field__label .utrecht-form-field__input {
2234
+ margin-inline-start: calc(
2235
+ -1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px))
2236
+ );
2237
+ margin-inline-end: var(--utrecht-custom-checkbox-margin-inline-end, 12px);
2238
+ }
2239
+ */
2240
+ }
2241
+ .utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input) {
2242
+ margin-inline-start: calc(-1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px)));
2243
+ }
2244
+ .utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input {
2245
+ margin-inline-end: var(--utrecht-custom-checkbox-margin-inline-end, 12px);
2225
2246
  }
2226
2247
 
2227
- .utrecht-form-field-radio--distanced {
2228
- --utrecht-space-around: 1;
2248
+ .utrecht-form-field--radio {
2249
+ display: grid;
2250
+ gap: 0 var(--utrecht-custom-radio-button-margin-inline-end, 12px);
2251
+ grid-template-areas: "input label" "input description" "input description-invalid";
2252
+ grid-template-columns: var(--utrecht-custom-radio-button-size) 100fr;
2253
+ /*
2254
+ .utrecht-form-field__label .utrecht-form-field__input {
2255
+ margin-inline-start: calc(
2256
+ -1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px))
2257
+ );
2258
+ margin-inline-end: var(--utrecht-custom-checkbox-margin-inline-end, 12px);
2259
+ }
2260
+ */
2261
+ }
2262
+ .utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input) {
2263
+ margin-inline-start: calc(-1 * (var(--utrecht-custom-radio-button-size) + var(--utrecht-custom-radio-button-margin-inline-end, 12px)));
2264
+ }
2265
+ .utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input {
2266
+ margin-inline-end: var(--utrecht-custom-radio-button-margin-inline-end, 12px);
2229
2267
  }
2230
2268
 
2231
- .utrecht-form-field-radio__label {
2232
- margin-inline-start: 1ch;
2269
+ .utrecht-form-field__input {
2270
+ grid-area: input;
2271
+ order: 5;
2233
2272
  }
2234
2273
 
2235
- /**
2236
- * @license EUPL-1.2
2237
- * Copyright (c) 2021 Robbert Broersma
2238
- */
2239
- .utrecht-form-field-textbox {
2240
- font-family: var(--utrecht-document-font-family, inherit);
2274
+ .utrecht-form-field__label {
2275
+ /* Assign the margin-block-end to padding instead, so the clickable area of the label increases
2276
+ and we avoid a small gap between the label and input that cannot be clicked to focus the input. */
2277
+ grid-area: label;
2278
+ margin-block-end: var(--utrecht-form-field-label-margin-block-end);
2279
+ margin-block-start: 0;
2280
+ order: 1;
2241
2281
  }
2242
2282
 
2243
- /**
2244
- * @license EUPL-1.2
2245
- * Copyright (c) 2021 Robbert Broersma
2246
- */
2247
- /**
2248
- * @license EUPL-1.2
2249
- * Copyright (c) 2021 Robbert Broersma
2250
- */
2251
- .utrecht-form-field {
2252
- font-family: var(--utrecht-document-font-family, inherit);
2253
- margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
2254
- margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
2255
- max-inline-size: var(--utrecht-form-field-max-inline-size);
2256
- page-break-inside: avoid;
2283
+ .utrecht-form-field .utrecht-form-field-description {
2284
+ grid-area: description;
2285
+ margin-block-end: var(--utrecht-form-field-description-margin-block-end);
2286
+ margin-block-start: var(--utrecht-form-field-description-margin-block-start);
2287
+ order: 2;
2257
2288
  }
2258
2289
 
2259
- .utrecht-form-field--distanced {
2260
- --utrecht-space-around: 1;
2290
+ .utrecht-form-field .utrecht-form-field-description--invalid {
2291
+ grid-area: description-invalid;
2292
+ order: 3;
2293
+ }
2294
+
2295
+ .utrecht-form-field__description {
2296
+ grid-area: description;
2297
+ margin-block-end: var(--utrecht-form-field-description-margin-block-end);
2298
+ margin-block-start: var(--utrecht-form-field-description-margin-block-start);
2299
+ order: 2;
2300
+ }
2301
+
2302
+ .utrecht-form-field__description--before {
2303
+ grid-area: description-before;
2304
+ order: 4;
2261
2305
  }
2262
2306
 
2263
2307
  /**
@@ -2275,6 +2319,7 @@ ol.utrecht-breadcrumb__list {
2275
2319
  }
2276
2320
 
2277
2321
  .utrecht-form-fieldset--html-fieldset {
2322
+ all: revert;
2278
2323
  border: 0;
2279
2324
  margin-inline-end: 0;
2280
2325
  margin-inline-start: 0;
@@ -2286,6 +2331,7 @@ ol.utrecht-breadcrumb__list {
2286
2331
  }
2287
2332
 
2288
2333
  .utrecht-form-fieldset__legend--html-legend {
2334
+ display: table;
2289
2335
  inline-size: 100%;
2290
2336
  padding-inline-end: 0;
2291
2337
  padding-inline-start: 0;
@@ -2295,6 +2341,11 @@ ol.utrecht-breadcrumb__list {
2295
2341
  --utrecht-space-around: 1;
2296
2342
  }
2297
2343
 
2344
+ .utrecht-form-fieldset--section {
2345
+ background-color: var(--utrecht-form-fieldset-section-background-color);
2346
+ color: var(--utrecht-form-fieldset-section-color);
2347
+ }
2348
+
2298
2349
  .utrecht-form-fieldset__legend {
2299
2350
  color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
2300
2351
  font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
@@ -2315,6 +2366,13 @@ ol.utrecht-breadcrumb__list {
2315
2366
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-start, 0));
2316
2367
  }
2317
2368
 
2369
+ .utrecht-form-fieldset--invalid {
2370
+ border-inline-start-color: var(--utrecht-form-fieldset-invalid-border-inline-start-color, var(--utrecht-form-field-invalid-border-inline-start-color));
2371
+ border-inline-start-style: solid;
2372
+ border-inline-start-width: var(--utrecht-form-fieldset-invalid-border-inline-start-width, var(--utrecht-form-field-invalid-border-inline-start-width));
2373
+ padding-inline-start: var(--utrecht-form-fieldset-invalid-padding-inline-start, var(--utrecht-form-field-invalid-padding-inline-start));
2374
+ }
2375
+
2318
2376
  /**
2319
2377
  * @license EUPL-1.2
2320
2378
  * Copyright (c) 2021 Robbert Broersma
@@ -2331,6 +2389,7 @@ ol.utrecht-breadcrumb__list {
2331
2389
 
2332
2390
  .utrecht-form-label--checkbox {
2333
2391
  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
2392
+ cursor: var(--utrecht-action-activate-cursor, revert);
2334
2393
  font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
2335
2394
  }
2336
2395
 
@@ -2339,12 +2398,13 @@ ol.utrecht-breadcrumb__list {
2339
2398
  }
2340
2399
 
2341
2400
  .utrecht-form-label--disabled {
2342
- cursor: var(--utrecht-action-disabled-cursor);
2401
+ cursor: var(--utrecht-action-disabled-cursor, revert);
2343
2402
  font-weight: var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));
2344
2403
  }
2345
2404
 
2346
2405
  .utrecht-form-label--radio {
2347
2406
  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
2407
+ cursor: var(--utrecht-action-activate-cursor, revert);
2348
2408
  font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
2349
2409
  }
2350
2410
 
@@ -4038,11 +4098,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
4038
4098
  margin-block-start: 0;
4039
4099
  margin-inline-end: 0;
4040
4100
  margin-inline-start: 0;
4101
+ cursor: var(--utrecht-action-activate-cursor, revert);
4041
4102
  }
4042
4103
 
4043
4104
  /* stylelint-disable-next-line block-no-empty */
4044
4105
  .utrecht-radio-button--disabled {
4045
- cursor: var(--utrecht-action-disabled-cursor);
4106
+ cursor: var(--utrecht-action-disabled-cursor, revert);
4046
4107
  }
4047
4108
 
4048
4109
  .utrecht-radio-button--focus-visible {
@@ -4054,7 +4115,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4054
4115
  }
4055
4116
 
4056
4117
  .utrecht-radio-button--html-input:disabled {
4057
- cursor: var(--utrecht-action-disabled-cursor);
4118
+ cursor: var(--utrecht-action-disabled-cursor, revert);
4058
4119
  }
4059
4120
  .utrecht-radio-button--html-input:focus {
4060
4121
  box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.364",
2
+ "version": "1.0.0-alpha.366",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
@@ -26,5 +26,5 @@
26
26
  "clean": "rimraf dist/"
27
27
  },
28
28
  "main": "dist/index.css",
29
- "gitHead": "3d3b8802ec7a1e2ea043330df02d0d2e868ce1c1"
29
+ "gitHead": "42ba5050c04e6109291179a5cfb851e0044be001"
30
30
  }