@sbb-esta/lyne-elements-dev 5.10.0-dev.1791284739 → 5.10.0-dev.1791362600

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.
@@ -1362,28 +1362,136 @@ summary {
1362
1362
  --sbb-error-icon-size: 1.0625rem;
1363
1363
  --sbb-error-font-size: var(--sbb-text-font-size-xs);
1364
1364
  --sbb-form-field-background-color: var(--sbb-background-color-1);
1365
+ --sbb-form-field-background-color-disabled: var(--sbb-background-color-3);
1366
+ --sbb-form-field-background-color-negative: var(--sbb-background-color-1-negative);
1367
+ --sbb-form-field-background-color-disabled-negative: var(--sbb-background-color-3-negative);
1368
+ --sbb-form-field-background-color-required-highlight: color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1));
1369
+ --sbb-form-field-background-color-required-highlight: light-dark(
1370
+ color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1)),
1371
+ color-mix(in srgb, var(--sbb-color-peach) 10%, var(--sbb-background-color-1))
1372
+ );
1373
+ --sbb-form-field-background-color-required-highlight-negative: color-mix(
1374
+ in srgb,
1375
+ var(--sbb-color-peach) 10%,
1376
+ var(--sbb-background-color-1-negative)
1377
+ );
1365
1378
  --sbb-form-field-border-color: var(--sbb-border-color-5);
1366
- --sbb-form-field-border-style: solid;
1367
- --sbb-form-field-border-radius: var(--sbb-border-radius-4x);
1368
- --sbb-form-field-border-width: var(--sbb-border-width-1x);
1369
- --sbb-form-field-color: var(--sbb-color-3);
1379
+ --sbb-form-field-border-color-disabled: var(--sbb-color-graphite);
1380
+ --sbb-form-field-border-color-disabled: light-dark(
1381
+ var(--sbb-color-graphite),
1382
+ var(--sbb-color-smoke)
1383
+ );
1384
+ --sbb-form-field-border-color-negative: var(--sbb-border-color-5);
1385
+ --sbb-form-field-border-color-disabled-negative: var(--sbb-border-color-5);
1386
+ --sbb-form-field-border-color-focus: var(--sbb-border-color-3);
1387
+ --sbb-form-field-border-color-focus-negative: var(--sbb-border-color-3-negative);
1388
+ --sbb-form-field-border-color-error: var(--sbb-color-error);
1389
+ --sbb-form-field-border-color-error-negative: var(--sbb-color-red85);
1390
+ --sbb-form-field-border-color-readonly: var(--sbb-color-graphite);
1391
+ --sbb-form-field-border-color-readonly: light-dark(
1392
+ var(--sbb-color-graphite),
1393
+ var(--sbb-color-smoke)
1394
+ );
1395
+ --sbb-form-field-border-color-readonly-negative: var(--sbb-border-color-5);
1370
1396
  --sbb-form-field-label-color: var(--sbb-color-metal);
1371
1397
  --sbb-form-field-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
1398
+ --sbb-form-field-label-color-disabled: var(--sbb-color-granite);
1399
+ --sbb-form-field-label-color-disabled: light-dark(
1400
+ var(--sbb-color-granite),
1401
+ var(--sbb-color-smoke)
1402
+ );
1403
+ --sbb-form-field-label-color-negative: var(--sbb-color-5);
1404
+ --sbb-form-field-label-color-disabled-negative: var(--sbb-color-5);
1405
+ --sbb-form-field-label-color-readonly: var(--sbb-color-granite);
1406
+ --sbb-form-field-label-color-readonly: light-dark(
1407
+ var(--sbb-color-granite),
1408
+ var(--sbb-color-smoke)
1409
+ );
1410
+ --sbb-form-field-label-color-readonly-negative: var(--sbb-color-5);
1372
1411
  --sbb-form-field-prefix-color: var(--sbb-color-metal);
1373
1412
  --sbb-form-field-prefix-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
