@inera/ids-design 6.0.0 → 6.0.1

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 (10) hide show
  1. package/components/alert/alert-lit.js +1 -1
  2. package/components/alert/alert.css +30 -16
  3. package/components/dropdown/dropdown-lit.js +1 -1
  4. package/components/dropdown/dropdown.css +18 -4
  5. package/global/global.css +12 -0
  6. package/package.json +1 -1
  7. package/themes/1177/1177.css +12 -0
  8. package/themes/1177-pro/1177-pro.css +12 -0
  9. package/themes/inera/inera.css +12 -0
  10. package/themes/inera-admin/inera-admin.css +12 -0
package/components/alert/alert-lit.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-alert{border-radius:var(--IDS-BORDER-RADIUS);border-style:solid;border-width:.063rem;color:var(--IDS-ALERT__COLOR);display:flex;flex-direction:column;flex-wrap:wrap;font-size:1rem;line-height:1.5rem;padding:1rem}.ids-alert .ids-alert__header{display:flex;flex-wrap:wrap;gap:1rem}.ids-alert .ids-alert__header .ids-alert__button{align-items:center;display:flex}.ids-alert .ids-alert__icon_and_text{display:flex;flex-grow:1;flex-wrap:wrap;gap:1rem}.ids-alert .ids-alert__expand{align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:flex;font:inherit;height:1.5rem;justify-content:center;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;position:relative;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:1.5rem}.ids-alert .ids-alert__expand:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-alert .ids-alert__expand:before{color:var(--IDS-FONT-COLOR);content:\"\\e906\";display:block;font:icon;font-family:Inera-Design-Icons;font-size:1.25rem;pointer-events:none;position:absolute}.ids-alert .ids-alert__expand.ids-alert__expand--expanded:before{content:\"\\e909\"}.ids-alert .ids-alert__close{align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:flex;font:inherit;height:1.875rem;justify-content:center;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;position:relative;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:1.5rem}.ids-alert .ids-alert__close:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-alert .ids-alert__close:before{color:var(--IDS-ICON__COLOR);content:\"\\e916\";display:block;font:icon;font-family:Inera-Design-Icons;font-size:1.25rem;pointer-events:none;position:absolute}.ids-alert .ids-alert__close:active:before,.ids-alert .ids-alert__close:focus:before,.ids-alert .ids-alert__close:hover:before{color:var(--IDS-ICON--ACTIVE-COLOR)}.ids-alert .ids-alert__content{display:block;margin-top:.5rem}.ids-alert .ids-alert__content-icon,.ids-alert .ids-alert__state-icon{height:1.875rem;position:relative;width:1.875rem}.ids-alert .ids-alert__headline *,.ids-alert .ids-alert__headline ::slotted(*){font-family:var(--IDS-ALERT__HEADLINE-FONT-FAMILY)!important;font-size:1.17rem!important;font-weight:var(--IDS-ALERT__HEADLINE-FONT-WEIGHT)!important;line-height:1.875rem!important;margin:0!important}@media (min-width:640px){.ids-alert{padding:1.875rem}}.ids-alert.ids-alert--info{background-color:var(--IDS-ALERT--INFO__BACKGROUND-COLOR);border-color:var(--IDS-ALERT--INFO__BORDER-COLOR)}.ids-alert.ids-alert--info .ids-alert__content-icon:before,.ids-alert.ids-alert--info .ids-alert__state-icon:before{color:var(--IDS-ALERT--INFO__ICON-COLOR);content:\"\\e90c\";display:block;font:icon;font-family:Inera-Design-Icons;font-size:1.875rem;pointer-events:none;position:absolute}.ids-alert.ids-alert--attention{background-color:var(--IDS-ALERT--ATTENTION__BACKGROUND-COLOR);border-color:var(--IDS-ALERT--ATTENTION__BORDER-COLOR)}.ids-alert.ids-alert--attention .ids-alert__content-icon:before,.ids-alert.ids-alert--attention .ids-alert__state-icon:before{color:var(--IDS-ALERT--ATTENTION__ICON-COLOR);content:\"\\e905\";display:block;font:icon;font-family:Inera-Design-Icons;font-size:1.875rem;pointer-events:none;position:absolute}.ids-alert.ids-alert--success{background-color:var(--IDS-ALERT--SUCCESS__BACKGROUND-COLOR);border-color:var(--IDS-ALERT--SUCCESS__BORDER-COLOR)}.ids-alert.ids-alert--success .ids-alert__content-icon:before,.ids-alert.ids-alert--success .ids-alert__state-icon:before{color:var(--IDS-ALERT--SUCCESS__ICON-COLOR);content:\"\\e912\";display:block;font:icon;font-family:Inera-Design-Icons;font-size:1.875rem;pointer-events:none;position:absolute}.ids-alert.ids-alert--error{background-color:var(--IDS-ALERT--ERROR__BACKGROUND-COLOR);border-color:var(--IDS-ALERT--ERROR__BORDER-COLOR)}.ids-alert.ids-alert--error .ids-alert__content-icon:before,.ids-alert.ids-alert--error .ids-alert__state-icon:before{color:var(--IDS-ALERT--ERROR__ICON-COLOR);content:\"\\e913\";display:block;font:icon;font-family:Inera-Design-Icons;font-size:1.875rem;pointer-events:none;position:absolute}.ids-alert.ids-alert--collapsed .ids-alert__content{display:none}.ids-alert.ids-alert--compact{flex-direction:row;flex-wrap:nowrap}.ids-alert.ids-alert--compact .ids-alert__content{align-items:flex-start;display:flex;flex-grow:1;margin-right:1rem;margin-top:0}.ids-alert.ids-alert--compact .ids-alert__content-icon{display:inline-flex;flex-shrink:0;height:1.75rem;margin-bottom:-7px;margin-right:.5rem;width:1.75rem}.ids-alert.ids-alert--compact .ids-alert__content-icon:before{font-size:1.75rem}.ids-alert.ids-alert--compact .ids-alert__content-text{display:block;line-height:1.5rem}@media (min-width:640px){.ids-alert.ids-alert--compact{padding:1.875rem}}@media (min-width:1024px){.ids-alert.ids-alert--compact .ids-alert__content-icon{height:2.5rem;margin-bottom:0;margin-right:1rem;margin-top:-.5rem;width:2.5rem}.ids-alert.ids-alert--compact .ids-alert__content-icon:before{font-size:2.5rem}.ids-alert.ids-alert--compact .ids-alert__content-text{align-items:flex-start;display:flex;line-height:1.75rem;margin-top:.5rem}}.ids-alert.ids-alert--ribbon{flex-direction:row;flex-wrap:nowrap}.ids-alert.ids-alert--ribbon .ids-alert__content{align-items:flex-start;display:flex;flex-grow:1;margin-right:1rem;margin-top:0}.ids-alert.ids-alert--ribbon .ids-alert__content-icon{display:inline-flex;flex-shrink:0;height:1.75rem;margin-bottom:-7px;margin-right:.5rem;width:1.75rem}.ids-alert.ids-alert--ribbon .ids-alert__content-text{display:block;line-height:1.5rem}@media (min-width:640px){.ids-alert.ids-alert--ribbon{padding:1rem}}@media (min-width:1024px){.ids-alert.ids-alert--ribbon .ids-alert__content-icon{height:2.5rem;margin-bottom:0;margin-right:1rem;margin-top:-.5rem;width:2.5rem}.ids-alert.ids-alert--ribbon .ids-alert__content-icon:before{font-size:2.5rem}.ids-alert.ids-alert--ribbon .ids-alert__content-text{align-items:flex-start;display:flex;line-height:1.75rem;margin-top:.5rem}}.ids-alert.ids-alert--ribbon .ids-alert__close:before{content:\"\\e934\";font-size:1rem}.ids-alert.ids-alert--ribbon .ids-alert__content-icon:before{font-size:1.75rem}@media (min-width:1024px){.ids-alert.ids-alert--ribbon .ids-alert__content-text{line-height:1.75rem;margin-top:0}.ids-alert.ids-alert--ribbon .ids-alert__content-icon{height:1.75rem;margin-top:0;width:1.75rem}.ids-alert.ids-alert--ribbon .ids-alert__content-icon:before{font-size:1.75rem}}";
3
+ var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-alert{border-radius:var(--IDS-BORDER-RADIUS);border-style:solid;border-width:.063rem;color:var(--IDS-ALERT__COLOR);display:flex;flex-direction:column;flex-wrap:wrap;font-size:1rem;line-height:1.5rem;padding:1rem}.ids-alert .ids-alert__header{display:flex;flex-wrap:wrap;gap:1rem}.ids-alert .ids-alert__header .ids-alert__button{align-items:center;display:flex}.ids-alert .ids-alert__icon_and_text{display:flex;flex-grow:1;flex-wrap:wrap;gap:1rem}.ids-alert .ids-alert__expand{align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:flex;font:inherit;height:1.5rem;justify-content:center;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;position:relative;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:1.5rem}.ids-alert .ids-alert__expand:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-alert .ids-alert__expand:before{color:var(--IDS-FONT-COLOR);content:\"\\e906\";display:block;font:icon;font-family:Inera-Design-Icons;font-size:1.25rem;pointer-events:none;position:absolute}.ids-alert .ids-alert__expand.ids-alert__expand--expanded:before{content:\"\\e909\"}.ids-alert .ids-alert__close{align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:flex;font:inherit;height:1.875rem;justify-content:center;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;position:relative;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:1.5rem}.ids-alert .ids-alert__close:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-alert .ids-alert__close:before{color:var(--IDS-ICON__COLOR);content:\"\\e916\";display:block;font:icon;font-family:Inera-Design-Icons;font-size:1.25rem;pointer-events:none;position:absolute}.ids-alert .ids-alert__close:active:before,.ids-alert .ids-alert__close:focus:before,.ids-alert .ids-alert__close:hover:before{color:var(--IDS-ICON--ACTIVE-COLOR)}.ids-alert .ids-alert__content{display:block;margin-top:.5rem}.ids-alert .ids-alert__content-icon,.ids-alert .ids-alert__state-icon{height:1.875rem;position:relative;width:1.875rem}.ids-alert .ids-alert__headline *,.ids-alert .ids-alert__headline ::slotted(*){font-family:var(--IDS-ALERT__HEADLINE-FONT-FAMILY)!important;font-size:1.17rem!important;font-weight:var(--IDS-ALERT__HEADLINE-FONT-WEIGHT)!important;line-height:1.875rem!important;margin:0!important}@media (min-width:640px){.ids-alert{padding:1.875rem}}.ids-alert.ids-alert--info{background-color:var(--IDS-ALERT--INFO__BACKGROUND-COLOR);border-color:var(--IDS-ALERT--INFO__BORDER-COLOR)}.ids-alert.ids-alert--info .ids-alert__content-icon:before,.ids-alert.ids-alert--info .ids-alert__state-icon:before{color:var(--IDS-ALERT--INFO__ICON-COLOR);content:\"\\e90c\";display:block;font:icon;font-family:Inera-Design-Icons;font-size:1.875rem;pointer-events:none;position:absolute}.ids-alert.ids-alert--attention{background-color:var(--IDS-ALERT--ATTENTION__BACKGROUND-COLOR);border-color:var(--IDS-ALERT--ATTENTION__BORDER-COLOR)}.ids-alert.ids-alert--attention .ids-alert__content-icon:before,.ids-alert.ids-alert--attention .ids-alert__state-icon:before{color:var(--IDS-ALERT--ATTENTION__ICON-COLOR);content:\"\\e905\";display:block;font:icon;font-family:Inera-Design-Icons;font-size:1.875rem;pointer-events:none;position:absolute}.ids-alert.ids-alert--success{background-color:var(--IDS-ALERT--SUCCESS__BACKGROUND-COLOR);border-color:var(--IDS-ALERT--SUCCESS__BORDER-COLOR)}.ids-alert.ids-alert--success .ids-alert__content-icon:before,.ids-alert.ids-alert--success .ids-alert__state-icon:before{color:var(--IDS-ALERT--SUCCESS__ICON-COLOR);content:\"\\e912\";display:block;font:icon;font-family:Inera-Design-Icons;font-size:1.875rem;pointer-events:none;position:absolute}.ids-alert.ids-alert--error{background-color:var(--IDS-ALERT--ERROR__BACKGROUND-COLOR);border-color:var(--IDS-ALERT--ERROR__BORDER-COLOR)}.ids-alert.ids-alert--error .ids-alert__content-icon:before,.ids-alert.ids-alert--error .ids-alert__state-icon:before{color:var(--IDS-ALERT--ERROR__ICON-COLOR);content:\"\\e913\";display:block;font:icon;font-family:Inera-Design-Icons;font-size:1.875rem;pointer-events:none;position:absolute}.ids-alert.ids-alert--collapsed .ids-alert__content{display:none}.ids-alert.ids-alert--compact{flex-direction:row;flex-wrap:nowrap}.ids-alert.ids-alert--compact .ids-alert__content{display:inline;flex-grow:1;margin-right:1rem;margin-top:-.5rem}@media (min-width:1024px){.ids-alert.ids-alert--compact .ids-alert__content{align-items:flex-start;display:flex}}.ids-alert.ids-alert--compact .ids-alert__content-icon{display:inline-block;flex-shrink:0;height:1.75rem;margin-right:.5rem;position:relative;top:.4375rem;width:1.75rem}.ids-alert.ids-alert--compact .ids-alert__content-icon:before{font-size:1.75rem}.ids-alert.ids-alert--compact .ids-alert__content-text{display:inline;line-height:1.5rem}@media (min-width:640px){.ids-alert.ids-alert--compact{padding:1.875rem}}@media (min-width:1024px){.ids-alert.ids-alert--compact .ids-alert__content-text{display:block}.ids-alert.ids-alert--compact .ids-alert__content-icon{height:2.5rem;margin-bottom:0;margin-right:1rem;margin-top:-.5rem;width:2.5rem}.ids-alert.ids-alert--compact .ids-alert__content-icon:before{font-size:2.5rem}.ids-alert.ids-alert--compact .ids-alert__content-text{line-height:1.75rem;margin-top:.5rem}}.ids-alert.ids-alert--ribbon{flex-direction:row;flex-wrap:nowrap}.ids-alert.ids-alert--ribbon .ids-alert__content{display:inline;flex-grow:1;margin-right:1rem;margin-top:-.5rem}@media (min-width:1024px){.ids-alert.ids-alert--ribbon .ids-alert__content{align-items:flex-start;display:flex}}.ids-alert.ids-alert--ribbon .ids-alert__content-icon{display:inline-block;flex-shrink:0;height:1.75rem;margin-right:.5rem;position:relative;top:.4375rem;width:1.75rem}.ids-alert.ids-alert--ribbon .ids-alert__content-text{display:inline;line-height:1.5rem}@media (min-width:640px){.ids-alert.ids-alert--ribbon{padding:1rem}}@media (min-width:1024px){.ids-alert.ids-alert--ribbon .ids-alert__content-text{display:block}.ids-alert.ids-alert--ribbon .ids-alert__content-icon{height:2.5rem;margin-bottom:0;margin-right:1rem;margin-top:-.5rem;width:2.5rem}.ids-alert.ids-alert--ribbon .ids-alert__content-icon:before{font-size:2.5rem}.ids-alert.ids-alert--ribbon .ids-alert__content-text{line-height:1.75rem;margin-top:.5rem}}.ids-alert.ids-alert--ribbon .ids-alert__close:before{content:\"\\e934\";font-size:1rem}.ids-alert.ids-alert--ribbon .ids-alert__content-icon:before{font-size:1.75rem}@media (min-width:1024px){.ids-alert.ids-alert--ribbon .ids-alert__content-text{line-height:1.75rem;margin-top:0}.ids-alert.ids-alert--ribbon .ids-alert__content-icon{height:1.75rem;margin-top:0;width:1.75rem}.ids-alert.ids-alert--ribbon .ids-alert__content-icon:before{font-size:1.75rem}}";
4
4
 
5
5
  var alertLit = css`${unsafeCSS(css_248z)}`;
6
6
 
package/components/alert/alert.css CHANGED
@@ -221,25 +221,31 @@
221
221
  flex-wrap: nowrap;
222
222
  }
223
223
  .ids-alert.ids-alert--compact .ids-alert__content {
224
- display: flex;
224
+ display: inline;
225
225
  flex-grow: 1;
226
- margin-top: 0;
226
+ margin-top: -0.5rem;
227
227
  margin-right: 1rem;
228
- align-items: flex-start;
228
+ }
229
+ @media (min-width: 1024px) {
230
+ .ids-alert.ids-alert--compact .ids-alert__content {
231
+ display: flex;
232
+ align-items: flex-start;
233
+ }
229
234
  }
230
235
  .ids-alert.ids-alert--compact .ids-alert__content-icon {
236
+ position: relative;
231
237
  width: 1.75rem;
232
238
  height: 1.75rem;
233
239
  margin-right: 0.5rem;
234
240
  flex-shrink: 0;
235
- display: inline-flex;
236
- margin-bottom: -7px;
241
+ display: inline-block;
242
+ top: 0.4375rem;
237
243
  }
238
244
  .ids-alert.ids-alert--compact .ids-alert__content-icon::before {
239
245
  font-size: 1.75rem;
240
246
  }
241
247
  .ids-alert.ids-alert--compact .ids-alert__content-text {
242
- display: block;
248
+ display: inline;
243
249
  line-height: 1.5rem;
244
250
  }
245
251
  @media (min-width: 640px) {
@@ -248,6 +254,9 @@
248
254
  }
249
255
  }
