@scania/tegel-lite 1.7.0-table-vars-beta.2 → 1.8.0-dd-select-all-beta.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 (5) hide show
  1. package/dist/components.css +274 -398
  2. package/dist/tl-datetime.css +222 -247
  3. package/dist/tl-dropdown.css +51 -0
  4. package/dist/tl-text-field.css +1 -1
  5. package/package.json +2 -2
package/dist/components.css CHANGED
@@ -2283,128 +2283,174 @@
2283
2283
  padding: 0 6px;
2284
2284
  }
2285
2285
 
2286
+ /**
2287
+ * Do not edit directly, this file was auto-generated.
2288
+ */
2289
+ :root,
2290
+ .tds-mode-light,
2291
+ .scania .tds-mode-light,
2292
+ .scania.tds-mode-light,
2293
+ .scania .tl-mode-light,
2294
+ .scania.tl-mode-light {
2295
+ --component--input-background-primary: var(--color-background-layer-01);
2296
+ --component--input-background-secondary: var(--color-background-layer-02);
2297
+ --component--input-border-default: var(--color-border-soft);
2298
+ --component--input-border-hover: var(--color-border-strong);
2299
+ --component--input-border-success-default: var(--color-border-strong);
2300
+ --component--input-border-error-default: var(--color-system-danger-default);
2301
+ --component--input-border-radius-default: var(--scania-unit-4);
2302
+ --component--input-border-radius-none: var(--scania-unit-0);
2303
+ --component--input-border-radius-top-left: var(--component--input-border-radius-default);
2304
+ --component--input-border-radius-top-right: var(--component--input-border-radius-default);
2305
+ --component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
2306
+ --component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
2307
+ --component--input-border-width-default: var(--scania-unit-1);
2308
+ --component--input-border-width-none: var(--scania-unit-0);
2309
+ --component--input-border-width-top: var(--component--input-border-width-none);
2310
+ --component--input-border-width-right: var(--component--input-border-width-none);
2311
+ --component--input-border-width-bottom: var(--component--input-border-width-default);
2312
+ --component--input-border-width-left: var(--component--input-border-width-none);
2313
+ --component--input-icon-prefix-default: var(--color-text-defined);
2314
+ --component--input-icon-suffix-default: var(--color-text-defined);
2315
+ --component--input-icon-error-default: var(--color-system-danger-default);
2316
+ --component--input-icon-control-default: var(--color-icon-strong);
2317
+ --component--input-icon-control-hover: var(--component--input-icon-control-default);
2318
+ --component--input-opacity-disabled: var(--scania-opacity-25);
2319
+ --component--input-text-counter-default: var(--color-text-defined);
2320
+ --component--input-text-label-default: var(--color-text-strong);
2321
+ --component--input-text-helper-default: var(--color-text-defined);
2322
+ --component--input-text-placeholder-default: var(--color-text-soft);
2323
+ --component--input-text-value-default: var(--color-text-strong);
2324
+ --component--input-text-error-default: var(--color-system-danger-default);
2325
+ }
2326
+
2327
+ .traton .tds-mode-light,
2328
+ .traton.tds-mode-light,
2329
+ .traton .tl-mode-light,
2330
+ .traton.tl-mode-light {
2331
+ --component--input-background-primary: var(--color-background-layer-01);
2332
+ --component--input-background-secondary: var(--color-background-layer-02);
2333
+ --component--input-border-default: var(--color-border-soft);
2334
+ --component--input-border-hover: var(--color-border-strong);
2335
+ --component--input-border-success-default: var(--color-border-strong);
2336
+ --component--input-border-error-default: var(--color-system-danger-default);
2337
+ --component--input-border-radius-default: var(--traton-unit-4);
2338
+ --component--input-border-radius-none: var(--traton-unit-0);
2339
+ --component--input-border-radius-top-left: var(--component--input-border-radius-default);
2340
+ --component--input-border-radius-top-right: var(--component--input-border-radius-default);
2341
+ --component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
2342
+ --component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
2343
+ --component--input-border-width-default: var(--traton-unit-1);
2344
+ --component--input-border-width-none: var(--traton-unit-0);
2345
+ --component--input-border-width-top: var(--component--input-border-width-default);
2346
+ --component--input-border-width-right: var(--component--input-border-width-default);
2347
+ --component--input-border-width-bottom: var(--component--input-border-width-default);
2348
+ --component--input-border-width-left: var(--component--input-border-width-default);
2349
+ --component--input-icon-prefix-default: var(--color-text-defined);
2350
+ --component--input-icon-suffix-default: var(--color-text-defined);
2351
+ --component--input-icon-error-default: var(--color-system-danger-default);
2352
+ --component--input-icon-control-default: var(--color-icon-subtle);
2353
+ --component--input-icon-control-hover: var(--component--input-icon-control-default);
2354
+ --component--input-opacity-disabled: var(--traton-opacity-25);
2355
+ --component--input-text-counter-default: var(--color-text-defined);
2356
+ --component--input-text-label-default: var(--color-text-strong);
2357
+ --component--input-text-helper-default: var(--color-text-defined);
2358
+ --component--input-text-placeholder-default: var(--color-text-subtle);
2359
+ --component--input-text-value-default: var(--color-text-strong);
2360
+ --component--input-text-error-default: var(--color-system-danger-default);
2361
+ }
2362
+
2363
+ .tds-mode-dark,
2364
+ .scania .tds-mode-dark,
2365
+ .scania.tds-mode-dark,
2366
+ .scania .tl-mode-dark,
2367
+ .scania.tl-mode-dark {
2368
+ --component--input-background-primary: var(--color-background-layer-01);
2369
+ --component--input-background-secondary: var(--color-background-layer-02);
2370
+ --component--input-border-default: var(--color-border-soft);
2371
+ --component--input-border-hover: var(--color-border-strong);
2372
+ --component--input-border-success-default: var(--color-border-strong);
2373
+ --component--input-border-error-default: var(--color-system-danger-default);
2374
+ --component--input-border-radius-default: var(--scania-unit-4);
2375
+ --component--input-border-radius-none: var(--scania-unit-0);
2376
+ --component--input-border-radius-top-left: var(--component--input-border-radius-default);
2377
+ --component--input-border-radius-top-right: var(--component--input-border-radius-default);
2378
+ --component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
2379
+ --component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
2380
+ --component--input-border-width-default: var(--scania-unit-1);
2381
+ --component--input-border-width-none: var(--scania-unit-0);
2382
+ --component--input-border-width-top: var(--component--input-border-width-none);
2383
+ --component--input-border-width-right: var(--component--input-border-width-none);
2384
+ --component--input-border-width-bottom: var(--component--input-border-width-default);
2385
+ --component--input-border-width-left: var(--component--input-border-width-none);
2386
+ --component--input-icon-prefix-default: var(--color-text-defined);
2387
+ --component--input-icon-suffix-default: var(--color-text-defined);
2388
+ --component--input-icon-error-default: var(--color-system-danger-default);
2389
+ --component--input-icon-control-default: var(--color-icon-strong);
2390
+ --component--input-icon-control-hover: var(--component--input-icon-control-default);
2391
+ --component--input-opacity-disabled: var(--scania-opacity-25);
2392
+ --component--input-text-counter-default: var(--color-text-defined);
2393
+ --component--input-text-label-default: var(--color-text-strong);
2394
+ --component--input-text-helper-default: var(--color-text-defined);
2395
+ --component--input-text-placeholder-default: var(--color-text-soft);
2396
+ --component--input-text-value-default: var(--color-text-strong);
2397
+ --component--input-text-error-default: var(--color-system-danger-default);
2398
+ }
2399
+
2400
+ .traton .tds-mode-dark,
2401
+ .traton.tds-mode-dark,
2402
+ .traton .tl-mode-dark,
2403
+ .traton.tl-mode-dark {
2404
+ --component--input-background-primary: var(--color-background-layer-01);
2405
+ --component--input-background-secondary: var(--color-background-layer-02);
2406
+ --component--input-border-default: var(--color-border-soft);
2407
+ --component--input-border-hover: var(--color-border-strong);
2408
+ --component--input-border-success-default: var(--color-border-strong);
2409
+ --component--input-border-error-default: var(--color-system-danger-default);
2410
+ --component--input-border-radius-default: var(--traton-unit-4);
2411
+ --component--input-border-radius-none: var(--traton-unit-0);
2412
+ --component--input-border-radius-top-left: var(--component--input-border-radius-default);
2413
+ --component--input-border-radius-top-right: var(--component--input-border-radius-default);
2414
+ --component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
2415
+ --component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
2416
+ --component--input-border-width-default: var(--traton-unit-1);
2417
+ --component--input-border-width-none: var(--traton-unit-0);
2418
+ --component--input-border-width-top: var(--component--input-border-width-default);
2419
+ --component--input-border-width-right: var(--component--input-border-width-default);
2420
+ --component--input-border-width-bottom: var(--component--input-border-width-default);
2421
+ --component--input-border-width-left: var(--component--input-border-width-default);
2422
+ --component--input-icon-prefix-default: var(--color-text-defined);
2423
+ --component--input-icon-suffix-default: var(--color-text-defined);
2424
+ --component--input-icon-error-default: var(--color-system-danger-default);
2425
+ --component--input-icon-control-default: var(--color-icon-subtle);
2426
+ --component--input-icon-control-hover: var(--component--input-icon-control-default);
2427
+ --component--input-opacity-disabled: var(--traton-opacity-25);
2428
+ --component--input-text-counter-default: var(--color-text-defined);
2429
+ --component--input-text-label-default: var(--color-text-strong);
2430
+ --component--input-text-helper-default: var(--color-text-defined);
2431
+ --component--input-text-placeholder-default: var(--color-text-subtle);
2432
+ --component--input-text-value-default: var(--color-text-strong);
2433
+ --component--input-text-error-default: var(--color-system-danger-default);
2434
+ }
2435
+
2286
2436
  .tl-datetime {
2287
- --datetime-background-primary: var(--color-background-layer-01);
2288
- --datetime-background-secondary: var(--color-background-layer-02);
2437
+ --datetime-background-primary: var(--component--input-background-primary);
2438
+ --datetime-background-secondary: var(--component--input-background-secondary);
2289
2439
  --datetime-background: var(--datetime-background-primary);
2290
- --datetime-text: var(--color-foreground-text-strong);
2291
- --datetime-icon: var(--color-foreground-icon-strong);
2292
- --datetime-placeholder: var(--color-text-subtle);
2293
- --datetime-background-disabled-primary: var(--color-background-layer-01);
2294
- --datetime-background-disabled-secondary: var(--color-background-layer-02);
2295
- --datetime-background-disabled: var(--datetime-background-disabled-primary);
2296
- --datetime-text-disabled: var(--color-foreground-text-disabled);
2297
- --datetime-placeholder-disabled: var(--color-text-disabled);
2298
- --datetime-label-disabled: var(--color-foreground-text-disabled);
2299
- --datetime-icon-disabled: var(--color-foreground-text-disabled);
2300
- --datetime-label: var(--color-foreground-text-strong);
2301
- --datetime-label-inside: var(--color-foreground-text-strong);
2302
- --datetime-placeholder-focus: var(--color-text-subtle);
2303
- --datetime-highlight-bar: var(--color-foreground-border-accent-focus);
2304
- --datetime-helper: var(--color-foreground-text-defined);
2305
- --datetime-helper-error: var(--color-system-danger-default);
2306
- --datetime-icon-error: var(--color-system-danger-default);
2440
+ --datetime-text: var(--component--input-text-value-default);
2441
+ --datetime-placeholder: var(--component--input-text-placeholder-default);
2442
+ --datetime-label: var(--component--input-text-label-default);
2443
+ --datetime-helper: var(--component--input-text-helper-default);
2444
+ --datetime-helper-error: var(--component--input-text-error-default);
2445
+ --datetime-icon: var(--component--input-icon-suffix-default);
2446
+ --datetime-icon-error: var(--component--input-text-error-default);
2447
+ --datetime-opacity-disabled: calc(var(--component--input-opacity-disabled) / 100);
2307
2448
  }
