@scania/tegel-lite 1.1.1 → 1.2.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 (9) hide show
  1. package/dist/components.css +301 -17
  2. package/dist/scania-variables.css +0 -8
  3. package/dist/tl-accordion.css +1 -1
  4. package/dist/tl-icon.css +0 -16
  5. package/dist/tl-popover-canvas.css +173 -0
  6. package/dist/tl-popover-menu.css +229 -0
  7. package/dist/tl-text-field.css +0 -16
  8. package/dist/traton-variables.css +8 -16
  9. package/package.json +3 -1
package/dist/components.css CHANGED
@@ -27,7 +27,7 @@
27
27
  --component-accordion-background-primary-hover: var(--color-background-layer-01);
28
28
  --component-accordion-background-primary-active: var(--scania-color-grey-100);
29
29
  --component-accordion-background-secondary-default: var(--color-background-none);
30
- --component-accordion-background-secondary-hover: var(--scania-color-grey-100);
30
+ --component-accordion-background-secondary-hover: var(--scania-color-grey-50);
31
31
  --component-accordion-background-secondary-active: var(--scania-color-grey-150);
32
32
  --component-accordion-text-default: var(--color-text-strong);
33
33
  --component-accordion-icon-default: var(--color-icon-strong);
@@ -3216,18 +3216,10 @@
3216
3216
  mask-image: var(--icon-dollar-svg);
3217
3217
  background-color: currentcolor;
3218
3218
  }
3219
- .tl-icon--dollar_sign {
3220
- mask-image: var(--icon-dollar_sign-svg);
3221
- background-color: currentcolor;
3222
- }
3223
3219
  .tl-icon--doner {
3224
3220
  mask-image: var(--icon-doner-svg);
3225
3221
  background-color: currentcolor;
3226
3222
  }
3227
- .tl-icon--donner {
3228
- mask-image: var(--icon-donner-svg);
3229
- background-color: currentcolor;
3230
- }
3231
3223
  .tl-icon--double_kebab {
3232
3224
  mask-image: var(--icon-double_kebab-svg);
3233
3225
  background-color: currentcolor;
@@ -3540,10 +3532,6 @@
3540
3532
  mask-image: var(--icon-maximize_fullscreen-svg);
3541
3533
  background-color: currentcolor;
3542
3534
  }
3543
- .tl-icon--meatball {
3544
- mask-image: var(--icon-meatball-svg);
3545
- background-color: currentcolor;
3546
- }
3547
3535
  .tl-icon--meatballs {
3548
3536
  mask-image: var(--icon-meatballs-svg);
3549
3537
  background-color: currentcolor;
@@ -3788,10 +3776,6 @@
3788
3776
  mask-image: var(--icon-shuffle-svg);
3789
3777
  background-color: currentcolor;
3790
3778
  }
