@scania/tegel-lite 1.9.1 → 1.10.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 +711 -46
  2. package/dist/tl-badge.css +99 -0
  3. package/dist/tl-slider.css +2567 -0
  4. package/dist/tl-spinner.css +148 -0
  5. package/package.json +6 -3
package/dist/tl-spinner.css ADDED
@@ -0,0 +1,148 @@
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-spinner-background-default: var(--color-system-info-default);
11
+ --component-spinner-background-default-inverse: var(--scania-color-grey-00);
12
+ --component-spinner-size-large: 84;
13
+ --component-spinner-size-medium: 52;
14
+ --component-spinner-size-small: 24;
15
+ --component-spinner-size-extra-small: 16;
16
+ --component-spinner-stroke-large: 8;
17
+ --component-spinner-stroke-medium: 6;
18
+ --component-spinner-stroke-small: 4;
19
+ --component-spinner-stroke-extra-small: 3;
20
+ }
21
+
22
+ .traton .tds-mode-light,
23
+ .traton.tds-mode-light,
24
+ .traton .tl-mode-light,
25
+ .traton.tl-mode-light {
26
+ --component-spinner-background-default: var(--traton-color-blue-800);
27
+ --component-spinner-background-default-inverse: var(--traton-color-transparent-inverse-950);
28
+ --component-spinner-size-large: 84;
29
+ --component-spinner-size-medium: 52;
30
+ --component-spinner-size-small: 24;
31
+ --component-spinner-size-extra-small: 16;
32
+ --component-spinner-stroke-large: 8;
33
+ --component-spinner-stroke-medium: 6;
34
+ --component-spinner-stroke-small: 4;
35
+ --component-spinner-stroke-extra-small: 3;
36
+ }
37
+
38
+ .tds-mode-dark,
39
+ .scania .tds-mode-dark,
40
+ .scania.tds-mode-dark,
41
+ .scania .tl-mode-dark,
42
+ .scania.tl-mode-dark {
43
+ --component-spinner-background-default: var(--color-system-info-default);
44
+ --component-spinner-background-default-inverse: var(--scania-color-grey-00);
45
+ --component-spinner-size-large: 84;
46
+ --component-spinner-size-medium: 52;
47
+ --component-spinner-size-small: 24;
48
+ --component-spinner-size-extra-small: 16;
49
+ --component-spinner-stroke-large: 8;
50
+ --component-spinner-stroke-medium: 6;
51
+ --component-spinner-stroke-small: 4;
52
+ --component-spinner-stroke-extra-small: 3;
53
+ }
54
+
55
+ .traton .tds-mode-dark,
56
+ .traton.tds-mode-dark,
57
+ .traton .tl-mode-dark,
58
+ .traton.tl-mode-dark {
59
+ --component-spinner-background-default: var(--traton-color-grey-300);
60
+ --component-spinner-background-default-inverse: var(--traton-color-transparent-inverse-950);
61
+ --component-spinner-size-large: 84;
62
+ --component-spinner-size-medium: 52;
63
+ --component-spinner-size-small: 24;
64
+ --component-spinner-size-extra-small: 16;
65
+ --component-spinner-stroke-large: 8;
66
+ --component-spinner-stroke-medium: 6;
67
+ --component-spinner-stroke-small: 4;
68
+ --component-spinner-stroke-extra-small: 3;
69
+ }
70
+
71
+ /* Component variables */
72
+ .tl-spinner {
73
+ --tl-spinner-background: var(--component-spinner-background-default);
74
+ --tl-spinner-background-inverted: var(--component-spinner-background-default-inverse);
75
+ --tl-spinner-speed: 1.8s;
76
+ --tl-spinner-speed-lg: 2s;
77
+ --tl-spinner-radius-xs: calc(var(--component-spinner-size-extra-small) / 2 * 1px);
78
+ --tl-spinner-radius-sm: calc(var(--component-spinner-size-small) / 2 * 1px);
79
+ --tl-spinner-radius-md: calc(var(--component-spinner-size-medium) / 2 * 1px);
80
+ --tl-spinner-radius-lg: calc(var(--component-spinner-size-large) / 2 * 1px);
81
+ --tl-spinner-stroke-width-xs: calc(var(--component-spinner-stroke-extra-small) * 1px);
82
+ --tl-spinner-stroke-width-sm: calc(var(--component-spinner-stroke-small) * 1px);
83
+ --tl-spinner-stroke-width-md: calc(var(--component-spinner-stroke-medium) * 1px);
84
+ --tl-spinner-stroke-width-lg: calc(var(--component-spinner-stroke-large) * 1px);
85
+ --tl-spinner-PI: 3.14159265358979;
86
+ --tl-spinner-radius: var(--tl-spinner-radius-lg);
87
+ --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-lg);
88
+ --tl-spinner-animation-speed: var(--tl-spinner-speed-lg);
89
+ }
90
+
91
+ .tl-spinner {
92
+ box-sizing: border-box;
93
+ }
94
+ .tl-spinner * {
95
+ box-sizing: border-box;
96
+ }
97
+ .tl-spinner {
98
+ display: block;
99
+ width: calc(var(--tl-spinner-radius) * 2);
100
+ height: calc(var(--tl-spinner-radius) * 2);
101
+ transform: scale(-1, 1) rotate(-90deg);
102
+ }
103
+ .tl-spinner--xs {
104
+ --tl-spinner-radius: var(--tl-spinner-radius-xs);
105
+ --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-xs);
106
+ --tl-spinner-animation-speed: var(--tl-spinner-speed);
107
+ }
108
+ .tl-spinner--sm {
109
+ --tl-spinner-radius: var(--tl-spinner-radius-sm);
110
+ --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-sm);
111
+ --tl-spinner-animation-speed: var(--tl-spinner-speed);
112
+ }
113
+ .tl-spinner--md {
114
+ --tl-spinner-radius: var(--tl-spinner-radius-md);
115
+ --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-md);
116
+ --tl-spinner-animation-speed: var(--tl-spinner-speed);
117
+ }
118
+ .tl-spinner--lg {
119
+ --tl-spinner-radius: var(--tl-spinner-radius-lg);
120
+ --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-lg);
121
+ --tl-spinner-animation-speed: var(--tl-spinner-speed-lg);
122
+ }
123
+ .tl-spinner--default {
124
+ stroke: var(--tl-spinner-background);
125
+ }
126
+ .tl-spinner--inverted {
127
+ stroke: var(--tl-spinner-background-inverted);
128
+ }
129
+
130
+ .tl-spinner__circle {
131
+ cx: var(--tl-spinner-radius);
132
+ cy: var(--tl-spinner-radius);
133
+ r: calc(var(--tl-spinner-radius) - var(--tl-spinner-stroke-width) / 2);
134
+ fill: none;
135
+ --tl-spinner-stroke-dash: calc((2 * var(--tl-spinner-PI)) * var(--tl-spinner-radius));
136
+ stroke-dasharray: var(--tl-spinner-stroke-dash);
137
+ stroke-width: var(--tl-spinner-stroke-width);
138
+ animation: tl-spinner-dash var(--tl-spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
139
+ }
140
+
141
+ @keyframes tl-spinner-dash {
142
+ from {
143
+ stroke-dashoffset: calc(-1 * var(--tl-spinner-stroke-dash));
144
+ }
145
+ to {
146
+ stroke-dashoffset: var(--tl-spinner-stroke-dash);
147
+ }
148
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scania/tegel-lite",
3
- "version": "1.9.1",
3
+ "version": "1.10.0",
4
4
  "description": "Styles-only library for Tegel Design System (Beta)",
5
5
  "type": "module",
6
6
  "keywords": [
@@ -28,6 +28,7 @@
28
28
  "./traton-variables.css": "./dist/traton-variables.css",
29
29
  "./components.css": "./dist/components.css",
30
30
  "./tl-accordion.css": "./dist/tl-accordion.css",
31
+ "./tl-badge.css": "./dist/tl-badge.css",
31
32
  "./tl-banner.css": "./dist/tl-banner.css",
32
33
  "./tl-block.css": "./dist/tl-block.css",
33
34
  "./tl-breadcrumbs.css": "./dist/tl-breadcrumbs.css",
@@ -51,6 +52,8 @@
51
52
  "./tl-popover-menu.css": "./dist/tl-popover-menu.css",
52
53
  "./tl-radio-button.css": "./dist/tl-radio-button.css",
53
54
  "./tl-side-menu.css": "./dist/tl-side-menu.css",
55
+ "./tl-slider.css": "./dist/tl-slider.css",
56
+ "./tl-spinner.css": "./dist/tl-spinner.css",
54
57
  "./tl-stepper.css": "./dist/tl-stepper.css",
55
58
  "./tl-table.css": "./dist/tl-table.css",
56
59
  "./tl-text-field.css": "./dist/tl-text-field.css",
@@ -70,8 +73,8 @@
70
73
  "dist/"
71
74
  ],
72
75
  "devDependencies": {
73
- "@playwright/test": "1.63.0",
74
- "@types/node": "26.6.4",
76
+ "@playwright/test": "1.64.0",
77
+ "@types/node": "26.6.5",
75
78
  "serve": "^14.2.5"
76
79
  },
77
80
  "license": "MIT",