250
256
  @media (min-width: 1024px) {
257
+ .ids-alert.ids-alert--compact .ids-alert__content-text {
258
+ display: block;
259
+ }
251
260
  .ids-alert.ids-alert--compact .ids-alert__content-icon {
252
261
  width: 2.5rem;
253
262
  height: 2.5rem;
@@ -260,8 +269,6 @@
260
269
  }
261
270
  .ids-alert.ids-alert--compact .ids-alert__content-text {
262
271
  margin-top: 0.5rem;
263
- display: flex;
264
- align-items: flex-start;
265
272
  line-height: 1.75rem;
266
273
  }
267
274
  }
@@ -270,25 +277,31 @@
270
277
  flex-wrap: nowrap;
271
278
  }
272
279
  .ids-alert.ids-alert--ribbon .ids-alert__content {
273
- display: flex;
280
+ display: inline;
274
281
  flex-grow: 1;
275
- margin-top: 0;
282
+ margin-top: -0.5rem;
276
283
  margin-right: 1rem;
277
- align-items: flex-start;
284
+ }
285
+ @media (min-width: 1024px) {
286
+ .ids-alert.ids-alert--ribbon .ids-alert__content {
287
+ display: flex;
288
+ align-items: flex-start;
289
+ }
278
290
  }
279
291
  .ids-alert.ids-alert--ribbon .ids-alert__content-icon {
292
+ position: relative;
280
293
  width: 1.75rem;
281
294
  height: 1.75rem;
282
295
  margin-right: 0.5rem;
283
296
  flex-shrink: 0;
284
- display: inline-flex;
285
- margin-bottom: -7px;
297
+ display: inline-block;
298
+ top: 0.4375rem;
286
299
  }