3791
- .tl-icon--skip_backward {
3792
- mask-image: var(--icon-skip_backward-svg);
3793
- background-color: currentcolor;
3794
- }
3795
3779
  .tl-icon--skip_backwards {
3796
3780
  mask-image: var(--icon-skip_backwards-svg);
3797
3781
  background-color: currentcolor;
@@ -4995,6 +4979,306 @@ body {
4995
4979
  display: block;
4996
4980
  }
4997
4981
 
4982
+ /**
4983
+ * Do not edit directly, this file was auto-generated.
4984
+ */
4985
+ :root,
4986
+ .tds-mode-light,
4987
+ .scania .tds-mode-light,
4988
+ .scania.tds-mode-light,
4989
+ .scania .tl-mode-light,
4990
+ .scania.tl-mode-light {
4991
+ --component-popover-background-primary: var(--color-background-layer-01);
4992
+ --component-popover-background-secondary: var(--color-background-layer-02);
4993
+ --component-popover-background-link-primary-default: var(--color-background-none);
4994
+ --component-popover-background-link-primary-hover: var(--scania-color-grey-100);
4995
+ --component-popover-background-link-primary-active: var(
4996
+ --component-popover-background-link-primary-hover
4997
+ );
4998
+ --component-popover-background-link-secondary-default: var(--color-background-none);
4999
+ --component-popover-background-link-secondary-hover: var(--scania-color-grey-50);
5000
+ --component-popover-background-link-secondary-active: var(
5001
+ --component-popover-background-link-secondary-hover
5002
+ );
5003
+ --component-popover-border-radius-default: var(--scania-unit-4);
5004
+ --component-popover-icon-link-primary-default: var(--color-icon-strong);
5005
+ --component-popover-icon-link-secondary-default: var(--color-icon-strong);
5006
+ --component-popover-opacity-disabled: var(--scania-opacity-25);
5007
+ --component-popover-text-link-primary-default: var(--color-text-strong);
5008
+ --component-popover-text-link-primary-hover: var(--color-text-strong);
5009
+ --component-popover-text-link-secondary-default: var(--color-text-strong);
5010
+ --component-popover-text-link-secondary-hover: var(--color-text-strong);
5011
+ }
5012
+
5013
+ .traton .tds-mode-light,
5014
+ .traton.tds-mode-light,
5015
+ .traton .tl-mode-light,
5016
+ .traton.tl-mode-light {
5017
+ --component-popover-background-primary: var(--color-background-layer-01);
5018
+ --component-popover-background-secondary: var(--color-background-layer-02);
5019
+ --component-popover-background-link-primary-default: var(--color-background-none);
5020
+ --component-popover-background-link-primary-hover: var(--traton-color-grey-150);
5021
+ --component-popover-background-link-primary-active: var(--traton-color-grey-150);
5022
+ --component-popover-background-link-secondary-default: var(--color-background-none);
5023
+ --component-popover-background-link-secondary-hover: var(--traton-color-grey-150);
5024
+ --component-popover-background-link-secondary-active: var(--traton-color-grey-150);
5025
+ --component-popover-border-radius-default: var(--traton-unit-4);
5026
+ --component-popover-icon-link-primary-default: var(--color-icon-strong);
5027
+ --component-popover-icon-link-secondary-default: var(--color-icon-strong);
5028
+ --component-popover-opacity-disabled: var(--traton-opacity-25);
5029
+ --component-popover-text-link-primary-default: var(--color-text-strong);
5030
+ --component-popover-text-link-primary-hover: var(--color-text-strong);
5031
+ --component-popover-text-link-secondary-default: var(--color-text-strong);
5032
+ --component-popover-text-link-secondary-hover: var(--color-text-strong);
5033
+ }
5034
+
5035
+ .tds-mode-dark,
5036
+ .scania .tds-mode-dark,
5037
+ .scania.tds-mode-dark,
5038
+ .scania .tl-mode-dark,
5039
+ .scania.tl-mode-dark {
5040
+ --component-popover-background-primary: var(--color-background-layer-01);
5041
+ --component-popover-background-secondary: var(--color-background-layer-02);
5042
+ --component-popover-background-link-primary-default: var(--color-background-none);
5043
+ --component-popover-background-link-primary-hover: var(--scania-color-grey-850);
5044
+ --component-popover-background-link-primary-active: var(
5045
+ --component-popover-background-link-primary-hover
5046
+ );
5047
+ --component-popover-background-link-secondary-default: var(--color-background-none);
5048
+ --component-popover-background-link-secondary-hover: var(--scania-color-grey-800);
5049
+ --component-popover-background-link-secondary-active: var(
5050
+ --component-popover-background-link-secondary-hover
5051
+ );
5052
+ --component-popover-border-radius-default: var(--scania-unit-4);
5053
+ --component-popover-icon-link-primary-default: var(--color-icon-strong);
5054
+ --component-popover-icon-link-secondary-default: var(--color-icon-strong);
5055
+ --component-popover-opacity-disabled: var(--scania-opacity-25);
5056
+ --component-popover-text-link-primary-default: var(--color-text-strong);
5057
+ --component-popover-text-link-primary-hover: var(--color-text-strong);
5058
+ --component-popover-text-link-secondary-default: var(--color-text-strong);
5059
+ --component-popover-text-link-secondary-hover: var(--color-text-strong);
5060
+ }
5061
+
5062
+ .traton .tds-mode-dark,
5063
+ .traton.tds-mode-dark,
5064
+ .traton .tl-mode-dark,
5065
+ .traton.tl-mode-dark {
5066
+ --component-popover-background-primary: var(--color-background-layer-01);
5067
+ --component-popover-background-secondary: var(--color-background-layer-02);
5068
+ --component-popover-background-link-primary-default: var(--color-background-none);
5069
+ --component-popover-background-link-primary-hover: var(--traton-color-blue-900);
5070
+ --component-popover-background-link-primary-active: var(--traton-color-blue-900);
5071
+ --component-popover-background-link-secondary-default: var(--color-background-none);
5072
+ --component-popover-background-link-secondary-hover: var(--traton-color-blue-850);
5073
+ --component-popover-background-link-secondary-active: var(--traton-color-blue-850);
5074
+ --component-popover-border-radius-default: var(--traton-unit-4);
5075
+ --component-popover-icon-link-primary-default: var(--color-icon-strong);
5076
+ --component-popover-icon-link-secondary-default: var(--color-icon-strong);
5077
+ --component-popover-opacity-disabled: var(--traton-opacity-25);
5078
+ --component-popover-text-link-primary-default: var(--color-text-strong);
5079
+ --component-popover-text-link-primary-hover: var(--color-text-strong);
5080
+ --component-popover-text-link-secondary-default: var(--color-text-strong);
5081
+ --component-popover-text-link-secondary-hover: var(--color-text-strong);
5082
+ }
5083
+
5084
+ .tl-popover-canvas {
5085
+ --popover-canvas-text: var(--component-popover-text-link-primary-default);
5086
+ --popover-canvas-background: var(--component-popover-background-primary);
5087
+ --popover-canvas-box-shadow: 0 2px 3px 0 rgb(0, 0, 0, 0.1);
5088
+ }
5089
+
5090
+ .tl-popover-canvas--primary,
5091
+ .tl-popover-canvas .tl-popover-canvas--primary {
5092
+ --popover-canvas-background: var(--component-popover-background-primary);
5093
+ }
5094
+
5095
+ .tl-popover-canvas--secondary,
5096
+ .tl-popover-canvas .tl-popover-canvas--secondary {
5097
+ --popover-canvas-background: var(--component-popover-background-secondary);
5098
+ }
5099
+
5100
+ .traton .tl-popover-canvas {
5101
+ --popover-canvas-box-shadow: none;
5102
+ }
5103
+
5104
+ .tl-popover-canvas {
5105
+ display: inline-block;
5106
+ color: var(--popover-canvas-text);
5107
+ background-color: var(--popover-canvas-background);
5108
+ box-shadow: var(--popover-canvas-box-shadow);
5109
+ border-radius: 4px;
5110
+ pointer-events: none;
5111
+ z-index: 1000;
5112
+ visibility: hidden;
5113
+ }
5114
+ .tl-popover-canvas--visible {
5115
+ visibility: visible;
5116
+ pointer-events: auto;
5117
+ }
5118
+ .tl-popover-canvas--animation-fade {
5119
+ opacity: 0;
5120
+ transform: translateY(4px);
5121
+ transition: opacity 120ms ease-out, transform 120ms ease-out;
5122
+ }
5123
+ .tl-popover-canvas--visible.tl-popover-canvas--animation-fade {
5124
+ opacity: 1;
5125
+ transform: translateY(0);
5126
+ }
5127
+
5128
+ .tl-popover-canvas__content {
5129
+ font-family: var(--body-01-font-family);
5130
+ font-size: var(--body-01-font-size);
5131
+ line-height: var(--body-01-line-height);
5132
+ font-weight: var(--body-01-font-weight);
5133
+ letter-spacing: var(--body-01-letter-spacing);
5134
+ text-transform: var(--body-01-text-transform);
5135
+ padding: 16px;
5136
+ }
5137
+
5138
+ .tl-popover-canvas__header {
5139
+ font-family: var(--headline-05-font-family);
5140
+ font-size: var(--headline-05-font-size);
5141
+ line-height: var(--headline-05-line-height);
5142
+ font-weight: var(--headline-05-font-weight);
5143
+ letter-spacing: var(--headline-05-letter-spacing);
5144
+ text-transform: var(--headline-05-text-transform);
5145
+ margin: 0 0 8px;
5146
+ }
5147
+
5148
+ .tl-popover-canvas__actions {
5149
+ display: flex;
5150
+ gap: 8px;
5151
+ justify-content: space-between;
5152
+ align-items: center;
5153
+ }
5154
+
5155
+ .tl-popover-menu {
5156
+ --popover-menu-text: var(--component-popover-text-link-primary-default);
5157
+ --popover-menu-background: var(--component-popover-background-primary);
5158
+ --popover-menu-background-hover: var(--component-popover-background-link-primary-hover);
5159
+ --popover-menu-item-outline-focus: var(--component--focus-ring-color-strong);
5160
+ --popover-menu-item-opacity-disabled: calc(var(--component-popover-opacity-disabled) / 100);
5161
+ --popover-menu-box-shadow: 0 2px 3px 0 rgb(0, 0, 0, 0.1);
5162
+ }
5163
+
5164
+ .tl-popover-menu--primary,
5165
+ .tl-popover-menu .tl-popover-menu--primary {
5166
+ --popover-menu-background: var(--component-popover-background-primary);
5167
+ --popover-menu-background-hover: var(--component-popover-background-link-primary-hover);
5168
+ }
5169
+
5170
+ .tl-popover-menu--secondary,
5171
+ .tl-popover-menu .tl-popover-menu--secondary {
5172
+ --popover-menu-background: var(--component-popover-background-secondary);
5173
+ --popover-menu-background-hover: var(--component-popover-background-link-secondary-hover);
5174
+ }
5175
+
5176
+ .traton .tl-popover-menu {
5177
+ --popover-menu-box-shadow: none;
5178
+ }
5179
+
5180
+ .tl-popover-menu__item-wrapper {
5181
+ box-sizing: border-box;
5182
+ }
5183
+ .tl-popover-menu__item-wrapper * {
5184
+ box-sizing: border-box;
5185
+ }
5186
+ .tl-popover-menu__item-wrapper {
5187
+ display: block;
5188
+ padding: 16px 0;
5189
+ }
5190
+
5191
+ .tl-popover-menu__item {
5192
+ all: unset;
5193
+ width: 100%;
5194
+ display: flex;
5195
+ align-items: center;
5196
+ gap: 10px;
5197
+ padding: 10px 16px;
5198
+ color: var(--popover-menu-text);
5199
+ position: relative;
5200
+ transition: background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-easy);
5201
+ font-family: var(--body-01-font-family);
5202
+ font-size: var(--body-01-font-size);
5203
+ line-height: var(--body-01-line-height);
5204
+ font-weight: var(--body-01-font-weight);
5205
+ letter-spacing: var(--body-01-letter-spacing);
5206
+ text-transform: var(--body-01-text-transform);
5207
+ }
5208
+ .tl-popover-menu__item:hover {
5209
+ cursor: pointer;
5210
+ background-color: var(--popover-menu-background-hover);
5211
+ }
5212
+ .tl-popover-menu__item:focus-visible {
5213
+ outline: 2px solid var(--popover-menu-item-outline-focus);
5214
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
5215
+ outline-offset: -2px;
5216
+ z-index: 1;
5217
+ }
5218
+
5219
+ .tl-popover-menu__item--disabled {
5220
+ all: unset;
5221
+ width: 100%;
5222
+ display: flex;
5223
+ align-items: center;
5224
+ gap: 10px;
5225
+ padding: 10px 16px;
5226
+ cursor: not-allowed;
5227
+ opacity: var(--popover-menu-item-opacity-disabled);
5228
+ pointer-events: none;
5229
+ font-family: var(--body-01-font-family);
5230
+ font-size: var(--body-01-font-size);
5231
+ line-height: var(--body-01-line-height);
5232
+ font-weight: var(--body-01-font-weight);
5233
+ letter-spacing: var(--body-01-letter-spacing);
5234
+ text-transform: var(--body-01-text-transform);
5235
+ }
5236
+ .tl-popover-menu__item--disabled:hover {
5237
+ background-color: inherit;
5238
+ }
5239
+ .tl-popover-menu__item--disabled:focus, .tl-popover-menu__item--disabled:focus-visible, .tl-popover-menu__item--disabled:active {
5240
+ outline: none;
5241
+ box-shadow: none;
5242
+ }
5243
+
5244
+ .tl-popover-menu {
5245
+ box-sizing: border-box;
5246
+ }
5247
+ .tl-popover-menu * {
5248
+ box-sizing: border-box;
5249
+ }
5250
+ .tl-popover-menu {
5251
+ overflow: hidden;
5252
+ width: 160px;
5253
+ background-color: var(--popover-menu-background);
5254
+ box-shadow: var(--popover-menu-box-shadow);
5255
+ border-radius: 4px;
5256
+ z-index: 900;
5257
+ pointer-events: none;
5258
+ visibility: hidden;
5259
+ }
5260
+ .tl-popover-menu--visible {
5261
+ visibility: visible;
5262
+ pointer-events: auto;
5263
+ }
5264
+ .tl-popover-menu--fluid {
5265
+ width: max-content;
5266
+ display: inline-block;
5267
+ }
5268
+ .tl-popover-menu--animation-fade {
5269
+ opacity: 0;
5270
+ transform: translateY(4px);
5271
+ transition: opacity 120ms ease-out, transform 120ms ease-out;
5272
+ }
5273
+ .tl-popover-menu--visible.tl-popover-menu--animation-fade {
5274
+ opacity: 1;
5275
+ transform: translateY(0);
5276
+ }
5277
+ .tl-popover-menu .tl-divider {
5278
+ width: calc(100% - 12px);
5279
+ margin: 6px;
5280
+ }
5281
+
4998
5282
  /**
4999
5283
  * Do not edit directly, this file was auto-generated.
5000
5284
  */
