@utrecht/component-library-css 5.1.0 → 6.0.0

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 (4) hide show
  1. package/dist/html.css +44 -55
  2. package/dist/index.css +131 -109
  3. package/dist/prince-xml.css +223 -362
  4. package/package.json +2 -2
package/dist/html.css CHANGED
@@ -283,12 +283,12 @@
283
283
  border-width: var(--_utrecht-button-border-width);
284
284
  box-sizing: border-box;
285
285
  color: var(--_utrecht-button-color);
286
+ column-gap: var(--utrecht-button-column-gap);
286
287
  cursor: var(--utrecht-action-activate-cursor, revert);
287
288
  display: inline-flex;
288
289
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
289
290
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
290
291
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
291
- gap: var(--utrecht-button-icon-gap);
292
292
  inline-size: var(--utrecht-button-inline-size, auto);
293
293
  justify-content: center;
294
294
  line-height: var(--_utrecht-button-line-height);
@@ -365,7 +365,7 @@
365
365
  .utrecht-html input[type=checkbox i]:disabled {
366
366
  cursor: var(--utrecht-action-disabled-cursor, revert);
367
367
  }
368
- .utrecht-html input[type=checkbox i]:focus {
368
+ .utrecht-html input[type=checkbox i] :focus-visible {
369
369
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
370
370
  var(--utrecht-focus-inverse-outline-color, transparent);
371
371
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -374,10 +374,6 @@
374
374
  outline-style: var(--utrecht-focus-outline-style, revert);
375
375
  outline-width: var(--utrecht-focus-outline-width, revert);
376
376
  }
377
- .utrecht-html input[type=checkbox i]:focus:not(:focus-visible) {
378
- box-shadow: none;
379
- outline-style: revert;
380
- }
381
377
  .utrecht-html body {
382
378
  -webkit-font-smoothing: auto !important;
383
379
  -moz-osx-font-smoothing: auto !important;
@@ -606,11 +602,11 @@
606
602
  }
607
603
  .utrecht-html a:focus {
608
604
  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
609
- --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
610
- --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
611
605
  background-color: var(--utrecht-link-focus-background-color, transparent);
612
606
  text-decoration-skip: none;
613
607
  text-decoration-skip-ink: none;
608
+ }
609
+ .utrecht-html a:focus-visible {
614
610
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
615
611
  var(--utrecht-focus-inverse-outline-color, transparent);
616
612
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -618,12 +614,16 @@
618
614
  outline-offset: var(--utrecht-focus-outline-offset, revert);
619
615
  outline-style: var(--utrecht-focus-outline-style, revert);
620
616
  outline-width: var(--utrecht-focus-outline-width, revert);
617
+ --_utrecht-link-state-text-decoration: var(
618
+ --utrecht-link-focus-visible-text-decoration,
619
+ var(--utrecht-link-focus-text-decoration)
620
+ );
621
+ --_utrecht-link-state-text-decoration-thickness: var(
622
+ --utrecht-link-focus-visible-text-decoration-thickness,
623
+ var(--utrecht-link-focus-text-decoration-thickness)
624
+ );
621
625
  z-index: var(--utrecht-stack-focus-z-index, 1);
622
626
  }
623
- .utrecht-html a:focus:not(:focus-visible) {
624
- box-shadow: none;
625
- outline-style: revert;
626
- }
627
627
  .utrecht-html a[href^="tel:" i] {
628
628
  white-space: nowrap;
629
629
  }
@@ -655,24 +655,9 @@
655
655
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-end, 0));
656
656
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-start, 0));
657
657
  }
658
- .utrecht-html p.lead {
659
- color: var(--utrecht-paragraph-lead-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));
660
- font-size: var(--utrecht-paragraph-lead-font-size, var(--utrecht-paragraph-font-size, inherit));
661
- font-weight: var(--utrecht-paragraph-lead-font-weight, var(--utrecht-paragraph-font-weight, inherit));
662
- line-height: var(--utrecht-paragraph-lead-line-height, var(--utrecht-paragraph-line-height, inherit));
663
- }
664
658
  .utrecht-html * ~ p {
665
659
  --utrecht-space-around: 1;
666
660
  }
667
- .utrecht-html p:has(> small:only-child) {
668
- color: var(--utrecht-paragraph-small-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));
669
- font-size: var(--utrecht-paragraph-small-font-size, var(--utrecht-paragraph-font-size, inherit));
670
- font-weight: var(--utrecht-paragraph-small-font-weight, var(--utrecht-paragraph-font-weight, inherit));
671
- line-height: var(--utrecht-paragraph-small-line-height, var(--utrecht-paragraph-line-height, inherit));
672
- }
673
- .utrecht-html p > small:only-child {
674
- font-size: inherit;
675
- }
676
661
  .utrecht-html pre:has(> code:only-child) {
677
662
  background-color: var(--utrecht-code-background-color);
678
663
  color: var(--utrecht-code-color);
@@ -771,10 +756,19 @@
771
756
  --_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
772
757
  }
