@scania/tegel-lite 1.1.2 → 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 (5) hide show
  1. package/dist/components.css +301 -1
  2. package/dist/tl-accordion.css +1 -1
  3. package/dist/tl-popover-canvas.css +173 -0
  4. package/dist/tl-popover-menu.css +229 -0
  5. 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);
@@ -4979,6 +4979,306 @@ body {
4979
4979
  display: block;
4980
4980
  }
4981
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
+
4982
5282
  /**
4983
5283
  * Do not edit directly, this file was auto-generated.
4984
5284
  */
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-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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scania/tegel-lite",
3
- "version": "1.1.2",
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",