2308
2449
  .tl-datetime--primary {
2309
2450
  --datetime-background: var(--datetime-background-primary);
2310
- --datetime-background-disabled: var(--datetime-background-disabled-primary);
2311
2451
  }
2312
2452
  .tl-datetime--secondary {
2313
2453
  --datetime-background: var(--datetime-background-secondary);
2314
- --datetime-background-disabled: var(--datetime-background-disabled-secondary);
2315
- }
2316
-
2317
- .tl-datetime,
2318
- .scania .tl-datetime {
2319
- /* Datetime: units */
2320
- --datetime-border-radius: 4px 4px 0 0;
2321
- /* Datetime: box-shadow */
2322
- --datetime-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
2323
- --datetime-box-shadow-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
2324
- --datetime-box-shadow-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
2325
- --datetime-box-shadow-disabled: none;
2326
- --datetime-box-shadow-error: 0 -1px 0 0 var(--color-system-danger-default);
2327
- --datetime-box-shadow-error-hover: 0 -1px 0 0 var(--color-system-danger-default);
2328
- --datetime-box-shadow-error-focus: 0 -2px 0 0 var(--color-system-danger-default);
2329
- --datetime-highlight: var(--datetime-highlight-bar);
2330
- --datetime-highlight-error: var(--color-system-danger-default);
2331
- /* Datetime: border colors */
2332
- --datetime-border-color-left: transparent;
2333
- --datetime-border-color-right: transparent;
2334
- --datetime-border-color-bottom: var(--color-foreground-border-soft);
2335
- --datetime-border-color-top: transparent;
2336
- /* Datetime: border colors on hover */
2337
- --datetime-border-color-left-hover: transparent;
2338
- --datetime-border-color-right-hover: transparent;
2339
- --datetime-border-color-bottom-hover: var(--color-foreground-border-strong);
2340
- --datetime-border-color-top-hover: transparent;
2341
- /* Datetime: border colors on success */
2342
- --datetime-border-color-left-success: transparent;
2343
- --datetime-border-color-right-success: transparent;
2344
- --datetime-border-color-bottom-success: var(--color-foreground-border-strong);
2345
- --datetime-border-color-top-success: transparent;
2346
- /* Datetime: border colors on focus */
2347
- --datetime-border-color-left-focus: transparent;
2348
- --datetime-border-color-right-focus: transparent;
2349
- --datetime-border-color-bottom-focus: var(--color-foreground-border-strong);
2350
- --datetime-border-color-top-focus: transparent;
2351
- --datetime-outline-color-focus: none;
2352
- /* Datetime: border colors on error */
2353
- --datetime-border-color-left-error: transparent;
2354
- --datetime-border-color-right-error: transparent;
2355
- --datetime-border-color-bottom-error: var(--color-system-danger-default);
2356
- --datetime-border-color-top-error: transparent;
2357
- /* Datetime: bar colors */
2358
- --datetime-bar-color-focus: var(--color-foreground-border-accent-focus);
2359
- --datetime-bar-color-error: var(--color-system-danger-default);
2360
- /* Datetime: disabled */
2361
- --datetime-disabled-bottom-bar: transparent;
2362
- }
2363
-
2364
- .traton .tl-datetime {
2365
- /* Datetime: units */
2366
- --datetime-border-radius: 4px 4px 4px 4px;
2367
- /* Datetime: box-shadow */
2368
- --datetime-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
2369
- --datetime-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
2370
- --datetime-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
2371
- --datetime-box-shadow-disabled: none;
2372
- --datetime-box-shadow-error: 0 0 0 1px var(--color-system-danger-default);
2373
- --datetime-box-shadow-error-hover: 0 0 0 1px var(--color-system-danger-default);
2374
- --datetime-box-shadow-error-focus: 0 0 0 2px var(--color-system-danger-default);
2375
- --datetime-highlight: transparent;
2376
- --datetime-highlight-error: transparent;
2377
- /* Datetime: border colors */
2378
- --datetime-border-color-left: var(--color-foreground-border-soft);
2379
- --datetime-border-color-right: var(--color-foreground-border-soft);
2380
- --datetime-border-color-bottom: var(--color-foreground-border-soft);
2381
- --datetime-border-color-top: var(--color-foreground-border-soft);
2382
- /* Datetime: border colors on hover */
2383
- --datetime-border-color-left-hover: var(--color-foreground-border-strong);
2384
- --datetime-border-color-right-hover: var(--color-foreground-border-strong);
2385
- --datetime-border-color-bottom-hover: var(--color-foreground-border-strong);
2386
- --datetime-border-color-top-hover: var(--color-foreground-border-strong);
2387
- /* Datetime: border colors on success */
2388
- --datetime-border-color-left-success: var(--color-foreground-border-strong);
2389
- --datetime-border-color-right-success: var(--color-foreground-border-strong);
2390
- --datetime-border-color-bottom-success: var(--color-foreground-border-strong);
2391
- --datetime-border-color-top-success: var(--color-foreground-border-strong);
2392
- /* Datetime: border colors on focus */
2393
- --datetime-border-color-left-focus: var(--color-foreground-border-accent-focus);
2394
- --datetime-border-color-right-focus: var(--color-foreground-border-accent-focus);
2395
- --datetime-border-color-bottom-focus: var(--color-foreground-border-accent-focus);
2396
- --datetime-border-color-top-focus: var(--color-foreground-border-accent-focus);
2397
- --datetime-outline-color-focus: var(--color-foreground-border-accent-focus);
2398
- /* Datetime: border colors on error */
2399
- --datetime-border-color-left-error: var(--color-system-danger-default);
2400
- --datetime-border-color-right-error: var(--color-system-danger-default);
2401
- --datetime-border-color-bottom-error: var(--color-system-danger-default);
2402
- --datetime-border-color-top-error: var(--color-system-danger-default);
2403
- /* Datetime: bar colors */
2404
- --datetime-bar-color-focus: transparent;
2405
- --datetime-bar-color-error: transparent;
2406
- /* Datetime: disabled */
2407
- --datetime-disabled-bottom-bar: none;
2408
2454
  }