1413
+ --sbb-form-field-prefix-color-disabled: var(--sbb-color-granite);
1414
+ --sbb-form-field-prefix-color-disabled: light-dark(
1415
+ var(--sbb-color-granite),
1416
+ var(--sbb-color-storm)
1417
+ );
1418
+ --sbb-form-field-prefix-color-negative: var(--sbb-color-5);
1419
+ --sbb-form-field-prefix-color-disabled-negative: var(--sbb-color-5);
1420
+ --sbb-form-field-prefix-color-focus: var(--sbb-color-3);
1421
+ --sbb-form-field-prefix-color-focus-negative: var(--sbb-color-3-negative);
1422
+ --sbb-form-field-prefix-color-readonly: var(--sbb-color-granite);
1423
+ --sbb-form-field-prefix-color-readonly: light-dark(
1424
+ var(--sbb-color-granite),
1425
+ var(--sbb-color-storm)
1426
+ );
1427
+ --sbb-form-field-prefix-color-readonly-negative: var(--sbb-color-5);
1428
+ --sbb-form-field-border-style: solid;
1429
+ --sbb-form-field-border-style-disabled: dashed;
1430
+ --sbb-form-field-border-radius: var(--sbb-border-radius-4x);
1431
+ --sbb-form-field-border-width: var(--sbb-border-width-1x);
1432
+ --sbb-form-field-border-width-focus: var(--sbb-border-width-2x);
1433
+ --sbb-form-field-color: var(--sbb-color-3);
1434
+ --sbb-form-field-color-negative: var(--sbb-color-3-negative);
1435
+ --sbb-form-field-min-width: 9.375rem;
1436
+ --sbb-form-field-max-width: 18.75rem;
1374
1437
  --sbb-form-field-text-color: var(--sbb-color-3);
1438
+ --sbb-form-field-text-color-disabled: var(--sbb-color-3);
1439
+ --sbb-form-field-text-color-negative: var(--sbb-color-3-negative);
1440
+ --sbb-form-field-text-color-disabled-negative: var(--sbb-color-5);
1441
+ --sbb-form-field-text-color-error: var(--sbb-color-error);
1442
+ --sbb-form-field-text-color-error-negative: var(--sbb-color-red85);
1375
1443
  --sbb-form-field-arrow-color: var(--sbb-color-3);
1444
+ --sbb-form-field-arrow-color-disabled: var(--sbb-color-granite);
1445
+ --sbb-form-field-arrow-color-disabled: light-dark(
1446
+ var(--sbb-color-granite),
1447
+ var(--sbb-color-storm)
1448
+ );
1449
+ --sbb-form-field-arrow-color-negative: var(--sbb-color-3-negative);
1450
+ --sbb-form-field-arrow-color-disabled-negative: var(--sbb-border-color-5);
1451
+ --sbb-form-field-placeholder-color-disabled: var(--sbb-color-granite);
1452
+ --sbb-form-field-placeholder-color-disabled: light-dark(
1453
+ var(--sbb-color-granite),
1454
+ var(--sbb-color-smoke)
1455
+ );
1376
1456
  --sbb-form-field-gap: var(--sbb-spacing-fixed-2x);
1377
1457
  --sbb-form-field-icon-size: var(--sbb-size-icon-ui-small);
1378
1458
  --sbb-form-field-textarea-s-spacer: var(--sbb-spacing-fixed-1x);