package/dist/scania-variables.css CHANGED
@@ -1652,10 +1652,6 @@ h6 {
1652
1652
  :root,
1653
1653
  .scania {
1654
1654
  --icon-document_word-svg: var(--scania-icon-placeholder-svg);
1655
- --icon-dollar_sign-svg: var(--scania-icon-placeholder-svg);
1656
- --icon-donner-svg: var(--scania-icon-placeholder-svg);
1657
- --icon-meatball-svg: var(--scania-icon-placeholder-svg);
1658
- --icon-skip_backward-svg: var(--scania-icon-placeholder-svg);
1659
1655
  }
1660
1656
 
1661
1657
  .traton {
@@ -1699,8 +1695,6 @@ h6 {
1699
1695
  --icon-document_plus-svg: var(--traton-icon-placeholder-svg);
1700
1696
  --icon-document_plus_inactive-svg: var(--traton-icon-placeholder-svg);
1701
1697
  --icon-document_ppt-svg: var(--traton-icon-placeholder-svg);
1702
- --icon-dollar-svg: var(--traton-icon-placeholder-svg);
1703
- --icon-doner-svg: var(--traton-icon-placeholder-svg);
1704
1698
  --icon-driving_licence-svg: var(--traton-icon-placeholder-svg);
1705
1699
  --icon-driving_licence_inactive-svg: var(--traton-icon-placeholder-svg);
1706
1700
  --icon-drop-svg: var(--traton-icon-placeholder-svg);
@@ -1747,7 +1741,6 @@ h6 {
1747
1741
  --icon-map_cursor-svg: var(--traton-icon-placeholder-svg);
1748
1742
  --icon-map_cursor_inactive-svg: var(--traton-icon-placeholder-svg);
1749
1743
  --icon-maximize_fullscreen-svg: var(--traton-icon-placeholder-svg);
1750
- --icon-meatballs-svg: var(--traton-icon-placeholder-svg);
1751
1744
  --icon-merge-svg: var(--traton-icon-placeholder-svg);
1752
1745
  --icon-merge_inactive-svg: var(--traton-icon-placeholder-svg);
1753
1746
  --icon-microphone-svg: var(--traton-icon-placeholder-svg);
@@ -1778,7 +1771,6 @@ h6 {
1778
1771
  --icon-route-svg: var(--traton-icon-placeholder-svg);
1779
1772
  --icon-route_inactive-svg: var(--traton-icon-placeholder-svg);
1780
1773
  --icon-shuffle-svg: var(--traton-icon-placeholder-svg);
1781
- --icon-skip_backwards-svg: var(--traton-icon-placeholder-svg);
1782
1774
  --icon-target-svg: var(--traton-icon-placeholder-svg);
1783
1775
  --icon-target_inactive-svg: var(--traton-icon-placeholder-svg);
1784
1776
  --icon-temperature-svg: var(--traton-icon-placeholder-svg);
package/dist/tl-accordion.css CHANGED
@@ -11,7 +11,7 @@
11
11
  --component-accordion-background-primary-hover: var(--color-background-layer-01);
12
12
  --component-accordion-background-primary-active: var(--scania-color-grey-100);
13
13
  --component-accordion-background-secondary-default: var(--color-background-none);
14
- --component-accordion-background-secondary-hover: var(--scania-color-grey-100);
14
+ --component-accordion-background-secondary-hover: var(--scania-color-grey-50);
15
15
  --component-accordion-background-secondary-active: var(--scania-color-grey-150);
16
16
  --component-accordion-text-default: var(--color-text-strong);
17
17
  --component-accordion-icon-default: var(--color-icon-strong);
package/dist/tl-icon.css CHANGED
@@ -300,18 +300,10 @@
300
300
  mask-image: var(--icon-dollar-svg);
301
301
  background-color: currentcolor;
302
302
  }
303
- .tl-icon--dollar_sign {
304
- mask-image: var(--icon-dollar_sign-svg);
305
- background-color: currentcolor;
306
- }
307
303
  .tl-icon--doner {
308
304
  mask-image: var(--icon-doner-svg);
309
305
  background-color: currentcolor;
310
306
  }
311
- .tl-icon--donner {
312
- mask-image: var(--icon-donner-svg);
313
- background-color: currentcolor;
314
- }
315
307
  .tl-icon--double_kebab {
316
308
  mask-image: var(--icon-double_kebab-svg);
317
309
  background-color: currentcolor;
@@ -624,10 +616,6 @@
624
616
  mask-image: var(--icon-maximize_fullscreen-svg);
625
617
  background-color: currentcolor;
626
618
  }
627
- .tl-icon--meatball {
628
- mask-image: var(--icon-meatball-svg);
629
- background-color: currentcolor;
630
- }
631
619
  .tl-icon--meatballs {
632
620
  mask-image: var(--icon-meatballs-svg);
633
621
  background-color: currentcolor;
@@ -872,10 +860,6 @@
872
860
  mask-image: var(--icon-shuffle-svg);
873
861
  background-color: currentcolor;
874
862
  }
875
- .tl-icon--skip_backward {
876
- mask-image: var(--icon-skip_backward-svg);
877
- background-color: currentcolor;
878
- }
879
863
  .tl-icon--skip_backwards {
880
864
  mask-image: var(--icon-skip_backwards-svg);
881
865
  background-color: currentcolor;
package/dist/tl-popover-canvas.css ADDED
@@ -0,0 +1,173 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+ :root,
5
+ .tds-mode-light,
6
+ .scania .tds-mode-light,
7
+ .scania.tds-mode-light,
8
+ .scania .tl-mode-light,
9
+ .scania.tl-mode-light {
10
+ --component-popover-background-primary: var(--color-background-layer-01);
11
+ --component-popover-background-secondary: var(--color-background-layer-02);
12
+ --component-popover-background-link-primary-default: var(--color-background-none);
13
+ --component-popover-background-link-primary-hover: var(--scania-color-grey-100);
14
+ --component-popover-background-link-primary-active: var(
15
+ --component-popover-background-link-primary-hover
16
+ );
17
+ --component-popover-background-link-secondary-default: var(--color-background-none);
18
+ --component-popover-background-link-secondary-hover: var(--scania-color-grey-50);
19
+ --component-popover-background-link-secondary-active: var(
20
+ --component-popover-background-link-secondary-hover
21
+ );
22
+ --component-popover-border-radius-default: var(--scania-unit-4);
23
+ --component-popover-icon-link-primary-default: var(--color-icon-strong);
24
+ --component-popover-icon-link-secondary-default: var(--color-icon-strong);
25
+ --component-popover-opacity-disabled: var(--scania-opacity-25);
26
+ --component-popover-text-link-primary-default: var(--color-text-strong);
27
+ --component-popover-text-link-primary-hover: var(--color-text-strong);
28
+ --component-popover-text-link-secondary-default: var(--color-text-strong);
29
+ --component-popover-text-link-secondary-hover: var(--color-text-strong);
30
+ }
31
+
32
+ .traton .tds-mode-light,
33
+ .traton.tds-mode-light,
34
+ .traton .tl-mode-light,
35
+ .traton.tl-mode-light {
36
+ --component-popover-background-primary: var(--color-background-layer-01);
37
+ --component-popover-background-secondary: var(--color-background-layer-02);
38
+ --component-popover-background-link-primary-default: var(--color-background-none);
39
+ --component-popover-background-link-primary-hover: var(--traton-color-grey-150);
40
+ --component-popover-background-link-primary-active: var(--traton-color-grey-150);
41
+ --component-popover-background-link-secondary-default: var(--color-background-none);
42
+ --component-popover-background-link-secondary-hover: var(--traton-color-grey-150);
43
+ --component-popover-background-link-secondary-active: var(--traton-color-grey-150);
44
+ --component-popover-border-radius-default: var(--traton-unit-4);
45
+ --component-popover-icon-link-primary-default: var(--color-icon-strong);
46
+ --component-popover-icon-link-secondary-default: var(--color-icon-strong);
47
+ --component-popover-opacity-disabled: var(--traton-opacity-25);
48
+ --component-popover-text-link-primary-default: var(--color-text-strong);
49
+ --component-popover-text-link-primary-hover: var(--color-text-strong);
50
+ --component-popover-text-link-secondary-default: var(--color-text-strong);
51
+ --component-popover-text-link-secondary-hover: var(--color-text-strong);
52
+ }
53
+
54
+ .tds-mode-dark,
55
+ .scania .tds-mode-dark,
56
+ .scania.tds-mode-dark,
57
+ .scania .tl-mode-dark,
58
+ .scania.tl-mode-dark {
59
+ --component-popover-background-primary: var(--color-background-layer-01);
60
+ --component-popover-background-secondary: var(--color-background-layer-02);
61
+ --component-popover-background-link-primary-default: var(--color-background-none);
62
+ --component-popover-background-link-primary-hover: var(--scania-color-grey-850);
63
+ --component-popover-background-link-primary-active: var(
64
+ --component-popover-background-link-primary-hover
65
+ );
66
+ --component-popover-background-link-secondary-default: var(--color-background-none);
67
+ --component-popover-background-link-secondary-hover: var(--scania-color-grey-800);
68
+ --component-popover-background-link-secondary-active: var(
69
+ --component-popover-background-link-secondary-hover
70
+ );
71
+ --component-popover-border-radius-default: var(--scania-unit-4);
72
+ --component-popover-icon-link-primary-default: var(--color-icon-strong);
73
+ --component-popover-icon-link-secondary-default: var(--color-icon-strong);
74
+ --component-popover-opacity-disabled: var(--scania-opacity-25);
75
+ --component-popover-text-link-primary-default: var(--color-text-strong);
76
+ --component-popover-text-link-primary-hover: var(--color-text-strong);
77
+ --component-popover-text-link-secondary-default: var(--color-text-strong);
78
+ --component-popover-text-link-secondary-hover: var(--color-text-strong);
79
+ }
80
+
81
+ .traton .tds-mode-dark,
82
+ .traton.tds-mode-dark,
83
+ .traton .tl-mode-dark,
84
+ .traton.tl-mode-dark {
85
+ --component-popover-background-primary: var(--color-background-layer-01);
86
+ --component-popover-background-secondary: var(--color-background-layer-02);
87
+ --component-popover-background-link-primary-default: var(--color-background-none);
88
+ --component-popover-background-link-primary-hover: var(--traton-color-blue-900);
89
+ --component-popover-background-link-primary-active: var(--traton-color-blue-900);
90
+ --component-popover-background-link-secondary-default: var(--color-background-none);
91
+ --component-popover-background-link-secondary-hover: var(--traton-color-blue-850);
92
+ --component-popover-background-link-secondary-active: var(--traton-color-blue-850);
93
+ --component-popover-border-radius-default: var(--traton-unit-4);
94
+ --component-popover-icon-link-primary-default: var(--color-icon-strong);
95
+ --component-popover-icon-link-secondary-default: var(--color-icon-strong);
96
+ --component-popover-opacity-disabled: var(--traton-opacity-25);
97
+ --component-popover-text-link-primary-default: var(--color-text-strong);
98
+ --component-popover-text-link-primary-hover: var(--color-text-strong);
99
+ --component-popover-text-link-secondary-default: var(--color-text-strong);
100
+ --component-popover-text-link-secondary-hover: var(--color-text-strong);
101
+ }
102
+
103
+ .tl-popover-canvas {
104
+ --popover-canvas-text: var(--component-popover-text-link-primary-default);
105
+ --popover-canvas-background: var(--component-popover-background-primary);
106
+ --popover-canvas-box-shadow: 0 2px 3px 0 rgb(0, 0, 0, 0.1);
107
+ }
108
+
109
+ .tl-popover-canvas--primary,
110
+ .tl-popover-canvas .tl-popover-canvas--primary {
111
+ --popover-canvas-background: var(--component-popover-background-primary);
112
+ }
113
+
114
+ .tl-popover-canvas--secondary,
115
+ .tl-popover-canvas .tl-popover-canvas--secondary {
116
+ --popover-canvas-background: var(--component-popover-background-secondary);
117
+ }
118
+
119
+ .traton .tl-popover-canvas {
120
+ --popover-canvas-box-shadow: none;
121
+ }
122
+
123
+ /* Typography Usage mixins */
124
+ .tl-popover-canvas {
125
+ display: inline-block;
126
+ color: var(--popover-canvas-text);
127
+ background-color: var(--popover-canvas-background);
128
+ box-shadow: var(--popover-canvas-box-shadow);
129
+ border-radius: 4px;
130
+ pointer-events: none;
131
+ z-index: 1000;
132
+ visibility: hidden;
133
+ }
134
+ .tl-popover-canvas--visible {
135
+ visibility: visible;
136
+ pointer-events: auto;
137
+ }
138
+ .tl-popover-canvas--animation-fade {
139
+ opacity: 0;
140
+ transform: translateY(4px);
141
+ transition: opacity 120ms ease-out, transform 120ms ease-out;
142
+ }
143
+ .tl-popover-canvas--visible.tl-popover-canvas--animation-fade {
144
+ opacity: 1;
145
+ transform: translateY(0);
146
+ }
147
+
148
+ .tl-popover-canvas__content {
149
+ font-family: var(--body-01-font-family);
150
+ font-size: var(--body-01-font-size);
151
+ line-height: var(--body-01-line-height);
152
+ font-weight: var(--body-01-font-weight);
153
+ letter-spacing: var(--body-01-letter-spacing);
154
+ text-transform: var(--body-01-text-transform);
155
+ padding: 16px;
156
+ }
157
+
158
+ .tl-popover-canvas__header {
159
+ font-family: var(--headline-05-font-family);
160
+ font-size: var(--headline-05-font-size);
161
+ line-height: var(--headline-05-line-height);
162
+ font-weight: var(--headline-05-font-weight);
163
+ letter-spacing: var(--headline-05-letter-spacing);
164
+ text-transform: var(--headline-05-text-transform);
165
+ margin: 0 0 8px;
166
+ }
167
+
168
+ .tl-popover-canvas__actions {
169
+ display: flex;
170
+ gap: 8px;
171
+ justify-content: space-between;
172
+ align-items: center;
173
+ }
package/dist/tl-popover-menu.css ADDED
@@ -0,0 +1,229 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+ :root,
5
+ .tds-mode-light,
6
+ .scania .tds-mode-light,
7
+ .scania.tds-mode-light,
8
+ .scania .tl-mode-light,
9
+ .scania.tl-mode-light {
10
+ --component-popover-background-primary: var(--color-background-layer-01);
11
+ --component-popover-background-secondary: var(--color-background-layer-02);
12
+ --component-popover-background-link-primary-default: var(--color-background-none);
13
+ --component-popover-background-link-primary-hover: var(--scania-color-grey-100);
14
+ --component-popover-background-link-primary-active: var(
15
+ --component-popover-background-link-primary-hover
16
+ );
17
+ --component-popover-background-link-secondary-default: var(--color-background-none);
18
+ --component-popover-background-link-secondary-hover: var(--scania-color-grey-50);
19
+ --component-popover-background-link-secondary-active: var(
20
+ --component-popover-background-link-secondary-hover
21
+ );
22
+ --component-popover-border-radius-default: var(--scania-unit-4);
23
+ --component-popover-icon-link-primary-default: var(--color-icon-strong);
24
+ --component-popover-icon-link-secondary-default: var(--color-icon-strong);
25
+ --component-popover-opacity-disabled: var(--scania-opacity-25);
26
+ --component-popover-text-link-primary-default: var(--color-text-strong);
27
+ --component-popover-text-link-primary-hover: var(--color-text-strong);
28
+ --component-popover-text-link-secondary-default: var(--color-text-strong);
29
+ --component-popover-text-link-secondary-hover: var(--color-text-strong);
30
+ }
31
+
32
+ .traton .tds-mode-light,
33
+ .traton.tds-mode-light,
34
+ .traton .tl-mode-light,
35
+ .traton.tl-mode-light {
36
+ --component-popover-background-primary: var(--color-background-layer-01);
37
+ --component-popover-background-secondary: var(--color-background-layer-02);
38
+ --component-popover-background-link-primary-default: var(--color-background-none);
39
+ --component-popover-background-link-primary-hover: var(--traton-color-grey-150);
40
+ --component-popover-background-link-primary-active: var(--traton-color-grey-150);
41
+ --component-popover-background-link-secondary-default: var(--color-background-none);
42
+ --component-popover-background-link-secondary-hover: var(--traton-color-grey-150);
43
+ --component-popover-background-link-secondary-active: var(--traton-color-grey-150);
44
+ --component-popover-border-radius-default: var(--traton-unit-4);
45
+ --component-popover-icon-link-primary-default: var(--color-icon-strong);
46
+ --component-popover-icon-link-secondary-default: var(--color-icon-strong);
47
+ --component-popover-opacity-disabled: var(--traton-opacity-25);
48
+ --component-popover-text-link-primary-default: var(--color-text-strong);
49
+ --component-popover-text-link-primary-hover: var(--color-text-strong);
50
+ --component-popover-text-link-secondary-default: var(--color-text-strong);
51
+ --component-popover-text-link-secondary-hover: var(--color-text-strong);
52
+ }
53
+
54
+ .tds-mode-dark,
55
+ .scania .tds-mode-dark,
56
+ .scania.tds-mode-dark,
57
+ .scania .tl-mode-dark,
58
+ .scania.tl-mode-dark {
59
+ --component-popover-background-primary: var(--color-background-layer-01);
60
+ --component-popover-background-secondary: var(--color-background-layer-02);
61
+ --component-popover-background-link-primary-default: var(--color-background-none);
62
+ --component-popover-background-link-primary-hover: var(--scania-color-grey-850);
63
+ --component-popover-background-link-primary-active: var(
64
+ --component-popover-background-link-primary-hover
65
+ );
66
+ --component-popover-background-link-secondary-default: var(--color-background-none);
67
+ --component-popover-background-link-secondary-hover: var(--scania-color-grey-800);
68
+ --component-popover-background-link-secondary-active: var(
69
+ --component-popover-background-link-secondary-hover
70
+ );
71
+ --component-popover-border-radius-default: var(--scania-unit-4);
72
+ --component-popover-icon-link-primary-default: var(--color-icon-strong);
73
+ --component-popover-icon-link-secondary-default: var(--color-icon-strong);
74
+ --component-popover-opacity-disabled: var(--scania-opacity-25);
75
+ --component-popover-text-link-primary-default: var(--color-text-strong);
76
+ --component-popover-text-link-primary-hover: var(--color-text-strong);
77
+ --component-popover-text-link-secondary-default: var(--color-text-strong);
78
+ --component-popover-text-link-secondary-hover: var(--color-text-strong);
79
+ }
80
+
81
+ .traton .tds-mode-dark,
82
+ .traton.tds-mode-dark,
83
+ .traton .tl-mode-dark,
84
+ .traton.tl-mode-dark {
85
+ --component-popover-background-primary: var(--color-background-layer-01);
86
+ --component-popover-background-secondary: var(--color-background-layer-02);
87
+ --component-popover-background-link-primary-default: var(--color-background-none);
88
+ --component-popover-background-link-primary-hover: var(--traton-color-blue-900);
89
+ --component-popover-background-link-primary-active: var(--traton-color-blue-900);
90
+ --component-popover-background-link-secondary-default: var(--color-background-none);
91
+ --component-popover-background-link-secondary-hover: var(--traton-color-blue-850);
92
+ --component-popover-background-link-secondary-active: var(--traton-color-blue-850);
93
+ --component-popover-border-radius-default: var(--traton-unit-4);
94
+ --component-popover-icon-link-primary-default: var(--color-icon-strong);
95
+ --component-popover-icon-link-secondary-default: var(--color-icon-strong);
96
+ --component-popover-opacity-disabled: var(--traton-opacity-25);
97
+ --component-popover-text-link-primary-default: var(--color-text-strong);
98
+ --component-popover-text-link-primary-hover: var(--color-text-strong);
99
+ --component-popover-text-link-secondary-default: var(--color-text-strong);
100
+ --component-popover-text-link-secondary-hover: var(--color-text-strong);
101
+ }
102
+
103
+ .tl-popover-menu {
104
+ --popover-menu-text: var(--component-popover-text-link-primary-default);
105
+ --popover-menu-background: var(--component-popover-background-primary);
106
+ --popover-menu-background-hover: var(--component-popover-background-link-primary-hover);
107
+ --popover-menu-item-outline-focus: var(--component--focus-ring-color-strong);
108
+ --popover-menu-item-opacity-disabled: calc(var(--component-popover-opacity-disabled) / 100);
109
+ --popover-menu-box-shadow: 0 2px 3px 0 rgb(0, 0, 0, 0.1);
110
+ }
111
+
112
+ .tl-popover-menu--primary,
113
+ .tl-popover-menu .tl-popover-menu--primary {
114
+ --popover-menu-background: var(--component-popover-background-primary);
115
+ --popover-menu-background-hover: var(--component-popover-background-link-primary-hover);
116
+ }
117
+
118
+ .tl-popover-menu--secondary,
119
+ .tl-popover-menu .tl-popover-menu--secondary {
120
+ --popover-menu-background: var(--component-popover-background-secondary);
121
+ --popover-menu-background-hover: var(--component-popover-background-link-secondary-hover);
122
+ }
123
+
124
+ .traton .tl-popover-menu {
125
+ --popover-menu-box-shadow: none;
126
+ }
127
+
128
+ /* Typography Usage mixins */
129
+ .tl-popover-menu__item-wrapper {
130
+ box-sizing: border-box;
131
+ }
132
+ .tl-popover-menu__item-wrapper * {
133
+ box-sizing: border-box;
134
+ }
135
+ .tl-popover-menu__item-wrapper {
136
+ display: block;
137
+ padding: 16px 0;
138
+ }
139
+
140
+ .tl-popover-menu__item {
141
+ all: unset;
142
+ width: 100%;
143
+ display: flex;
144
+ align-items: center;
145
+ gap: 10px;
146
+ padding: 10px 16px;
147
+ color: var(--popover-menu-text);
148
+ position: relative;
149
+ transition: background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-easy);
150
+ font-family: var(--body-01-font-family);
151
+ font-size: var(--body-01-font-size);
152
+ line-height: var(--body-01-line-height);
153
+ font-weight: var(--body-01-font-weight);
154
+ letter-spacing: var(--body-01-letter-spacing);
155
+ text-transform: var(--body-01-text-transform);
156
+ }
157
+ .tl-popover-menu__item:hover {
158
+ cursor: pointer;
159
+ background-color: var(--popover-menu-background-hover);
160
+ }
161
+ .tl-popover-menu__item:focus-visible {
162
+ outline: 2px solid var(--popover-menu-item-outline-focus);
163
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
164
+ outline-offset: -2px;
165
+ z-index: 1;
166
+ }
167
+
168
+ .tl-popover-menu__item--disabled {
169
+ all: unset;
170
+ width: 100%;
171
+ display: flex;
172
+ align-items: center;
173
+ gap: 10px;
174
+ padding: 10px 16px;
175
+ cursor: not-allowed;
176
+ opacity: var(--popover-menu-item-opacity-disabled);
177
+ pointer-events: none;
178
+ font-family: var(--body-01-font-family);
179
+ font-size: var(--body-01-font-size);
180
+ line-height: var(--body-01-line-height);
181
+ font-weight: var(--body-01-font-weight);
182
+ letter-spacing: var(--body-01-letter-spacing);
183
+ text-transform: var(--body-01-text-transform);
184
+ }
185
+ .tl-popover-menu__item--disabled:hover {
186
+ background-color: inherit;
187
+ }
188
+ .tl-popover-menu__item--disabled:focus, .tl-popover-menu__item--disabled:focus-visible, .tl-popover-menu__item--disabled:active {
189
+ outline: none;
190
+ box-shadow: none;
191
+ }
192
+
193
+ .tl-popover-menu {
194
+ box-sizing: border-box;
195
+ }
196
+ .tl-popover-menu * {
197
+ box-sizing: border-box;
198
+ }
199
+ .tl-popover-menu {
200
+ overflow: hidden;
201
+ width: 160px;
202
+ background-color: var(--popover-menu-background);
203
+ box-shadow: var(--popover-menu-box-shadow);
204
+ border-radius: 4px;
205
+ z-index: 900;
206
+ pointer-events: none;
207
+ visibility: hidden;
208
+ }
209
+ .tl-popover-menu--visible {
210
+ visibility: visible;
211
+ pointer-events: auto;
212
+ }
213
+ .tl-popover-menu--fluid {
214
+ width: max-content;
215
+ display: inline-block;
216
+ }
217
+ .tl-popover-menu--animation-fade {
218
+ opacity: 0;
219
+ transform: translateY(4px);
220
+ transition: opacity 120ms ease-out, transform 120ms ease-out;
221
+ }
222
+ .tl-popover-menu--visible.tl-popover-menu--animation-fade {
223
+ opacity: 1;
224
+ transform: translateY(0);
225
+ }
226
+ .tl-popover-menu .tl-divider {
227
+ width: calc(100% - 12px);
228
+ margin: 6px;
229
+ }
package/dist/tl-text-field.css CHANGED
@@ -529,18 +529,10 @@
529
529
  mask-image: var(--icon-dollar-svg);
530
530
  background-color: currentcolor;
531
531
  }
532
- .tl-icon--dollar_sign {
533
- mask-image: var(--icon-dollar_sign-svg);
534
- background-color: currentcolor;
535
- }
536
532
  .tl-icon--doner {
537
533
  mask-image: var(--icon-doner-svg);
538
534
  background-color: currentcolor;
539
535
  }
540
- .tl-icon--donner {
541
- mask-image: var(--icon-donner-svg);
542
- background-color: currentcolor;
543
- }
544
536
  .tl-icon--double_kebab {
545
537
  mask-image: var(--icon-double_kebab-svg);
546
538
  background-color: currentcolor;
@@ -853,10 +845,6 @@
853
845
  mask-image: var(--icon-maximize_fullscreen-svg);
854
846
  background-color: currentcolor;
855
847
  }
856
- .tl-icon--meatball {
857
- mask-image: var(--icon-meatball-svg);
858
- background-color: currentcolor;
859
- }
860
848
  .tl-icon--meatballs {
861
849
  mask-image: var(--icon-meatballs-svg);
862
850
  background-color: currentcolor;
@@ -1101,10 +1089,6 @@
1101
1089
  mask-image: var(--icon-shuffle-svg);
1102
1090
  background-color: currentcolor;
1103
1091
  }
1104
- .tl-icon--skip_backward {
1105
- mask-image: var(--icon-skip_backward-svg);
1106
- background-color: currentcolor;
1107
- }
1108
1092
  .tl-icon--skip_backwards {
1109
1093
  mask-image: var(--icon-skip_backwards-svg);
1110
1094
  background-color: currentcolor;
package/dist/traton-variables.css CHANGED
@@ -763,8 +763,8 @@
763
763
  --traton-icon-document_wrong-svg: url(./assets/icons/traton/document_wrong.svg);
764
764
  --traton-icon-document_xls-svg: url(./assets/icons/traton/document_xls.svg);
765
765
  --traton-icon-document-svg: url(./assets/icons/traton/document.svg);
766
- --traton-icon-dollar_sign-svg: url(./assets/icons/traton/dollar_sign.svg);
767
- --traton-icon-donner-svg: url(./assets/icons/traton/donner.svg);
766
+ --traton-icon-dollar-svg: url(./assets/icons/traton/dollar.svg);
767
+ --traton-icon-doner-svg: url(./assets/icons/traton/doner.svg);
768
768
  --traton-icon-double_kebab-svg: url(./assets/icons/traton/double_kebab.svg);
769
769
  --traton-icon-download-svg: url(./assets/icons/traton/download.svg);
770
770
  --traton-icon-edit_inactive-svg: url(./assets/icons/traton/edit_inactive.svg);
@@ -797,7 +797,7 @@
797
797
  --traton-icon-link_broken-svg: url(./assets/icons/traton/link_broken.svg);
798
798
  --traton-icon-link-svg: url(./assets/icons/traton/link.svg);
799
799
  --traton-icon-lock-svg: url(./assets/icons/traton/lock.svg);
800
- --traton-icon-meatball-svg: url(./assets/icons/traton/meatball.svg);
800
+ --traton-icon-meatballs-svg: url(./assets/icons/traton/meatballs.svg);
801
801
  --traton-icon-message_inactive-svg: url(./assets/icons/traton/message_inactive.svg);
802
802
  --traton-icon-message-svg: url(./assets/icons/traton/message.svg);
803
803
  --traton-icon-mileage_inactive-svg: url(./assets/icons/traton/mileage_inactive.svg);
@@ -828,7 +828,7 @@
828
828
  --traton-icon-send-svg: url(./assets/icons/traton/send.svg);
829
829
  --traton-icon-settings-svg: url(./assets/icons/traton/settings.svg);
830
830
  --traton-icon-share-svg: url(./assets/icons/traton/share.svg);
831
- --traton-icon-skip_backward-svg: url(./assets/icons/traton/skip_backward.svg);
831
+ --traton-icon-skip_backwards-svg: url(./assets/icons/traton/skip_backwards.svg);
832
832
  --traton-icon-skip_forward-svg: url(./assets/icons/traton/skip_forward.svg);
833
833
  --traton-icon-smartphone_inactive-svg: url(./assets/icons/traton/smartphone_inactive.svg);
834
834
  --traton-icon-smartphone-svg: url(./assets/icons/traton/smartphone.svg);
@@ -888,8 +888,8 @@
888
888
  --icon-document_wrong-svg: var(--traton-icon-document_wrong-svg);
889
889
  --icon-document_xls-svg: var(--traton-icon-document_xls-svg);
890
890
  --icon-document-svg: var(--traton-icon-document-svg);
891
- --icon-dollar_sign-svg: var(--traton-icon-dollar_sign-svg);
892
- --icon-donner-svg: var(--traton-icon-donner-svg);
891
+ --icon-dollar-svg: var(--traton-icon-dollar-svg);
892
+ --icon-doner-svg: var(--traton-icon-doner-svg);
893
893
  --icon-double_kebab-svg: var(--traton-icon-double_kebab-svg);
894
894
  --icon-download-svg: var(--traton-icon-download-svg);
895
895
  --icon-edit_inactive-svg: var(--traton-icon-edit_inactive-svg);
@@ -922,7 +922,7 @@
922
922
  --icon-link_broken-svg: var(--traton-icon-link_broken-svg);
923
923
  --icon-link-svg: var(--traton-icon-link-svg);
924
924
  --icon-lock-svg: var(--traton-icon-lock-svg);
925
- --icon-meatball-svg: var(--traton-icon-meatball-svg);
925
+ --icon-meatballs-svg: var(--traton-icon-meatballs-svg);
926
926
  --icon-message_inactive-svg: var(--traton-icon-message_inactive-svg);
927
927
  --icon-message-svg: var(--traton-icon-message-svg);
928
928
  --icon-mileage_inactive-svg: var(--traton-icon-mileage_inactive-svg);
@@ -953,7 +953,7 @@
953
953
  --icon-send-svg: var(--traton-icon-send-svg);
954
954
  --icon-settings-svg: var(--traton-icon-settings-svg);
955
955
  --icon-share-svg: var(--traton-icon-share-svg);
956
- --icon-skip_backward-svg: var(--traton-icon-skip_backward-svg);
956
+ --icon-skip_backwards-svg: var(--traton-icon-skip_backwards-svg);
957
957
  --icon-skip_forward-svg: var(--traton-icon-skip_forward-svg);
958
958
  --icon-smartphone_inactive-svg: var(--traton-icon-smartphone_inactive-svg);
959
959
  --icon-smartphone-svg: var(--traton-icon-smartphone-svg);
@@ -984,10 +984,6 @@
984
984
  :root,
985
985
  .scania {
986
986
  --icon-document_word-svg: var(--scania-icon-placeholder-svg);
987
- --icon-dollar_sign-svg: var(--scania-icon-placeholder-svg);
988
- --icon-donner-svg: var(--scania-icon-placeholder-svg);
989
- --icon-meatball-svg: var(--scania-icon-placeholder-svg);
990
- --icon-skip_backward-svg: var(--scania-icon-placeholder-svg);
991
987
  }
992
988
 
993
989
  .traton {
@@ -1031,8 +1027,6 @@
1031
1027
  --icon-document_plus-svg: var(--traton-icon-placeholder-svg);
1032
1028
  --icon-document_plus_inactive-svg: var(--traton-icon-placeholder-svg);
1033
1029
  --icon-document_ppt-svg: var(--traton-icon-placeholder-svg);
1034
- --icon-dollar-svg: var(--traton-icon-placeholder-svg);
1035
- --icon-doner-svg: var(--traton-icon-placeholder-svg);
1036
1030
  --icon-driving_licence-svg: var(--traton-icon-placeholder-svg);
1037
1031
  --icon-driving_licence_inactive-svg: var(--traton-icon-placeholder-svg);
1038
1032
  --icon-drop-svg: var(--traton-icon-placeholder-svg);
@@ -1079,7 +1073,6 @@
1079
1073
  --icon-map_cursor-svg: var(--traton-icon-placeholder-svg);
1080
1074
  --icon-map_cursor_inactive-svg: var(--traton-icon-placeholder-svg);
1081
1075
  --icon-maximize_fullscreen-svg: var(--traton-icon-placeholder-svg);
1082
- --icon-meatballs-svg: var(--traton-icon-placeholder-svg);
1083
1076
  --icon-merge-svg: var(--traton-icon-placeholder-svg);
1084
1077
  --icon-merge_inactive-svg: var(--traton-icon-placeholder-svg);
1085
1078
  --icon-microphone-svg: var(--traton-icon-placeholder-svg);
@@ -1110,7 +1103,6 @@
1110
1103
  --icon-route-svg: var(--traton-icon-placeholder-svg);
1111
1104
  --icon-route_inactive-svg: var(--traton-icon-placeholder-svg);
1112
1105
  --icon-shuffle-svg: var(--traton-icon-placeholder-svg);
1113
- --icon-skip_backwards-svg: var(--traton-icon-placeholder-svg);
1114
1106
  --icon-target-svg: var(--traton-icon-placeholder-svg);
1115
1107
  --icon-target_inactive-svg: var(--traton-icon-placeholder-svg);
1116
1108
  --icon-temperature-svg: var(--traton-icon-placeholder-svg);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scania/tegel-lite",
3
- "version": "1.1.1",
3
+ "version": "1.2.0",
4
4
  "description": "Styles-only library for Tegel Design System (Beta)",
5
5
  "type": "module",
6
6
  "keywords": [
@@ -41,6 +41,8 @@
41
41
  "./tl-link.css": "./dist/tl-link.css",
42
42
  "./tl-message.css": "./dist/tl-message.css",
43
43
  "./tl-modal.css": "./dist/tl-modal.css",
44
+ "./tl-popover-canvas.css": "./dist/tl-popover-canvas.css",
45
+ "./tl-popover-menu.css": "./dist/tl-popover-menu.css",
44
46
  "./tl-radio-button.css": "./dist/tl-radio-button.css",
45
47
  "./tl-text-field.css": "./dist/tl-text-field.css",
46
48
  "./tl-textarea.css": "./dist/tl-textarea.css",