2409
2455
 
2410
2456
  .tl-datetime {
@@ -2429,25 +2475,36 @@
2429
2475
  .tl-datetime input[type=time]::-webkit-calendar-picker-indicator {
2430
2476
  opacity: 0;
2431
2477
  }
2478
+ @supports selector(input::-webkit-datetime-edit) {
2479
+ .tl-datetime:not(.tl-datetime--success, .tl-datetime--error) .tl-datetime__input-placeholder:not(:focus)::-webkit-datetime-edit, .tl-datetime:not(.tl-datetime--success, .tl-datetime--error) .tl-datetime__input-placeholder:not(:focus)::-webkit-datetime-edit-fields-wrapper {
2480
+ color: var(--datetime-placeholder);
2481
+ -webkit-text-fill-color: var(--datetime-placeholder);
2482
+ }
2483
+ .tl-datetime:not(.tl-datetime--success, .tl-datetime--error) .tl-datetime__input-placeholder:focus::-webkit-datetime-edit, .tl-datetime:not(.tl-datetime--success, .tl-datetime--error) .tl-datetime__input-placeholder:focus::-webkit-datetime-edit-fields-wrapper {
2484
+ color: var(--datetime-text);
2485
+ -webkit-text-fill-color: var(--datetime-text);
2486
+ }
2487
+ }
2488
+
2489
+ .tl-datetime:has(input:disabled) {
2490
+ opacity: var(--datetime-opacity-disabled);
2491
+ }
2432
2492
 
2433
2493
  .tl-datetime__label {
2434
- font-family: var(--detail-05-font-family);
2435
- font-size: var(--detail-05-font-size);
2436
- line-height: var(--detail-05-line-height);
2437
- font-weight: var(--detail-05-font-weight);
2438
- letter-spacing: var(--detail-05-letter-spacing);
2439
- text-transform: var(--detail-05-text-transform);
2494
+ font-family: var(--type-system-label-01-font-family);
2495
+ font-size: calc(var(--type-system-label-01-font-size) * 1px);
2496
+ line-height: calc(var(--type-system-label-01-line-height) * 1px);
2497
+ font-weight: var(--type-system-label-01-font-weight);
2498
+ letter-spacing: calc(var(--type-system-label-01-letter-spacing) * 1px);
2440
2499
  display: block;
2441
- margin-bottom: var(--tds-spacing-element-8);
2500
+ margin-bottom: var(--unit-4);
2442
2501
  color: var(--datetime-label);
2443
2502
  }
2444
2503
  .tl-datetime:has(input:disabled) .tl-datetime__label {
2445
- color: var(--datetime-label-disabled);
2446
2504
  cursor: not-allowed;
2447
2505
  }
2448
2506
 
2449
2507
  .tl-datetime__wrapper {
2450
- border-radius: var(--datetime-border-radius);
2451
2508
  position: relative;
2452
2509
  height: 56px;
2453
2510
  box-sizing: border-box;
@@ -2477,12 +2534,6 @@
2477
2534
  display: none;
2478
2535
  }
2479
2536
  }