1379
- --sbb-form-field-min-height: var(--sbb-size-element-m);
1380
- --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);
1381
- --sbb-form-field-input-text-size: var(--sbb-text-font-size-m);
1382
- --sbb-form-field-label-text-size: var(--sbb-text-font-size-xs);
1383
- --_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);
1384
- --_sbb-form-field-floating-label-transform: 0.53125rem;
1385
- --_sbb-form-field-spacer-margin-block-end: calc(-1 * var(--_sbb-form-field-label-to-input-overlapping));
1386
- --_sbb-form-field-input-margin-block-end: 0;
1459
+ --sbb-form-field-min-height-s: var(--sbb-size-element-xs);
1460
+ --sbb-form-field-min-height-m: var(--sbb-size-element-m);
1461
+ --sbb-form-field-min-height-l: var(--sbb-size-element-l);
1462
+ --sbb-form-field-min-height: var(--sbb-form-field-min-height-m);
1463
+ --sbb-form-field-padding-inline-s: var(--sbb-spacing-fixed-2x);
1464
+ --sbb-form-field-padding-inline-m: var(--sbb-spacing-fixed-3x);
1465
+ --sbb-form-field-padding-inline-l: var(--sbb-spacing-responsive-xxxs);
1466
+ --sbb-form-field-padding-inline: var(--sbb-form-field-padding-inline-m);
1467
+ --sbb-form-field-input-text-size-s: var(--sbb-text-font-size-s);
1468
+ --sbb-form-field-input-text-size-m: var(--sbb-text-font-size-m);
1469
+ --sbb-form-field-input-text-size-l: var(--sbb-text-font-size-m);
1470
+ --sbb-form-field-input-text-size: var(--sbb-form-field-input-text-size-m);
1471
+ --sbb-form-field-label-text-size-s: var(--sbb-text-font-size-xxs);
1472
+ --sbb-form-field-label-text-size-m: var(--sbb-text-font-size-xs);
1473
+ --sbb-form-field-label-text-size-l: var(--sbb-text-font-size-xs);
1474
+ --sbb-form-field-label-text-size: var(--sbb-form-field-label-text-size-m);
1475
+ --_sbb-form-field-label-to-input-overlapping-s: 0.625rem;
1476
+ --_sbb-form-field-label-to-input-overlapping-m: var(--sbb-spacing-fixed-1x);
1477
+ --_sbb-form-field-label-to-input-overlapping-l: var(--sbb-spacing-fixed-1x);
1478
+ --_sbb-form-field-label-to-input-overlapping: var(--_sbb-form-field-label-to-input-overlapping-m);
1479
+ --_sbb-form-field-floating-label-transform-s: 0.34375rem;
1480
+ --_sbb-form-field-floating-label-transform-m: 0.53125rem;
1481
+ --_sbb-form-field-floating-label-transform-l: 0.53125rem;
1482
+ --_sbb-form-field-floating-label-transform: var(--_sbb-form-field-floating-label-transform-m);
1483
+ --_sbb-form-field-spacer-margin-block-end-s: -0.53125rem;
1484
+ --_sbb-form-field-spacer-margin-block-end-m: calc(
1485
+ -1 * var(--_sbb-form-field-label-to-input-overlapping-m)
1486
+ );
1487
+ --_sbb-form-field-spacer-margin-block-end-l: calc(
1488
+ -1 * var(--_sbb-form-field-label-to-input-overlapping-l)
1489
+ );
1490
+ --_sbb-form-field-spacer-margin-block-end: var(--_sbb-form-field-spacer-margin-block-end-m);
1491
+ --_sbb-form-field-input-margin-block-end-s: -0.125rem;
1492
+ --_sbb-form-field-input-margin-block-end-m: 0;
1493
+ --_sbb-form-field-input-margin-block-end-l: 0;
1494
+ --_sbb-form-field-input-margin-block-end: var(--_sbb-form-field-input-margin-block-end-m);
1387
1495
  --sbb-header-action-color: var(--sbb-color-1);
1388
1496
  --sbb-header-action-background-color: transparent;
1389
1497
  --sbb-header-action-min-height-s: var(--sbb-size-element-xs);
