@scania/tegel 1.40.0 → 1.41.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 (35) hide show
  1. package/dist/cjs/tds-dropdown_2.cjs.entry.js +14 -6
  2. package/dist/cjs/tds-footer-group.cjs.entry.js +1 -1
  3. package/dist/cjs/tds-footer-item.cjs.entry.js +1 -1
  4. package/dist/cjs/tds-message.cjs.entry.js +1 -1
  5. package/dist/cjs/tds-modal.cjs.entry.js +1 -1
  6. package/dist/collection/components/dropdown/dropdown.css +1 -0
  7. package/dist/collection/components/dropdown/dropdown.js +27 -5
  8. package/dist/collection/components/footer/footer-group/footer-group.css +1 -4
  9. package/dist/collection/components/footer/footer-item/footer-item.css +3 -3
  10. package/dist/collection/components/message/message.css +2 -1
  11. package/dist/collection/components/modal/modal.css +54 -10
  12. package/dist/components/{p-2a2d66fe.js → p-3f475529.js} +14 -6
  13. package/dist/components/tds-dropdown.js +1 -1
  14. package/dist/components/tds-footer-group.js +1 -1
  15. package/dist/components/tds-footer-item.js +1 -1
  16. package/dist/components/tds-message.js +1 -1
  17. package/dist/components/tds-modal.js +1 -1
  18. package/dist/components/tds-table-footer.js +1 -1
  19. package/dist/esm/tds-dropdown_2.entry.js +14 -6
  20. package/dist/esm/tds-footer-group.entry.js +1 -1
  21. package/dist/esm/tds-footer-item.entry.js +1 -1
  22. package/dist/esm/tds-message.entry.js +1 -1
  23. package/dist/esm/tds-modal.entry.js +1 -1
  24. package/dist/tegel/p-8eccfe32.entry.js +1 -0
  25. package/dist/tegel/p-9b635e01.entry.js +1 -0
  26. package/dist/tegel/{p-3450dd6c.entry.js → p-cfd7ed1a.entry.js} +1 -1
  27. package/dist/tegel/{p-3462a7cc.entry.js → p-e5b796e7.entry.js} +1 -1
  28. package/dist/tegel/{p-55f9c79a.entry.js → p-eb91e33b.entry.js} +1 -1
  29. package/dist/tegel/tegel.css +3 -3
  30. package/dist/tegel/tegel.esm.js +1 -1
  31. package/dist/types/components/dropdown/dropdown.d.ts +4 -0
  32. package/dist/types/components.d.ts +5 -0
  33. package/package.json +1 -1
  34. package/dist/tegel/p-a4cbb541.entry.js +0 -1
  35. package/dist/tegel/p-a8abc8d9.entry.js +0 -1
package/dist/cjs/tds-dropdown_2.cjs.entry.js CHANGED
@@ -78,7 +78,7 @@ const convertArrayToStrings = (values) => {
78
78
  return values.map((value) => convertToString(value));
79
79
  };
80
80
 
81
- const dropdownCss = "@charset \"UTF-8\";:host button{all:unset;height:100%;width:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);border-radius:var(--tds-dropdown-border-radius)}:host button:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host button .value-wrapper{padding:0 16px;display:flex;align-items:center;justify-content:space-between}:host button.placeholder{color:var(--tds-dropdown-placeholder-color);line-height:1.3}:host button.value{color:var(--tds-dropdown-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3}:host button:focus{border-bottom:0}:host button.error{border-bottom:1px solid var(--tds-dropdown-error)}:host button.error:focus{border-bottom-color:transparent}:host button.error:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-error)}:host button:disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host button .menu-icon{margin-right:0}:host .dropdown-select:focus-within{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .filter{display:flex;align-items:center;justify-content:space-between;height:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);padding-left:16px;border-radius:4px 4px 0 0}:host .filter:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host .filter.disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host .filter.disabled .value-wrapper input{color:var(--tds-dropdown-disabled-color)}:host .filter .value-wrapper{display:flex;width:100%;height:100%}:host .filter .value-wrapper input{color:var(--tds-dropdown-filter-input-color)}:host .filter .label-inside-as-placeholder{position:absolute;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3;color:var(--tds-dropdown-placeholder-color)}:host .filter .label-inside-as-placeholder.lg{top:20px}:host .filter .label-inside-as-placeholder.md{top:16px}:host .filter .label-inside-as-placeholder.sm{display:none}:host .filter .label-inside-as-placeholder.selected{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .filter .label-inside-as-placeholder.selected.lg{top:12px}:host .filter .label-inside-as-placeholder.selected.md{top:8px}:host .filter .label-inside-as-placeholder.selected.sm{display:none}:host .filter .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .filter.focus{border-bottom:0}:host .filter.focus:hover{border-bottom:0}:host .filter.error{border-bottom:1px solid var(--tds-dropdown-error)}:host .filter.error.focus{border-bottom-color:transparent}:host .filter.error.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-error)}:host .filter input{flex:1;all:unset;width:100%}:host .filter input::placeholder{color:var(--tds-dropdown-placeholder-color)}:host .filter input:disabled::placeholder{color:var(--tds-dropdown-disabled-color)}:host .filter tds-icon{cursor:pointer}:host .filter .menu-icon{margin-right:16px}:host .filter .clear-icon{margin:0 8px;color:var(--tds-dropdown-clear-icon-color);padding-right:8px;border-right:1px solid var(--tds-dropdown-clear-icon-color)}:host .filter .clear-icon:hover{color:var(--tds-dropdown-clear-icon-hover-color)}:host .filter .clear-icon.hide{display:none;visibility:hidden}:host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host{display:block;position:relative;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .label-outside{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-dropdown-label-color);margin-bottom:8px}:host .label-outside.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select{position:relative}:host .dropdown-select button:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;border-radius:0}:host .dropdown-select button{transition:border-bottom-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .dropdown-select button:hover{border-bottom-color:var(--tds-dropdown-border-bottom-hover)}:host .dropdown-select button{border-bottom-color:var(--tds-dropdown-border-bottom)}:host .dropdown-select button.error{border-bottom-color:var(--tds-dropdown-error)}:host .dropdown-select button.error:focus{border-bottom-color:transparent}:host .dropdown-select.disabled .label-inside,:host .dropdown-select.disabled .placeholder,:host .dropdown-select.disabled .label-inside-as-placeholder,:host .dropdown-select.disabled .value-wrapper{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select.disabled button{border:none}:host .dropdown-select .label-inside{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);color:var(--tds-dropdown-label-inside-color)}:host .dropdown-select .label-inside.lg{top:12px;left:16px}:host .dropdown-select .label-inside.md{top:8px;left:16px}:host .dropdown-select .label-inside.sm{display:none}:host .dropdown-select .label-inside.xs{display:none}:host .dropdown-select .label-inside+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select .placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:var(--tds-placeholder-margin);}:host .dropdown-select .placeholder.xs{line-height:1}:host .dropdown-select .label-inside-as-placeholder{color:var(--tds-dropdown-placeholder-color)}:host .dropdown-select .label-inside-as-placeholder.selected{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .dropdown-select .label-inside-as-placeholder.selected.lg{top:12px}:host .dropdown-select .label-inside-as-placeholder.selected.md{top:8px}:host .dropdown-select .label-inside-as-placeholder.selected.sm{display:none}:host .dropdown-select .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select.lg{height:55px}:host .dropdown-select.md{height:47px}:host .dropdown-select.sm{height:39px}:host .dropdown-select.xs{height:29px}:host .helper{margin-top:4px;color:var(--tds-dropdown-helper-color);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;align-items:center;gap:8px}:host .helper.error{color:var(--tds-dropdown-error)}:host .helper.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-list{z-index:100;position:absolute;width:100%;transform-origin:top;box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.1);border-radius:var(--tds-dropdown-list-border-radius-down);overflow-y:auto;transform:scaleY(0);pointer-events:none}:host .dropdown-list:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .dropdown-list::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .dropdown-list::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .dropdown-list{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.xs{max-height:260px}:host .dropdown-list.up{bottom:100%;margin-top:0;margin-bottom:1px;transform-origin:bottom;display:flex;flex-direction:column-reverse;border-radius:var(--tds-dropdown-list-border-radius-up)}:host .dropdown-list.up.label-outside{bottom:calc(100% - 24px)}:host .dropdown-list.closed{transform:scaleY(0);pointer-events:none}:host .dropdown-list.open{transform:scaleY(1);visibility:visible;opacity:1;pointer-events:auto}:host .dropdown-list.animation-enter-slide{transition:transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-enter)}:host .dropdown-list.animation-exit-slide{transition:transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-exit)}:host .dropdown-list .no-result{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:flex;align-items:center;padding:0 16px;background-color:var(--tds-dropdown-bg)}:host .dropdown-list .no-result.lg{height:56px}:host .dropdown-list .no-result.md{height:48px}:host .dropdown-list .no-result.sm{height:40px}:host .dropdown-list .no-result.xs{height:40px}:host .menu-icon{color:var(--tds-dropdown-menu-icon-color)}:host tds-icon{transition:transform var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host tds-icon.open{transform:rotateZ(180deg)}";
81
+ const dropdownCss = "@charset \"UTF-8\";:host button{all:unset;height:100%;width:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);border-radius:var(--tds-dropdown-border-radius)}:host button:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host button .value-wrapper{padding:0 16px;display:flex;align-items:center;justify-content:space-between}:host button.placeholder{color:var(--tds-dropdown-placeholder-color);line-height:1.3}:host button.value{color:var(--tds-dropdown-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3}:host button:focus{border-bottom:0}:host button.error{border-bottom:1px solid var(--tds-dropdown-error)}:host button.error:focus{border-bottom-color:transparent}:host button.error:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-error)}:host button:disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host button .menu-icon{margin-right:0}:host .dropdown-select:focus-within{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .filter{display:flex;align-items:center;justify-content:space-between;height:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);padding-left:16px;border-radius:4px 4px 0 0}:host .filter:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host .filter.disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host .filter.disabled .value-wrapper input{color:var(--tds-dropdown-disabled-color)}:host .filter .value-wrapper{display:flex;width:100%;height:100%}:host .filter .value-wrapper input{color:var(--tds-dropdown-filter-input-color)}:host .filter .label-inside-as-placeholder{position:absolute;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3;color:var(--tds-dropdown-placeholder-color)}:host .filter .label-inside-as-placeholder.lg{top:20px}:host .filter .label-inside-as-placeholder.md{top:16px}:host .filter .label-inside-as-placeholder.sm{display:none}:host .filter .label-inside-as-placeholder.selected{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .filter .label-inside-as-placeholder.selected.lg{top:12px}:host .filter .label-inside-as-placeholder.selected.md{top:8px}:host .filter .label-inside-as-placeholder.selected.sm{display:none}:host .filter .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .filter.focus{border-bottom:0}:host .filter.focus:hover{border-bottom:0}:host .filter.error{border-bottom:1px solid var(--tds-dropdown-error)}:host .filter.error.focus{border-bottom-color:transparent}:host .filter.error.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-error)}:host .filter input{flex:1;all:unset;width:100%}:host .filter input::placeholder{color:var(--tds-dropdown-placeholder-color)}:host .filter input:disabled::placeholder{color:var(--tds-dropdown-disabled-color)}:host .filter tds-icon{cursor:pointer}:host .filter .menu-icon{margin-right:16px}:host .filter .clear-icon{margin:0 8px;color:var(--tds-dropdown-clear-icon-color);padding-right:8px;border-right:1px solid var(--tds-dropdown-clear-icon-color)}:host .filter .clear-icon:hover{color:var(--tds-dropdown-clear-icon-hover-color)}:host .filter .clear-icon.hide{display:none;visibility:hidden}:host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host{display:block;position:relative;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .label-outside{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-dropdown-label-color);margin-bottom:8px}:host .label-outside.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select{position:relative}:host .dropdown-select button:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;border-radius:0}:host .dropdown-select button{transition:border-bottom-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .dropdown-select button:hover{border-bottom-color:var(--tds-dropdown-border-bottom-hover)}:host .dropdown-select button{border-bottom-color:var(--tds-dropdown-border-bottom)}:host .dropdown-select button.error{border-bottom-color:var(--tds-dropdown-error)}:host .dropdown-select button.error:focus{border-bottom-color:transparent}:host .dropdown-select.disabled .label-inside,:host .dropdown-select.disabled .placeholder,:host .dropdown-select.disabled .label-inside-as-placeholder,:host .dropdown-select.disabled .value-wrapper{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select.disabled button{border:none}:host .dropdown-select .label-inside{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);color:var(--tds-dropdown-label-inside-color)}:host .dropdown-select .label-inside.lg{top:12px;left:16px}:host .dropdown-select .label-inside.md{top:8px;left:16px}:host .dropdown-select .label-inside.sm{display:none}:host .dropdown-select .label-inside.xs{display:none}:host .dropdown-select .label-inside+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select .placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:var(--tds-placeholder-margin);}:host .dropdown-select .placeholder.xs{line-height:1}:host .dropdown-select .label-inside-as-placeholder{color:var(--tds-dropdown-placeholder-color)}:host .dropdown-select .label-inside-as-placeholder.selected{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .dropdown-select .label-inside-as-placeholder.selected.lg{top:12px}:host .dropdown-select .label-inside-as-placeholder.selected.md{top:8px}:host .dropdown-select .label-inside-as-placeholder.selected.sm{display:none}:host .dropdown-select .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select.lg{height:55px}:host .dropdown-select.md{height:47px}:host .dropdown-select.sm{height:39px}:host .dropdown-select.xs{height:29px}:host .helper{margin-top:4px;color:var(--tds-dropdown-helper-color);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;align-items:center;gap:8px}:host .helper.error{color:var(--tds-dropdown-error)}:host .helper.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-list{z-index:100;position:absolute;width:100%;transform-origin:top;box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.1);border-radius:var(--tds-dropdown-list-border-radius-down);overflow-y:auto;transform:scaleY(0);pointer-events:none;background-color:var(--tds-dropdown-bg)}:host .dropdown-list:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .dropdown-list::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .dropdown-list::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .dropdown-list{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.xs{max-height:260px}:host .dropdown-list.up{bottom:100%;margin-top:0;margin-bottom:1px;transform-origin:bottom;display:flex;flex-direction:column-reverse;border-radius:var(--tds-dropdown-list-border-radius-up)}:host .dropdown-list.up.label-outside{bottom:calc(100% - 24px)}:host .dropdown-list.closed{transform:scaleY(0);pointer-events:none}:host .dropdown-list.open{transform:scaleY(1);visibility:visible;opacity:1;pointer-events:auto}:host .dropdown-list.animation-enter-slide{transition:transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-enter)}:host .dropdown-list.animation-exit-slide{transition:transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-exit)}:host .dropdown-list .no-result{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:flex;align-items:center;padding:0 16px;background-color:var(--tds-dropdown-bg)}:host .dropdown-list .no-result.lg{height:56px}:host .dropdown-list .no-result.md{height:48px}:host .dropdown-list .no-result.sm{height:40px}:host .dropdown-list .no-result.xs{height:40px}:host .menu-icon{color:var(--tds-dropdown-menu-icon-color)}:host tds-icon{transition:transform var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host tds-icon.open{transform:rotateZ(180deg)}";
82
82
  const TdsDropdownStyle0 = dropdownCss;