773
758
  .utrecht-html input[type=radio i]:disabled {
774
- --_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
775
- --_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
776
- --_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
777
- --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
759
+ --_utrecht-radio-button-background-color: var(
760
+ --utrecht-radio-button-disabled-background-color,
761
+ var(--utrecht-radio-button-background-color)
762
+ );
763
+ --_utrecht-radio-button-border-color: var(
764
+ --utrecht-radio-button-disabled-border-color,
765
+ var(--utrecht-radio-button-border-color)
766
+ );
767
+ --_utrecht-radio-button-border-width: var(
768
+ --utrecht-radio-button-disabled-border-width,
769
+ var(--utrecht-radio-button-border-width)
770
+ );
771
+ --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color, var(--utrecht-radio-button-color));
778
772
  --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
779
773
  --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
780
774
  --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
@@ -871,6 +865,7 @@
871
865
  font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
872
866
  font-weight: var(--utrecht-select-font-size, var(--utrecht-form-control-font-weight, initial));
873
867
  inline-size: 100%;
868
+ line-height: var(--utrecht-select-line-height, var(--utrecht-form-control-line-height, initial));
874
869
  min-block-size: var(--utrecht-select-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
875
870
  min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
876
871
  max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size));
@@ -883,6 +878,8 @@
883
878
  background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
884
879
  border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
885
880
  color: var(--utrecht-select-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
881
+ }
882
+ .utrecht-html select:focus-visible {
886
883
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
887
884
  var(--utrecht-focus-inverse-outline-color, transparent);
888
885
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -891,10 +888,6 @@
891
888
  outline-style: var(--utrecht-focus-outline-style, revert);
892
889
  outline-width: var(--utrecht-focus-outline-width, revert);
893
890
  }
894
- .utrecht-html select:focus:not(:focus-visible) {
895
- box-shadow: none;
896
- outline-style: revert;
897
- }
898
891
  .utrecht-html select:disabled {
899
892
  background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
900
893
  border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
@@ -1060,6 +1053,8 @@
1060
1053
  background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
1061
1054
  border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
1062
1055
  color: var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
1056
+ }
1057
+ .utrecht-html textarea:focus-visible {
1063
1058
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1064
1059
  var(--utrecht-focus-inverse-outline-color, transparent);
1065
1060
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -1068,10 +1063,6 @@
1068
1063
  outline-style: var(--utrecht-focus-outline-style, revert);
1069
1064
  outline-width: var(--utrecht-focus-outline-width, revert);
1070
1065
  }
1071
- .utrecht-html textarea:focus:not(:focus-visible) {
1072
- box-shadow: none;
1073
- outline-style: revert;
1074
- }
1075
1066
  .utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
1076
1067
  --_utrecht-textarea-border-width: var(
1077
1068
  --utrecht-textarea-invalid-border-width,
@@ -1161,6 +1152,20 @@
1161
1152
  background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
1162
1153
  border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
1163
1154
  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
1155
+ }
1156
+ .utrecht-html input:not([type]):focus-visible,
1157
+ .utrecht-html input[type=date i]:focus-visible,
1158
+ .utrecht-html input[type=datetime-local i]:focus-visible,
1159
+ .utrecht-html input[type=email i]:focus-visible,
1160
+ .utrecht-html input[type=month i]:focus-visible,
1161
+ .utrecht-html input[type=number i]:focus-visible,
1162
+ .utrecht-html input[type=password i]:focus-visible,
1163
+ .utrecht-html input[type=search i]:focus-visible,
1164
+ .utrecht-html input[type=tel i]:focus-visible,
1165
+ .utrecht-html input[type=text i]:focus-visible,
1166
+ .utrecht-html input[type=time i]:focus-visible,
1167
+ .utrecht-html input[type=url i]:focus-visible,
1168
+ .utrecht-html input[type=week i]:focus-visible {
1164
1169
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1165
1170
  var(--utrecht-focus-inverse-outline-color, transparent);
1166
1171
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -1169,22 +1174,6 @@
1169
1174
  outline-style: var(--utrecht-focus-outline-style, revert);
1170
1175
  outline-width: var(--utrecht-focus-outline-width, revert);
1171
1176
  }
1172
- .utrecht-html input:not([type]):focus:not(:focus-visible),
1173
- .utrecht-html input[type=date i]:focus:not(:focus-visible),
1174
- .utrecht-html input[type=datetime-local i]:focus:not(:focus-visible),
1175
- .utrecht-html input[type=email i]:focus:not(:focus-visible),
1176
- .utrecht-html input[type=month i]:focus:not(:focus-visible),
1177
- .utrecht-html input[type=number i]:focus:not(:focus-visible),
1178
- .utrecht-html input[type=password i]:focus:not(:focus-visible),
1179
- .utrecht-html input[type=search i]:focus:not(:focus-visible),
1180
- .utrecht-html input[type=tel i]:focus:not(:focus-visible),
1181
- .utrecht-html input[type=text i]:focus:not(:focus-visible),
1182
- .utrecht-html input[type=time i]:focus:not(:focus-visible),
1183
- .utrecht-html input[type=url i]:focus:not(:focus-visible),
1184
- .utrecht-html input[type=week i]:focus:not(:focus-visible) {
1185
- box-shadow: none;
1186
- outline-style: revert;
1187
- }
1188
1177
  .utrecht-html input:not([type]):invalid, .utrecht-html input:not([type])[aria-invalid=true],
1189
1178
  .utrecht-html input[type=date i]:invalid,
1190
1179
  .utrecht-html input[type=date i][aria-invalid=true],