@@ -2021,6 +2129,23 @@ summary {
2021
2129
  --sbb-download-info-color: CanvasText;
2022
2130
  --sbb-expansion-panel-header-text-color: ButtonText;
2023
2131
  --sbb-form-field-border-color: ButtonBorder;
2132
+ --sbb-form-field-border-color-disabled: GrayText;
2133
+ --sbb-form-field-border-color-disabled-negative: GrayText;
2134
+ --sbb-form-field-border-color-negative: ButtonBorder;
2135
+ --sbb-form-field-border-color-focus: Highlight;
2136
+ --sbb-form-field-border-color-focus-negative: Highlight;
2137
+ --sbb-form-field-border-color-error: LinkText;
2138
+ --sbb-form-field-border-color-error-negative: LinkText;
2139
+ --sbb-form-field-label-color-disabled: GrayText;
2140
+ --sbb-form-field-label-color-disabled-negative: GrayText;
2141
+ --sbb-form-field-prefix-color-disabled: GrayText;
2142
+ --sbb-form-field-prefix-color-disabled-negative: GrayText;
2143
+ --sbb-form-field-prefix-color-focus: Highlight;
2144
+ --sbb-form-field-prefix-color-focus-negative: Highlight;
2145
+ --sbb-form-field-text-color-disabled: GrayText;
2146
+ --sbb-form-field-text-color-disabled-negative: GrayText;
2147
+ --sbb-form-field-text-color-error: LinkText;
2148
+ --sbb-form-field-text-color-error-negative: LinkText;
2024
2149
  --sbb-header-action-border-color: CanvasText;
2025
2150
  --sbb-header-action-color: LinkText;
2026
2151
  --sbb-header-action-active-border-width: 0;
@@ -2143,9 +2268,22 @@ summary {
2143
2268
  )
2144
2269
  var(--_sbb-chip-group-margin-block-start-default-large);
2145
2270
  --sbb-flip-card-min-height: 20rem;
2146
- --_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);
2147
- --_sbb-form-field-floating-label-transform: 0.65625rem;
2148
- --_sbb-form-field-spacer-margin-block-end: calc(-1 * var(--_sbb-form-field-label-to-input-overlapping));
2271
+ --_sbb-form-field-label-to-input-overlapping-s: 0.6875rem;
2272
+ --_sbb-form-field-label-to-input-overlapping-m: var(--sbb-spacing-fixed-1x);
2273
+ --_sbb-form-field-label-to-input-overlapping-l: var(--sbb-spacing-fixed-1x);
2274
+ --_sbb-form-field-label-to-input-overlapping: var(--_sbb-form-field-label-to-input-overlapping-m);
2275
+ --_sbb-form-field-floating-label-transform-s: 0.3125rem;
2276
+ --_sbb-form-field-floating-label-transform-m: 0.65625rem;
2277
+ --_sbb-form-field-floating-label-transform-l: 0.65625rem;
2278
+ --_sbb-form-field-floating-label-transform: var(--_sbb-form-field-floating-label-transform-m);
2279
+ --_sbb-form-field-spacer-margin-block-end-s: -0.5rem;
2280
+ --_sbb-form-field-spacer-margin-block-end-m: calc(
2281
+ -1 * var(--_sbb-form-field-label-to-input-overlapping-m)
2282
+ );
2283
+ --_sbb-form-field-spacer-margin-block-end-l: calc(
2284
+ -1 * var(--_sbb-form-field-label-to-input-overlapping-l)
2285
+ );
2286
+ --_sbb-form-field-spacer-margin-block-end: var(--_sbb-form-field-spacer-margin-block-end-m);
2149
2287
  --sbb-header-height-s: var(--sbb-spacing-fixed-14x);
2150
2288
  --sbb-header-height-m: var(--sbb-spacing-fixed-24x);
2151
2289
  --sbb-menu-max-width: 20rem;
@@ -3041,10 +3179,8 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
3041
3179
  }
3042
3180
  }
3043
3181
  :is(sbb-form-field, sbb-timetable-form-field):not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
3044
- color: var(--sbb-color-granite);
3045
- color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
3046
- -webkit-text-fill-color: var(--sbb-color-granite);
3047
- -webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
3182
+ color: var(--sbb-form-field-placeholder-color-disabled);
3183
+ -webkit-text-fill-color: var(--sbb-form-field-placeholder-color-disabled);
3048
3184
  }
3049
3185
  :is(sbb-form-field, sbb-timetable-form-field) :where(select) {
3050
3186
  vertical-align: middle;
@@ -3123,42 +3259,27 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
3123
3259
  :is(:state(interacted),[state--interacted]):invalid,
3124
3260
  .ng-touched.ng-invalid,
3125
3261
  .sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid)), :is(sbb-form-field, sbb-timetable-form-field):is(:state(interacted),[state--interacted]):is(:state(invalid),[state--invalid]) {
3126
- --sbb-form-field-border-color: var(--sbb-color-error);
3127
- --sbb-form-field-text-color: var(--sbb-color-error);
3262
+ --sbb-form-field-border-color: var(--sbb-form-field-border-color-error);
3263
+ --sbb-form-field-text-color: var(--sbb-form-field-text-color-error);
3128
3264
  }
3129
3265
  :is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
3130
3266
  :is(:state(interacted),[state--interacted]):invalid,
3131
3267
  .ng-touched.ng-invalid,