2480
- .tl-datetime--error .tl-datetime__icon {
2481
- color: var(--datetime-icon-error);
2482
- }
2483
- .tl-datetime:has(input:disabled) .tl-datetime__icon {
2484
- color: var(--datetime-icon-disabled);
2485
- }
2486
2537
 
2487
2538
  .tl-datetime__input {
2488
2539
  box-sizing: border-box;
@@ -2491,49 +2542,48 @@
2491
2542
  box-sizing: border-box;
2492
2543
  }
2493
2544
  .tl-datetime__input {
2494
- font-family: var(--detail-02-font-family);
2495
- font-size: var(--detail-02-font-size);
2496
- line-height: var(--detail-02-line-height);
2497
- font-weight: var(--detail-02-font-weight);
2498
- letter-spacing: var(--detail-02-letter-spacing);
2499
- text-transform: var(--detail-02-text-transform);
2500
- border-radius: var(--datetime-border-radius);
2545
+ font-family: var(--type-system-body-01-font-family);
2546
+ font-size: calc(var(--type-system-body-01-font-size) * 1px);
2547
+ line-height: calc(var(--type-system-body-01-line-height) * 1px);
2548
+ font-weight: var(--type-system-body-01-font-weight);
2549
+ letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
2550
+ text-transform: var(--type-system-body-01-text-transform);
2551
+ border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
2552
+ border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
2553
+ border-style: solid;
2554
+ border-color: var(--component--input-border-default);
2501
2555
  width: 100%;
2502
2556
  box-sizing: border-box;
2503
2557
  margin: 0;
2504
- border: none;
2505
2558
  outline: none;
2506
2559
  height: 100%;
2507
2560
  color: var(--datetime-text);
2508
2561
  background-color: var(--datetime-background);
2509
2562
  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
2510
- box-shadow: inset var(--datetime-box-shadow);
2511
- transition: box-shadow 0.2s;
2512
2563
  }