287
300
  .ids-alert.ids-alert--ribbon .ids-alert__content-icon::before {
288
301
  font-size: 1.75rem;
289
302
  }
290
303
  .ids-alert.ids-alert--ribbon .ids-alert__content-text {
291
- display: block;
304
+ display: inline;
292
305
  line-height: 1.5rem;
293
306
  }
294
307
  @media (min-width: 640px) {
@@ -297,6 +310,9 @@
297
310
  }
298
311
  }
299
312
  @media (min-width: 1024px) {
313
+ .ids-alert.ids-alert--ribbon .ids-alert__content-text {
314
+ display: block;
315
+ }
300
316
  .ids-alert.ids-alert--ribbon .ids-alert__content-icon {
301
317
  width: 2.5rem;
302
318
  height: 2.5rem;
@@ -309,8 +325,6 @@
309
325
  }
310
326
  .ids-alert.ids-alert--ribbon .ids-alert__content-text {
311
327
  margin-top: 0.5rem;
312
- display: flex;
313
- align-items: flex-start;
314
328
  line-height: 1.75rem;
315
329
  }
316
330
  }
package/components/dropdown/dropdown-lit.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-dropdown{display:block;position:relative}.ids-dropdown__content,:host(ids-dropdown-content){background:var(--IDS-COLOR-NEUTRAL-100);border:.063rem solid var(--IDS-DROPDOWN__BORDER-COLOR);border-radius:var(--IDS-BORDER-RADIUS);box-shadow:0 0 .625rem 0 rgba(0,0,0,.3);left:0;max-width:20rem;min-width:6rem;padding:.5rem;position:absolute;top:0;width:100%;z-index:10}.ids-dropdown__content.ids-dropdown__content--hide,:host(ids-dropdown-content).ids-dropdown__content--hide{display:none}@media (max-width:1024px){.ids-dropdown__content.ids-dropdown__content--mblock,.ids-dropdown__content:host([mblock]),:host(ids-dropdown-content).ids-dropdown__content--mblock,:host(ids-dropdown-content):host([mblock]){width:100%}}@media (max-width:640px){.ids-dropdown__content.ids-dropdown__content--sblock,.ids-dropdown__content:host([sblock]),:host(ids-dropdown-content).ids-dropdown__content--sblock,:host(ids-dropdown-content):host([sblock]){width:100%}}.ids-dropdown__content .ids-dropdown__link,.ids-dropdown__content ::slotted(*),:host(ids-dropdown-content) .ids-dropdown__link,:host(ids-dropdown-content) ::slotted(*){border-radius:var(--IDS-DROPDOWN__LINK-BORDER-RADIUS);color:var(--IDS-ICON__COLOR);display:block;padding:.375rem .75rem!important;text-align:left;text-decoration:none}.ids-dropdown__content .ids-dropdown__link:focus,.ids-dropdown__content .ids-dropdown__link:hover,.ids-dropdown__content ::slotted(a:focus),.ids-dropdown__content ::slotted(a:hover),:host(ids-dropdown-content) .ids-dropdown__link:focus,:host(ids-dropdown-content) .ids-dropdown__link:hover,:host(ids-dropdown-content) ::slotted(a:focus),:host(ids-dropdown-content) ::slotted(a:hover){background-color:var(--IDS-COLOR-ACCENT-30);border-radius:var(--IDS-DROPDOWN__LINK-BORDER-RADIUS);color:var(--IDS-COLOR-NEUTRAL-100)}";
3
+ var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-dropdown{display:block;position:relative}.ids-dropdown__content,:host(ids-dropdown-content){background:var(--IDS-COLOR-NEUTRAL-100);border:.063rem solid var(--IDS-DROPDOWN__BORDER-COLOR);border-radius:var(--IDS-BORDER-RADIUS);box-shadow:0 0 .625rem 0 rgba(0,0,0,.3);left:0;padding:.5rem;position:absolute;top:0;width:max-content;z-index:10}.ids-dropdown__content.ids-dropdown__content--hide,:host(ids-dropdown-content).ids-dropdown__content--hide{display:none}@media (max-width:1024px){.ids-dropdown__content.ids-dropdown__content--mblock,.ids-dropdown__content:host([mblock]),:host(ids-dropdown-content).ids-dropdown__content--mblock,:host(ids-dropdown-content):host([mblock]){width:100%}}@media (max-width:640px){.ids-dropdown__content.ids-dropdown__content--sblock,.ids-dropdown__content:host([sblock]),:host(ids-dropdown-content).ids-dropdown__content--sblock,:host(ids-dropdown-content):host([sblock]){width:100%}}.ids-dropdown__content .ids-dropdown__link,.ids-dropdown__content ::slotted(*),:host(ids-dropdown-content) .ids-dropdown__link,:host(ids-dropdown-content) ::slotted(*){align-items:flex-start!important;border-radius:var(--IDS-DROPDOWN__LINK-BORDER-RADIUS);color:var(--IDS-LINK--COLOR-PRESET-1__COLOR);color:var(--IDS-ICON__COLOR);display:flex!important;font-family:var(--IDS-FONT-FAMILY-BASE)!important;font-size:1rem!important;font-style:normal!important;font-weight:400!important;gap:.5rem!important;letter-spacing:var(--Font-letter-spacing-body-text,0);line-height:1.5rem!important;outline-color:var(--IDS-COLOR-NEUTRAL-100)!important;outline-offset:-.25rem!important;padding:.375rem .75rem!important;text-align:left;text-decoration:none!important;text-decoration:none;white-space:normal!important}.ids-dropdown__content .ids-dropdown__link:focus,.ids-dropdown__content .ids-dropdown__link:hover,.ids-dropdown__content ::slotted(a:focus),.ids-dropdown__content ::slotted(a:hover),:host(ids-dropdown-content) .ids-dropdown__link:focus,:host(ids-dropdown-content) .ids-dropdown__link:hover,:host(ids-dropdown-content) ::slotted(a:focus),:host(ids-dropdown-content) ::slotted(a:hover){background-color:var(--IDS-COLOR-ACCENT-30);border-radius:var(--IDS-DROPDOWN__LINK-BORDER-RADIUS);color:var(--IDS-COLOR-NEUTRAL-100)}";
4
4
 
