@public-ui/themes 1.7.0-rc.13 → 1.7.0-rc.14

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.
package/dist/index.mjs CHANGED
@@ -353,8 +353,8 @@ var TagEnum = /* @__PURE__ */ ((TagEnum2) => {
353
353
  TagEnum2[TagEnum2["input-checkbox"] = 17] = "input-checkbox";
354
354
  TagEnum2[TagEnum2["input-color"] = 18] = "input-color";
355
355
  TagEnum2[TagEnum2["input-date"] = 19] = "input-date";
356
- TagEnum2[TagEnum2["input-file"] = 20] = "input-file";
357
- TagEnum2[TagEnum2["input-email"] = 21] = "input-email";
356
+ TagEnum2[TagEnum2["input-email"] = 20] = "input-email";
357
+ TagEnum2[TagEnum2["input-file"] = 21] = "input-file";
358
358
  TagEnum2[TagEnum2["input-number"] = 22] = "input-number";
359
359
  TagEnum2[TagEnum2["input-password"] = 23] = "input-password";
360
360
  TagEnum2[TagEnum2["input-radio"] = 24] = "input-radio";
@@ -372,13 +372,15 @@ var TagEnum = /* @__PURE__ */ ((TagEnum2) => {
372
372
  TagEnum2[TagEnum2["separator"] = 36] = "separator";
373
373
  TagEnum2[TagEnum2["skip-nav"] = 37] = "skip-nav";
374
374
  TagEnum2[TagEnum2["spin"] = 38] = "spin";
375
- TagEnum2[TagEnum2["symbol"] = 39] = "symbol";
376
- TagEnum2[TagEnum2["table"] = 40] = "table";
377
- TagEnum2[TagEnum2["tabs"] = 41] = "tabs";
378
- TagEnum2[TagEnum2["textarea"] = 42] = "textarea";
379
- TagEnum2[TagEnum2["toast"] = 43] = "toast";
380
- TagEnum2[TagEnum2["toolbar"] = 44] = "toolbar";
381
- TagEnum2[TagEnum2["tooltip"] = 45] = "tooltip";
375
+ TagEnum2[TagEnum2["split-button"] = 39] = "split-button";
376
+ TagEnum2[TagEnum2["symbol"] = 40] = "symbol";
377
+ TagEnum2[TagEnum2["table"] = 41] = "table";
378
+ TagEnum2[TagEnum2["tabs"] = 42] = "tabs";
379
+ TagEnum2[TagEnum2["textarea"] = 43] = "textarea";
380
+ TagEnum2[TagEnum2["toast"] = 44] = "toast";
381
+ TagEnum2[TagEnum2["toast-container"] = 45] = "toast-container";
382
+ TagEnum2[TagEnum2["toolbar"] = 46] = "toolbar";
383
+ TagEnum2[TagEnum2["tooltip"] = 47] = "tooltip";
382
384
  return TagEnum2;
383
385
  })(TagEnum || {});
384
386
 
@@ -9848,9 +9850,7 @@ const BMF = KoliBri.createTheme("bmf", {
9848
9850
  :host > span {
9849
9851
  border-radius: 0.3125rem;
9850
9852
  display: inline-flex;
9851
- font-size: 1em;
9852
9853
  font-style: normal;
9853
- line-height: 1.25rem;
9854
9854
  }
9855
9855
  :host > span.smart-button {
9856
9856
  align-items: center;
@@ -10265,7 +10265,7 @@ const BMF = KoliBri.createTheme("bmf", {
10265
10265
  :host > div.open > kol-heading-wc button kol-icon::part(icon)::before {
10266
10266
  content: "\\f078";
10267
10267
  }
10268
- :host > div.close > kol-heading-wc button kol-icon::part(icon)::before {
10268
+ :host > div:not(.open) > kol-heading-wc button kol-icon::part(icon)::before {
10269
10269
  content: "\\f054";
10270
10270
  }
10271
10271
  :host > div {
@@ -10542,13 +10542,14 @@ const BMF = KoliBri.createTheme("bmf", {
10542
10542
  justify-items: left;
10543
10543
  width: 100%;
10544
10544
  min-height: 44px;
10545
- gap: 0.4em;
10546
10545
  }
10547
10546
  :host kol-input.default {
10548
10547
  grid-template-columns: 1.5rem auto;
10548
+ gap: 0.4em;
10549
10549
  }
10550
10550
  :host kol-input.switch {
10551
10551
  grid-template-columns: 3.5rem auto;
10552
+ gap: 0.4em;
10552
10553
  }
10553
10554
  :host kol-input > div.input {
10554
10555
  display: inherit;
@@ -10730,15 +10731,9 @@ const BMF = KoliBri.createTheme("bmf", {
10730
10731
  :host .disabled {
10731
10732
  opacity: 0.33;
10732
10733
  }
10734
+
10733
10735
  :host kol-input.button {
10734
- cursor: inherit;
10735
- display: grid;
10736
- column-gap: 0;
10737
- grid-template-columns: 32px auto;
10738
- grid-template-areas:
10739
- "error error"
10740
- "input label"
10741
- "hint hint";
10736
+ row-gap: 0.5rem;
10742
10737
  }
10743
10738
 
10744
10739
  :host kol-input.button.checked > .input,
@@ -10746,12 +10741,7 @@ const BMF = KoliBri.createTheme("bmf", {
10746
10741
  background-color: var(--color-ice);
10747
10742
  }
10748
10743
 
10749
- :host kol-input.button > .error {
10750
- grid-area: error;
10751
- }
10752
-
10753
10744
  :host kol-input.button > label {
10754
- grid-area: label;
10755
10745
  background-color: var(--color-silver);
10756
10746
  border-top-right-radius: var(--border-radius);
10757
10747
  border-bottom-right-radius: var(--border-radius);
@@ -10763,7 +10753,6 @@ const BMF = KoliBri.createTheme("bmf", {
10763
10753
  }
10764
10754
 
10765
10755
  :host kol-input.button > .input {
10766
- grid-area: input;
10767
10756
  background-color: var(--color-silver);
10768
10757
  border-top-left-radius: var(--border-radius);
10769
10758
  border-bottom-left-radius: var(--border-radius);
@@ -10772,13 +10761,13 @@ const BMF = KoliBri.createTheme("bmf", {
10772
10761
  place-content: center;
10773
10762
  }
10774
10763
 
10775
- :host kol-input.button > .hint {
10776
- grid-area: hint;
10777
- }
10778
-
10779
10764
  :host kol-input.button > .input > div {
10780
10765
  display: flex;
10781
10766
  }
10767
+
10768
+ :host kol-input.button .icon {
10769
+ height: auto;
10770
+ }
10782
10771
  `,
10783
10772
  "KOL-INPUT-RADIO": `/* INPUT */
10784
10773
  kol-input {
@@ -10914,26 +10903,13 @@ const BMF = KoliBri.createTheme("bmf", {
10914
10903
  fieldset div label {
10915
10904
  padding-left: 0;
10916
10905
  }`,
10917
- "KOL-TOAST": `:host > div {
10918
- position: fixed;
10919
- top: 0;
10920
- right: 0;
10921
- width: 100%;
10922
- height: 0;
10923
- z-index: 200;
10924
- }
10925
- :host > div > kol-alert {
10926
- display: block;
10927
- margin-left: auto;
10928
- margin-right: unset;
10929
- padding: 2rem;
10930
- max-width: 440px;
10931
- }
10932
- :host > div > kol-button-wc {
10933
- top: 0;
10934
- position: relative;
10935
- display: block;
10936
- width: 1em;
10906
+ "KOL-TOAST-CONTAINER": `:host {
10907
+ top: 1rem;
10908
+ right: 1rem;
10909
+ width: 440px;
10910
+ }`,
10911
+ "KOL-TOAST": `.toast {
10912
+ margin-top: 1rem;
10937
10913
  }`,
10938
10914
  "KOL-TABS": `button:disabled {
10939
10915
  opacity: 0.5;
@@ -18498,6 +18474,9 @@ const BMF = KoliBri.createTheme("bmf", {
18498
18474
  border-color: var(--color-ocean);
18499
18475
  color: var(--color-white);
18500
18476
  cursor: pointer;
18477
+ }`,
18478
+ "KOL-SPLIT-BUTTON": `.popover {
18479
+ background: #fff;
18501
18480
  }`
18502
18481
  });
18503
18482
 
@@ -19507,12 +19486,12 @@ const DEFAULT = KoliBri.createTheme("default", {
19507
19486
  "KOL-BADGE": css`
19508
19487
  :host {
19509
19488
  display: inline-block;
19489
+ font-size: inherit;
19510
19490
  }
19511
19491
  :host > span {
19512
19492
  border-radius: var(--border-radius);
19513
19493
  display: inline-flex;
19514
19494
  font-style: normal;
19515
- line-height: 1.25rem;
19516
19495
  }
19517
19496
  :host > span.smart-button {
19518
19497
  align-items: center;
@@ -20142,6 +20121,9 @@ const DEFAULT = KoliBri.createTheme("default", {
20142
20121
  :host kol-input.switch {
20143
20122
  grid-template-columns: 3.5rem auto;
20144
20123
  }
20124
+ :host kol-input.button {
20125
+ gap: 0.4rem 0;
20126
+ }
20145
20127
  :host kol-input > div.input {
20146
20128
  display: inherit;
20147
20129
  min-height: var(--a11y-min-size);
@@ -20439,27 +20421,16 @@ const DEFAULT = KoliBri.createTheme("default", {
20439
20421
  padding-left: 0;
20440
20422
  }
20441
20423
  `,
20442
- "KOL-TOAST": css`
20443
- :host > div {
20444
- position: fixed;
20445
- top: 0;
20446
- right: 0;
20447
- width: 100%;
20448
- height: 0;
20449
- z-index: 200;
20450
- }
20451
- :host > div > kol-alert {
20452
- display: block;
20453
- margin-left: auto;
20454
- margin-right: unset;
20455
- padding: 2rem;
20456
- max-width: 750px;
20424
+ "KOL-TOAST-CONTAINER": css`
20425
+ :host {
20426
+ top: 1rem;
20427
+ right: 1rem;
20428
+ width: 440px;
20457
20429
  }
20458
- :host > div > kol-button-wc {
20459
- top: 0;
20460
- position: relative;
20461
- display: block;
20462
- width: 1rem;
20430
+ `,
20431
+ "KOL-TOAST": css`
20432
+ .toast {
20433
+ margin-top: 1rem;
20463
20434
  }
20464
20435
  `,
20465
20436
  "KOL-TABS": css`
@@ -20920,7 +20891,10 @@ const DEFAULT = KoliBri.createTheme("default", {
20920
20891
  color: var(--color-light);
20921
20892
  cursor: pointer;
20922
20893
  }
20923
- `
20894
+ `,
20895
+ "KOL-SPLIT-BUTTON": `.popover {
20896
+ background: #fff;
20897
+ }`
20924
20898
  });
20925
20899
 
20926
20900
  const ECL_EC = KoliBri.createTheme("ecl-ec", {
@@ -21078,7 +21052,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21078
21052
  outline: 2px solid var(--color-blue);
21079
21053
  outline-offset: -2px;
21080
21054
  }
21081
- div[part="content"] {
21055
+ .content {
21082
21056
  padding: var(--spacing-s) var(--spacing-m);
21083
21057
  }`,
21084
21058
  "KOL-INDENTED-TEXT": `:host > div {
@@ -21277,7 +21251,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21277
21251
  color: var(--color-blue-130);
21278
21252
  }`,
21279
21253
  "KOL-BADGE": `:host > span {
21280
- font: normal normal var(--font-weight) 0.875rem/1em var(--font-family);
21254
+ font: normal normal var(--font-weight) 1em var(--font-family);
21281
21255
  padding: calc(0.5rem - 1px) calc(0.75rem - 1px);
21282
21256
  text-transform: uppercase;
21283
21257
  }`,
@@ -21559,6 +21533,13 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21559
21533
  kol-input {
21560
21534
  gap: var(--spacing-xs);
21561
21535
  }
21536
+ .button {
21537
+ gap: var(--spacing-xs) 0;
21538
+ grid-template-areas:
21539
+ "input label"
21540
+ "hint hint"
21541
+ "error error";
21542
+ }
21562
21543
  kol-input > .input {
21563
21544
  order: 2;
21564
21545
  }
@@ -21583,7 +21564,6 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21583
21564
  select,
21584
21565
  textarea {
21585
21566
  border: none;
21586
- margin: 1px;
21587
21567
  outline: none;
21588
21568
  }
21589
21569
  input,
@@ -21611,6 +21591,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21611
21591
  color: var(--color-grey);
21612
21592
  order: 4;
21613
21593
  align-items: center;
21594
+ padding: 1px;
21614
21595
  }
21615
21596
  input::placeholder,
21616
21597
  textarea::placeholder {
@@ -21663,6 +21644,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21663
21644
  "KOL-INPUT-RADIO": `fieldset {
21664
21645
  border: 0;
21665
21646
  gap: 0.5rem;
21647
+ flex-wrap: wrap;
21666
21648
  }
21667
21649
  .input-slot {
21668
21650
  gap: 0.25rem;
@@ -21679,6 +21661,13 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21679
21661
  fieldset kol-input {
21680
21662
  order: 4;
21681
21663
  }
21664
+ .radio-input-wrapper {
21665
+ display: flex;
21666
+ align-items: center;
21667
+ }
21668
+ .radio-label {
21669
+ padding-left: 0.5rem;
21670
+ }
21682
21671
  input[type="radio"] {
21683
21672
  border: 2px solid var(--color-grey-75);
21684
21673
  }
@@ -21721,6 +21710,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21721
21710
  font-size: 0.875em;
21722
21711
  margin-left: calc(-1 * var(--spacing-xs));
21723
21712
  order: 1;
21713
+ width: 100%;
21724
21714
  }
21725
21715
  .hint {
21726
21716
  font-size: 0.875rem;
@@ -21812,6 +21802,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21812
21802
  color: var(--color-grey);
21813
21803
  order: 4;
21814
21804
  align-items: center;
21805
+ padding: 1px;
21815
21806
  }
21816
21807
  input::placeholder,
21817
21808
  textarea::placeholder {
@@ -21836,7 +21827,6 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21836
21827
  select,
21837
21828
  textarea {
21838
21829
  border: none;
21839
- margin: 1px 0.5em;
21840
21830
  outline: none;
21841
21831
  }
21842
21832
  input,
@@ -21864,6 +21854,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21864
21854
  color: var(--color-grey);
21865
21855
  order: 4;
21866
21856
  align-items: center;
21857
+ padding: 1px 0.5em;
21867
21858
  }
21868
21859
  input::placeholder,
21869
21860
  textarea::placeholder {
@@ -21888,7 +21879,6 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21888
21879
  select,
21889
21880
  textarea {
21890
21881
  border: none;
21891
- margin: 1px 0.5em;
21892
21882
  outline: none;
21893
21883
  }
21894
21884
  input,
@@ -21916,6 +21906,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21916
21906
  color: var(--color-grey);
21917
21907
  order: 4;
21918
21908
  align-items: center;
21909
+ padding: 1px 0.5em;
21919
21910
  }
21920
21911
  input::placeholder,
21921
21912
  textarea::placeholder {
@@ -21940,7 +21931,6 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21940
21931
  select,
21941
21932
  textarea {
21942
21933
  border: none;
21943
- margin: 1px 0.5em;
21944
21934
  outline: none;
21945
21935
  }
21946
21936
  input,
@@ -21968,6 +21958,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21968
21958
  color: var(--color-grey);
21969
21959
  order: 4;
21970
21960
  align-items: center;
21961
+ padding: 1px 0.5em;
21971
21962
  }
21972
21963
  input::placeholder,
21973
21964
  textarea::placeholder {
@@ -21992,7 +21983,6 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21992
21983
  select,
21993
21984
  textarea {
21994
21985
  border: none;
21995
- margin: 1px 0.5em;
21996
21986
  outline: none;
21997
21987
  }
21998
21988
  input,
@@ -22020,6 +22010,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
22020
22010
  color: var(--color-grey);
22021
22011
  order: 4;
22022
22012
  align-items: center;
22013
+ padding: 1px 0.5em;
22023
22014
  }
22024
22015
  input::placeholder,
22025
22016
  textarea::placeholder {
@@ -22096,7 +22087,6 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
22096
22087
  select,
22097
22088
  textarea {
22098
22089
  border: none;
22099
- margin: 1px 0.5em;
22100
22090
  outline: none;
22101
22091
  }
22102
22092
  input,
@@ -22124,6 +22114,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
22124
22114
  color: var(--color-grey);
22125
22115
  order: 4;
22126
22116
  align-items: center;
22117
+ padding: 1px 0.5em;
22127
22118
  }
22128
22119
  input::placeholder,
22129
22120
  textarea::placeholder {
@@ -22148,7 +22139,6 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
22148
22139
  select,
22149
22140
  textarea {
22150
22141
  border: none;
22151
- margin: 1px 0.5em;
22152
22142
  outline: none;
22153
22143
  }
22154
22144
  input,
@@ -22176,6 +22166,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
22176
22166
  color: var(--color-grey);
22177
22167
  order: 4;
22178
22168
  align-items: center;
22169
+ padding: 1px 0.5em;
22179
22170
  }
22180
22171
  .counter {
22181
22172
  order: 5;
@@ -22360,6 +22351,24 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
22360
22351
  border-color: var(--color-blue);
22361
22352
  color: var(--color-white);
22362
22353
  cursor: pointer;
22354
+ }`,
22355
+ "KOL-SPLIT-BUTTON": `.popover {
22356
+ background: #fff;
22357
+ }`,
22358
+ "KOL-TOAST-CONTAINER": `:host {
22359
+ top: 1rem;
22360
+ right: 1rem;
22361
+ width: 440px;
22362
+ }`,
22363
+ "KOL-TOAST": `:host {
22364
+ display: block;
22365
+ }
22366
+ .toast {
22367
+ background: #fff;
22368
+ margin-top: 1rem;
22369
+ }
22370
+ .alert {
22371
+ display: block;
22363
22372
  }`
22364
22373
  });
22365
22374
 
@@ -22409,6 +22418,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
22409
22418
  --color-grey-110: #222732;
22410
22419
  --color-grey-100: #262b38;
22411
22420
  --color-grey-80: #515560;
22421
+ --color-grey-75: #515560;
22412
22422
  --color-grey-60: #7d8088;
22413
22423
  --color-grey-40: #a8aaaf;
22414
22424
  --color-grey-20: #d4d5d7;
@@ -22622,7 +22632,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
22622
22632
  .open .headline button kol-icon::part(icon)::before {
22623
22633
  content: "\\f077";
22624
22634
  }
22625
- .close .headline button kol-icon::part(icon)::before {
22635
+ :not(.open) .headline button kol-icon::part(icon)::before {
22626
22636
  content: "\\f078";
22627
22637
  }
22628
22638
  .content,
@@ -23125,6 +23135,13 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23125
23135
  kol-input {
23126
23136
  gap: var(--spacing-xs);
23127
23137
  }
23138
+ .button {
23139
+ gap: var(--spacing-xs) 0;
23140
+ grid-template-areas:
23141
+ "input label"
23142
+ "hint hint"
23143
+ "error error";
23144
+ }
23128
23145
  kol-input > .input {
23129
23146
  order: 2;
23130
23147
  }
@@ -23149,7 +23166,6 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23149
23166
  select,
23150
23167
  textarea {
23151
23168
  border: none;
23152
- margin: 1px;
23153
23169
  outline: none;
23154
23170
  }
23155
23171
  input,
@@ -23177,6 +23193,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23177
23193
  color: var(--color-grey);
23178
23194
  order: 4;
23179
23195
  align-items: center;
23196
+ padding: 1px;
23180
23197
  }
23181
23198
  input::placeholder,
23182
23199
  textarea::placeholder {
@@ -23253,7 +23270,6 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23253
23270
  select,
23254
23271
  textarea {
23255
23272
  border: none;
23256
- margin: 1px 0.5em;
23257
23273
  outline: none;
23258
23274
  }
23259
23275
  input,
@@ -23281,6 +23297,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23281
23297
  color: var(--color-grey);
23282
23298
  order: 4;
23283
23299
  align-items: center;
23300
+ padding: 1px 0.5em;
23284
23301
  }
23285
23302
  input::placeholder,
23286
23303
  textarea::placeholder {
@@ -23305,7 +23322,6 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23305
23322
  select,
23306
23323
  textarea {
23307
23324
  border: none;
23308
- margin: 1px 0.5em;
23309
23325
  outline: none;
23310
23326
  }
23311
23327
  input,
@@ -23333,6 +23349,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23333
23349
  color: var(--color-grey);
23334
23350
  order: 4;
23335
23351
  align-items: center;
23352
+ padding: 1px 0.5em;
23336
23353
  }
23337
23354
  input::placeholder,
23338
23355
  textarea::placeholder {
@@ -23357,7 +23374,6 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23357
23374
  select,
23358
23375
  textarea {
23359
23376
  border: none;
23360
- margin: 1px 0.5em;
23361
23377
  outline: none;
23362
23378
  }
23363
23379
  input,
@@ -23385,6 +23401,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23385
23401
  color: var(--color-grey);
23386
23402
  order: 4;
23387
23403
  align-items: center;
23404
+ padding: 1px 0.5em;
23388
23405
  }
23389
23406
  input::placeholder,
23390
23407
  textarea::placeholder {
@@ -23409,7 +23426,6 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23409
23426
  select,
23410
23427
  textarea {
23411
23428
  border: none;
23412
- margin: 1px;
23413
23429
  outline: none;
23414
23430
  }
23415
23431
  input,
@@ -23437,6 +23453,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23437
23453
  color: var(--color-grey);
23438
23454
  order: 4;
23439
23455
  align-items: center;
23456
+ padding: 1px;
23440
23457
  }
23441
23458
  input::placeholder,
23442
23459
  textarea::placeholder {
@@ -23461,7 +23478,6 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23461
23478
  select,
23462
23479
  textarea {
23463
23480
  border: none;
23464
- margin: 1px;
23465
23481
  outline: none;
23466
23482
  }
23467
23483
  input,
@@ -23489,6 +23505,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23489
23505
  color: var(--color-grey);
23490
23506
  order: 4;
23491
23507
  align-items: center;
23508
+ padding: 1px;
23492
23509
  }
23493
23510
  input::placeholder,
23494
23511
  textarea::placeholder {
@@ -23513,7 +23530,6 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23513
23530
  select,
23514
23531
  textarea {
23515
23532
  border: none;
23516
- margin: 1px 0.5em;
23517
23533
  outline: none;
23518
23534
  }
23519
23535
  input,
@@ -23541,6 +23557,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23541
23557
  color: var(--color-grey);
23542
23558
  order: 4;
23543
23559
  align-items: center;
23560
+ padding: 1px 0.5em;
23544
23561
  }
23545
23562
  input::placeholder,
23546
23563
  textarea::placeholder {
@@ -23565,7 +23582,6 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23565
23582
  select,
23566
23583
  textarea {
23567
23584
  border: none;
23568
- margin: 1px 0.5em;
23569
23585
  outline: none;
23570
23586
  }
23571
23587
  input,
@@ -23593,6 +23609,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23593
23609
  color: var(--color-grey);
23594
23610
  order: 4;
23595
23611
  align-items: center;
23612
+ padding: 1px 0.5em;
23596
23613
  }
23597
23614
  kol-input .counter {
23598
23615
  order: 5;
@@ -23766,9 +23783,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23766
23783
  "KOL-INPUT-RADIO": `fieldset {
23767
23784
  border: 0;
23768
23785
  gap: 0.5rem;
23769
- }
23770
- .input-slot {
23771
- gap: 0.25rem;
23786
+ flex-wrap: wrap;
23772
23787
  }
23773
23788
  fieldset kol-alert {
23774
23789
  order: 1;
@@ -23782,8 +23797,16 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23782
23797
  fieldset kol-input {
23783
23798
  order: 4;
23784
23799
  }
23800
+ .radio-input-wrapper {
23801
+ display: flex;
23802
+ align-items: center;
23803
+ }
23804
+ .radio-label {
23805
+ padding-left: 0.5rem;
23806
+ }
23785
23807
  input[type="radio"] {
23786
- border: 2px solid var(--color-grey-75);
23808
+ outline: 2px solid var(--color-grey-75);
23809
+ outline-offset: 2px;
23787
23810
  }
23788
23811
  input[type="radio"]:before {
23789
23812
  display: none;
@@ -23793,8 +23816,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23793
23816
  border-width: 7px;
23794
23817
  }
23795
23818
  input[type="radio"]:focus {
23796
- outline: 2px solid var(--color-blue);
23797
- outline-offset: 2px;
23819
+ outline-color: var(--color-blue);
23798
23820
  }
23799
23821
  input[type="radio"]:not(:disabled):hover {
23800
23822
  border-color: var(--color-blue);
@@ -23824,11 +23846,15 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23824
23846
  font-size: 0.875em;
23825
23847
  margin-left: calc(-1 * var(--spacing-xs));
23826
23848
  order: 1;
23849
+ width: 100%;
23827
23850
  }
23828
23851
  .hint {
23829
23852
  font-size: 0.875rem;
23830
23853
  order: 4;
23831
23854
  }`,
23855
+ "KOL-INPUT-RANGE": `.inputs-wrapper {
23856
+ gap: 1rem;
23857
+ }`,
23832
23858
  "KOL-SKIP-NAV": `kol-link-wc > a > kol-span-wc {
23833
23859
  border-radius: 4px;
23834
23860
  gap: 0.5rem;
@@ -23837,6 +23863,24 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23837
23863
  background-color: #0e47cb;
23838
23864
  color: #fff;
23839
23865
  cursor: pointer;
23866
+ }`,
23867
+ "KOL-SPLIT-BUTTON": `.popover {
23868
+ background: #fff;
23869
+ }`,
23870
+ "KOL-TOAST-CONTAINER": `:host {
23871
+ top: 1rem;
23872
+ right: 1rem;
23873
+ width: 440px;
23874
+ }`,
23875
+ "KOL-TOAST": `:host {
23876
+ display: block;
23877
+ }
23878
+ .toast {
23879
+ background: #fff;
23880
+ margin-top: 1rem;
23881
+ }
23882
+ .alert {
23883
+ display: block;
23840
23884
  }`
23841
23885
  });
23842
23886
 
@@ -24570,6 +24614,9 @@ const ITZBund = KoliBri.createTheme("itzbund", {
24570
24614
  :host .default {
24571
24615
  border-color: var(--color-anthrazit);
24572
24616
  }
24617
+ .heading {
24618
+ gap: 0.5rem;
24619
+ }
24573
24620
  .default .heading-icon {
24574
24621
  background-color: var(--color-anthrazit);
24575
24622
  }
@@ -24643,7 +24690,6 @@ const ITZBund = KoliBri.createTheme("itzbund", {
24643
24690
  :host > span {
24644
24691
  border-radius: 0.3125rem;
24645
24692
  display: inline-flex;
24646
- line-height: 1.25rem;
24647
24693
  }
24648
24694
  :host > span kol-button-wc {
24649
24695
  border-left: 1px solid rgba(0, 0, 0, 0.25);
@@ -24956,6 +25002,9 @@ const ITZBund = KoliBri.createTheme("itzbund", {
24956
25002
  font-size: inherit;
24957
25003
  line-height: inherit;
24958
25004
  }
25005
+ .content {
25006
+ padding: 0.5rem;
25007
+ }
24959
25008
  :host > div > kol-heading-wc button kol-icon::part(close)::before {
24960
25009
  font-family: "Font Awesome 6 Free";
24961
25010
  content: "\\f077";
@@ -25165,9 +25214,16 @@ const ITZBund = KoliBri.createTheme("itzbund", {
25165
25214
  kol-input.default {
25166
25215
  grid-template-columns: calc(6 * 2 * var(--spacing)) auto;
25167
25216
  }
25168
- kol-input.switch {
25217
+ .switch {
25169
25218
  grid-template-columns: calc(13 * 2 * var(--spacing)) auto;
25170
25219
  }
25220
+ .button {
25221
+ gap: 0.5rem 0;
25222
+ grid-template-areas:
25223
+ "input label"
25224
+ "hint hint"
25225
+ "error error";
25226
+ }
25171
25227
  kol-input > div.input {
25172
25228
  display: inline-flex;
25173
25229
  order: 1;
@@ -25326,8 +25382,10 @@ const ITZBund = KoliBri.createTheme("itzbund", {
25326
25382
  border: 0px;
25327
25383
  margin: 0px;
25328
25384
  padding: 0px;
25329
- display: grid;
25330
- gap: 0.25em;
25385
+ flex-wrap: wrap;
25386
+ }
25387
+ fieldset.horizontal {
25388
+ gap: 1rem;
25331
25389
  }
25332
25390
  fieldset legend {
25333
25391
  display: block;
@@ -25368,28 +25426,22 @@ const ITZBund = KoliBri.createTheme("itzbund", {
25368
25426
  background-color: var(--color-input-bg-default);
25369
25427
  border-color: #999;
25370
25428
  cursor: not-allowed;
25371
- }`,
25372
- "KOL-TOAST": `:host > div {
25373
- position: fixed;
25374
- top: 0;
25375
- left: 0;
25376
- width: 100%;
25377
- height: 0;
25378
- z-index: 200;
25379
25429
  }
25380
- :host > div > kol-alert {
25381
- display: block;
25382
- margin: auto;
25383
- padding: 1rem;
25384
- max-width: 750px;
25385
- }
25386
- :host > div > kol-button-wc {
25387
- top: 0;
25388
- position: relative;
25389
- display: block;
25390
- margin: auto;
25391
- width: 1em;
25430
+ kol-alert {
25431
+ width: 100%:
25432
+ }`,
25433
+ "KOL-TOAST-CONTAINER": `:host {
25434
+ top: 1rem;
25435
+ width: 750px;
25436
+ left: 50%;
25437
+ transform: translateX(-50%);
25392
25438
  }`,
25439
+ "KOL-TOAST": `
25440
+ .toast {
25441
+ background: #fff;
25442
+ margin-top: 1rem;
25443
+ }
25444
+ `,
25393
25445
  "KOL-TABS": `:host > div {
25394
25446
  display: block;
25395
25447
  width: 100%;
@@ -25558,6 +25610,9 @@ const ITZBund = KoliBri.createTheme("itzbund", {
25558
25610
  border-color: var(--color-petrol);
25559
25611
  color: var(--color-weiss);
25560
25612
  cursor: pointer;
25613
+ }`,
25614
+ "KOL-SPLIT-BUTTON": `.popover {
25615
+ background: #fff;
25561
25616
  }`
25562
25617
  });
25563
25618
 
@@ -36026,6 +36081,9 @@ const MAPZ = KoliBri.createTheme("mapz", {
36026
36081
  kol-input.switch {
36027
36082
  grid-template-columns: calc(13 * var(--spacing)) auto;
36028
36083
  }
36084
+ .button {
36085
+ gap: 0.5rem 0;
36086
+ }
36029
36087
  kol-input > div.input {
36030
36088
  display: inline-flex;
36031
36089
  order: 1;
@@ -36577,6 +36635,9 @@ const MAPZ = KoliBri.createTheme("mapz", {
36577
36635
  font-weight: inherit;
36578
36636
  font-size: inherit;
36579
36637
  line-height: inherit;
36638
+ }
36639
+ .content {
36640
+ padding: 0.5rem;
36580
36641
  }`,
36581
36642
  "KOL-CARD": `:host > div {
36582
36643
  border-color: var(--kolibri-border-color);
@@ -36601,7 +36662,7 @@ const MAPZ = KoliBri.createTheme("mapz", {
36601
36662
  padding: 0.5rem;
36602
36663
  }
36603
36664
  :host div.content {
36604
- padding: 0;
36665
+ padding: 0.5rem;
36605
36666
  }
36606
36667
  :host div.content,
36607
36668
  :host div.content + div.footer {
@@ -36864,28 +36925,18 @@ const MAPZ = KoliBri.createTheme("mapz", {
36864
36925
  :host > div.tabs-align-right > div {
36865
36926
  border-radius: 0.25rem 0 0 0.25rem;
36866
36927
  }`,
36867
- "KOL-TOAST": `:host > div {
36868
- position: fixed;
36869
- top: 0;
36870
- left: 0;
36871
- width: 100%;
36872
- height: 0;
36873
- z-index: 200;
36874
- }
36875
- :host > div > kol-alert {
36876
- background-color: white;
36877
- border-radius: var(--kolibri-border-radius);
36878
- display: block;
36879
- margin: 1rem auto;
36880
- max-width: 750px;
36881
- }
36882
- :host > div > kol-button-wc {
36883
- top: 0;
36884
- position: relative;
36885
- display: block;
36886
- margin: auto;
36887
- width: 1em;
36928
+ "KOL-TOAST-CONTAINER": `:host {
36929
+ top: 1rem;
36930
+ width: 750px;
36931
+ left: 50%;
36932
+ transform: translateX(-50%);
36888
36933
  }`,
36934
+ "KOL-TOAST": `
36935
+ .toast {
36936
+ background: #fff;
36937
+ margin-top: 1rem;
36938
+ }
36939
+ `,
36889
36940
  "KOL-NAV": `:host > div {
36890
36941
  gap: var(--spacing);
36891
36942
  }
@@ -52735,6 +52786,9 @@ const MAPZ = KoliBri.createTheme("mapz", {
52735
52786
  border-color: var(--kolibri-border-color);
52736
52787
  color: white;
52737
52788
  cursor: pointer;
52789
+ }`,
52790
+ "KOL-SPLIT-BUTTON": `.popover {
52791
+ background: #fff;
52738
52792
  }`
52739
52793
  });
52740
52794
 
@@ -52837,7 +52891,6 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
52837
52891
  :host > span {
52838
52892
  border-radius: 0.3125rem;
52839
52893
  display: inline-flex;
52840
- line-height: 1.25rem;
52841
52894
  }
52842
52895
  :host > span kol-span-wc {
52843
52896
  padding: 0.25rem 0.5rem;
@@ -53066,13 +53119,13 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
53066
53119
  }
53067
53120
  th[data-sort="sort-NOS"] kol-button::part(icon)::before,
53068
53121
  th[data-sort="sort-undefined"] kol-button::part(icon)::before {
53069
- content: "\f0dc";
53122
+ content: "\\f0dc";
53070
53123
  }
53071
53124
  th[data-sort="sort-ASC"] kol-button::part(icon)::before {
53072
- content: "\f0de";
53125
+ content: "\\f0de";
53073
53126
  }
53074
53127
  th[data-sort="sort-DESC"] kol-button::part(icon)::before {
53075
- content: "\f0dd";
53128
+ content: "\\f0dd";
53076
53129
  }`,
53077
53130
  "KOL-ACCORDION": `:host > div {
53078
53131
  border-color: var(--border-color);
@@ -53112,7 +53165,7 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
53112
53165
  :host > div.open > kol-heading-wc button kol-icon::part(icon)::before {
53113
53166
  content: "\\f077";
53114
53167
  }
53115
- :host > div.close > kol-heading-wc button kol-icon::part(icon)::before {
53168
+ :host > div:not(.open) > kol-heading-wc button kol-icon::part(icon)::before {
53116
53169
  content: "\\f078";
53117
53170
  }`,
53118
53171
  "KOL-ALERT": `kol-alert-wc {
@@ -53182,7 +53235,7 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
53182
53235
  display: flex;
53183
53236
  gap: var(--spacing);
53184
53237
  flex-grow: 1;
53185
- align-items: flex-start;
53238
+ align-items: center;
53186
53239
  }
53187
53240
  .msg .heading > div {
53188
53241
  display: flex;
@@ -53262,8 +53315,11 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
53262
53315
  border-radius: var(--border-radius);
53263
53316
  border-style: solid;
53264
53317
  border-width: 1px;
53318
+ background: #fff;
53265
53319
  }
53266
- :host > div .header {
53320
+ :host > div .header,
53321
+ .content,
53322
+ .footer {
53267
53323
  padding: 1.5rem;
53268
53324
  }`,
53269
53325
  "KOL-BUTTON": `:host > kol-button-wc > button > kol-span-wc,
@@ -53490,27 +53546,18 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
53490
53546
  padding: 0.75rem 1rem;
53491
53547
  text-decoration: underline;
53492
53548
  }`,
53493
- "KOL-TOAST": `:host > div {
53494
- position: fixed;
53495
- top: 0;
53496
- left: 0;
53497
- width: 100%;
53498
- height: 0;
53499
- z-index: 200;
53500
- }
53501
- :host > div > kol-alert {
53502
- display: block;
53503
- margin: auto;
53504
- padding: 1rem;
53505
- max-width: 750px;
53506
- }
53507
- :host > div > kol-button-wc {
53508
- top: 0;
53509
- position: relative;
53510
- display: block;
53511
- margin: auto;
53512
- width: 1em;
53549
+ "KOL-TOAST-CONTAINER": `:host {
53550
+ top: 1rem;
53551
+ width: 750px;
53552
+ left: 50%;
53553
+ transform: translateX(-50%);
53513
53554
  }`,
53555
+ "KOL-TOAST": `
53556
+ .toast {
53557
+ background: #fff;
53558
+ margin-top: 1rem;
53559
+ }
53560
+ `,
53514
53561
  "KOL-PROGRESS": `svg line:first-child,
53515
53562
  svg circle:first-child {
53516
53563
  stroke: var(--color-neutral);
@@ -53557,6 +53604,13 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
53557
53604
  kol-input.switch {
53558
53605
  grid-template-columns: calc(13 * var(--spacing)) auto;
53559
53606
  }
53607
+ .button {
53608
+ grid-template-areas:
53609
+ "input label"
53610
+ "hint hint"
53611
+ "error error";
53612
+ gap: 0.5rem 0;
53613
+ }
53560
53614
  kol-input > div.input {
53561
53615
  display: inline-flex;
53562
53616
  order: 1;
@@ -53748,6 +53802,13 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
53748
53802
  fieldset kol-input {
53749
53803
  order: 2;
53750
53804
  }
53805
+ .radio-input-wrapper {
53806
+ display: flex;
53807
+ align-items: center;
53808
+ }
53809
+ .radio-label {
53810
+ padding-left: 0.5rem;
53811
+ }
53751
53812
  .disabled {
53752
53813
  opacity: 0.33;
53753
53814
  }
@@ -61363,6 +61424,9 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
61363
61424
  border-color: var(--color-blau-dark);
61364
61425
  color: white;
61365
61426
  cursor: pointer;
61427
+ }`,
61428
+ "KOL-SPLIT-BUTTON": `.popover {
61429
+ background: #fff;
61366
61430
  }`
61367
61431
  });
61368
61432