@utrecht/component-library-css 7.2.2 → 7.3.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.
package/dist/index.css CHANGED
@@ -7001,6 +7001,199 @@
7001
7001
  -moz-appearance: textfield;
7002
7002
  font-variant-numeric: lining-nums tabular-nums;
7003
7003
  }
7004
+ .utrecht-tooltip-anchor {
7005
+ display: inline;
7006
+ position: relative;
7007
+ }
7008
+
7009
+ .utrecht-tooltip {
7010
+ --_utrecht-tooltip-arrow-size: 8px;
7011
+ --_utrecht-tooltip-arrow-border-color: var(--utrecht-tooltip-border-color, currentColor);
7012
+ background-color: var(--utrecht-tooltip-background-color, Canvas);
7013
+ border-color: var(--utrecht-tooltip-border-color, currentColor);
7014
+ border-radius: var(--utrecht-tooltip-border-radius);
7015
+ border-style: solid;
7016
+ border-width: var(--utrecht-tooltip-border-width, 1px);
7017
+ box-sizing: border-box;
7018
+ color: var(--utrecht-tooltip-color, CanvasText);
7019
+ font-family: var(--utrecht-tooltip-font-family, inherit);
7020
+ font-size: var(--utrecht-tooltip-font-size, inherit);
7021
+ font-weight: var(--utrecht-tooltip-font-weight, revert);
7022
+ inline-size: max-content;
7023
+ line-height: var(--utrecht-tooltip-line-height, 1.5);
7024
+ max-inline-size: var(--utrecht-tooltip-max-inline-size, 320px);
7025
+ opacity: 100%;
7026
+ padding-block: var(--utrecht-tooltip-padding-block, 8px);
7027
+ padding-inline: var(--utrecht-tooltip-padding-inline, 12px);
7028
+ position: absolute;
7029
+ transition-duration: --utrecht-tooltip-transition-duration, 200ms;
7030
+ transition-property: opacity;
7031
+ transition-timing-function: --utrecht-tooltip-transition-timing-function, ease-in-out;
7032
+ z-index: var(--utrecht-tooltip-z-index, 1000);
7033
+ }
7034
+ .utrecht-tooltip:dir(rtl) {
7035
+ --_utrecht-tooltip-rtl: -1;
7036
+ }
7037
+ @media (prefers-reduced-motion: reduce) {
7038
+ .utrecht-tooltip {
7039
+ transition: none;
7040
+ }
7041
+ }
7042
+ @media (forced-colors: active) {
7043
+ .utrecht-tooltip {
7044
+ background-color: Canvas;
7045
+ border: 1px solid CanvasText;
7046
+ color: CanvasText;
7047
+ }
7048
+ }
7049
+
7050
+ .utrecht-tooltip--not-visible {
7051
+ opacity: 0%;
7052
+ pointer-events: none;
7053
+ }
7054
+ .utrecht-tooltip--visible {
7055
+ opacity: 100%;
7056
+ pointer-events: initial;
7057
+ }
7058
+
7059
+ .utrecht-tooltip--block-end {
7060
+ inset-block-start: 100%;
7061
+ inset-inline-start: 50%;
7062
+ margin-block-start: var(--utrecht-tooltip-arrow-size, var(--_utrecht-tooltip-arrow-size));
7063
+ transform: translateX(calc(-50% * var(--_utrecht-tooltip-rtl, 1)));
7064
+ }
7065
+
7066
+ .utrecht-tooltip--block-start {
7067
+ inset-block-end: 100%;
7068
+ inset-inline-start: 50%;
7069
+ margin-block-end: var(--utrecht-tooltip-arrow-size, var(--_utrecht-tooltip-arrow-size));
7070
+ transform: translateX(calc(-50% * var(--_utrecht-tooltip-rtl, 1)));
7071
+ }
7072
+
7073
+ .utrecht-tooltip--inline-end {
7074
+ inset-block-start: 50%;
7075
+ inset-inline-start: 100%;
7076
+ margin-inline-start: var(--utrecht-tooltip-arrow-size, var(--_utrecht-tooltip-arrow-size));
7077
+ transform: translateY(-50%);
7078
+ }
7079
+
7080
+ .utrecht-tooltip--inline-start {
7081
+ inset-block-start: 50%;
7082
+ inset-inline-end: 100%;
7083
+ margin-inline-end: var(--utrecht-tooltip-arrow-size, var(--_utrecht-tooltip-arrow-size));
7084
+ transform: translateY(-50%);
7085
+ }
7086
+
7087
+ .utrecht-tooltip--top {
7088
+ bottom: 100%;
7089
+ left: 50%;
7090
+ margin-bottom: var(--utrecht-tooltip-arrow-size, var(--_utrecht-tooltip-arrow-size));
7091
+ transform: translateX(-50%);
7092
+ }
7093
+
7094
+ .utrecht-tooltip--right {
7095
+ left: 100%;
7096
+ margin-left: var(--utrecht-tooltip-arrow-size, var(--_utrecht-tooltip-arrow-size));
7097
+ top: 50%;
7098
+ transform: translateY(-50%);
7099
+ }
7100
+
7101
+ .utrecht-tooltip--bottom {
7102
+ left: 50%;
7103
+ margin-top: var(--utrecht-tooltip-arrow-size, var(--_utrecht-tooltip-arrow-size));
7104
+ top: 100%;
7105
+ transform: translateX(-50%);
7106
+ }
7107
+
7108
+ .utrecht-tooltip--left {
7109
+ margin-right: var(--utrecht-tooltip-arrow-size, var(--_utrecht-tooltip-arrow-size));
7110
+ right: 100%;
7111
+ top: 50%;
7112
+ transform: translateY(-50%);
7113
+ }
7114
+
7115
+ .utrecht-tooltip__arrow {
7116
+ block-size: 0;
7117
+ border-color: transparent;
7118
+ border-style: solid;
7119
+ border-width: var(--utrecht-tooltip-arrow-size, var(--_utrecht-tooltip-arrow-size));
7120
+ box-sizing: content-box;
7121
+ inline-size: 0;
7122
+ position: absolute;
7123
+ }
7124
+ @media (forced-colors: active) {
7125
+ .utrecht-tooltip__arrow {
7126
+ --_utrecht-tooltip-arrow-border-color: CanvasText;
7127
+ border-color: transparent;
7128
+ forced-color-adjust: none;
7129
+ }
7130
+ }
7131
+
7132
+ .utrecht-tooltip__arrow--block-end {
7133
+ border-block-end-color: var(--_utrecht-tooltip-arrow-border-color);
7134
+ border-block-start-width: 0;
7135
+ inset-block-end: 100%;
7136
+ inset-inline-start: calc(50% - var(--_utrecht-tooltip-arrow-size));
7137
+ }
7138
+
7139
+ .utrecht-tooltip__arrow--block-start {
7140
+ border-block-end-width: 0;
7141
+ border-block-start-color: var(--_utrecht-tooltip-arrow-border-color);
7142
+ inset-block-start: 100%;
7143
+ inset-inline-start: calc(50% - var(--_utrecht-tooltip-arrow-size));
7144
+ }
7145
+
7146
+ .utrecht-tooltip__arrow--inline-end {
7147
+ border-inline-end-color: var(--_utrecht-tooltip-arrow-border-color);
7148
+ border-inline-start-width: 0;
7149
+ inset-block-start: calc(50% - var(--_utrecht-tooltip-arrow-size));
7150
+ inset-inline-end: 100%;
7151
+ }
7152
+
7153
+ .utrecht-tooltip__arrow--inline-start {
7154
+ border-inline-end-width: 0;
7155
+ border-inline-start-color: var(--_utrecht-tooltip-arrow-border-color);
7156
+ inset-block-start: calc(50% - var(--_utrecht-tooltip-arrow-size));
7157
+ inset-inline-start: 100%;
7158
+ }
7159
+
7160
+ .utrecht-tooltip__arrow--top {
7161
+ border-bottom-width: 0;
7162
+ border-top-color: var(--_utrecht-tooltip-arrow-border-color);
7163
+ left: calc(50% - var(--_utrecht-tooltip-arrow-size));
7164
+ top: 100%;
7165
+ }
7166
+
7167
+ .utrecht-tooltip__arrow--right {
7168
+ border-left-width: 0;
7169
+ border-right-color: var(--_utrecht-tooltip-arrow-border-color);
7170
+ right: 100%;
7171
+ top: calc(50% - var(--_utrecht-tooltip-arrow-size));
7172
+ }
7173
+
7174
+ .utrecht-tooltip__arrow--bottom {
7175
+ border-bottom-color: var(--_utrecht-tooltip-arrow-border-color);
7176
+ border-top-width: 0;
7177
+ bottom: 100%;
7178
+ left: calc(50% - var(--_utrecht-tooltip-arrow-size));
7179
+ }
7180
+
7181
+ .utrecht-tooltip__arrow--left {
7182
+ border-left-color: var(--_utrecht-tooltip-arrow-border-color);
7183
+ border-right-width: 0;
7184
+ left: 100%;
7185
+ top: calc(50% - var(--_utrecht-tooltip-arrow-size));
7186
+ }
7187
+
7188
+ .utrecht-tooltip[hidden] {
7189
+ display: none;
7190
+ }
7191
+
7192
+ @media print {
7193
+ .utrecht-tooltip {
7194
+ display: none !important;
7195
+ }
7196
+ }
7004
7197
  .utrecht-toptask-link {
7005
7198
  --utrecht-icon-color: currentColor;
7006
7199
  --utrecht-icon-size: var(--utrecht-toptask-link-icon-size);
@@ -6901,6 +6901,182 @@
6901
6901
  -moz-appearance: textfield;
6902
6902
  font-variant-numeric: lining-nums tabular-nums;
6903
6903
  }