3132
3268
  .sbb-invalid))[negative], :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid))[negative], :is(sbb-form-field, sbb-timetable-form-field):is(:state(interacted),[state--interacted]):is(:state(invalid),[state--invalid])[negative] {
3133
- --sbb-form-field-border-color: var(--sbb-color-red85);
3134
- --sbb-form-field-text-color: var(--sbb-color-red85);
3135
- }
3136
- @media (forced-colors: active) {
3137
- :is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
3138
- :is(:state(interacted),[state--interacted]):invalid,
3139
- .ng-touched.ng-invalid,
3140
- .sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid)), :is(sbb-form-field, sbb-timetable-form-field):is(:state(interacted),[state--interacted]):is(:state(invalid),[state--invalid]) {
3141
- --sbb-form-field-border-color: LinkText !important;
3142
- --sbb-form-field-text-color: LinkText !important;
3143
- }
3269
+ --sbb-form-field-border-color: var(--sbb-form-field-border-color-error-negative);
3270
+ --sbb-form-field-text-color: var(--sbb-form-field-text-color-error-negative);
3144
3271
  }
3145
3272
 
3146
3273
  :root.sbb-form-field-required-highlight :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
3147
3274
  :is(:state(disabled),[state--disabled])):has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required]), :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
3148
3275
  :is(:state(disabled),[state--disabled])).sbb-form-field-required-highlight {
3149
- --sbb-form-field-background-color: color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1));
3150
- --sbb-form-field-background-color: light-dark(
3151
- color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1)),
3152
- color-mix(in srgb, var(--sbb-color-peach) 10%, var(--sbb-background-color-1))
3153
- );
3276
+ --sbb-form-field-background-color: var(--sbb-form-field-background-color-required-highlight);
3154
3277
  }
3155
3278
  :root.sbb-form-field-required-highlight :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
3156
3279
  :is(:state(disabled),[state--disabled])):has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required])[negative], :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
3157
3280
  :is(:state(disabled),[state--disabled])).sbb-form-field-required-highlight[negative] {
3158
- --sbb-form-field-background-color: color-mix(
3159
- in srgb,
3160
- var(--sbb-color-peach) 10%,
3161
- var(--sbb-background-color-1-negative)
3281
+ --sbb-form-field-background-color: var(
3282
+ --sbb-form-field-background-color-required-highlight-negative
3162
3283
  );
3163
3284
  }
3164
3285
 
@@ -3493,7 +3614,7 @@ sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-t
3493
3614
  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
3494
3615
  }
3495
3616
  .sbb-sort-header:not(.sbb-sort-header-disabled) {
3496
- cursor: pointer;
3617
+ cursor: var(--sbb-cursor-pointer);
3497
3618
  }
3498
3619
  .sbb-sort-header:not(.sbb-sort-header-disabled):hover .sbb-sort-header-container {
3499
3620
  color: var(--sbb-table-sort-header-hover-color);
@@ -3511,7 +3632,7 @@ sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-t
3511
3632
  outline: 0;
3512
3633
  }
3513
3634
  .sbb-sort-header-disabled .sbb-sort-header-container {
3514
- cursor: default;
3635
+ cursor: var(--sbb-cursor-default);
3515
3636
  }
