@knime/kds-components 0.28.3 → 0.28.5

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 (29) hide show
  1. package/dist/cell-renderer-DGnkQWTq.js +23 -0
  2. package/dist/cell-renderer-DGnkQWTq.js.map +1 -0
  3. package/dist/column-width-Cjb-6nqI.js +23 -0
  4. package/dist/column-width-Cjb-6nqI.js.map +1 -0
  5. package/dist/index.css +66 -87
  6. package/dist/index.js +311 -300
  7. package/dist/index.js.map +1 -1
  8. package/dist/path-separator-DRnUilGA.js +23 -0
  9. package/dist/path-separator-DRnUilGA.js.map +1 -0
  10. package/dist/src/accessories/Badge/enums.d.ts +1 -1
  11. package/dist/src/accessories/Icon/KdsDataType.vue.d.ts +3 -1
  12. package/dist/src/accessories/Icon/KdsDataType.vue.d.ts.map +1 -1
  13. package/dist/src/accessories/Icon/KdsIcon.vue.d.ts +3 -1
  14. package/dist/src/accessories/Icon/KdsIcon.vue.d.ts.map +1 -1
  15. package/dist/src/accessories/Icon/types.d.ts +8 -0
  16. package/dist/src/accessories/Icon/types.d.ts.map +1 -1
  17. package/dist/src/accessories/Icon/useIcon.d.ts +5 -1
  18. package/dist/src/accessories/Icon/useIcon.d.ts.map +1 -1
  19. package/dist/src/accessories/InlineMessage/enums.d.ts +1 -1
  20. package/dist/src/buttons/KdsProgressButton/enums.d.ts +1 -1
  21. package/dist/src/layouts/Navigation/KdsNavItem/KdsNavItem.vue.d.ts +1 -0
  22. package/dist/src/layouts/Navigation/KdsNavItem/KdsNavItem.vue.d.ts.map +1 -1
  23. package/dist/src/layouts/Navigation/KdsNavItem/types.d.ts +3 -1
  24. package/dist/src/layouts/Navigation/KdsNavItem/types.d.ts.map +1 -1
  25. package/dist/src/layouts/Panel/KdsPanel.vue.d.ts.map +1 -1
  26. package/dist/src/overlays/Modal/KdsModal.vue.d.ts +1 -1
  27. package/dist/table-statistics-y-P6EXGX.js +23 -0
  28. package/dist/table-statistics-y-P6EXGX.js.map +1 -0
  29. package/package.json +2 -2