6904
+ .utrecht-tooltip-anchor {
6905
+ display: inline;
6906
+ position: relative;
6907
+ }
6908
+
6909
+ .utrecht-tooltip {
6910
+ --_utrecht-tooltip-arrow-size: 8px;
6911
+ --_utrecht-tooltip-arrow-border-color: var(--utrecht-tooltip-border-color, currentColor);
6912
+ background-color: var(--utrecht-tooltip-background-color, Canvas);
6913
+ border-color: var(--utrecht-tooltip-border-color, currentColor);
6914
+ border-radius: var(--utrecht-tooltip-border-radius);
6915
+ border-style: solid;
6916
+ border-width: var(--utrecht-tooltip-border-width, 1px);
6917
+ box-sizing: border-box;
6918
+ color: var(--utrecht-tooltip-color, CanvasText);
6919
+ font-family: var(--utrecht-tooltip-font-family, inherit);
6920
+ font-size: var(--utrecht-tooltip-font-size, inherit);
6921
+ font-weight: var(--utrecht-tooltip-font-weight, revert);
6922
+ width: max-content;
6923
+ line-height: var(--utrecht-tooltip-line-height, 1.5);
6924
+ max-width: var(--utrecht-tooltip-max-inline-size, 320px);
6925
+ opacity: 100%;
6926
+ padding-top: var(--utrecht-tooltip-padding-block, 8px);
6927
+ padding-bottom: var(--utrecht-tooltip-padding-block, 8px);
6928
+ padding-left: var(--utrecht-tooltip-padding-inline, 12px);
6929
+ padding-right: var(--utrecht-tooltip-padding-inline, 12px);
6930
+ position: absolute;
6931
+ transition-duration: --utrecht-tooltip-transition-duration, 200ms;
6932
+ transition-property: opacity;
6933
+ transition-timing-function: --utrecht-tooltip-transition-timing-function, ease-in-out;
6934
+ z-index: var(--utrecht-tooltip-z-index, 1000);
6935
+ }
6936
+ .utrecht-tooltip:dir(rtl) {
6937
+ --_utrecht-tooltip-rtl: -1;
6938
+ }
6939
+
6940
+ .utrecht-tooltip--not-visible {
6941
+ opacity: 0%;
6942
+ pointer-events: none;
6943
+ }
6944
+ .utrecht-tooltip--visible {
6945
+ opacity: 100%;
6946
+ pointer-events: initial;
6947
+ }
6948
+
6949
+ .utrecht-tooltip--block-end {
6950
+ top: 100%;
6951
+ left: 50%;
6952
+ margin-top: var(--utrecht-tooltip-arrow-size, var(--_utrecht-tooltip-arrow-size));
6953
+ transform: translateX(calc(-50% * var(--_utrecht-tooltip-rtl, 1)));
6954
+ }
6955
+
6956
+ .utrecht-tooltip--block-start {
6957
+ bottom: 100%;
6958
+ left: 50%;
6959
+ margin-bottom: var(--utrecht-tooltip-arrow-size, var(--_utrecht-tooltip-arrow-size));
6960
+ transform: translateX(calc(-50% * var(--_utrecht-tooltip-rtl, 1)));
6961
+ }
6962
+
6963
+ .utrecht-tooltip--inline-end {
6964
+ top: 50%;
6965
+ left: 100%;
6966
+ margin-left: var(--utrecht-tooltip-arrow-size, var(--_utrecht-tooltip-arrow-size));
6967
+ transform: translateY(-50%);
6968
+ }
6969
+
6970
+ .utrecht-tooltip--inline-start {
6971
+ top: 50%;
6972
+ right: 100%;
6973
+ margin-right: var(--utrecht-tooltip-arrow-size, var(--_utrecht-tooltip-arrow-size));
6974
+ transform: translateY(-50%);
6975
+ }
6976
+
6977
+ .utrecht-tooltip--top {
6978
+ bottom: 100%;
6979
+ left: 50%;
6980
+ margin-bottom: var(--utrecht-tooltip-arrow-size, var(--_utrecht-tooltip-arrow-size));
6981
+ transform: translateX(-50%);
6982
+ }
6983
+
6984
+ .utrecht-tooltip--right {
6985
+ left: 100%;
6986
+ margin-left: var(--utrecht-tooltip-arrow-size, var(--_utrecht-tooltip-arrow-size));
6987
+ top: 50%;
6988
+ transform: translateY(-50%);
6989
+ }
6990
+
6991
+ .utrecht-tooltip--bottom {
6992
+ left: 50%;
6993
+ margin-top: var(--utrecht-tooltip-arrow-size, var(--_utrecht-tooltip-arrow-size));
6994
+ top: 100%;
6995
+ transform: translateX(-50%);
6996
+ }
6997
+
6998
+ .utrecht-tooltip--left {
6999
+ margin-right: var(--utrecht-tooltip-arrow-size, var(--_utrecht-tooltip-arrow-size));
7000
+ right: 100%;
7001
+ top: 50%;
7002
+ transform: translateY(-50%);
7003
+ }
7004
+
7005
+ .utrecht-tooltip__arrow {
7006
+ height: 0;
7007
+ border-color: transparent;
7008
+ border-style: solid;
7009
+ border-width: var(--utrecht-tooltip-arrow-size, var(--_utrecht-tooltip-arrow-size));
7010
+ box-sizing: content-box;
7011
+ width: 0;
7012
+ position: absolute;
7013
+ }
7014
+
7015
+ .utrecht-tooltip__arrow--block-end {
7016
+ border-bottom-color: var(--_utrecht-tooltip-arrow-border-color);
7017
+ border-top-width: 0;
7018
+ bottom: 100%;
7019
+ left: calc(50% - var(--_utrecht-tooltip-arrow-size));
7020
+ }
7021
+
7022
+ .utrecht-tooltip__arrow--block-start {
7023
+ border-bottom-width: 0;
7024
+ border-top-color: var(--_utrecht-tooltip-arrow-border-color);
7025
+ top: 100%;
7026
+ left: calc(50% - var(--_utrecht-tooltip-arrow-size));
7027
+ }
7028
+
7029
+ .utrecht-tooltip__arrow--inline-end {
7030
+ border-right-color: var(--_utrecht-tooltip-arrow-border-color);
7031
+ border-left-width: 0;
7032
+ top: calc(50% - var(--_utrecht-tooltip-arrow-size));
7033
+ right: 100%;
7034
+ }
7035
+
7036
+ .utrecht-tooltip__arrow--inline-start {
7037
+ border-right-width: 0;
7038
+ border-left-color: var(--_utrecht-tooltip-arrow-border-color);
7039
+ top: calc(50% - var(--_utrecht-tooltip-arrow-size));
7040
+ left: 100%;
7041
+ }
7042
+
7043
+ .utrecht-tooltip__arrow--top {
7044
+ border-bottom-width: 0;
7045
+ border-top-color: var(--_utrecht-tooltip-arrow-border-color);
7046
+ left: calc(50% - var(--_utrecht-tooltip-arrow-size));
7047
+ top: 100%;
7048
+ }
7049
+
7050
+ .utrecht-tooltip__arrow--right {
7051
+ border-left-width: 0;
7052
+ border-right-color: var(--_utrecht-tooltip-arrow-border-color);
7053
+ right: 100%;
7054
+ top: calc(50% - var(--_utrecht-tooltip-arrow-size));
7055
+ }
7056
+
7057
+ .utrecht-tooltip__arrow--bottom {
7058
+ border-bottom-color: var(--_utrecht-tooltip-arrow-border-color);
7059
+ border-top-width: 0;
7060
+ bottom: 100%;
7061
+ left: calc(50% - var(--_utrecht-tooltip-arrow-size));
7062
+ }
7063
+
7064
+ .utrecht-tooltip__arrow--left {
7065
+ border-left-color: var(--_utrecht-tooltip-arrow-border-color);
7066
+ border-right-width: 0;
7067
+ left: 100%;
7068
+ top: calc(50% - var(--_utrecht-tooltip-arrow-size));
7069
+ }
7070
+
7071
+ .utrecht-tooltip[hidden] {
7072
+ display: none;
7073
+ }
7074
+
7075
+ @media print {
7076
+ .utrecht-tooltip {
7077
+ display: none !important;
7078
+ }
7079
+ }
6904
7080
  .utrecht-toptask-link {
6905
7081
  --utrecht-icon-color: currentColor;
6906
7082
  --utrecht-icon-size: var(--utrecht-toptask-link-icon-size);
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "7.2.2",
2
+ "version": "7.3.0",
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",
@@ -21,18 +21,18 @@
21
21
  },