83
83
 
84
84
  function hasValueChanged(newValue, currentValue) {
@@ -93,6 +93,7 @@ const TdsDropdown = class {
93
93
  this.tdsFocus = index.createEvent(this, "tdsFocus", 6);
94
94
  this.tdsBlur = index.createEvent(this, "tdsBlur", 6);
95
95
  this.tdsInput = index.createEvent(this, "tdsInput", 6);
96
+ this.tdsClear = index.createEvent(this, "tdsClear", 6);
96
97
  this.hasFocus = false;
97
98
  this.setDefaultOption = () => {
98
99
  if (this.internalDefaultValue) {
@@ -202,6 +203,8 @@ const TdsDropdown = class {
202
203
  }
203
204
  };
204
205
  this.handleFilterReset = () => {
206
+ // Store the current filter query before clearing
207
+ const clearedValue = this.filterQuery;
205
208
  // only reset selected values when filterquery is blank
206
209
  if (!this.filterQuery.length) {
207
210
  this.reset();
@@ -211,6 +214,7 @@ const TdsDropdown = class {
211
214
  this.inputElement.focus();
212
215
  // Add this line to ensure internal value is cleared
213
216
  this.internalValue = '';
217
+ this.tdsClear.emit({ clearedValue });
214
218
  };
215
219
  this.handleFocus = () => {
216
220
  this.open = true;
@@ -422,6 +426,10 @@ const TdsDropdown = class {
422
426
  // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
423
427
  const isClickOutside = !event.composedPath().includes(this.host);
424
428
  if (isClickOutside) {
429
+ // Emit clear event if there's a filter query when clicking outside
430
+ if (this.filter && this.filterQuery) {
431
+ this.tdsClear.emit({ clearedValue: this.filterQuery });
432
+ }
425
433
  this.open = false;
426
434
  }
427
435
  }
@@ -564,9 +572,9 @@ const TdsDropdown = class {
564
572
  // Generate unique IDs for associating labels and helpers with the input/button
565
573
  const labelId = this.label ? `dropdown-label-${this.name || generateUniqueId.generateUniqueId()}` : undefined;
566
574
  const helperId = this.helper ? `dropdown-helper-${this.name || generateUniqueId.generateUniqueId()}` : undefined;
567
- return (index.h(index.Host, { key: '8145c7b222a850157de5f328974f5c70b126b9e4', class: {
575
+ return (index.h(index.Host, { key: 'ebb4008f7e27e9f9de603b1dfeb5100f45f0e600', class: {
568
576
  [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
569
- } }, this.label && this.labelPosition === 'outside' && (index.h("div", { key: 'af3ad647c3c5bbb86f12033821020a4ed484d9e1', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), index.h("div", { key: '099777e28368c78c9eb05945328899334c674865', class: {
577
+ } }, this.label && this.labelPosition === 'outside' && (index.h("div", { key: '77f30a6ec80264fe89422b8f129e763d2fe2a64c', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), index.h("div", { key: '3d3d3ca87cae2df4f043feb1f6bdbf4482cc4223', class: {
570
578
  'dropdown-select': true,
571
579
  [this.size]: true,
572
580
  'disabled': this.disabled,
@@ -610,7 +618,7 @@ const TdsDropdown = class {
610
618
  label-inside-as-placeholder
611
619
  ${this.size}
612
620
  ${this.selectedOptions.length ? 'selected' : ''}
613
- ` }, this.label)), index.h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), index.h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), index.h("div", { key: 'f5427c41c1abe1c84164a030e69800fd48911c73', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
621
+ ` }, this.label)), index.h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), index.h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), index.h("div", { key: '48e96d8ecac8918e11c6e2c0e1321802b61dbf7d', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
614
622
  this.dropdownList = element;
615
623
  }, class: {
616
624
  'dropdown-list': true,
@@ -621,11 +629,11 @@ const TdsDropdown = class {
621
629
  'closed': !this.open,
622
630
  [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
623
631
  [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
624
- } }, index.h("slot", { key: '2e83898eec11f669c3477d5600dce1178b5c4f36', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (index.h("div", { key: '0ff59cf47dbe302998ce72758b182e7565ddd210', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (index.h("div", { key: '3a60427fe8ca05d6bf4ba42f95bd0bc753f04ebd', id: helperId, class: {
632
+ } }, index.h("slot", { key: 'd49f3a638a9f6b1b08e3489dffad27151c0c554f', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (index.h("div", { key: 'b38d308604e30fdb130d72295d2d3f7bf2fb9bd6', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (index.h("div", { key: '1f8160ac1f0ecdc0d4f29faa31c469a0bd04b0d6', id: helperId, class: {
625
633
  helper: true,
626
634
  error: this.error,
627
635
  disabled: this.disabled,
628
- } }, this.error && index.h("tds-icon", { key: 'bab7ba6449cb7cd62a149340f6de1fe13cfd49de', name: "error", size: "16px" }), this.helper))));
636
+ } }, this.error && index.h("tds-icon", { key: '487fb6deb5bd27347b2cd4f607e5488543185894', name: "error", size: "16px" }), this.helper))));
629
637
  }
630
638
  get host() { return index.getElement(this); }
631
639
  static get watchers() { return {
package/dist/cjs/tds-footer-group.cjs.entry.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  const index = require('./index-ca8040ad.js');
6
6
  const hasSlot = require('./hasSlot-1c90e9ba.js');
7
7
 
8
- const footerGroupCss = ":host{display:block}:host .footer-top-title{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links-header);padding-bottom:8px}:host .footer-top-title *,:host .footer-top-title ::slotted(*){margin:0}:host button.footer-top-title-button{border:none;width:100%;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links);background-color:transparent;text-align:left;padding:19px 24px;justify-content:space-between;border-bottom:1px solid var(--tds-footer-top-divider)}:host button.footer-top-title-button *,:host button.footer-top-title-button ::slotted(*){margin:0}:host button.footer-top-title-button.expanded{border-bottom:none}:host button.footer-top-title-button.expanded tds-icon{transform:rotateZ(180deg)}:host button.footer-top-title-button:hover{cursor:pointer}:host button.footer-top-title-button:active{background-color:var(--tds-footer-top-button-active)}:host button.footer-top-title-button:focus-visible{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host button.footer-top-title-button tds-icon{transition:transform 0.2s ease-in-out}:host [role=list]{list-style:none;padding:0;margin:0;display:flex;gap:8px}:host [role=list].start,:host [role=list].end{gap:24px}:host [role=list].top-part-child{flex-direction:column}:host .mobile-view [role=list].start:not(.top-part-child){flex-direction:column}:host .mobile-view [role=list].start:not(.top-part-child).start,:host .mobile-view [role=list].start:not(.top-part-child).end{gap:8px}:host .mobile-view [role=list].top-part-child.closed{display:none}:host .mobile-view [role=list].top-part-child{gap:0}:host .mobile-view button.footer-top-title-button{display:flex;align-items:center}";
8
+ const footerGroupCss = ":host{display:block}:host .footer-top-title{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links-header);padding-bottom:8px}:host .footer-top-title *,:host .footer-top-title ::slotted(*){margin:0}:host button.footer-top-title-button{border:none;width:100%;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links);background-color:transparent;text-align:left;padding:19px 24px;justify-content:space-between;border-bottom:1px solid var(--tds-footer-top-divider)}:host button.footer-top-title-button *,:host button.footer-top-title-button ::slotted(*){margin:0}:host button.footer-top-title-button.expanded tds-icon{transform:rotateZ(180deg)}:host button.footer-top-title-button:hover{cursor:pointer}:host button.footer-top-title-button:active{background-color:var(--tds-footer-top-button-active)}:host button.footer-top-title-button:focus-visible{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host button.footer-top-title-button tds-icon{transition:transform 0.2s ease-in-out}:host [role=list]{list-style:none;padding:0;margin:0;display:flex;gap:12px}:host [role=list].start,:host [role=list].end{gap:24px}:host [role=list].top-part-child{flex-direction:column}:host .mobile-view [role=list].start:not(.top-part-child){flex-direction:column}:host .mobile-view [role=list].start:not(.top-part-child).start,:host .mobile-view [role=list].start:not(.top-part-child).end{gap:8px}:host .mobile-view [role=list].top-part-child.closed{display:none}:host .mobile-view [role=list].top-part-child{gap:0}:host .mobile-view button.footer-top-title-button{display:flex;align-items:center}";
9
9
  const TdsFooterGroupStyle0 = footerGroupCss;
10
10
 
11
11
  const TdsFooterGroup = class {
package/dist/cjs/tds-footer-item.cjs.entry.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-ca8040ad.js');
6
6
 
7
- const footerItemCss = ":host([role=listitem]) div ::slotted(a),:host([role=listitem]) div ::slotted(button){font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-main-links);text-decoration:none}:host([role=listitem]) div ::slotted(a:focus-visible),:host([role=listitem]) div ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host([role=listitem]) div ::slotted(a:hover),:host([role=listitem]) div ::slotted(button:hover){text-decoration:underline}:host([role=listitem]) div.top-part-child ::slotted(a),:host([role=listitem]) div.top-part-child ::slotted(button){font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links)}:host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),:host([role=listitem]) div.top-part-child ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}@media all and (max-width: 992px){:host([role=listitem]) div.top-part-child{border-bottom:1px solid var(--tds-footer-top-divider)}:host([role=listitem]) div.top-part-child ::slotted(a),:host([role=listitem]) div.top-part-child ::slotted(button){display:block;height:100%;padding:19px 40px;font-weight:normal}:host([role=listitem]) div.top-part-child ::slotted(a:hover),:host([role=listitem]) div.top-part-child ::slotted(button:hover){text-decoration:underline;background-color:var(--tds-footer-top-links-background-hover)}:host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),:host([role=listitem]) div.top-part-child ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}}";
7
+ const footerItemCss = ":host([role=listitem]) div ::slotted(a),:host([role=listitem]) div ::slotted(button){font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-main-links);text-decoration:none}:host([role=listitem]) div ::slotted(a:focus-visible),:host([role=listitem]) div ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host([role=listitem]) div ::slotted(a:hover),:host([role=listitem]) div ::slotted(button:hover){text-decoration:underline}:host([role=listitem]) div.top-part-child ::slotted(a),:host([role=listitem]) div.top-part-child ::slotted(button){font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links)}:host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),:host([role=listitem]) div.top-part-child ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}@media all and (max-width: 992px){:host([role=listitem]) div.top-part-child{border-bottom:1px solid var(--tds-footer-top-divider)}:host([role=listitem]) div.top-part-child ::slotted(a),:host([role=listitem]) div.top-part-child ::slotted(button){display:block;height:100%;padding:19px 40px;font-weight:normal}:host([role=listitem]) div.top-part-child ::slotted(a:active),:host([role=listitem]) div.top-part-child ::slotted(button:active){text-decoration:underline;background-color:var(--tds-footer-top-links-background-active)}:host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),:host([role=listitem]) div.top-part-child ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}}";
8
8
  const TdsFooterItemStyle0 = footerItemCss;
9
9
 
10
10
  const TdsFooterItem = class {
package/dist/cjs/tds-message.cjs.entry.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  const index = require('./index-ca8040ad.js');
6
6
  const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
7
7
 
8
- const messageCss = ":host .wrapper{display:flex;padding:16px;background-color:var(--tds-message-background);border-radius:4px}:host .wrapper.information{border-left:4px solid var(--tds-message-border-info)}:host .wrapper.information tds-icon{color:var(--tds-message-icon-info)}:host .wrapper.success{background-color:var(--tds-message-background-success);border-left:4px solid var(--tds-message-border-success)}:host .wrapper.success tds-icon{color:var(--tds-message-icon-success)}:host .wrapper.error{background-color:var(--tds-message-background-error);border-left:4px solid var(--tds-message-border-error)}:host .wrapper.error tds-icon{color:var(--tds-message-icon-error)}:host .wrapper.warning{background-color:var(--tds-message-background-warning);border-left:4px solid var(--tds-message-border-warning)}:host .wrapper.warning tds-icon{color:var(--tds-message-icon-warning)}:host .wrapper.minimal{border:none;padding:0;background-color:transparent}:host .wrapper.minimal .header{font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform)}:host .wrapper.minimal.error .header{color:var(--tds-message-minimal-header-error)}:host tds-icon{padding-right:16px}:host .content{display:flex;flex-direction:column;gap:4px;color:var(--foreground-text-strong);padding:2px 0}:host .content .header{font-family:var(--headline-07-font-family);font-size:var(--headline-07-font-size);line-height:var(--headline-07-line-height);font-weight:var(--headline-07-font-weight);letter-spacing:var(--headline-07-letter-spacing);text-transform:var(--headline-07-text-transform)}:host .content .extended-message{color:var(--foreground-text-strong);font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform)}";
8
+ const messageCss = ":host .wrapper{display:flex;padding:16px;background-color:var(--tds-message-background);border-radius:4px}:host .wrapper.information{border-left:4px solid var(--tds-message-border-info)}:host .wrapper.information tds-icon{color:var(--tds-message-icon-info)}:host .wrapper.success{background-color:var(--tds-message-background-success);border-left:4px solid var(--tds-message-border-success)}:host .wrapper.success tds-icon{color:var(--tds-message-icon-success)}:host .wrapper.error{background-color:var(--tds-message-background-error);border-left:4px solid var(--tds-message-border-error)}:host .wrapper.error tds-icon{color:var(--tds-message-icon-error)}:host .wrapper.warning{background-color:var(--tds-message-background-warning);border-left:4px solid var(--tds-message-border-warning)}:host .wrapper.warning tds-icon{color:var(--tds-message-icon-warning)}:host .wrapper.minimal{border:none;padding:0;background-color:transparent}:host .wrapper.minimal .header{font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform)}:host .wrapper.minimal.error .header{color:var(--tds-message-minimal-header-error)}:host tds-icon{padding-right:16px}:host .content{display:flex;flex-direction:column;gap:4px;color:var(--foreground-text-strong);padding:2px 24px 2px 0;overflow-wrap:anywhere}:host .content .header{font-family:var(--headline-07-font-family);font-size:var(--headline-07-font-size);line-height:var(--headline-07-line-height);font-weight:var(--headline-07-font-weight);letter-spacing:var(--headline-07-letter-spacing);text-transform:var(--headline-07-text-transform)}:host .content .extended-message{color:var(--foreground-text-strong);font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform)}";
9
9
  const TdsMessageStyle0 = messageCss;
10
10
 
11
11
  const TdsMessage = class {
package/dist/cjs/tds-modal.cjs.entry.js CHANGED
@@ -6,7 +6,7 @@ const index = require('./index-ca8040ad.js');
6
6
  const hasSlot = require('./hasSlot-1c90e9ba.js');
7
7
  const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
8
8
 
9
- const modalCss = ".tds-modal{box-sizing:border-box;box-shadow:var(--tds-modal-box-shadow);background-color:var(--background-elevation-layer-02);margin:auto;position:relative;border-radius:var(--radius-narrow);max-height:85vh;overflow-y:auto;pointer-events:auto}.tds-modal *{box-sizing:border-box}.tds-modal::-webkit-scrollbar{width:6px;background-color:transparent}.tds-modal::-webkit-scrollbar-track{background-color:transparent}.tds-modal::-webkit-scrollbar-thumb{background-color:var(--foreground-elements-transparparent-discrete);border-radius:3px}.tds-modal__actions-sticky{overflow:hidden;display:flex;flex-direction:column}.tds-modal__actions-sticky .body{font-family:var(--body-01-font-family);font-size:var(--body-01-font-size);line-height:var(--body-01-line-height);font-weight:var(--body-01-font-weight);letter-spacing:var(--body-01-letter-spacing);text-transform:var(--body-01-text-transform);max-height:calc(85vh - 36px);overflow-y:auto}.tds-modal__actions-sticky slot[name=actions]{bottom:-1px;left:0;right:0;background-color:var(--background-elevation-layer-02);padding:24px 16px 16px;display:flex;gap:16px}.tds-modal__actions-static slot[name=actions]{background-color:var(--background-elevation-layer-02);display:flex;gap:16px;padding:24px 16px 16px}@media (min-width: 320px){.tds-modal-xs{width:100%}.tds-modal-sm{width:100%}.tds-modal-md{width:100%}.tds-modal-lg{width:100%}}@media (min-width: 672px){.tds-modal-xs{width:50%}.tds-modal-sm{width:62.5%}.tds-modal-md{width:75%}.tds-modal-lg{width:100%}}@media (min-width: 1056px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:43.75%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1312px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1584px){.tds-modal-xs{width:25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:50%}.tds-modal-lg{width:75%}}@media (max-width: 320px){.tds-modal-md,.tds-modal-lg,.tds-modal-sm{height:100%}.tds-modal-md slot[name=actions]::slotted(*),.tds-modal-lg slot[name=actions]::slotted(*),.tds-modal-sm slot[name=actions]::slotted(*){display:flex}}.header{display:flex;padding:16px;position:sticky;top:0;background-color:var(--background-elevation-layer-02);z-index:1}.header,slot[name=header]::slotted(*){font-family:var(--headline-05-font-family);font-size:var(--headline-05-font-size);line-height:var(--headline-05-line-height);font-weight:var(--headline-05-font-weight);letter-spacing:var(--headline-05-letter-spacing);text-transform:var(--headline-05-text-transform);color:var(--foreground-text-strong);margin:0;flex:1}.body{font-family:var(--body-01-font-family);font-size:var(--body-01-font-size);line-height:var(--body-01-line-height);font-weight:var(--body-01-font-weight);letter-spacing:var(--body-01-letter-spacing);text-transform:var(--body-01-text-transform);color:var(--foreground-text-strong);overflow-y:visible;padding:0 16px 16px}.body::-webkit-scrollbar{width:6px;background-color:transparent}.body::-webkit-scrollbar-track{background-color:transparent}.body::-webkit-scrollbar-thumb{background-color:var(--foreground-elements-transparparent-discrete);border-radius:3px}.tds-modal-backdrop{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--tds-modal-backdrop-background);pointer-events:auto}.tds-modal-backdrop *{box-sizing:border-box}button.tds-modal-close{margin:0 0 auto auto;background-color:transparent;border:0;padding:0;appearance:unset}.tds-modal-close{display:inline-block;height:auto;color:var(--foreground-text-strong);cursor:pointer}.tds-modal-close:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}@media (min-width: 320px){.tds-modal-close{margin-left:16px}}@media (min-width: 1056px){.tds-modal-close{margin-left:48px}}.tds-modal-close-btn{display:inline-block;height:auto;background-repeat:no-repeat;cursor:pointer}@media (min-width: 320px){.tds-modal-close-btn{margin-left:16px}}@media (min-width: 1056px){.tds-modal-close-btn{margin-left:48px}}.tds-modal-close-btn svg{fill:var(--foreground-text-strong)}.tds-modal-overflow{overflow:hidden}:host{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;padding:0 16px;z-index:700;pointer-events:none}:host *{box-sizing:border-box}:host .tds-modal-close{border:none;background-color:transparent}:host .tds-modal-close-btn{border:none;background-color:transparent}@media (max-width: 320px){:host{padding:0}}:host.show{display:flex}:host.hide{display:none}:host(.show){display:flex}:host(.hide){display:none}";
9
+ const modalCss = ":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}.tds-modal{box-sizing:border-box;box-shadow:var(--tds-modal-box-shadow);background-color:var(--background-elevation-layer-02);margin:auto;position:relative;border-radius:var(--radius-narrow);max-height:85vh;overflow-y:auto;pointer-events:auto}.tds-modal *{box-sizing:border-box}.tds-modal:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}.tds-modal::-webkit-scrollbar{width:var(--tds-scrollbar-width)}.tds-modal::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}.tds-modal::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}.tds-modal::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){.tds-modal{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}.tds-modal__actions-sticky{overflow:hidden;display:flex;flex-direction:column}.tds-modal__actions-sticky .body{font-family:var(--body-01-font-family);font-size:var(--body-01-font-size);line-height:var(--body-01-line-height);font-weight:var(--body-01-font-weight);letter-spacing:var(--body-01-letter-spacing);text-transform:var(--body-01-text-transform);max-height:calc(85vh - 36px);overflow-y:auto}.tds-modal__actions-sticky slot[name=actions]{bottom:-1px;left:0;right:0;background-color:var(--background-elevation-layer-02);padding:24px 16px 16px;display:flex;gap:16px}.tds-modal__actions-static slot[name=actions]{background-color:var(--background-elevation-layer-02);display:flex;gap:16px;padding:24px 16px 16px}@media (min-width: 320px){.tds-modal-xs{width:100%}.tds-modal-sm{width:100%}.tds-modal-md{width:100%}.tds-modal-lg{width:100%}}@media (min-width: 672px){.tds-modal-xs{width:50%}.tds-modal-sm{width:62.5%}.tds-modal-md{width:75%}.tds-modal-lg{width:100%}}@media (min-width: 1056px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:43.75%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1312px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1584px){.tds-modal-xs{width:25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:50%}.tds-modal-lg{width:75%}}@media (max-width: 320px){.tds-modal-md,.tds-modal-lg,.tds-modal-sm{height:100%}.tds-modal-md slot[name=actions]::slotted(*),.tds-modal-lg slot[name=actions]::slotted(*),.tds-modal-sm slot[name=actions]::slotted(*){display:flex}}.header{display:flex;padding:16px;position:sticky;top:0;background-color:var(--background-elevation-layer-02);z-index:1}.header,slot[name=header]::slotted(*){font-family:var(--headline-05-font-family);font-size:var(--headline-05-font-size);line-height:var(--headline-05-line-height);font-weight:var(--headline-05-font-weight);letter-spacing:var(--headline-05-letter-spacing);text-transform:var(--headline-05-text-transform);color:var(--foreground-text-strong);margin:0;flex:1}.body{font-family:var(--body-01-font-family);font-size:var(--body-01-font-size);line-height:var(--body-01-line-height);font-weight:var(--body-01-font-weight);letter-spacing:var(--body-01-letter-spacing);text-transform:var(--body-01-text-transform);color:var(--foreground-text-strong);overflow-y:visible;padding:0 16px 16px}.body:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}.body::-webkit-scrollbar{width:var(--tds-scrollbar-width)}.body::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}.body::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}.body::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){.body{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}.tds-modal-backdrop{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--tds-modal-backdrop-background);pointer-events:auto}.tds-modal-backdrop *{box-sizing:border-box}button.tds-modal-close{margin:0 0 auto auto;background-color:transparent;border:0;padding:0;appearance:unset}.tds-modal-close{display:inline-block;height:auto;color:var(--foreground-text-strong);cursor:pointer}.tds-modal-close:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}@media (min-width: 320px){.tds-modal-close{margin-left:16px}}@media (min-width: 1056px){.tds-modal-close{margin-left:48px}}.tds-modal-close-btn{display:inline-block;height:auto;background-repeat:no-repeat;cursor:pointer}@media (min-width: 320px){.tds-modal-close-btn{margin-left:16px}}@media (min-width: 1056px){.tds-modal-close-btn{margin-left:48px}}.tds-modal-close-btn svg{fill:var(--foreground-text-strong)}.tds-modal-overflow{overflow:hidden}:host{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;padding:0 16px;z-index:700;pointer-events:none}:host *{box-sizing:border-box}:host .tds-modal-close{border:none;background-color:transparent}:host .tds-modal-close-btn{border:none;background-color:transparent}@media (max-width: 320px){:host{padding:0}}:host.show{display:flex}:host.hide{display:none}:host(.show){display:flex}:host(.hide){display:none}";
10
10
  const TdsModalStyle0 = modalCss;
11
11
 
12
12
  const TdsModal = class {
package/dist/collection/components/dropdown/dropdown.css CHANGED
@@ -326,6 +326,7 @@ body {
326
326
  overflow-y: auto;
327
327
  transform: scaleY(0);
328
328
  pointer-events: none;
329
+ background-color: var(--tds-dropdown-bg);
329
330
  }
330
331
  :host .dropdown-list:hover::-webkit-scrollbar-thumb {
331
332
  border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
package/dist/collection/components/dropdown/dropdown.js CHANGED
@@ -123,6 +123,8 @@ export class TdsDropdown {
123
123
  }
124
124
  };
125
125
  this.handleFilterReset = () => {
126
+ // Store the current filter query before clearing
127
+ const clearedValue = this.filterQuery;
126
128
  // only reset selected values when filterquery is blank
127
129
  if (!this.filterQuery.length) {
128
130
  this.reset();
@@ -132,6 +134,7 @@ export class TdsDropdown {
132
134
  this.inputElement.focus();
133
135
  // Add this line to ensure internal value is cleared
134
136
  this.internalValue = '';
137
+ this.tdsClear.emit({ clearedValue });
135
138
  };
136
139
  this.handleFocus = () => {
137
140
  this.open = true;
@@ -343,6 +346,10 @@ export class TdsDropdown {
343
346
  // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
344
347
  const isClickOutside = !event.composedPath().includes(this.host);
345
348
  if (isClickOutside) {
349
+ // Emit clear event if there's a filter query when clicking outside
350
+ if (this.filter && this.filterQuery) {
351
+ this.tdsClear.emit({ clearedValue: this.filterQuery });
352
+ }
346
353
  this.open = false;
347
354
  }
348
355
  }
@@ -485,9 +492,9 @@ export class TdsDropdown {
485
492
  // Generate unique IDs for associating labels and helpers with the input/button
486
493
  const labelId = this.label ? `dropdown-label-${this.name || generateUniqueId()}` : undefined;
487
494
  const helperId = this.helper ? `dropdown-helper-${this.name || generateUniqueId()}` : undefined;
488
- return (h(Host, { key: '8145c7b222a850157de5f328974f5c70b126b9e4', class: {
495
+ return (h(Host, { key: 'ebb4008f7e27e9f9de603b1dfeb5100f45f0e600', class: {
489
496
  [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
490
- } }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'af3ad647c3c5bbb86f12033821020a4ed484d9e1', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '099777e28368c78c9eb05945328899334c674865', class: {
497
+ } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '77f30a6ec80264fe89422b8f129e763d2fe2a64c', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '3d3d3ca87cae2df4f043feb1f6bdbf4482cc4223', class: {
491
498
  'dropdown-select': true,
492
499
  [this.size]: true,
493
500
  'disabled': this.disabled,
@@ -531,7 +538,7 @@ export class TdsDropdown {
531
538
  label-inside-as-placeholder
532
539
  ${this.size}
533
540
  ${this.selectedOptions.length ? 'selected' : ''}
534
- ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: 'f5427c41c1abe1c84164a030e69800fd48911c73', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
541
+ ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '48e96d8ecac8918e11c6e2c0e1321802b61dbf7d', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
535
542
  this.dropdownList = element;
536
543
  }, class: {
537
544
  'dropdown-list': true,
@@ -542,11 +549,11 @@ export class TdsDropdown {
542
549
  'closed': !this.open,
543
550
  [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
544
551
  [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
545
- } }, h("slot", { key: '2e83898eec11f669c3477d5600dce1178b5c4f36', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '0ff59cf47dbe302998ce72758b182e7565ddd210', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '3a60427fe8ca05d6bf4ba42f95bd0bc753f04ebd', id: helperId, class: {
552
+ } }, h("slot", { key: 'd49f3a638a9f6b1b08e3489dffad27151c0c554f', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'b38d308604e30fdb130d72295d2d3f7bf2fb9bd6', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '1f8160ac1f0ecdc0d4f29faa31c469a0bd04b0d6', id: helperId, class: {
546
553
  helper: true,
547
554
  error: this.error,
548
555
  disabled: this.disabled,
549
- } }, this.error && h("tds-icon", { key: 'bab7ba6449cb7cd62a149340f6de1fe13cfd49de', name: "error", size: "16px" }), this.helper))));
556
+ } }, this.error && h("tds-icon", { key: '487fb6deb5bd27347b2cd4f607e5488543185894', name: "error", size: "16px" }), this.helper))));
550
557
  }
551
558
  static get is() { return "tds-dropdown"; }
552
559
  static get encapsulation() { return "shadow"; }
@@ -968,6 +975,21 @@ export class TdsDropdown {
968
975
  }
969
976
  }
970
977
  }
978
+ }, {
979
+ "method": "tdsClear",
980
+ "name": "tdsClear",
981
+ "bubbles": true,
982
+ "cancelable": false,
983
+ "composed": true,
984
+ "docs": {
985
+ "tags": [],
986
+ "text": "Clear event for the Dropdown."
987
+ },
988
+ "complexType": {
989
+ "original": "{ clearedValue: string }",
990
+ "resolved": "{ clearedValue: string; }",
991
+ "references": {}
992
+ }
971
993
  }];
972
994
  }
973
995
  static get methods() {
package/dist/collection/components/footer/footer-group/footer-group.css CHANGED
@@ -27,9 +27,6 @@
27
27
  :host button.footer-top-title-button ::slotted(*) {
28
28
  margin: 0;
29
29
  }
30
- :host button.footer-top-title-button.expanded {
31
- border-bottom: none;
32
- }
33
30
  :host button.footer-top-title-button.expanded tds-icon {
34
31
  transform: rotateZ(180deg);
35
32
  }
@@ -53,7 +50,7 @@
53
50
  padding: 0;
54
51
  margin: 0;
55
52
  display: flex;
56
- gap: 8px;
53
+ gap: 12px;
57
54
  }
58
55
  :host [role=list].start, :host [role=list].end {
59
56
  gap: 24px;
package/dist/collection/components/footer/footer-item/footer-item.css CHANGED
@@ -41,10 +41,10 @@
41
41
  padding: 19px 40px;
42
42
  font-weight: normal;
43
43
  }
44
- :host([role=listitem]) div.top-part-child ::slotted(a:hover),
45
- :host([role=listitem]) div.top-part-child ::slotted(button:hover) {
44
+ :host([role=listitem]) div.top-part-child ::slotted(a:active),
45
+ :host([role=listitem]) div.top-part-child ::slotted(button:active) {
46
46
  text-decoration: underline;
47
- background-color: var(--tds-footer-top-links-background-hover);
47
+ background-color: var(--tds-footer-top-links-background-active);
48
48
  }
49
49
  :host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),
50
50
  :host([role=listitem]) div.top-part-child ::slotted(button:focus-visible) {
package/dist/collection/components/message/message.css CHANGED
@@ -58,7 +58,8 @@
58
58
  flex-direction: column;
59
59
  gap: 4px;
60
60
  color: var(--foreground-text-strong);
61
- padding: 2px 0;
61
+ padding: 2px 24px 2px 0;
62
+ overflow-wrap: anywhere;
62
63
  }
63
64
  :host .content .header {
64
65
  font-family: var(--headline-07-font-family);
package/dist/collection/components/modal/modal.css CHANGED
@@ -1,3 +1,15 @@
1
+ :host {
2
+ --tds-scrollbar-width-standard: thin;
3
+ --tds-scrollbar-width: 10px;
4
+ --tds-scrollbar-height: 10px;
5
+ --tds-scrollbar-thumb-border-width: 3px;
6
+ --tds-scrollbar-thumb-border-hover-width: 2px;
7
+ }
8
+
9
+ body {
10
+ scrollbar-width: thin;
11
+ }
12
+
1
13
  /* Typography Usage mixins */
2
14
  /* Centralized map of typography types */
3
15
  /* Utility mixin */
@@ -17,16 +29,32 @@
17
29
  .tds-modal * {
18
30
  box-sizing: border-box;
19
31
  }
32
+ .tds-modal:hover::-webkit-scrollbar-thumb {
33
+ border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
34
+ background: var(--tds-scrollbar-hover-thumb-color);
35
+ background-clip: padding-box;
36
+ }
20
37
  .tds-modal::-webkit-scrollbar {
21
- width: 6px;
22
- background-color: transparent;
38
+ width: var(--tds-scrollbar-width);
23
39
  }
24
40
  .tds-modal::-webkit-scrollbar-track {
25
- background-color: transparent;
41
+ background: var(--tds-scrollbar-track-color);
26
42
  }
27
43
  .tds-modal::-webkit-scrollbar-thumb {
28
- background-color: var(--foreground-elements-transparparent-discrete);
29
- border-radius: 3px;
44
+ border-radius: 40px;
45
+ background: var(--tds-scrollbar-thumb-color);
46
+ border: var(--tds-scrollbar-thumb-border-width) solid transparent;
47
+ background-clip: padding-box;
48
+ }
49
+ .tds-modal::-webkit-scrollbar-button {
50
+ height: 0;
51
+ width: 0;
52
+ }
53
+ @supports not selector(::-webkit-scrollbar) {
54
+ .tds-modal {
55
+ scrollbar-color: var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);
56
+ scrollbar-width: var(--tds-scrollbar-width-standard);
57
+ }
30
58
  }
31
59
  .tds-modal__actions-sticky {
32
60
  overflow: hidden;
@@ -175,16 +203,32 @@ slot[name=header]::slotted(*) {
175
203
  overflow-y: visible;
176
204
  padding: 0 16px 16px;
177
205
  }
206
+ .body:hover::-webkit-scrollbar-thumb {
207
+ border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
208
+ background: var(--tds-scrollbar-hover-thumb-color);
209
+ background-clip: padding-box;
210
+ }
178
211
  .body::-webkit-scrollbar {
179
- width: 6px;
180
- background-color: transparent;
212
+ width: var(--tds-scrollbar-width);
181
213
  }
182
214
  .body::-webkit-scrollbar-track {
183
- background-color: transparent;
215
+ background: var(--tds-scrollbar-track-color);
184
216
  }
185
217
  .body::-webkit-scrollbar-thumb {
186
- background-color: var(--foreground-elements-transparparent-discrete);
187
- border-radius: 3px;
218
+ border-radius: 40px;
219
+ background: var(--tds-scrollbar-thumb-color);
220
+ border: var(--tds-scrollbar-thumb-border-width) solid transparent;
221
+ background-clip: padding-box;
222
+ }
223
+ .body::-webkit-scrollbar-button {
224
+ height: 0;
225
+ width: 0;
226
+ }
227
+ @supports not selector(::-webkit-scrollbar) {
228
+ .body {
229
+ scrollbar-color: var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);
230
+ scrollbar-width: var(--tds-scrollbar-width-standard);
231
+ }
188
232
  }
189
233
 
190
234
  .tds-modal-backdrop {
package/dist/components/{p-2a2d66fe.js → p-3f475529.js} RENAMED
@@ -61,7 +61,7 @@ const appendHiddenInput = (element, name, value, disabled, additionalAttributes)
61
61
  input.value = value || '';
62
62
  };
63
63
 
64
- const dropdownCss = "@charset \"UTF-8\";:host button{all:unset;height:100%;width:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);border-radius:var(--tds-dropdown-border-radius)}:host button:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host button .value-wrapper{padding:0 16px;display:flex;align-items:center;justify-content:space-between}:host button.placeholder{color:var(--tds-dropdown-placeholder-color);line-height:1.3}:host button.value{color:var(--tds-dropdown-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3}:host button:focus{border-bottom:0}:host button.error{border-bottom:1px solid var(--tds-dropdown-error)}:host button.error:focus{border-bottom-color:transparent}:host button.error:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-error)}:host button:disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host button .menu-icon{margin-right:0}:host .dropdown-select:focus-within{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .filter{display:flex;align-items:center;justify-content:space-between;height:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);padding-left:16px;border-radius:4px 4px 0 0}:host .filter:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host .filter.disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host .filter.disabled .value-wrapper input{color:var(--tds-dropdown-disabled-color)}:host .filter .value-wrapper{display:flex;width:100%;height:100%}:host .filter .value-wrapper input{color:var(--tds-dropdown-filter-input-color)}:host .filter .label-inside-as-placeholder{position:absolute;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3;color:var(--tds-dropdown-placeholder-color)}:host .filter .label-inside-as-placeholder.lg{top:20px}:host .filter .label-inside-as-placeholder.md{top:16px}:host .filter .label-inside-as-placeholder.sm{display:none}:host .filter .label-inside-as-placeholder.selected{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .filter .label-inside-as-placeholder.selected.lg{top:12px}:host .filter .label-inside-as-placeholder.selected.md{top:8px}:host .filter .label-inside-as-placeholder.selected.sm{display:none}:host .filter .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .filter.focus{border-bottom:0}:host .filter.focus:hover{border-bottom:0}:host .filter.error{border-bottom:1px solid var(--tds-dropdown-error)}:host .filter.error.focus{border-bottom-color:transparent}:host .filter.error.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-error)}:host .filter input{flex:1;all:unset;width:100%}:host .filter input::placeholder{color:var(--tds-dropdown-placeholder-color)}:host .filter input:disabled::placeholder{color:var(--tds-dropdown-disabled-color)}:host .filter tds-icon{cursor:pointer}:host .filter .menu-icon{margin-right:16px}:host .filter .clear-icon{margin:0 8px;color:var(--tds-dropdown-clear-icon-color);padding-right:8px;border-right:1px solid var(--tds-dropdown-clear-icon-color)}:host .filter .clear-icon:hover{color:var(--tds-dropdown-clear-icon-hover-color)}:host .filter .clear-icon.hide{display:none;visibility:hidden}:host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host{display:block;position:relative;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .label-outside{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-dropdown-label-color);margin-bottom:8px}:host .label-outside.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select{position:relative}:host .dropdown-select button:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;border-radius:0}:host .dropdown-select button{transition:border-bottom-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .dropdown-select button:hover{border-bottom-color:var(--tds-dropdown-border-bottom-hover)}:host .dropdown-select button{border-bottom-color:var(--tds-dropdown-border-bottom)}:host .dropdown-select button.error{border-bottom-color:var(--tds-dropdown-error)}:host .dropdown-select button.error:focus{border-bottom-color:transparent}:host .dropdown-select.disabled .label-inside,:host .dropdown-select.disabled .placeholder,:host .dropdown-select.disabled .label-inside-as-placeholder,:host .dropdown-select.disabled .value-wrapper{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select.disabled button{border:none}:host .dropdown-select .label-inside{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);color:var(--tds-dropdown-label-inside-color)}:host .dropdown-select .label-inside.lg{top:12px;left:16px}:host .dropdown-select .label-inside.md{top:8px;left:16px}:host .dropdown-select .label-inside.sm{display:none}:host .dropdown-select .label-inside.xs{display:none}:host .dropdown-select .label-inside+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select .placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:var(--tds-placeholder-margin);}:host .dropdown-select .placeholder.xs{line-height:1}:host .dropdown-select .label-inside-as-placeholder{color:var(--tds-dropdown-placeholder-color)}:host .dropdown-select .label-inside-as-placeholder.selected{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .dropdown-select .label-inside-as-placeholder.selected.lg{top:12px}:host .dropdown-select .label-inside-as-placeholder.selected.md{top:8px}:host .dropdown-select .label-inside-as-placeholder.selected.sm{display:none}:host .dropdown-select .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select.lg{height:55px}:host .dropdown-select.md{height:47px}:host .dropdown-select.sm{height:39px}:host .dropdown-select.xs{height:29px}:host .helper{margin-top:4px;color:var(--tds-dropdown-helper-color);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;align-items:center;gap:8px}:host .helper.error{color:var(--tds-dropdown-error)}:host .helper.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-list{z-index:100;position:absolute;width:100%;transform-origin:top;box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.1);border-radius:var(--tds-dropdown-list-border-radius-down);overflow-y:auto;transform:scaleY(0);pointer-events:none}:host .dropdown-list:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .dropdown-list::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .dropdown-list::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .dropdown-list{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.xs{max-height:260px}:host .dropdown-list.up{bottom:100%;margin-top:0;margin-bottom:1px;transform-origin:bottom;display:flex;flex-direction:column-reverse;border-radius:var(--tds-dropdown-list-border-radius-up)}:host .dropdown-list.up.label-outside{bottom:calc(100% - 24px)}:host .dropdown-list.closed{transform:scaleY(0);pointer-events:none}:host .dropdown-list.open{transform:scaleY(1);visibility:visible;opacity:1;pointer-events:auto}:host .dropdown-list.animation-enter-slide{transition:transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-enter)}:host .dropdown-list.animation-exit-slide{transition:transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-exit)}:host .dropdown-list .no-result{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:flex;align-items:center;padding:0 16px;background-color:var(--tds-dropdown-bg)}:host .dropdown-list .no-result.lg{height:56px}:host .dropdown-list .no-result.md{height:48px}:host .dropdown-list .no-result.sm{height:40px}:host .dropdown-list .no-result.xs{height:40px}:host .menu-icon{color:var(--tds-dropdown-menu-icon-color)}:host tds-icon{transition:transform var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host tds-icon.open{transform:rotateZ(180deg)}";
64
+ const dropdownCss = "@charset \"UTF-8\";:host button{all:unset;height:100%;width:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);border-radius:var(--tds-dropdown-border-radius)}:host button:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host button .value-wrapper{padding:0 16px;display:flex;align-items:center;justify-content:space-between}:host button.placeholder{color:var(--tds-dropdown-placeholder-color);line-height:1.3}:host button.value{color:var(--tds-dropdown-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3}:host button:focus{border-bottom:0}:host button.error{border-bottom:1px solid var(--tds-dropdown-error)}:host button.error:focus{border-bottom-color:transparent}:host button.error:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-error)}:host button:disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host button .menu-icon{margin-right:0}:host .dropdown-select:focus-within{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .filter{display:flex;align-items:center;justify-content:space-between;height:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);padding-left:16px;border-radius:4px 4px 0 0}:host .filter:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host .filter.disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host .filter.disabled .value-wrapper input{color:var(--tds-dropdown-disabled-color)}:host .filter .value-wrapper{display:flex;width:100%;height:100%}:host .filter .value-wrapper input{color:var(--tds-dropdown-filter-input-color)}:host .filter .label-inside-as-placeholder{position:absolute;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3;color:var(--tds-dropdown-placeholder-color)}:host .filter .label-inside-as-placeholder.lg{top:20px}:host .filter .label-inside-as-placeholder.md{top:16px}:host .filter .label-inside-as-placeholder.sm{display:none}:host .filter .label-inside-as-placeholder.selected{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .filter .label-inside-as-placeholder.selected.lg{top:12px}:host .filter .label-inside-as-placeholder.selected.md{top:8px}:host .filter .label-inside-as-placeholder.selected.sm{display:none}:host .filter .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .filter.focus{border-bottom:0}:host .filter.focus:hover{border-bottom:0}:host .filter.error{border-bottom:1px solid var(--tds-dropdown-error)}:host .filter.error.focus{border-bottom-color:transparent}:host .filter.error.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-error)}:host .filter input{flex:1;all:unset;width:100%}:host .filter input::placeholder{color:var(--tds-dropdown-placeholder-color)}:host .filter input:disabled::placeholder{color:var(--tds-dropdown-disabled-color)}:host .filter tds-icon{cursor:pointer}:host .filter .menu-icon{margin-right:16px}:host .filter .clear-icon{margin:0 8px;color:var(--tds-dropdown-clear-icon-color);padding-right:8px;border-right:1px solid var(--tds-dropdown-clear-icon-color)}:host .filter .clear-icon:hover{color:var(--tds-dropdown-clear-icon-hover-color)}:host .filter .clear-icon.hide{display:none;visibility:hidden}:host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host{display:block;position:relative;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .label-outside{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-dropdown-label-color);margin-bottom:8px}:host .label-outside.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select{position:relative}:host .dropdown-select button:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;border-radius:0}:host .dropdown-select button{transition:border-bottom-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .dropdown-select button:hover{border-bottom-color:var(--tds-dropdown-border-bottom-hover)}:host .dropdown-select button{border-bottom-color:var(--tds-dropdown-border-bottom)}:host .dropdown-select button.error{border-bottom-color:var(--tds-dropdown-error)}:host .dropdown-select button.error:focus{border-bottom-color:transparent}:host .dropdown-select.disabled .label-inside,:host .dropdown-select.disabled .placeholder,:host .dropdown-select.disabled .label-inside-as-placeholder,:host .dropdown-select.disabled .value-wrapper{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select.disabled button{border:none}:host .dropdown-select .label-inside{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);color:var(--tds-dropdown-label-inside-color)}:host .dropdown-select .label-inside.lg{top:12px;left:16px}:host .dropdown-select .label-inside.md{top:8px;left:16px}:host .dropdown-select .label-inside.sm{display:none}:host .dropdown-select .label-inside.xs{display:none}:host .dropdown-select .label-inside+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select .placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:var(--tds-placeholder-margin);}:host .dropdown-select .placeholder.xs{line-height:1}:host .dropdown-select .label-inside-as-placeholder{color:var(--tds-dropdown-placeholder-color)}:host .dropdown-select .label-inside-as-placeholder.selected{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .dropdown-select .label-inside-as-placeholder.selected.lg{top:12px}:host .dropdown-select .label-inside-as-placeholder.selected.md{top:8px}:host .dropdown-select .label-inside-as-placeholder.selected.sm{display:none}:host .dropdown-select .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select.lg{height:55px}:host .dropdown-select.md{height:47px}:host .dropdown-select.sm{height:39px}:host .dropdown-select.xs{height:29px}:host .helper{margin-top:4px;color:var(--tds-dropdown-helper-color);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;align-items:center;gap:8px}:host .helper.error{color:var(--tds-dropdown-error)}:host .helper.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-list{z-index:100;position:absolute;width:100%;transform-origin:top;box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.1);border-radius:var(--tds-dropdown-list-border-radius-down);overflow-y:auto;transform:scaleY(0);pointer-events:none;background-color:var(--tds-dropdown-bg)}:host .dropdown-list:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .dropdown-list::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .dropdown-list::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .dropdown-list{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.xs{max-height:260px}:host .dropdown-list.up{bottom:100%;margin-top:0;margin-bottom:1px;transform-origin:bottom;display:flex;flex-direction:column-reverse;border-radius:var(--tds-dropdown-list-border-radius-up)}:host .dropdown-list.up.label-outside{bottom:calc(100% - 24px)}:host .dropdown-list.closed{transform:scaleY(0);pointer-events:none}:host .dropdown-list.open{transform:scaleY(1);visibility:visible;opacity:1;pointer-events:auto}:host .dropdown-list.animation-enter-slide{transition:transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-enter)}:host .dropdown-list.animation-exit-slide{transition:transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-exit)}:host .dropdown-list .no-result{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:flex;align-items:center;padding:0 16px;background-color:var(--tds-dropdown-bg)}:host .dropdown-list .no-result.lg{height:56px}:host .dropdown-list .no-result.md{height:48px}:host .dropdown-list .no-result.sm{height:40px}:host .dropdown-list .no-result.xs{height:40px}:host .menu-icon{color:var(--tds-dropdown-menu-icon-color)}:host tds-icon{transition:transform var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host tds-icon.open{transform:rotateZ(180deg)}";
65
65
  const TdsDropdownStyle0 = dropdownCss;
66
66
 
67
67
  function hasValueChanged(newValue, currentValue) {
@@ -78,6 +78,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
78
78
  this.tdsFocus = createEvent(this, "tdsFocus", 6);
79
79
  this.tdsBlur = createEvent(this, "tdsBlur", 6);
80
80
  this.tdsInput = createEvent(this, "tdsInput", 6);
81
+ this.tdsClear = createEvent(this, "tdsClear", 6);
81
82
  this.hasFocus = false;
82
83
  this.setDefaultOption = () => {
83
84
  if (this.internalDefaultValue) {
@@ -187,6 +188,8 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
187
188
  }
188
189
  };
189
190
  this.handleFilterReset = () => {
191
+ // Store the current filter query before clearing
192
+ const clearedValue = this.filterQuery;
190
193
  // only reset selected values when filterquery is blank
191
194
  if (!this.filterQuery.length) {
192
195
  this.reset();
@@ -196,6 +199,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
196
199
  this.inputElement.focus();
197
200
  // Add this line to ensure internal value is cleared
198
201
  this.internalValue = '';
202
+ this.tdsClear.emit({ clearedValue });
199
203
  };
200
204
  this.handleFocus = () => {
201
205
  this.open = true;
@@ -407,6 +411,10 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
407
411
  // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
408
412
  const isClickOutside = !event.composedPath().includes(this.host);
409
413
  if (isClickOutside) {
414
+ // Emit clear event if there's a filter query when clicking outside
415
+ if (this.filter && this.filterQuery) {
416
+ this.tdsClear.emit({ clearedValue: this.filterQuery });
417
+ }
410
418
  this.open = false;
411
419
  }
412
420
  }
@@ -549,9 +557,9 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
549
557
  // Generate unique IDs for associating labels and helpers with the input/button
550
558
  const labelId = this.label ? `dropdown-label-${this.name || generateUniqueId()}` : undefined;
551
559
  const helperId = this.helper ? `dropdown-helper-${this.name || generateUniqueId()}` : undefined;
552
- return (h(Host, { key: '8145c7b222a850157de5f328974f5c70b126b9e4', class: {
560
+ return (h(Host, { key: 'ebb4008f7e27e9f9de603b1dfeb5100f45f0e600', class: {
553
561
  [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
554
- } }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'af3ad647c3c5bbb86f12033821020a4ed484d9e1', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '099777e28368c78c9eb05945328899334c674865', class: {
562
+ } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '77f30a6ec80264fe89422b8f129e763d2fe2a64c', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '3d3d3ca87cae2df4f043feb1f6bdbf4482cc4223', class: {
555
563
  'dropdown-select': true,
556
564
  [this.size]: true,
557
565
  'disabled': this.disabled,
@@ -595,7 +603,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
595
603
  label-inside-as-placeholder
596
604
  ${this.size}
597
605
  ${this.selectedOptions.length ? 'selected' : ''}
598
- ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: 'f5427c41c1abe1c84164a030e69800fd48911c73', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
606
+ ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '48e96d8ecac8918e11c6e2c0e1321802b61dbf7d', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
599
607
  this.dropdownList = element;
600
608
  }, class: {
601
609
  'dropdown-list': true,
@@ -606,11 +614,11 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
606
614
  'closed': !this.open,
607
615
  [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
608
616
  [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
609
- } }, h("slot", { key: '2e83898eec11f669c3477d5600dce1178b5c4f36', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '0ff59cf47dbe302998ce72758b182e7565ddd210', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '3a60427fe8ca05d6bf4ba42f95bd0bc753f04ebd', id: helperId, class: {
617
+ } }, h("slot", { key: 'd49f3a638a9f6b1b08e3489dffad27151c0c554f', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'b38d308604e30fdb130d72295d2d3f7bf2fb9bd6', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '1f8160ac1f0ecdc0d4f29faa31c469a0bd04b0d6', id: helperId, class: {
610
618
  helper: true,
611
619
  error: this.error,
612
620
  disabled: this.disabled,
613
- } }, this.error && h("tds-icon", { key: 'bab7ba6449cb7cd62a149340f6de1fe13cfd49de', name: "error", size: "16px" }), this.helper))));
621
+ } }, this.error && h("tds-icon", { key: '487fb6deb5bd27347b2cd4f607e5488543185894', name: "error", size: "16px" }), this.helper))));
614
622
  }
615
623
  get host() { return this; }
616
624
  static get watchers() { return {
package/dist/components/tds-dropdown.js CHANGED
@@ -1,4 +1,4 @@
1
- import { T as TdsDropdown$1, d as defineCustomElement$1 } from './p-2a2d66fe.js';
1
+ import { T as TdsDropdown$1, d as defineCustomElement$1 } from './p-3f475529.js';
2
2
 
3
3
  const TdsDropdown = TdsDropdown$1;
4
4
  const defineCustomElement = defineCustomElement$1;
package/dist/components/tds-footer-group.js CHANGED
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
2
2
  import { h as hasSlot } from './p-ae110fc2.js';
3
3
  import { d as defineCustomElement$2 } from './p-f7d94947.js';
4
4
 
5
- const footerGroupCss = ":host{display:block}:host .footer-top-title{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links-header);padding-bottom:8px}:host .footer-top-title *,:host .footer-top-title ::slotted(*){margin:0}:host button.footer-top-title-button{border:none;width:100%;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links);background-color:transparent;text-align:left;padding:19px 24px;justify-content:space-between;border-bottom:1px solid var(--tds-footer-top-divider)}:host button.footer-top-title-button *,:host button.footer-top-title-button ::slotted(*){margin:0}:host button.footer-top-title-button.expanded{border-bottom:none}:host button.footer-top-title-button.expanded tds-icon{transform:rotateZ(180deg)}:host button.footer-top-title-button:hover{cursor:pointer}:host button.footer-top-title-button:active{background-color:var(--tds-footer-top-button-active)}:host button.footer-top-title-button:focus-visible{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host button.footer-top-title-button tds-icon{transition:transform 0.2s ease-in-out}:host [role=list]{list-style:none;padding:0;margin:0;display:flex;gap:8px}:host [role=list].start,:host [role=list].end{gap:24px}:host [role=list].top-part-child{flex-direction:column}:host .mobile-view [role=list].start:not(.top-part-child){flex-direction:column}:host .mobile-view [role=list].start:not(.top-part-child).start,:host .mobile-view [role=list].start:not(.top-part-child).end{gap:8px}:host .mobile-view [role=list].top-part-child.closed{display:none}:host .mobile-view [role=list].top-part-child{gap:0}:host .mobile-view button.footer-top-title-button{display:flex;align-items:center}";
5
+ const footerGroupCss = ":host{display:block}:host .footer-top-title{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links-header);padding-bottom:8px}:host .footer-top-title *,:host .footer-top-title ::slotted(*){margin:0}:host button.footer-top-title-button{border:none;width:100%;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links);background-color:transparent;text-align:left;padding:19px 24px;justify-content:space-between;border-bottom:1px solid var(--tds-footer-top-divider)}:host button.footer-top-title-button *,:host button.footer-top-title-button ::slotted(*){margin:0}:host button.footer-top-title-button.expanded tds-icon{transform:rotateZ(180deg)}:host button.footer-top-title-button:hover{cursor:pointer}:host button.footer-top-title-button:active{background-color:var(--tds-footer-top-button-active)}:host button.footer-top-title-button:focus-visible{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host button.footer-top-title-button tds-icon{transition:transform 0.2s ease-in-out}:host [role=list]{list-style:none;padding:0;margin:0;display:flex;gap:12px}:host [role=list].start,:host [role=list].end{gap:24px}:host [role=list].top-part-child{flex-direction:column}:host .mobile-view [role=list].start:not(.top-part-child){flex-direction:column}:host .mobile-view [role=list].start:not(.top-part-child).start,:host .mobile-view [role=list].start:not(.top-part-child).end{gap:8px}:host .mobile-view [role=list].top-part-child.closed{display:none}:host .mobile-view [role=list].top-part-child{gap:0}:host .mobile-view button.footer-top-title-button{display:flex;align-items:center}";
6
6
  const TdsFooterGroupStyle0 = footerGroupCss;
7
7
 
8
8
  const TdsFooterGroup$1 = /*@__PURE__*/ proxyCustomElement(class TdsFooterGroup extends H {
package/dist/components/tds-footer-item.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
2
2
 
3
- const footerItemCss = ":host([role=listitem]) div ::slotted(a),:host([role=listitem]) div ::slotted(button){font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-main-links);text-decoration:none}:host([role=listitem]) div ::slotted(a:focus-visible),:host([role=listitem]) div ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host([role=listitem]) div ::slotted(a:hover),:host([role=listitem]) div ::slotted(button:hover){text-decoration:underline}:host([role=listitem]) div.top-part-child ::slotted(a),:host([role=listitem]) div.top-part-child ::slotted(button){font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links)}:host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),:host([role=listitem]) div.top-part-child ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}@media all and (max-width: 992px){:host([role=listitem]) div.top-part-child{border-bottom:1px solid var(--tds-footer-top-divider)}:host([role=listitem]) div.top-part-child ::slotted(a),:host([role=listitem]) div.top-part-child ::slotted(button){display:block;height:100%;padding:19px 40px;font-weight:normal}:host([role=listitem]) div.top-part-child ::slotted(a:hover),:host([role=listitem]) div.top-part-child ::slotted(button:hover){text-decoration:underline;background-color:var(--tds-footer-top-links-background-hover)}:host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),:host([role=listitem]) div.top-part-child ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}}";
3
+ const footerItemCss = ":host([role=listitem]) div ::slotted(a),:host([role=listitem]) div ::slotted(button){font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-main-links);text-decoration:none}:host([role=listitem]) div ::slotted(a:focus-visible),:host([role=listitem]) div ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host([role=listitem]) div ::slotted(a:hover),:host([role=listitem]) div ::slotted(button:hover){text-decoration:underline}:host([role=listitem]) div.top-part-child ::slotted(a),:host([role=listitem]) div.top-part-child ::slotted(button){font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links)}:host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),:host([role=listitem]) div.top-part-child ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}@media all and (max-width: 992px){:host([role=listitem]) div.top-part-child{border-bottom:1px solid var(--tds-footer-top-divider)}:host([role=listitem]) div.top-part-child ::slotted(a),:host([role=listitem]) div.top-part-child ::slotted(button){display:block;height:100%;padding:19px 40px;font-weight:normal}:host([role=listitem]) div.top-part-child ::slotted(a:active),:host([role=listitem]) div.top-part-child ::slotted(button:active){text-decoration:underline;background-color:var(--tds-footer-top-links-background-active)}:host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),:host([role=listitem]) div.top-part-child ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}}";
4
4
  const TdsFooterItemStyle0 = footerItemCss;
5
5
 
6
6
  const TdsFooterItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsFooterItem extends H {