@@ -0,0 +1,23 @@
1
+ import { openBlock, createElementBlock, createElementVNode } from 'vue';
2
+
3
+ const _hoisted_1 = {
4
+ xmlns: "http://www.w3.org/2000/svg",
5
+ fill: "none",
6
+ stroke: "currentColor",
7
+ "stroke-linecap": "round",
8
+ "stroke-linejoin": "round",
9
+ viewBox: "0 0 12 12"
10
+ };
11
+
12
+ function render(_ctx, _cache) {
13
+ return (openBlock(), createElementBlock("svg", _hoisted_1, [...(_cache[0] || (_cache[0] = [
14
+ createElementVNode("path", {
15
+ d: "M1 4.5V3.25A1.25 1.25 0 0 1 2.25 2H3.5M1 7.5v1.25A1.25 1.25 0 0 0 2.25 10H3.5m5-8h1.25A1.25 1.25 0 0 1 11 3.25V4.5M8.5 10h1.25A1.25 1.25 0 0 0 11 8.75V7.5",
16
+ "vector-effect": "non-scaling-stroke"
17
+ }, null, -1)
18
+ ]))]))
19
+ }
20
+ const cellRenderer = { render: render };
21
+
22
+ export { cellRenderer as default, render };
23
+ //# sourceMappingURL=cell-renderer-DGnkQWTq.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cell-renderer-DGnkQWTq.js","sources":["../../styles/dist/img/icons/cell-renderer.svg"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = {\n xmlns: \"http://www.w3.org/2000/svg\",\n fill: \"none\",\n stroke: \"currentColor\",\n \"stroke-linecap\": \"round\",\n \"stroke-linejoin\": \"round\",\n viewBox: \"0 0 12 12\"\n}\n\nexport function render(_ctx, _cache) {\n return (_openBlock(), _createElementBlock(\"svg\", _hoisted_1, [...(_cache[0] || (_cache[0] = [\n _createElementVNode(\"path\", {\n d: \"M1 4.5V3.25A1.25 1.25 0 0 1 2.25 2H3.5M1 7.5v1.25A1.25 1.25 0 0 0 2.25 10H3.5m5-8h1.25A1.25 1.25 0 0 1 11 3.25V4.5M8.5 10h1.25A1.25 1.25 0 0 0 11 8.75V7.5\",\n \"vector-effect\": \"non-scaling-stroke\"\n }, null, -1)\n ]))]))\n}\nexport default { render: render }"],"names":["_openBlock","_createElementBlock","_createElementVNode"],"mappings":";;AAEA,MAAM,UAAU,GAAG;AACnB,EAAE,KAAK,EAAE,4BAA4B;AACrC,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,MAAM,EAAE,cAAc;AACxB,EAAE,gBAAgB,EAAE,OAAO;AAC3B,EAAE,iBAAiB,EAAE,OAAO;AAC5B,EAAE,OAAO,EAAE;AACX;;AAEO,SAAS,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE;AACrC,EAAE,QAAQA,SAAU,EAAE,EAAEC,kBAAmB,CAAC,KAAK,EAAE,UAAU,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG;AAC9F,IAAIC,kBAAmB,CAAC,MAAM,EAAE;AAChC,MAAM,CAAC,EAAE,4JAA4J;AACrK,MAAM,eAAe,EAAE;AACvB,KAAK,EAAE,IAAI,EAAE,EAAE;AACf,GAAG,CAAC,CAAC,CAAC,CAAC;AACP;AACA,qBAAe,EAAE,MAAM,EAAE,MAAM;;;;"}
@@ -0,0 +1,23 @@
1
+ import { openBlock, createElementBlock, createElementVNode } from 'vue';
2
+
3
+ const _hoisted_1 = {
4
+ xmlns: "http://www.w3.org/2000/svg",
5
+ fill: "none",
6
+ stroke: "currentColor",
7
+ "stroke-linecap": "round",
8
+ "stroke-linejoin": "round",
9
+ viewBox: "0 0 12 12"
10
+ };
11
+
12
+ function render(_ctx, _cache) {
13
+ return (openBlock(), createElementBlock("svg", _hoisted_1, [...(_cache[0] || (_cache[0] = [
14
+ createElementVNode("path", {
15
+ d: "M3 6h4.026m-2.77 1.25L3 6l1.256-1.25M7.026 6H9M7.026 6H4.974m2.77-1.25L9 6 7.744 7.25M1 2v8m10-8v8",
16
+ "vector-effect": "non-scaling-stroke"
17
+ }, null, -1)
18
+ ]))]))
19
+ }
20
+ const columnWidth = { render: render };
21
+
22
+ export { columnWidth as default, render };
23
+ //# sourceMappingURL=column-width-Cjb-6nqI.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"column-width-Cjb-6nqI.js","sources":["../../styles/dist/img/icons/column-width.svg"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = {\n xmlns: \"http://www.w3.org/2000/svg\",\n fill: \"none\",\n stroke: \"currentColor\",\n \"stroke-linecap\": \"round\",\n \"stroke-linejoin\": \"round\",\n viewBox: \"0 0 12 12\"\n}\n\nexport function render(_ctx, _cache) {\n return (_openBlock(), _createElementBlock(\"svg\", _hoisted_1, [...(_cache[0] || (_cache[0] = [\n _createElementVNode(\"path\", {\n d: \"M3 6h4.026m-2.77 1.25L3 6l1.256-1.25M7.026 6H9M7.026 6H4.974m2.77-1.25L9 6 7.744 7.25M1 2v8m10-8v8\",\n \"vector-effect\": \"non-scaling-stroke\"\n }, null, -1)\n ]))]))\n}\nexport default { render: render }"],"names":["_openBlock","_createElementBlock","_createElementVNode"],"mappings":";;AAEA,MAAM,UAAU,GAAG;AACnB,EAAE,KAAK,EAAE,4BAA4B;AACrC,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,MAAM,EAAE,cAAc;AACxB,EAAE,gBAAgB,EAAE,OAAO;AAC3B,EAAE,iBAAiB,EAAE,OAAO;AAC5B,EAAE,OAAO,EAAE;AACX;;AAEO,SAAS,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE;AACrC,EAAE,QAAQA,SAAU,EAAE,EAAEC,kBAAmB,CAAC,KAAK,EAAE,UAAU,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG;AAC9F,IAAIC,kBAAmB,CAAC,MAAM,EAAE;AAChC,MAAM,CAAC,EAAE,oGAAoG;AAC7G,MAAM,eAAe,EAAE;AACvB,KAAK,EAAE,IAAI,EAAE,EAAE;AACf,GAAG,CAAC,CAAC,CAAC,CAAC;AACP;AACA,oBAAe,EAAE,MAAM,EAAE,MAAM;;;;"}
package/dist/index.css CHANGED
@@ -116,7 +116,7 @@
116
116
  }