2513
2564
  .tl-datetime__input:focus {
2514
- box-shadow: inset var(--datetime-box-shadow-focus);
2565
+ outline: 2px solid var(--component--focus-ring-color-strong);
2566
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
2567
+ outline-offset: 1px;
2568
+ z-index: 1;
2515
2569
  }
2516
- .tl-datetime:hover .tl-datetime__input:not(:focus, :disabled) {
2517
- box-shadow: inset var(--datetime-box-shadow-hover);
2570
+ .tl-datetime:hover .tl-datetime__input:not(:focus, :disabled) :not(.tl-datetime__input--error) {
2571
+ border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
2572
+ border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
2573
+ border-style: solid;
2574
+ border-color: var(--component--input-border-hover);
2518
2575
  }
2519
2576
  .tl-datetime--error .tl-datetime__input {
2520
- box-shadow: inset var(--datetime-box-shadow-error);
2521
- }
2522
- .tl-datetime--error .tl-datetime__input:focus {
2523
- box-shadow: inset var(--datetime-box-shadow-error-focus);
2524
- }
2525
- .tl-datetime--error:hover .tl-datetime__input:not(:focus, :disabled) {
2526
- box-shadow: inset var(--datetime-box-shadow-error-hover);
2527
- }
2528
- .tl-datetime--error .tl-datetime__input:disabled {
2529
- box-shadow: inset var(--datetime-box-shadow-error);
2530
- }
2531
- .tl-datetime__input::placeholder {
2532
- opacity: 1;
2533
- color: var(--datetime-placeholder);
2577
+ border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
2578
+ border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
2579
+ border-style: solid;
2580
+ border-color: var(--component--input-text-error-default);
2534
2581
  }
2535
- .tl-datetime__input:focus::placeholder {
2536
- color: var(--datetime-placeholder-focus);
2582
+ .tl-datetime--success .tl-datetime__input {
2583
+ border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
2584
+ border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
2585
+ border-style: solid;
2586
+ border-color: var(--component--input-border-success-default);
2537
2587
  }
2538
2588
  .tl-datetime__input {
2539
2589
  /*
@@ -2555,87 +2605,14 @@
2555
2605
  */
2556
2606
  }
2557
2607
  @supports selector(input::-webkit-datetime-edit) {
2558
- .tl-datetime__input:not(:focus)::-webkit-datetime-edit, .tl-datetime__input:not(:focus)::-webkit-datetime-edit-fields-wrapper {
2559
- color: var(--datetime-placeholder);
2560
- -webkit-text-fill-color: var(--datetime-placeholder);
2561
- }
2562
- .tl-datetime__input:focus::-webkit-datetime-edit, .tl-datetime__input:focus::-webkit-datetime-edit-fields-wrapper {
2563
- color: var(--datetime-placeholder-focus);
2564
- -webkit-text-fill-color: var(--datetime-placeholder-focus);
2608
+ .tl-datetime__input::-webkit-datetime-edit, .tl-datetime__input::-webkit-datetime-edit-fields-wrapper {
2609
+ color: var(--datetime-text);
2610
+ -webkit-text-fill-color: var(--datetime-text);
2565
2611
  }
2566
2612
  }
2567
- .tl-datetime__input {
2568
- /* WebKit datetime fields */
2569
- }
2570
- .tl-datetime__input::-webkit-datetime-edit-text {
2571
- -webkit-text-fill-color: var(--datetime-text);
2572
- }
2573
- .tl-datetime__input::-webkit-datetime-edit-month-field {
2574
- -webkit-text-fill-color: var(--datetime-text);
2575
- }
2576
- .tl-datetime__input::-webkit-datetime-edit-day-field {
2577
- -webkit-text-fill-color: var(--datetime-text);
2578
- }
2579
- .tl-datetime__input::-webkit-datetime-edit-year-field {
2580
- -webkit-text-fill-color: var(--datetime-text);
2581
- }
2582
- .tl-datetime__input::-webkit-datetime-edit-hour-field {
2583
- -webkit-text-fill-color: var(--datetime-text);
2584
- }
2585
- .tl-datetime__input::-webkit-datetime-edit-minute-field {
2586
- -webkit-text-fill-color: var(--datetime-text);
2587
- }
2588
- .tl-datetime__input::-webkit-datetime-edit-second-field {
2589
- -webkit-text-fill-color: var(--datetime-text);
2590
- }
2591
- .tl-datetime__input::-webkit-datetime-edit-millisecond-field {
2592
- -webkit-text-fill-color: var(--datetime-text);
2593
- }
2594
- .tl-datetime__input::-webkit-datetime-edit-meridiem-field {
2595
- -webkit-text-fill-color: var(--datetime-text);
2596
- }
2597
2613
  .tl-datetime__input:disabled {
2598
- background-color: var(--datetime-background-disabled);
2599
- color: var(--datetime-text-disabled);
2600
- box-shadow: inset var(--datetime-box-shadow-disabled);
2601
2614
  cursor: not-allowed;
2602
2615
  }
2603
- .tl-datetime__input:disabled::placeholder {
2604
- color: var(--datetime-placeholder-disabled);
2605
- }
2606
- .tl-datetime__input:disabled ~ .tl-datetime__label-inside {
2607
- color: var(--datetime-label-disabled);
2608
- }
2609
- .tl-datetime__input:disabled {
2610
- /* WebKit datetime fields - disabled state */
2611
- }
2612
- .tl-datetime__input:disabled::-webkit-datetime-edit-text {
2613
- -webkit-text-fill-color: var(--datetime-text-disabled);
2614
- }
2615
- .tl-datetime__input:disabled::-webkit-datetime-edit-month-field {
2616
- -webkit-text-fill-color: var(--datetime-text-disabled);
2617
- }
2618
- .tl-datetime__input:disabled::-webkit-datetime-edit-day-field {
2619
- -webkit-text-fill-color: var(--datetime-text-disabled);
2620
- }
2621
- .tl-datetime__input:disabled::-webkit-datetime-edit-year-field {
2622
- -webkit-text-fill-color: var(--datetime-text-disabled);
2623
- }
2624
- .tl-datetime__input:disabled::-webkit-datetime-edit-hour-field {
2625
- -webkit-text-fill-color: var(--datetime-text-disabled);
2626
- }
2627
- .tl-datetime__input:disabled::-webkit-datetime-edit-minute-field {
2628
- -webkit-text-fill-color: var(--datetime-text-disabled);
2629
- }
2630
- .tl-datetime__input:disabled::-webkit-datetime-edit-second-field {
2631
- -webkit-text-fill-color: var(--datetime-text-disabled);
2632
- }
2633
- .tl-datetime__input:disabled::-webkit-datetime-edit-millisecond-field {
2634
- -webkit-text-fill-color: var(--datetime-text-disabled);
2635
- }
2636
- .tl-datetime__input:disabled::-webkit-datetime-edit-meridiem-field {
2637
- -webkit-text-fill-color: var(--datetime-text-disabled);
2638
- }
2639
2616
  .tl-datetime--label-inside .tl-datetime__input {
2640
2617
  padding-top: var(--tds-spacing-element-24);
2641
2618
  padding-bottom: 15px;
@@ -2649,12 +2626,11 @@
2649
2626
  }
2650
2627
 
2651
2628
  .tl-datetime__label-inside {
2652
- font-family: var(--detail-07-font-family);
2653
- font-size: var(--detail-07-font-size);
2654
- line-height: var(--detail-07-line-height);
2655
- font-weight: var(--detail-07-font-weight);
2656
- letter-spacing: var(--detail-07-letter-spacing);
2657
- text-transform: var(--detail-07-text-transform);
2629
+ font-family: var(--type-system-label-02-font-family);
2630
+ font-size: calc(var(--type-system-label-02-font-size) * 1px);
2631
+ line-height: calc(var(--type-system-label-02-line-height) * 1px);
2632
+ font-weight: var(--type-system-label-02-font-weight);
2633
+ letter-spacing: calc(var(--type-system-label-02-letter-spacing) * 1px);
2658
2634
  position: absolute;
2659
2635
  pointer-events: none;
2660
2636
  color: var(--datetime-label-inside);
@@ -2672,12 +2648,11 @@
2672
2648
  }
2673
2649
 
2674
2650
  .tl-datetime__helper {
2675
- font-family: var(--detail-05-font-family);
2676
- font-size: var(--detail-05-font-size);
2677
- line-height: var(--detail-05-line-height);
2678
- font-weight: var(--detail-05-font-weight);
2679
- letter-spacing: var(--detail-05-letter-spacing);
2680
- text-transform: var(--detail-05-text-transform);
2651
+ font-family: var(--type-system-label-01-font-family);
2652
+ font-size: calc(var(--type-system-label-01-font-size) * 1px);
2653
+ line-height: calc(var(--type-system-label-01-line-height) * 1px);
2654
+ font-weight: var(--type-system-label-01-font-weight);
2655
+ letter-spacing: calc(var(--type-system-label-01-letter-spacing) * 1px);
2681
2656
  display: inline-flex;
2682
2657
  gap: 8px;
2683
2658
  padding-top: var(--tds-spacing-element-4);
@@ -2706,7 +2681,7 @@
2706
2681
  /* Disabled state (should not override error text/icon color) */
2707
2682
  }
2708
2683
  .tl-datetime:has(input:disabled):not(.tl-datetime--error) .tl-datetime__helper {
2709
- color: var(--color-foreground-text-disabled);
2684
+ color: var(--datetime-text);
2710
2685
  }
2711
2686
 
2712
2687
  /**
@@ -2887,156 +2862,6 @@
2887
2862
  --component-dropdown-opacity-disabled: var(--traton-opacity-25);
2888
2863
  }
2889
2864
 
2890
- /**
2891
- * Do not edit directly, this file was auto-generated.
2892
- */
2893
- :root,
2894
- .tds-mode-light,
2895
- .scania .tds-mode-light,
2896
- .scania.tds-mode-light,
2897
- .scania .tl-mode-light,
2898
- .scania.tl-mode-light {
2899
- --component--input-background-primary: var(--color-background-layer-01);
2900
- --component--input-background-secondary: var(--color-background-layer-02);
2901
- --component--input-border-default: var(--color-border-soft);
2902
- --component--input-border-hover: var(--color-border-strong);
2903
- --component--input-border-success-default: var(--color-border-strong);
2904
- --component--input-border-error-default: var(--color-system-danger-default);
2905
- --component--input-border-radius-default: var(--scania-unit-4);
2906
- --component--input-border-radius-none: var(--scania-unit-0);
2907
- --component--input-border-radius-top-left: var(--component--input-border-radius-default);
2908
- --component--input-border-radius-top-right: var(--component--input-border-radius-default);
2909
- --component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
2910
- --component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
2911
- --component--input-border-width-default: var(--scania-unit-1);
2912
- --component--input-border-width-none: var(--scania-unit-0);
2913
- --component--input-border-width-top: var(--component--input-border-width-none);
2914
- --component--input-border-width-right: var(--component--input-border-width-none);
2915
- --component--input-border-width-bottom: var(--component--input-border-width-default);
2916
- --component--input-border-width-left: var(--component--input-border-width-none);
2917
- --component--input-icon-prefix-default: var(--color-text-defined);
2918
- --component--input-icon-suffix-default: var(--color-text-defined);
2919
- --component--input-icon-error-default: var(--color-system-danger-default);
2920
- --component--input-icon-control-default: var(--color-icon-strong);
2921
- --component--input-icon-control-hover: var(--component--input-icon-control-default);
2922
- --component--input-opacity-disabled: var(--scania-opacity-25);
2923
- --component--input-text-counter-default: var(--color-text-defined);
2924
- --component--input-text-label-default: var(--color-text-strong);
2925
- --component--input-text-helper-default: var(--color-text-defined);
2926
- --component--input-text-placeholder-default: var(--color-text-soft);
2927
- --component--input-text-value-default: var(--color-text-strong);
2928
- --component--input-text-error-default: var(--color-system-danger-default);
2929
- }
2930
-
2931
- .traton .tds-mode-light,
2932
- .traton.tds-mode-light,
2933
- .traton .tl-mode-light,
2934
- .traton.tl-mode-light {
2935
- --component--input-background-primary: var(--color-background-layer-01);
2936
- --component--input-background-secondary: var(--color-background-layer-02);
2937
- --component--input-border-default: var(--color-border-soft);
2938
- --component--input-border-hover: var(--color-border-strong);
2939
- --component--input-border-success-default: var(--color-border-strong);
2940
- --component--input-border-error-default: var(--color-system-danger-default);
2941
- --component--input-border-radius-default: var(--traton-unit-4);
2942
- --component--input-border-radius-none: var(--traton-unit-0);
2943
- --component--input-border-radius-top-left: var(--component--input-border-radius-default);
2944
- --component--input-border-radius-top-right: var(--component--input-border-radius-default);
2945
- --component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
2946
- --component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
2947
- --component--input-border-width-default: var(--traton-unit-1);
2948
- --component--input-border-width-none: var(--traton-unit-0);
2949
- --component--input-border-width-top: var(--component--input-border-width-default);
2950
- --component--input-border-width-right: var(--component--input-border-width-default);
2951
- --component--input-border-width-bottom: var(--component--input-border-width-default);
2952
- --component--input-border-width-left: var(--component--input-border-width-default);
2953
- --component--input-icon-prefix-default: var(--color-text-defined);
2954
- --component--input-icon-suffix-default: var(--color-text-defined);
2955
- --component--input-icon-error-default: var(--color-system-danger-default);
2956
- --component--input-icon-control-default: var(--color-icon-subtle);
2957
- --component--input-icon-control-hover: var(--component--input-icon-control-default);
2958
- --component--input-opacity-disabled: var(--traton-opacity-25);
2959
- --component--input-text-counter-default: var(--color-text-defined);
2960
- --component--input-text-label-default: var(--color-text-strong);
2961
- --component--input-text-helper-default: var(--color-text-defined);
2962
- --component--input-text-placeholder-default: var(--color-text-subtle);
2963
- --component--input-text-value-default: var(--color-text-strong);
2964
- --component--input-text-error-default: var(--color-system-danger-default);
2965
- }
2966
-
2967
- .tds-mode-dark,
2968
- .scania .tds-mode-dark,
2969
- .scania.tds-mode-dark,
2970
- .scania .tl-mode-dark,
2971
- .scania.tl-mode-dark {
2972
- --component--input-background-primary: var(--color-background-layer-01);
2973
- --component--input-background-secondary: var(--color-background-layer-02);
2974
- --component--input-border-default: var(--color-border-soft);
2975
- --component--input-border-hover: var(--color-border-strong);
2976
- --component--input-border-success-default: var(--color-border-strong);
2977
- --component--input-border-error-default: var(--color-system-danger-default);
2978
- --component--input-border-radius-default: var(--scania-unit-4);
2979
- --component--input-border-radius-none: var(--scania-unit-0);
2980
- --component--input-border-radius-top-left: var(--component--input-border-radius-default);
2981
- --component--input-border-radius-top-right: var(--component--input-border-radius-default);
2982
- --component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
2983
- --component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
2984
- --component--input-border-width-default: var(--scania-unit-1);
2985
- --component--input-border-width-none: var(--scania-unit-0);
2986
- --component--input-border-width-top: var(--component--input-border-width-none);
2987
- --component--input-border-width-right: var(--component--input-border-width-none);
2988
- --component--input-border-width-bottom: var(--component--input-border-width-default);
2989
- --component--input-border-width-left: var(--component--input-border-width-none);
2990
- --component--input-icon-prefix-default: var(--color-text-defined);
2991
- --component--input-icon-suffix-default: var(--color-text-defined);
2992
- --component--input-icon-error-default: var(--color-system-danger-default);
2993
- --component--input-icon-control-default: var(--color-icon-strong);
2994
- --component--input-icon-control-hover: var(--component--input-icon-control-default);
2995
- --component--input-opacity-disabled: var(--scania-opacity-25);
2996
- --component--input-text-counter-default: var(--color-text-defined);
2997
- --component--input-text-label-default: var(--color-text-strong);
2998
- --component--input-text-helper-default: var(--color-text-defined);
2999
- --component--input-text-placeholder-default: var(--color-text-soft);
3000
- --component--input-text-value-default: var(--color-text-strong);
3001
- --component--input-text-error-default: var(--color-system-danger-default);
3002
- }
3003
-
3004
- .traton .tds-mode-dark,
3005
- .traton.tds-mode-dark,
3006
- .traton .tl-mode-dark,
3007
- .traton.tl-mode-dark {
3008
- --component--input-background-primary: var(--color-background-layer-01);
3009
- --component--input-background-secondary: var(--color-background-layer-02);
3010
- --component--input-border-default: var(--color-border-soft);
3011
- --component--input-border-hover: var(--color-border-strong);
3012
- --component--input-border-success-default: var(--color-border-strong);
3013
- --component--input-border-error-default: var(--color-system-danger-default);
3014
- --component--input-border-radius-default: var(--traton-unit-4);
3015
- --component--input-border-radius-none: var(--traton-unit-0);
3016
- --component--input-border-radius-top-left: var(--component--input-border-radius-default);
3017
- --component--input-border-radius-top-right: var(--component--input-border-radius-default);
3018
- --component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
3019
- --component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
3020
- --component--input-border-width-default: var(--traton-unit-1);
3021
- --component--input-border-width-none: var(--traton-unit-0);
3022
- --component--input-border-width-top: var(--component--input-border-width-default);
3023
- --component--input-border-width-right: var(--component--input-border-width-default);
3024
- --component--input-border-width-bottom: var(--component--input-border-width-default);
3025
- --component--input-border-width-left: var(--component--input-border-width-default);
3026
- --component--input-icon-prefix-default: var(--color-text-defined);
3027
- --component--input-icon-suffix-default: var(--color-text-defined);
3028
- --component--input-icon-error-default: var(--color-system-danger-default);
3029
- --component--input-icon-control-default: var(--color-icon-subtle);
3030
- --component--input-icon-control-hover: var(--component--input-icon-control-default);
3031
- --component--input-opacity-disabled: var(--traton-opacity-25);
3032
- --component--input-text-counter-default: var(--color-text-defined);
3033
- --component--input-text-label-default: var(--color-text-strong);
3034
- --component--input-text-helper-default: var(--color-text-defined);
3035
- --component--input-text-placeholder-default: var(--color-text-subtle);
3036
- --component--input-text-value-default: var(--color-text-strong);
3037
- --component--input-text-error-default: var(--color-system-danger-default);
3038
- }
3039
-
3040
2865
  .tl-dropdown {
3041
2866
  --dropdown-background: var(--component--input-background-primary);
3042
2867
  --dropdown-text: var(--component--input-text-value-default);
@@ -3055,6 +2880,7 @@
3055
2880
  --dropdown-option-background-selected: var(--component-dropdown-background-item-selected-default);
3056
2881
  --dropdown-option-opacity-disabled: calc(var(--component-dropdown-opacity-disabled) / 100);
3057
2882
  --dropdown-option-border: var(--component-dropdown-border-item-divider-default);
2883
+ --dropdown-border-color: var(--component--input-text-label-default);
3058
2884
  --dropdown-list-background-color: var(--component-dropdown-background-secondary);
3059
2885
  }
3060
2886
  .tl-dropdown--primary {
@@ -3624,6 +3450,56 @@ body {
3624
3450
  transform: translateY(18px) scaleY(1);
3625
3451
  }
3626
3452
 
3453
+ .tl-dropdown__actions {
3454
+ font-family: var(--detail-05-font-family);
3455
+ font-size: var(--detail-05-font-size);
3456
+ line-height: var(--detail-05-line-height);
3457
+ font-weight: var(--detail-05-font-weight);
3458
+ letter-spacing: var(--detail-05-letter-spacing);
3459
+ text-transform: var(--detail-05-text-transform);
3460
+ position: sticky;
3461
+ height: 12px;
3462
+ top: auto;
3463
+ bottom: 0;
3464
+ background-color: var(--dropdown-background);
3465
+ display: flex;
3466
+ flex-direction: row;
3467
+ align-items: center;
3468
+ justify-content: space-between;
3469
+ border-top: 1px solid var(--dropdown-option-border);
3470
+ padding: 16px 8px;
3471
+ }
3472
+ .tl-dropdown__actions--select {
3473
+ all: unset;
3474
+ display: flex;
3475
+ align-items: center;
3476
+ justify-content: start;
3477
+ width: fit-content;
3478
+ height: 24px;
3479
+ padding: 8px;
3480
+ box-sizing: border-box;
3481
+ cursor: pointer;
3482
+ }
3483
+ .tl-dropdown__actions--select:hover:not(.tl-dropdown__actions--select:disabled) {
3484
+ border: 1px solid var(--dropdown-border-color);
3485
+ border-radius: 4px;
3486
+ }
3487
+ .tl-dropdown__actions--clear {
3488
+ all: unset;
3489
+ display: flex;
3490
+ align-items: center;
3491
+ justify-content: end;
3492
+ width: fit-content;
3493
+ height: 24px;
3494
+ padding: 8px;
3495
+ box-sizing: border-box;
3496
+ cursor: pointer;
3497
+ }
3498
+ .tl-dropdown__actions--clear:hover:not(.tl-dropdown__actions--clear:disabled) {
3499
+ border: 1px solid var(--dropdown-border-color);
3500
+ border-radius: 4px;
3501
+ }
3502
+
3627
3503
  .tl-dropdown__option {
3628
3504
  font-family: var(--type-system-body-01-font-family);
3629
3505
  font-size: calc(var(--type-system-body-01-font-size) * 1px);
@@ -10646,7 +10522,7 @@ body {
10646
10522
  letter-spacing: var(--detail-05-letter-spacing);
10647
10523
  text-transform: var(--detail-05-text-transform);
10648
10524
  display: block;
10649
- margin-bottom: 8px;
10525
+ margin-bottom: 4px;
10650
10526
  color: var(--text-field-label);
10651
10527
  }
10652
10528
  .tl-text-field--label-inside .tl-text-field__label {