3516
3637
  .sbb-table-align-center .sbb-sort-header-container {
3517
3638
  text-align: center;
@@ -3823,9 +3944,10 @@ sbb-toggle:has(:focus-visible) {
3823
3944
  }
3824
3945
 
3825
3946
  .sbb-input {
3947
+ --_sbb-input-border-width: var(--sbb-form-field-border-width);
3826
3948
  display: inline-block;
3827
- min-width: 9.375rem;
3828
- width: min(18.75rem, 100%);
3949
+ min-width: var(--sbb-form-field-min-width);
3950
+ width: min(var(--sbb-form-field-max-width), 100%);
3829
3951
  min-height: var(--sbb-form-field-min-height);
3830
3952
  max-height: var(--sbb-form-field-max-height);
3831
3953
  appearance: none;
@@ -3838,9 +3960,9 @@ sbb-toggle:has(:focus-visible) {
3838
3960
  color: var(--sbb-form-field-text-color);
3839
3961
  -webkit-text-fill-color: var(--sbb-form-field-text-color);
3840
3962
  opacity: 1;
3841
- border: var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);
3963
+ border: var(--_sbb-input-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);
3842
3964
  border-radius: var(--sbb-form-field-border-radius);
3843
- padding-inline: var(--sbb-form-field-padding-inline);
3965
+ padding-inline: calc(var(--sbb-form-field-padding-inline) - var(--_sbb-input-border-width));
3844
3966
  font-size: var(--sbb-form-field-input-text-size) !important;
3845
3967
  font-weight: normal;
3846
3968
  letter-spacing: var(--sbb-letter-spacing-text) !important;
@@ -3854,62 +3976,39 @@ sbb-toggle:has(:focus-visible) {
3854
3976
  }
3855
3977
 
3856
3978
  .sbb-input:read-only, .sbb-input:disabled {
3857
- --sbb-form-field-background-color: var(--sbb-background-color-3);
3858
- --sbb-form-field-border-color: var(--sbb-color-graphite);
3859
- --sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
3979
+ background-color: var(--sbb-form-field-background-color-disabled);
3860
3980
  }
3861
3981
 
3862
- @media (forced-colors: active) {
3863
- .sbb-input:read-only, .sbb-input:disabled {
3864
- --sbb-form-field-border-color: ButtonBorder;
3865
- }
3866
- }
3867
3982
  .sbb-input:disabled {
3868
- --sbb-form-field-border-style: dashed;
3983
+ border-style: var(--sbb-form-field-border-style-disabled);
3984
+ color: var(--sbb-form-field-text-color-disabled);
3985
+ border-color: var(--sbb-form-field-border-color-disabled);
3869
3986
  }
3870
3987
 
3871
3988
  .sbb-input:disabled::placeholder {
3872
- color: var(--sbb-color-granite);
3873
- color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
3874
- -webkit-text-fill-color: var(--sbb-color-granite);
3875
- -webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
3989
+ color: var(--sbb-form-field-placeholder-color-disabled);
3990
+ -webkit-text-fill-color: var(--sbb-form-field-placeholder-color-disabled);
3876
3991
  }
3877
3992
 
3878
- @media (forced-colors: active) {
3879
- .sbb-input:disabled {
3880
- --sbb-form-field-label-color: GrayText !important;
3881
- --sbb-form-field-prefix-color: GrayText !important;
3882
- --sbb-form-field-text-color: GrayText !important;
3883
- --sbb-form-field-border-color: GrayText !important;
3884
- }
3993
+ .sbb-input:read-only {
3994
+ border-color: var(--sbb-form-field-border-color-readonly);
3885
3995
  }
3996
+
3886
3997
  .sbb-input:focus-visible {
3887
3998
  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
3888
3999
  outline-offset: var(--sbb-form-field-outline-offset, var(--sbb-focus-outline-offset));
3889
4000
  }
3890
4001
 
3891
4002
  .sbb-input:focus {
3892
- --sbb-form-field-border-color: var(--sbb-border-color-3);
3893
- --sbb-form-field-border-width: var(--sbb-border-width-2x);
4003
+ --_sbb-input-border-width: var(--sbb-form-field-border-width-focus);
4004
+ border-color: var(--sbb-form-field-border-color-focus);
3894
4005
  }
3895
4006
 
3896
- @media (forced-colors: active) {
3897
- .sbb-input:focus {
3898
- --sbb-form-field-border-color: Highlight;
3899
- --sbb-form-field-prefix-color: Highlight;
3900
- }
3901
- }
3902
4007
  .sbb-input:user-invalid {
3903
- --sbb-form-field-border-color: var(--sbb-color-error);
3904
- --sbb-form-field-text-color: var(--sbb-color-error);
4008
+ border-color: var(--sbb-form-field-border-color-error);
4009
+ color: var(--sbb-form-field-text-color-error);
3905
4010
  }
3906
4011
 
3907
- @media (forced-colors: active) {
3908
- .sbb-input:user-invalid {
3909
- --sbb-form-field-border-color: LinkText !important;
3910
- --sbb-form-field-text-color: LinkText !important;
3911
- }
3912
- }
3913
4012
  .sbb-figure {
3914
4013
  display: grid;
3915
4014
  grid-template-rows: auto;
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@sbb-esta/lyne-elements-dev",
3
- "version": "5.10.0-dev.1791284739",
3
+ "version": "5.10.0-dev.1791362600",
4
4
  "description": "Lyne Design System",
5
5
  "keywords": [
6
6
  "design system",
7
7
  "web components",
8
8
  "lit",
9
- "https://github.com/sbb-design-systems/lyne-components/commit/22bf047e93dbb56f9e6a6c6c3637f921b3ebfcad"
9
+ "https://github.com/sbb-design-systems/lyne-components/commit/a15a819a6cfdcaec0f808abd24d471b90dc19f7f"
10
10
  ],
11
11
  "type": "module",
12
12
  "exports": {