117
117
  }
118
118
  .kds-icon {
119
- &[data-v-fb124eb6] {
119
+ &[data-v-bff4f419] {
120
120
  --icon-width: var(--kds-dimension-icon-1x);
121
121
  --icon-height: var(--kds-dimension-icon-1x);
122
122
  --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
@@ -131,7 +131,7 @@
131
131
  stroke-width: var(--icon-stroke-width);
132
132
  shape-rendering: geometricPrecision;
133
133
  }
134
- &.xsmall[data-v-fb124eb6] {
134
+ &.xsmall[data-v-bff4f419] {
135
135
  --icon-width: var(--kds-dimension-icon-0-56x);
136
136
  --icon-height: var(--kds-dimension-icon-0-56x);
137
137
  --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
@@ -140,7 +140,7 @@
140
140
  rendering issues which manifests in misaligned or 'jumping' svg content.
141
141
  Solution is to render the SVG in it's natural size (don't indirectly modify the viewBox) and instead apply a
142
142
  CSS transform. Thus the position of the SVG elements stays intact. */
143
- &[data-v-fb124eb6] {
143
+ &[data-v-bff4f419] {
144
144
  --scaling-factor: 0.75;
145
145
  --icon-width: var(--kds-dimension-icon-0-75x);
146
146
  --icon-height: var(--kds-dimension-icon-0-75x);
@@ -151,22 +151,22 @@
151
151
  }
152
152
  }
153
153
  }
154
- &.small[data-v-fb124eb6] {
154
+ &.small[data-v-bff4f419] {
155
155
  --icon-width: var(--kds-dimension-icon-0-75x);
156
156
  --icon-height: var(--kds-dimension-icon-0-75x);
157
157
  --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
158
158
  }
159
- &.large[data-v-fb124eb6] {
159
+ &.large[data-v-bff4f419] {
160
160
  --icon-width: var(--kds-dimension-icon-1-25x);
161
161
  --icon-height: var(--kds-dimension-icon-1-25x);
162
162
  --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
163
163
  }
164
164
  }
165
- .kds-icon.disabled[data-v-fb124eb6] {
165
+ .kds-icon.disabled[data-v-bff4f419] {
166
166
  color: var(--kds-color-text-and-icon-disabled);
167
167
  }
168
168
  .kds-icon {
169
- &[data-v-3b8ebdbd] {
169
+ &[data-v-38e9537f] {
170
170
  --icon-width: var(--kds-dimension-icon-1x);
171
171
  --icon-height: var(--kds-dimension-icon-1x);
172
172
  --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
@@ -181,7 +181,7 @@
181
181
  stroke-width: var(--icon-stroke-width);
182
182
  shape-rendering: geometricPrecision;
183
183
  }
184
- &.xsmall[data-v-3b8ebdbd] {
184
+ &.xsmall[data-v-38e9537f] {
185
185
  --icon-width: var(--kds-dimension-icon-0-56x);
186
186
  --icon-height: var(--kds-dimension-icon-0-56x);
187
187
  --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
@@ -190,7 +190,7 @@
190
190
  rendering issues which manifests in misaligned or 'jumping' svg content.
191
191
  Solution is to render the SVG in it's natural size (don't indirectly modify the viewBox) and instead apply a
192
192
  CSS transform. Thus the position of the SVG elements stays intact. */
193
- &[data-v-3b8ebdbd] {
193
+ &[data-v-38e9537f] {
194
194
  --scaling-factor: 0.75;
195
195
  --icon-width: var(--kds-dimension-icon-0-75x);
196
196
  --icon-height: var(--kds-dimension-icon-0-75x);
@@ -201,19 +201,19 @@
201
201
  }
202
202
  }
203
203
  }
204
- &.small[data-v-3b8ebdbd] {
204
+ &.small[data-v-38e9537f] {
205
205
  --icon-width: var(--kds-dimension-icon-0-75x);
206
206
  --icon-height: var(--kds-dimension-icon-0-75x);
207
207
  --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
208
208
  }
209
- &.large[data-v-3b8ebdbd] {
209
+ &.large[data-v-38e9537f] {
210
210
  --icon-width: var(--kds-dimension-icon-1-25x);
211
211
  --icon-height: var(--kds-dimension-icon-1-25x);
212
212
  --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
213
213
  }
214
214
  }
215
215
  .kds-data-type-icon-container {
216
- &[data-v-3b8ebdbd] {
216
+ &[data-v-38e9537f] {
217
217
  --data-type-height: var(--kds-dimension-component-height-1x);
218
218
  --data-type-width: var(--kds-dimension-component-width-1x);
219
219
  --data-type-padding: var(--kds-spacing-container-0-12x);
@@ -231,23 +231,23 @@
231
231
 
232
232
  /* The kds-data-type-icon class is needed to increase the specificity to overwrite the icon-stroke-width */
233
233
  }
234
- &.disabled[data-v-3b8ebdbd] {
234
+ &.disabled[data-v-38e9537f] {
235
235
  color: var(--kds-color-text-and-icon-disabled);
236
236
  }
237
- &.small[data-v-3b8ebdbd] {
237
+ &.small[data-v-38e9537f] {
238
238
  --data-type-height: var(--kds-dimension-icon-0-75x);
239
239
  --data-type-width: var(--kds-dimension-icon-0-75x);
240
240
  --data-type-padding: var(--kds-spacing-container-none);
241
241
  }
242
- &.large[data-v-3b8ebdbd] {
242
+ &.large[data-v-38e9537f] {
243
243
  --data-type-height: var(--kds-dimension-component-height-1-25x);
244
244
  --data-type-width: var(--kds-dimension-component-width-1-25x);
245
245
  }
246
246
  & .kds-icon.kds-data-type-icon {
247
- &.small[data-v-3b8ebdbd] {
247
+ &.small[data-v-38e9537f] {
248
248
  --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
249
249
  }
250
- &.medium[data-v-3b8ebdbd] {
250
+ &.medium[data-v-38e9537f] {
251
251
  --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
252
252
  }
253
253
  }
@@ -3262,7 +3262,7 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
3262
3262
  }
3263
3263
 
3264
3264
  .kds-panel {
3265
- &[data-v-b56ad38d] {
3265
+ &[data-v-d3124a50] {
3266
3266
  display: flex;
3267
3267
  flex-direction: column;
3268
3268
  width: 100%;
@@ -3270,7 +3270,7 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
3270
3270
  min-height: 0;
3271
3271
  background-color: var(--kds-color-surface-default);
3272
3272
  }
3273
- .kds-panel-header[data-v-b56ad38d] {
3273
+ .kds-panel-header[data-v-d3124a50] {
3274
3274
  display: flex;
3275
3275
  flex: 0 0 auto;
3276
3276
  gap: var(--kds-spacing-container-0-25x);
@@ -3280,13 +3280,13 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
3280
3280
  calc(var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs));
3281
3281
  border-bottom: var(--kds-border-base-subtle);
3282
3282
  }
3283
- .kds-panel-headline[data-v-b56ad38d] {
3283
+ .kds-panel-headline[data-v-d3124a50] {
3284
3284
  display: flex;
3285
3285
  flex: 1 1 auto;
3286
3286
  align-items: center;
3287
3287
  min-width: 0;
3288
3288
  }
3289
- .kds-panel-headline-text[data-v-b56ad38d] {
3289
+ .kds-panel-headline-text[data-v-d3124a50] {
3290
3290
  flex: 1 1 auto;
3291
3291
  min-width: 0;
3292
3292
  margin: 0;
@@ -3295,7 +3295,7 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
3295
3295
  font: var(--kds-font-base-title-medium-strong);
3296
3296
  white-space: nowrap;
3297
3297
  }
3298
- .kds-panel-header-trailing[data-v-b56ad38d] {
3298
+ .kds-panel-header-trailing[data-v-d3124a50] {
3299
3299
  display: flex;
3300
3300
  flex: 0 0 auto;
3301
3301
  gap: var(--kds-spacing-container-0-25x);
@@ -3303,21 +3303,21 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
3303
3303
  margin-left: auto;
3304
3304
  }
3305
3305
  .kds-panel-body {
3306
- &[data-v-b56ad38d] {
3306
+ &[data-v-d3124a50] {
3307
3307
  flex: 1 1 auto;
3308
3308
  min-height: 0;
3309
- overflow: var(--cd61c39a);
3309
+ overflow: var(--v2ddcad1c);
3310
3310
  }
3311
- &[data-variant="padded"][data-v-b56ad38d] {
3311
+ &[data-variant="padded"][data-v-d3124a50] {
3312
3312
  padding: var(--kds-spacing-container-0-75x);
3313
3313
  }
3314
- &[tabindex="0"][data-v-b56ad38d]:focus-visible {
3314
+ &[tabindex="0"][data-v-d3124a50]:focus-visible {
3315
3315
  outline: var(--kds-border-action-focused);
3316
3316
  outline-offset: var(--kds-spacing-offset-focus);
3317
3317
  border-radius: var(--kds-border-radius-container-0-31x);
3318
3318
  }
3319
3319
  }
3320
- .kds-panel-footer[data-v-b56ad38d] {
3320
+ .kds-panel-footer[data-v-d3124a50] {
3321
3321
  display: flex;
3322
3322
  flex: 0 0 auto;
3323
3323
  gap: var(--kds-spacing-container-0-25x);
@@ -3328,8 +3328,8 @@ textarea[data-v-8e5a54cf]::-webkit-scrollbar {
3328
3328
  var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x);
3329
3329
  border-top: var(--kds-border-base-subtle);
3330
3330
  }
3331
- .kds-panel-footer-leading[data-v-b56ad38d],
3332
- .kds-panel-footer-trailing[data-v-b56ad38d] {
3331
+ .kds-panel-footer-leading[data-v-d3124a50],
3332
+ .kds-panel-footer-trailing[data-v-d3124a50] {
3333
3333
  display: flex;
3334
3334
  gap: var(--kds-spacing-container-0-25x);
3335
3335
  align-items: center;
@@ -3627,123 +3627,102 @@ to {
3627
3627
  }
3628
3628
 
3629
3629
  .kds-nav-item {
3630
- &[data-v-d5db7ff7] {
3630
+ &[data-v-17711664] {
3631
3631
  position: relative;
3632
- display: flex;
3633
- flex: 1 1 auto;
3634
- gap: var(--kds-spacing-container-0-37x);
3635
- align-items: center;
3636
3632
  height: var(--kds-dimension-component-height-1-75x);
3637
3633
  min-height: var(--kds-dimension-component-height-1-5x);
3638
- padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-75x);
3639
3634
  background: var(--kds-color-background-neutral-initial);
3640
3635
  border-radius: var(--kds-border-radius-container-0-31x);
3641
3636
  }
3642
- &[data-v-d5db7ff7]:has(.kds-nav-button:focus-visible) {
3637
+ &[data-v-17711664]:has(.kds-nav-button:focus-visible) {
3643
3638
  outline: var(--kds-border-action-focused);
3644
3639
  outline-offset: calc(-1 * var(--kds-core-border-width-m));
3645
3640
  }
3646
3641
  & .kds-nav-button {
3647
- &[data-v-d5db7ff7] {
3642
+ &[data-v-17711664] {
3648
3643
 
3649
3644
  display: flex;
3650
- flex: 1 1 auto;
3651
3645
  flex-direction: row;
3652
3646
  gap: var(--kds-spacing-container-0-37x);
3653
- min-width: 0;
3654
- padding: 0;
3647
+ align-items: center;
3648
+ width: 100%;
3649
+ height: 100%;
3650
+ padding: 0 var(--v29854424) 0 var(--kds-spacing-container-0-75x);
3651
+ color: var(--kds-color-text-and-icon-neutral);
3655
3652
  text-decoration: none;
3656
3653
  cursor: pointer;
3657
3654
  user-select: none;
3658
3655
  background: transparent;
3659
3656
  border: none;
3660
3657
  }
3661
- &[data-v-d5db7ff7]:focus-visible {
3658
+ &[data-v-17711664]:focus-visible {
3662
3659
  outline: none;
3663
3660
  }
3664
- & .content {
3665
- &[data-v-d5db7ff7] {
3666
- display: flex;
3661
+ & .label[data-v-17711664] {
3667
3662
  flex: 1 1 auto;
3668
- flex-direction: row;
3669
- gap: var(--kds-spacing-container-0-37x);
3670
- align-items: flex-start;
3671
- justify-content: center;
3672
3663
  min-width: 0;
3673
- }
3674
- & .label[data-v-d5db7ff7] {
3675
- width: 100%;
3676
- overflow: hidden;
3677
- text-overflow: ellipsis;
3678
- font: var(--kds-font-base-interactive-medium);
3679
- color: var(--kds-color-text-and-icon-neutral);
3680
- text-align: left;
3681
- white-space: nowrap;
3682
- }
3664
+ overflow: hidden;
3665
+ text-overflow: ellipsis;
3666
+ font: var(--kds-font-base-interactive-medium);
3667
+ text-align: left;
3668
+ white-space: nowrap;
3683
3669
  }
3684
3670
  }
3685
- & .trailing-items {
3686
- &[data-v-d5db7ff7] {
3671
+ & .trailing-items[data-v-17711664] {
3672
+ position: absolute;
3673
+ top: 0;
3674
+ right: var(--kds-spacing-container-0-75x);
3687
3675
  display: flex;
3688
3676
  flex-direction: row;
3689
3677
  gap: var(--kds-spacing-container-0-37x);
3690
3678
  align-items: center;
3679
+ justify-content: center;
3680
+ height: 100%;
3681
+ color: var(--kds-color-text-and-icon-neutral);
3691
3682
  }
3692
- & .trailing-icon[data-v-d5db7ff7] {
3693
- color: inherit;
3694
- }
3695
- }
3696
- &[data-v-d5db7ff7]:hover:not(.disabled) {
3683
+ &[data-v-17711664]:hover:not(.disabled) {
3697
3684
  background: var(--kds-color-background-neutral-hover);
3698
3685
  }
3699
- &[data-v-d5db7ff7]:has(.kds-nav-button:active):not(.disabled) {
3686
+ &[data-v-17711664]:has(.kds-nav-button:active):not(.disabled) {
3700
3687
  background: var(--kds-color-background-neutral-active);
3701
3688
  }
3702
3689
  &.selected {
3703
- &[data-v-d5db7ff7] {
3690
+ &[data-v-17711664] {
3704
3691
  background: var(--kds-color-background-selected-initial);
3705
3692
  }
3706
- & .kds-nav-button .content {
3707
- &[data-v-d5db7ff7] {
3693
+ & .kds-nav-button[data-v-17711664] {
3708
3694
  color: var(--kds-color-text-and-icon-selected);
3709
3695
  }
3710
- & .label[data-v-d5db7ff7] {
3711
- color: var(--kds-color-text-and-icon-selected);
3712
- }
3713
- }
3714
- & .trailing-items .trailing-icon[data-v-d5db7ff7] {
3696
+ & .trailing-items[data-v-17711664] {
3715
3697
  color: var(--kds-color-text-and-icon-selected);
3716
3698
  }
3717
- & .indicator-selected[data-v-d5db7ff7] {
3699
+ &[data-v-17711664]::before {
3718
3700
  position: absolute;
3719
3701
  top: var(--kds-spacing-container-0-37x);
3720
3702
  left: 0;
3721
3703
  width: var(--kds-dimension-component-width-0-125x);
3722
3704
  height: var(--kds-dimension-component-height-1x);
3705
+ content: "";
3723
3706
  background: var(--kds-color-background-selected-bold-initial);
3724
3707
  border-top-right-radius: var(--kds-border-radius-container-0-12x);
3725
3708
  border-bottom-right-radius: var(--kds-border-radius-container-0-12x);
3726
3709
  }
3727
- &[data-v-d5db7ff7]:hover:not(.disabled) {
3710
+ &[data-v-17711664]:hover:not(.disabled) {
3728
3711
  background: var(--kds-color-background-selected-hover);
3729
3712
  }
3730
- &[data-v-d5db7ff7]:has(.kds-nav-button:active):not(.disabled) {
3713
+ &[data-v-17711664]:has(.kds-nav-button:active):not(.disabled) {
3731
3714
  background: var(--kds-color-background-selected-active);
3732
3715
  }
3733
3716
  }
3734
3717
  &.disabled {
3735
- &[data-v-d5db7ff7] {
3736
- cursor: not-allowed;
3737
- }
3738
- & .kds-nav-button {
3739
- &[data-v-d5db7ff7] {
3740
- cursor: not-allowed;
3741
- }
3742
- & .content .label[data-v-d5db7ff7] {
3743
- color: var(--kds-color-text-and-icon-disabled);
3718
+ &[data-v-17711664] {
3719
+ cursor: default;
3744
3720
  }
3721
+ & .kds-nav-button[data-v-17711664] {
3722
+ color: var(--kds-color-text-and-icon-disabled);
3723
+ cursor: default;
3745
3724
  }
3746
- & .trailing-items .trailing-icon[data-v-d5db7ff7] {
3725
+ & .trailing-items[data-v-17711664] {
3747
3726
  color: var(--kds-color-text-and-icon-disabled);
3748
3727
  }
3749
3728
  }