@neo4j-ndl/base 4.22.2 → 4.22.3

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.
@@ -195,7 +195,6 @@
195
195
  --tw-contain-paint:;
196
196
  --tw-contain-style:;
197
197
  }
198
- /* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */
199
198
  *,
200
199
  ::before,
201
200
  ::after{
@@ -2146,6 +2145,271 @@ a.ndl-btn {
2146
2145
  .ndl-banner .ndl-banner-actions .ndl-btn.ndl-text-button:not(:disabled):active, .ndl-banner .ndl-banner-actions .ndl-btn.ndl-outlined-button:not(:disabled):active, .ndl-banner .ndl-banner-actions .ndl-btn.ndl-filled-button:not(:disabled):active {
2147
2146
  background-color:var(--theme-color-neutral-pressed);
2148
2147
  }
2148
+ .ndl-form-item .ndl-form-item-label {
2149
+ display:inline-flex;
2150
+ align-items:center;
2151
+ -moz-column-gap:8px;
2152
+ column-gap:8px;
2153
+ font:var(--typography-body-medium);
2154
+ letter-spacing:var(--typography-body-medium-letter-spacing);
2155
+ font-family:var(--typography-body-medium-font-family), sans-serif;
2156
+ }
2157
+ .ndl-form-item .ndl-form-item-label.ndl-fluid {
2158
+ display:flex;
2159
+ width:100%;
2160
+ }
2161
+ .ndl-form-item .ndl-form-item-label.ndl-label-before {
2162
+ flex-direction:row-reverse;
2163
+ }
2164
+ .ndl-form-item .ndl-form-item-wrapper{
2165
+ display:flex;
2166
+ width:100%;
2167
+ }
2168
+ .ndl-form-item .ndl-form-item-wrapper .ndl-form-item-optional {
2169
+ color:var(--theme-color-neutral-text-weaker);
2170
+ font-style:italic;
2171
+ margin-left:auto;
2172
+ }
2173
+ .ndl-form-item .ndl-form-item-wrapper .ndl-information-icon-small {
2174
+ margin-top:2px;
2175
+ margin-left:3px;
2176
+ width:16px;
2177
+ height:16px;
2178
+ color:var(--theme-color-neutral-text-weak);
2179
+ }
2180
+ .ndl-form-item .ndl-form-item-wrapper .ndl-information-icon-large {
2181
+ margin-top:2px;
2182
+ margin-left:3px;
2183
+ width:20px;
2184
+ height:20px;
2185
+ color:var(--theme-color-neutral-text-weak);
2186
+ }
2187
+ .ndl-form-item.ndl-type-text .ndl-form-item-label {
2188
+ flex-direction:column-reverse;
2189
+ align-items:flex-start;
2190
+ row-gap:5px;
2191
+ }
2192
+ .ndl-form-item.ndl-type-text .ndl-form-item-no-label {
2193
+ row-gap:0px;
2194
+ }
2195
+ .ndl-form-item.ndl-type-text:not(.ndl-disabled) .ndl-form-label-text {
2196
+ color:var(--theme-color-neutral-text-weak);
2197
+ }
2198
+ .ndl-form-item.ndl-disabled .ndl-form-label-text {
2199
+ color:var(--theme-color-neutral-text-weakest);
2200
+ }
2201
+ .ndl-form-item.ndl-disabled .ndl-form-item-label {
2202
+ cursor:not-allowed;
2203
+ color:var(--theme-color-neutral-text-weakest);
2204
+ }
2205
+ .ndl-form-item .ndl-form-msg {
2206
+ margin-top:4px;
2207
+ display:flex;
2208
+ flex-direction:row;
2209
+ align-items:center;
2210
+ gap:4px;
2211
+ font-size:0.75rem;
2212
+ line-height:1rem;
2213
+ color:var(--theme-color-neutral-text-weak);
2214
+ }
2215
+ .ndl-form-item .ndl-form-msg .ndl-error-text{
2216
+ display:inline-block;
2217
+ }
2218
+ .ndl-form-item.ndl-has-error input:not(:active):not(:focus) {
2219
+ outline-style:solid;
2220
+ outline-width:2px;
2221
+ outline-offset:-2px;
2222
+ outline-color:var(--theme-color-danger-border-strong);
2223
+ }
2224
+ .ndl-form-item.ndl-has-error .ndl-form-msg {
2225
+ color:var(--theme-color-danger-text);
2226
+ }
2227
+ .ndl-form-item.ndl-has-leading-icon input[type='text'],
2228
+ .ndl-form-item.ndl-has-leading-icon input[type='email'],
2229
+ .ndl-form-item.ndl-has-leading-icon input[type='password'],
2230
+ .ndl-form-item.ndl-has-leading-icon input[type='number'],
2231
+ .ndl-form-item.ndl-has-leading-icon input[type='url'] {
2232
+ padding-left:36px;
2233
+ }
2234
+ .ndl-form-item.ndl-has-trailing-icon input[type='text'],
2235
+ .ndl-form-item.ndl-has-trailing-icon input[type='email'],
2236
+ .ndl-form-item.ndl-has-trailing-icon input[type='password'],
2237
+ .ndl-form-item.ndl-has-trailing-icon input[type='number'],
2238
+ .ndl-form-item.ndl-has-trailing-icon input[type='url'] {
2239
+ padding-right:36px;
2240
+ }
2241
+ .ndl-form-item.ndl-has-icon .ndl-error-icon {
2242
+ width:20px;
2243
+ height:20px;
2244
+ color:var(--theme-color-danger-text);
2245
+ }
2246
+ .ndl-form-item.ndl-has-icon .ndl-icon {
2247
+ color:var(--theme-color-neutral-text-weak);
2248
+ }
2249
+ .ndl-form-item.ndl-has-icon.ndl-right-icon {
2250
+ position:absolute;
2251
+ cursor:pointer;
2252
+ }
2253
+ .ndl-form-item.ndl-has-icon.ndl-disabled .ndl-right-icon {
2254
+ cursor:not-allowed;
2255
+ }
2256
+ .ndl-form-item.ndl-has-icon.ndl-disabled .ndl-icon {
2257
+ cursor:not-allowed;
2258
+ color:var(--theme-color-neutral-text-weakest);
2259
+ }
2260
+ .ndl-form-item.ndl-large input[type='text'],
2261
+ .ndl-form-item.ndl-large input[type='email'],
2262
+ .ndl-form-item.ndl-large input[type='password'],
2263
+ .ndl-form-item.ndl-large input[type='number'],
2264
+ .ndl-form-item.ndl-large input[type='url'] {
2265
+ height:48px;
2266
+ padding-top:12px;
2267
+ padding-bottom:12px;
2268
+ font:var(--typography-body-large);
2269
+ letter-spacing:var(--typography-body-large-letter-spacing);
2270
+ font-family:var(--typography-body-large-font-family), sans-serif;
2271
+ }
2272
+ .ndl-form-item.ndl-large input[type='text']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-large input[type='email']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-large input[type='password']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-large input[type='number']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-large input[type='url']:-moz-read-only:not(:disabled) {
2273
+ height:24px;
2274
+ }
2275
+ .ndl-form-item.ndl-large input[type='text']:read-only:not(:disabled), .ndl-form-item.ndl-large input[type='email']:read-only:not(:disabled), .ndl-form-item.ndl-large input[type='password']:read-only:not(:disabled), .ndl-form-item.ndl-large input[type='number']:read-only:not(:disabled), .ndl-form-item.ndl-large input[type='url']:read-only:not(:disabled) {
2276
+ height:24px;
2277
+ }
2278
+ .ndl-form-item.ndl-large .ndl-form-item-label{
2279
+ font:var(--typography-body-large);
2280
+ letter-spacing:var(--typography-body-large-letter-spacing);
2281
+ font-family:var(--typography-body-large-font-family), sans-serif;
2282
+ }
2283
+ .ndl-form-item.ndl-large .ndl-form-msg{
2284
+ font:var(--typography-body-medium);
2285
+ letter-spacing:var(--typography-body-medium-letter-spacing);
2286
+ font-family:var(--typography-body-medium-font-family), sans-serif;
2287
+ }
2288
+ .ndl-form-item.ndl-large.ndl-has-trailing-icon input[type='text'],
2289
+ .ndl-form-item.ndl-large.ndl-has-trailing-icon input[type='email'],
2290
+ .ndl-form-item.ndl-large.ndl-has-trailing-icon input[type='password'],
2291
+ .ndl-form-item.ndl-large.ndl-has-trailing-icon input[type='number'],
2292
+ .ndl-form-item.ndl-large.ndl-has-trailing-icon input[type='url']{
2293
+ padding-right:42px;
2294
+ }
2295
+ .ndl-form-item.ndl-large.ndl-has-leading-icon input[type='text'],
2296
+ .ndl-form-item.ndl-large.ndl-has-leading-icon input[type='email'],
2297
+ .ndl-form-item.ndl-large.ndl-has-leading-icon input[type='password'],
2298
+ .ndl-form-item.ndl-large.ndl-has-leading-icon input[type='number'],
2299
+ .ndl-form-item.ndl-large.ndl-has-leading-icon input[type='url']{
2300
+ padding-left:42px;
2301
+ }
2302
+ .ndl-form-item.ndl-large.ndl-has-icon .ndl-icon {
2303
+ position:absolute;
2304
+ width:24px;
2305
+ height:24px;
2306
+ }
2307
+ .ndl-form-item.ndl-large.ndl-has-icon .ndl-icon.ndl-left-icon{
2308
+ top:calc(50% - 12px);
2309
+ left:16px;
2310
+ }
2311
+ .ndl-form-item.ndl-large.ndl-has-icon .ndl-right-icon{
2312
+ top:calc(50% - 12px);
2313
+ right:16px;
2314
+ }
2315
+ .ndl-form-item.ndl-medium input[type='text'],
2316
+ .ndl-form-item.ndl-medium input[type='email'],
2317
+ .ndl-form-item.ndl-medium input[type='password'],
2318
+ .ndl-form-item.ndl-medium input[type='number'],
2319
+ .ndl-form-item.ndl-medium input[type='url'] {
2320
+ height:36px;
2321
+ padding-top:8px;
2322
+ padding-bottom:8px;
2323
+ font:var(--typography-body-medium);
2324
+ letter-spacing:var(--typography-body-medium-letter-spacing);
2325
+ font-family:var(--typography-body-medium-font-family), sans-serif;
2326
+ }
2327
+ .ndl-form-item.ndl-medium input[type='text']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-medium input[type='email']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-medium input[type='password']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-medium input[type='number']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-medium input[type='url']:-moz-read-only:not(:disabled) {
2328
+ height:20px;
2329
+ }
2330
+ .ndl-form-item.ndl-medium input[type='text']:read-only:not(:disabled), .ndl-form-item.ndl-medium input[type='email']:read-only:not(:disabled), .ndl-form-item.ndl-medium input[type='password']:read-only:not(:disabled), .ndl-form-item.ndl-medium input[type='number']:read-only:not(:disabled), .ndl-form-item.ndl-medium input[type='url']:read-only:not(:disabled) {
2331
+ height:20px;
2332
+ }
2333
+ .ndl-form-item.ndl-medium .ndl-form-item-label{
2334
+ font:var(--typography-body-medium);
2335
+ letter-spacing:var(--typography-body-medium-letter-spacing);
2336
+ font-family:var(--typography-body-medium-font-family), sans-serif;
2337
+ }
2338
+ .ndl-form-item.ndl-medium.ndl-has-leading-icon input[type='text'],
2339
+ .ndl-form-item.ndl-medium.ndl-has-leading-icon input[type='email'],
2340
+ .ndl-form-item.ndl-medium.ndl-has-leading-icon input[type='password'],
2341
+ .ndl-form-item.ndl-medium.ndl-has-leading-icon input[type='number'],
2342
+ .ndl-form-item.ndl-medium.ndl-has-leading-icon input[type='url'] {
2343
+ padding-left:36px;
2344
+ }
2345
+ .ndl-form-item.ndl-medium.ndl-has-icon .ndl-icon {
2346
+ position:absolute;
2347
+ width:20px;
2348
+ height:20px;
2349
+ }
2350
+ .ndl-form-item.ndl-medium.ndl-has-icon .ndl-icon.ndl-left-icon{
2351
+ top:calc(50% - 10px);
2352
+ left:12px;
2353
+ }
2354
+ .ndl-form-item.ndl-medium.ndl-has-icon .ndl-right-icon{
2355
+ top:calc(50% - 10px);
2356
+ right:12px;
2357
+ }
2358
+ .ndl-form-item.ndl-small{
2359
+ line-height:1.25rem;
2360
+ }
2361
+ .ndl-form-item.ndl-small input[type='text'],
2362
+ .ndl-form-item.ndl-small input[type='email'],
2363
+ .ndl-form-item.ndl-small input[type='password'],
2364
+ .ndl-form-item.ndl-small input[type='number'],
2365
+ .ndl-form-item.ndl-small input[type='url'] {
2366
+ height:24px;
2367
+ padding-top:2px;
2368
+ padding-bottom:2px;
2369
+ padding-left:8px;
2370
+ padding-right:8px;
2371
+ font:var(--typography-body-medium);
2372
+ letter-spacing:var(--typography-body-medium-letter-spacing);
2373
+ font-family:var(--typography-body-medium-font-family), sans-serif;
2374
+ }
2375
+ .ndl-form-item.ndl-small input[type='text']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-small input[type='email']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-small input[type='password']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-small input[type='number']:-moz-read-only:not(:disabled), .ndl-form-item.ndl-small input[type='url']:-moz-read-only:not(:disabled) {
2376
+ height:24px;
2377
+ }
2378
+ .ndl-form-item.ndl-small input[type='text']:read-only:not(:disabled), .ndl-form-item.ndl-small input[type='email']:read-only:not(:disabled), .ndl-form-item.ndl-small input[type='password']:read-only:not(:disabled), .ndl-form-item.ndl-small input[type='number']:read-only:not(:disabled), .ndl-form-item.ndl-small input[type='url']:read-only:not(:disabled) {
2379
+ height:24px;
2380
+ }
2381
+ .ndl-form-item.ndl-small .ndl-form-item-label{
2382
+ font:var(--typography-body-medium);
2383
+ letter-spacing:var(--typography-body-medium-letter-spacing);
2384
+ font-family:var(--typography-body-medium-font-family), sans-serif;
2385
+ }
2386
+ .ndl-form-item.ndl-small.ndl-has-leading-icon input[type='text'],
2387
+ .ndl-form-item.ndl-small.ndl-has-leading-icon input[type='email'],
2388
+ .ndl-form-item.ndl-small.ndl-has-leading-icon input[type='password'],
2389
+ .ndl-form-item.ndl-small.ndl-has-leading-icon input[type='number'],
2390
+ .ndl-form-item.ndl-small.ndl-has-leading-icon input[type='url'] {
2391
+ padding-left:28px;
2392
+ }
2393
+ .ndl-form-item.ndl-small.ndl-has-trailing-icon input[type='text'],
2394
+ .ndl-form-item.ndl-small.ndl-has-trailing-icon input[type='email'],
2395
+ .ndl-form-item.ndl-small.ndl-has-trailing-icon input[type='password'],
2396
+ .ndl-form-item.ndl-small.ndl-has-trailing-icon input[type='number'],
2397
+ .ndl-form-item.ndl-small.ndl-has-trailing-icon input[type='url'] {
2398
+ padding-right:28px;
2399
+ }
2400
+ .ndl-form-item.ndl-small.ndl-has-icon .ndl-icon {
2401
+ position:absolute;
2402
+ width:16px;
2403
+ height:16px;
2404
+ }
2405
+ .ndl-form-item.ndl-small.ndl-has-icon .ndl-icon.ndl-left-icon{
2406
+ top:calc(50% - 8px);
2407
+ left:8px;
2408
+ }
2409
+ .ndl-form-item.ndl-small.ndl-has-icon .ndl-right-icon{
2410
+ top:calc(50% - 8px);
2411
+ right:8px;
2412
+ }
2149
2413
  .ndl-form-label-row{
2150
2414
  margin-bottom:4px;
2151
2415
  display:flex;
@@ -4162,6 +4426,33 @@ a.ndl-btn {
4162
4426
  cursor:not-allowed;
4163
4427
  color:var(--theme-color-neutral-text-weakest);
4164
4428
  }
4429
+ .ndl-select.ndl-small .ndl-error-icon {
4430
+ width:16px;
4431
+ height:16px;
4432
+ }
4433
+ .ndl-select.ndl-medium .ndl-error-icon {
4434
+ width:20px;
4435
+ height:20px;
4436
+ }
4437
+ .ndl-select.ndl-large .ndl-error-icon {
4438
+ width:24px;
4439
+ height:24px;
4440
+ }
4441
+ .ndl-select.ndl-large .ndl-sub-text {
4442
+ color:var(--theme-color-neutral-text-weak);
4443
+ }
4444
+ .ndl-select .ndl-sub-text {
4445
+ color:var(--theme-color-neutral-text-weaker);
4446
+ font:var(--typography-body-small);
4447
+ letter-spacing:var(--typography-body-small-letter-spacing);
4448
+ font-family:var(--typography-body-small-font-family), sans-serif;
4449
+ }
4450
+ .ndl-select .ndl-error-text {
4451
+ color:var(--theme-color-danger-text);
4452
+ }
4453
+ .ndl-select .ndl-error-icon {
4454
+ color:var(--theme-color-danger-icon);
4455
+ }
4165
4456
  .ndl-select-input {
4166
4457
  margin:0px;
4167
4458
  box-sizing:border-box;
@@ -4439,6 +4730,9 @@ a.ndl-btn {
4439
4730
  .ndl-select-option.ndl-is-multi:hover {
4440
4731
  background-color:var(--theme-color-neutral-hover);
4441
4732
  }
4733
+ .ndl-select-option.ndl-form-item {
4734
+ margin-top:0px;
4735
+ }
4442
4736
  .ndl-select-option.ndl-focused {
4443
4737
  background-color:var(--theme-color-neutral-hover);
4444
4738
  }
@@ -5772,6 +6066,37 @@ a.ndl-cypher-editor .cm-editor .cm-button,a .ndl-codemirror-editor .cm-editor .c
5772
6066
  letter-spacing:var(--typography-body-medium-letter-spacing);
5773
6067
  font-family:var(--typography-body-medium-font-family), sans-serif;
5774
6068
  }
6069
+ .ndl-text-area.ndl-type-radio {
6070
+ display:flex;
6071
+ align-items:center;
6072
+ color:var(--theme-color-neutral-text-default);
6073
+ }
6074
+ .ndl-text-area .ndl-text-area-msg {
6075
+ margin-top:4px;
6076
+ display:flex;
6077
+ flex-direction:row;
6078
+ align-items:center;
6079
+ gap:4px;
6080
+ font-size:0.75rem;
6081
+ line-height:1rem;
6082
+ color:var(--theme-color-neutral-text-weaker);
6083
+ }
6084
+ .ndl-text-area .ndl-text-area-msg .ndl-error-text{
6085
+ display:inline-block;
6086
+ }
6087
+ .ndl-text-area.ndl-has-error .ndl-text-area-msg {
6088
+ color:var(--theme-color-danger-text);
6089
+ }
6090
+ .ndl-text-area.ndl-has-icon .ndl-error-icon {
6091
+ width:20px;
6092
+ height:20px;
6093
+ color:var(--theme-color-danger-text);
6094
+ }
6095
+ .ndl-text-area.ndl-large .ndl-text-area-msg{
6096
+ font:var(--typography-body-medium);
6097
+ letter-spacing:var(--typography-body-medium-letter-spacing);
6098
+ font-family:var(--typography-body-medium-font-family), sans-serif;
6099
+ }
5775
6100
  .ndl-status-indicator {
5776
6101
  display:inline-block;
5777
6102
  }
@@ -7275,6 +7600,67 @@ button.ndl-avatar:focus-visible {
7275
7600
  .ndl-text-input .ndl-small-spinner{
7276
7601
  margin:1px;
7277
7602
  }
7603
+ .ndl-text-input .ndl-form-item-label {
7604
+ display:block;
7605
+ width:-moz-fit-content;
7606
+ width:fit-content;
7607
+ line-height:1.25rem;
7608
+ }
7609
+ .ndl-text-input .ndl-form-item-label .ndl-label-text-wrapper {
7610
+ margin-bottom:4px;
7611
+ display:flex;
7612
+ }
7613
+ .ndl-text-input .ndl-form-item-label .ndl-label-text {
7614
+ color:var(--theme-color-neutral-text-weak);
7615
+ }
7616
+ .ndl-text-input .ndl-form-item-label .ndl-form-item-optional {
7617
+ margin-left:auto;
7618
+ font-style:italic;
7619
+ color:var(--theme-color-neutral-text-weaker);
7620
+ }
7621
+ .ndl-text-input .ndl-form-item-label .ndl-information-icon-small {
7622
+ margin-top:2px;
7623
+ margin-left:3px;
7624
+ width:16px;
7625
+ height:16px;
7626
+ color:var(--theme-color-neutral-text-weak);
7627
+ }
7628
+ .ndl-text-input .ndl-form-item-label .ndl-information-icon-large {
7629
+ margin-top:2px;
7630
+ margin-left:3px;
7631
+ width:20px;
7632
+ height:20px;
7633
+ color:var(--theme-color-neutral-text-weak);
7634
+ }
7635
+ .ndl-text-input .ndl-form-message:has(> .ndl-error-icon, > .ndl-error-text) {
7636
+ margin-top:4px;
7637
+ display:flex;
7638
+ flex-direction:row;
7639
+ gap:4px;
7640
+ font-size:0.75rem;
7641
+ line-height:1rem;
7642
+ color:var(--theme-color-neutral-text-weak);
7643
+ }
7644
+ .ndl-text-input .ndl-form-message:has(> .ndl-error-icon, > .ndl-error-text) .ndl-error-icon {
7645
+ width:20px;
7646
+ height:20px;
7647
+ color:var(--theme-color-danger-text);
7648
+ }
7649
+ .ndl-text-input .ndl-form-message:has(> .ndl-error-icon, > .ndl-error-text) .ndl-error-text {
7650
+ color:var(--theme-color-danger-text);
7651
+ }
7652
+ .ndl-text-input.ndl-disabled .ndl-label-text {
7653
+ color:var(--theme-color-neutral-text-weakest);
7654
+ }
7655
+ .ndl-text-input .ndl-form-item-label.ndl-fluid {
7656
+ display:flex;
7657
+ width:100%;
7658
+ flex-direction:column;
7659
+ }
7660
+ .ndl-text-input .ndl-form-item-label.ndl-fluid .ndl-input-wrapper {
7661
+ display:flex;
7662
+ width:100%;
7663
+ }
7278
7664
  .ndl-tooltip-content {
7279
7665
  z-index:50;
7280
7666
  font:var(--typography-body-medium);
@@ -1,4 +1,4 @@
1
- /**
1
+ /*!
2
2
  *
3
3
  * Copyright (c) "Neo4j"
4
4
  * Neo4j Sweden AB [http://neo4j.com]
@@ -1,4 +1,4 @@
1
- /**
1
+ /*!
2
2
  *
3
3
  * Copyright (c) "Neo4j"
4
4
  * Neo4j Sweden AB [http://neo4j.com]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neo4j-ndl/base",
3
- "version": "4.22.2",
3
+ "version": "4.22.3",
4
4
  "description": "Neo4j base package for the design system",
5
5
  "author": "Neo4j Inc.",
6
6
  "homepage": "https://www.neo4j.design",