5
5
  var dropdownLit = css`
6
6
  ${unsafeCSS(css_248z)}
package/components/dropdown/dropdown.css CHANGED
@@ -25,10 +25,8 @@
25
25
  padding: 0.5rem;
26
26
  left: 0;
27
27
  top: 0;
28
- min-width: 6rem;
29
- max-width: 20rem;
30
28
  z-index: 10;
31
- width: 100%;
29
+ width: max-content;
32
30
  }
33
31
  .ids-dropdown__content.ids-dropdown__content--hide,
34
32
  :host(ids-dropdown-content).ids-dropdown__content--hide {
@@ -52,8 +50,24 @@
52
50
  .ids-dropdown__content .ids-dropdown__link,
53
51
  :host(ids-dropdown-content) ::slotted(*),
54
52
  :host(ids-dropdown-content) .ids-dropdown__link {
53
+ display: flex !important;
54
+ border-radius: var(--IDS-DROPDOWN__LINK-BORDER-RADIUS);
55
+ gap: 0.5rem !important;
56
+ color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
57
+ align-items: flex-start !important;
58
+ font-family: var(--IDS-FONT-FAMILY-BASE) !important;
59
+ font-size: 1rem !important;
60
+ font-style: normal !important;
61
+ font-weight: 400 !important;
62
+ line-height: 1.5rem !important;
63
+ letter-spacing: var(--Font-letter-spacing-body-text, 0);
64
+ padding: 0.25rem 0.75rem !important;
65
+ outline-offset: -0.25rem !important;
66
+ outline-color: var(--IDS-COLOR-NEUTRAL-100) !important;
67
+ text-decoration: none !important;
68
+ text-align: left;
69
+ white-space: normal !important;
55
70
  padding: 0.375rem 0.75rem !important;
56
- display: block;
57
71
  text-align: left;
58
72
  text-decoration: none;
59
73
  color: var(--IDS-ICON__COLOR);
package/global/global.css CHANGED
@@ -4560,10 +4560,21 @@ input:focus + .ids-toggle input:before {
4560
4560
  [class^=ids-icon-].ids-icon--light, [class^=ids-icon-].ids-icon--color-preset-4 {
4561
4561
  color: var(--IDS-ICON__COLOR-PRESET-4);
4562
4562
  }
4563
+ [class^=ids-icon-].ids-icon--text-align {
4564
+ position: relative;
4565
+ bottom: -0.3125rem;
4566
+ flex-shrink: 0;
4567
+ }
4568
+ [class^=ids-icon-].ids-icon--text-align:before {
4569
+ top: 50%;
4570
+ left: 50%;
4571
+ transform: translate(-50%, -50%);
4572
+ }
4563
4573
  [class^=ids-icon-].ids-icon--text-start {
4564
4574
  margin-right: 0.5rem;
4565
4575
  position: relative;
4566
4576
  bottom: -0.125rem;
4577
+ flex-shrink: 0;
4567
4578
  }
4568
4579
  [class^=ids-icon-].ids-icon--text-start:before {
4569
4580
  top: 50%;
@@ -4574,6 +4585,7 @@ input:focus + .ids-toggle input:before {
4574
4585
  margin-left: 0.5rem;
4575
4586
  position: relative;
4576
4587
  bottom: -0.125rem;
4588
+ flex-shrink: 0;
4577
4589
  }
4578
4590
  [class^=ids-icon-].ids-icon--text-end:before {
4579
4591
  top: 50%;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "type": "module",
3
3
  "name": "@inera/ids-design",
4
- "version": "6.0.0",
4
+ "version": "6.0.1",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "publishConfig": {
7
7
  "access": "public"
package/themes/1177/1177.css CHANGED
@@ -4648,10 +4648,21 @@ input:focus + .ids-toggle input:before {
4648
4648
  [class^=ids-icon-].ids-icon--light, [class^=ids-icon-].ids-icon--color-preset-4 {
4649
4649
  color: var(--IDS-ICON__COLOR-PRESET-4);
4650
4650
  }
4651
+ [class^=ids-icon-].ids-icon--text-align {
4652
+ position: relative;
4653
+ bottom: -0.3125rem;
4654
+ flex-shrink: 0;
4655
+ }
4656
+ [class^=ids-icon-].ids-icon--text-align:before {
4657
+ top: 50%;
4658
+ left: 50%;
4659
+ transform: translate(-50%, -50%);
4660
+ }
4651
4661
  [class^=ids-icon-].ids-icon--text-start {
4652
4662
  margin-right: 0.5rem;
4653
4663
  position: relative;
4654
4664
  bottom: -0.125rem;
4665
+ flex-shrink: 0;
4655
4666
  }
4656
4667
  [class^=ids-icon-].ids-icon--text-start:before {
4657
4668
  top: 50%;
@@ -4662,6 +4673,7 @@ input:focus + .ids-toggle input:before {
4662
4673
  margin-left: 0.5rem;
4663
4674
  position: relative;
4664
4675
  bottom: -0.125rem;
4676
+ flex-shrink: 0;
4665
4677
  }
4666
4678
  [class^=ids-icon-].ids-icon--text-end:before {
4667
4679
  top: 50%;
package/themes/1177-pro/1177-pro.css CHANGED
@@ -4648,10 +4648,21 @@ input:focus + .ids-toggle input:before {
4648
4648
  [class^=ids-icon-].ids-icon--light, [class^=ids-icon-].ids-icon--color-preset-4 {
4649
4649
  color: var(--IDS-ICON__COLOR-PRESET-4);
4650
4650
  }
4651
+ [class^=ids-icon-].ids-icon--text-align {
4652
+ position: relative;
4653
+ bottom: -0.3125rem;
4654
+ flex-shrink: 0;
4655
+ }
4656
+ [class^=ids-icon-].ids-icon--text-align:before {
4657
+ top: 50%;
4658
+ left: 50%;
4659
+ transform: translate(-50%, -50%);
4660
+ }
4651
4661
  [class^=ids-icon-].ids-icon--text-start {
4652
4662
  margin-right: 0.5rem;
4653
4663
  position: relative;
4654
4664
  bottom: -0.125rem;
4665
+ flex-shrink: 0;
4655
4666
  }
4656
4667
  [class^=ids-icon-].ids-icon--text-start:before {
4657
4668
  top: 50%;
@@ -4662,6 +4673,7 @@ input:focus + .ids-toggle input:before {
4662
4673
  margin-left: 0.5rem;
4663
4674
  position: relative;
4664
4675
  bottom: -0.125rem;
4676
+ flex-shrink: 0;
4665
4677
  }
4666
4678
  [class^=ids-icon-].ids-icon--text-end:before {
4667
4679
  top: 50%;
package/themes/inera/inera.css CHANGED
@@ -4675,10 +4675,21 @@ input:focus + .ids-toggle input:before {
4675
4675
  [class^=ids-icon-].ids-icon--light, [class^=ids-icon-].ids-icon--color-preset-4 {
4676
4676
  color: var(--IDS-ICON__COLOR-PRESET-4);
4677
4677
  }
4678
+ [class^=ids-icon-].ids-icon--text-align {
4679
+ position: relative;
4680
+ bottom: -0.3125rem;
4681
+ flex-shrink: 0;
4682
+ }
4683
+ [class^=ids-icon-].ids-icon--text-align:before {
4684
+ top: 50%;
4685
+ left: 50%;
4686
+ transform: translate(-50%, -50%);
4687
+ }
4678
4688
  [class^=ids-icon-].ids-icon--text-start {
4679
4689
  margin-right: 0.5rem;
4680
4690
  position: relative;
4681
4691
  bottom: -0.125rem;
4692
+ flex-shrink: 0;
4682
4693
  }
4683
4694
  [class^=ids-icon-].ids-icon--text-start:before {
4684
4695
  top: 50%;
@@ -4689,6 +4700,7 @@ input:focus + .ids-toggle input:before {
4689
4700
  margin-left: 0.5rem;
4690
4701
  position: relative;
4691
4702
  bottom: -0.125rem;
4703
+ flex-shrink: 0;
4692
4704
  }
4693
4705
  [class^=ids-icon-].ids-icon--text-end:before {
4694
4706
  top: 50%;
package/themes/inera-admin/inera-admin.css CHANGED
@@ -4675,10 +4675,21 @@ input:focus + .ids-toggle input:before {
4675
4675
  [class^=ids-icon-].ids-icon--light, [class^=ids-icon-].ids-icon--color-preset-4 {
4676
4676
  color: var(--IDS-ICON__COLOR-PRESET-4);
4677
4677
  }
4678
+ [class^=ids-icon-].ids-icon--text-align {
4679
+ position: relative;
4680
+ bottom: -0.3125rem;
4681
+ flex-shrink: 0;
4682
+ }
4683
+ [class^=ids-icon-].ids-icon--text-align:before {
4684
+ top: 50%;
4685
+ left: 50%;
4686
+ transform: translate(-50%, -50%);
4687
+ }
4678
4688
  [class^=ids-icon-].ids-icon--text-start {
4679
4689
  margin-right: 0.5rem;
4680
4690
  position: relative;
4681
4691
  bottom: -0.125rem;
4692
+ flex-shrink: 0;
4682
4693
  }
4683
4694
  [class^=ids-icon-].ids-icon--text-start:before {
4684
4695
  top: 50%;
@@ -4689,6 +4700,7 @@ input:focus + .ids-toggle input:before {
4689
4700
  margin-left: 0.5rem;
4690
4701
  position: relative;
4691
4702
  bottom: -0.125rem;
4703
+ flex-shrink: 0;
4692
4704
  }
4693
4705
  [class^=ids-icon-].ids-icon--text-end:before {
4694
4706
  top: 50%;