22
22
  "dependencies": {
23
23
  "@utrecht/accordion-css": "2.0.0",
24
- "@utrecht/article-css": "1.5.1",
25
- "@utrecht/backdrop-css": "1.4.1",
26
24
  "@utrecht/alert-css": "2.3.0",
27
25
  "@utrecht/alert-dialog-css": "1.4.2",
28
- "@utrecht/badge-counter-css": "1.4.1",
26
+ "@utrecht/alternate-lang-nav-css": "1.3.1",
27
+ "@utrecht/article-css": "1.5.1",
28
+ "@utrecht/backdrop-css": "1.4.1",
29
29
  "@utrecht/badge-list-css": "2.2.1",
30
+ "@utrecht/badge-counter-css": "1.4.1",
30
31
  "@utrecht/badge-status-css": "1.4.1",
31
32
  "@utrecht/blockquote-css": "1.6.1",
32
33
  "@utrecht/body-css": "1.2.1",
33
34
  "@utrecht/breadcrumb-nav-css": "1.5.0",
34
35
  "@utrecht/button-css": "2.3.1",
35
- "@utrecht/alternate-lang-nav-css": "1.3.1",
36
36
  "@utrecht/button-group-css": "1.4.1",
37
37
  "@utrecht/button-link-css": "1.3.1",
38
38
  "@utrecht/calendar-css": "1.4.1",
@@ -47,27 +47,28 @@
47
47
  "@utrecht/data-badge-css": "1.0.1",
48
48
  "@utrecht/data-list-css": "1.4.1",
49
49
  "@utrecht/data-placeholder-css": "1.4.1",
50
+ "@utrecht/digid-button-css": "1.4.1",
50
51
  "@utrecht/document-css": "1.5.1",
51
- "@utrecht/drawer-css": "1.4.1",
52
52
  "@utrecht/emphasis-css": "1.5.1",
53
+ "@utrecht/drawer-css": "1.4.1",
53
54
  "@utrecht/figure-css": "1.5.1",
54
55
  "@utrecht/form-css": "1.5.1",
55
56
  "@utrecht/form-field-css": "1.5.1",
56
57
  "@utrecht/form-field-description-css": "1.5.1",
57
58
  "@utrecht/form-field-error-message-css": "1.5.1",
58
59
  "@utrecht/form-fieldset-css": "1.5.1",
59
- "@utrecht/digid-button-css": "1.4.1",
60
60
  "@utrecht/form-label-css": "1.6.1",
61
- "@utrecht/form-toggle-css": "1.5.1",
62
- "@utrecht/heading-1-css": "1.5.1",
63
61
  "@utrecht/heading-2-css": "1.5.1",
62
+ "@utrecht/heading-1-css": "1.5.1",
63
+ "@utrecht/form-toggle-css": "1.5.1",
64
64
  "@utrecht/heading-3-css": "1.5.1",
65
65
  "@utrecht/heading-4-css": "1.5.1",
66
66
  "@utrecht/heading-5-css": "1.5.1",
67
67
  "@utrecht/heading-6-css": "1.5.1",
68
- "@utrecht/heading-group-css": "1.5.1",
69
68
  "@utrecht/html-content-css": "1.4.1",
69
+ "@utrecht/heading-group-css": "1.5.1",
70
70
  "@utrecht/iban-data-css": "1.3.1",
71
+ "@utrecht/icon-css": "2.0.1",
71
72
  "@utrecht/img-css": "1.3.1",
72
73
  "@utrecht/index-char-nav-css": "1.4.1",
73
74
  "@utrecht/link-button-css": "1.4.1",
@@ -77,22 +78,21 @@
77
78
  "@utrecht/list-social-css": "1.4.1",
78
79
  "@utrecht/listbox-css": "1.5.2",
79
80
  "@utrecht/logo-button-css": "1.4.1",
80
- "@utrecht/icon-css": "2.0.1",
81
+ "@utrecht/logo-css": "1.4.1",
81
82
  "@utrecht/logo-image-css": "1.4.1",
82
83
  "@utrecht/map-marker-css": "1.4.1",
83
84
  "@utrecht/mark-css": "1.5.1",
84
85
  "@utrecht/multiline-data-css": "1.3.1",
85
86
  "@utrecht/nav-bar-css": "1.4.1",
86
- "@utrecht/nav-list-css": "1.3.1",
87
87
  "@utrecht/number-badge-css": "2.3.1",
88
+ "@utrecht/nav-list-css": "1.3.1",
88
89
  "@utrecht/number-data-css": "1.4.1",
89
- "@utrecht/logo-css": "1.4.1",
90
90
  "@utrecht/ordered-list-css": "1.5.2",
91
91
  "@utrecht/page-body-css": "0.1.1",
92
92
  "@utrecht/page-content-css": "1.4.1",
93
- "@utrecht/page-css": "1.4.1",
94
93
  "@utrecht/page-footer-css": "2.1.1",
95
94
  "@utrecht/page-header-css": "1.5.1",
95
+ "@utrecht/page-css": "1.4.1",
96
96
  "@utrecht/page-layout-css": "1.1.1",
97
97
  "@utrecht/pagination-css": "1.4.1",
98
98
  "@utrecht/paragraph-css": "2.3.1",
@@ -104,16 +104,17 @@
104
104
  "@utrecht/search-bar-css": "2.2.1",
105
105
  "@utrecht/select-css": "1.8.1",
106
106
  "@utrecht/separator-css": "1.5.1",
107
- "@utrecht/skip-link-css": "1.5.1",
108
107
  "@utrecht/spotlight-section-css": "1.6.1",
108
+ "@utrecht/skip-link-css": "1.5.1",
109
109
  "@utrecht/surface-css": "1.4.1",
110
- "@utrecht/table-css": "1.6.1",
111
110
  "@utrecht/table-of-contents-css": "0.3.1",
112
111
  "@utrecht/textarea-css": "2.3.2",
112
+ "@utrecht/table-css": "1.6.1",
113
113
  "@utrecht/textbox-css": "1.7.1",
114
+ "@utrecht/tooltip-css": "1.0.0",
114
115
  "@utrecht/top-task-link-css": "1.4.1",
115
- "@utrecht/unordered-list-css": "1.5.1",
116
116
  "@utrecht/top-task-nav-css": "1.3.1",
117
+ "@utrecht/unordered-list-css": "1.5.1",
117
118
  "@utrecht/url-data-css": "1.3.1",
118
119
  "@utrecht/youtube-video-css": "1.0.0"
119
120
  },