@public-ui/themes 1.7.12 → 1.7.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.
Files changed (3) hide show
  1. package/dist/index.cjs +10 -7
  2. package/dist/index.mjs +10 -7
  3. package/package.json +5 -5
package/dist/index.cjs CHANGED
@@ -1955,7 +1955,7 @@ const BMF = KoliBri.createTheme("bmf", {
1955
1955
  overflow-x: auto;
1956
1956
  overflow-y: hidden;
1957
1957
  }
1958
- .table:has(caption:focus) {
1958
+ .table:has(.focus-element:focus) {
1959
1959
  outline-color: var(--color-ocean);
1960
1960
  outline-style: solid;
1961
1961
  outline-width: 3px;
@@ -2588,7 +2588,10 @@ const BMF = KoliBri.createTheme("bmf", {
2588
2588
  /* border-bottom: 0.025rem solid var(--color-midnight); */
2589
2589
  color: var(--color-midnight);
2590
2590
  }
2591
- button kol-span-wc > span {
2591
+ button:not(.selected) kol-span-wc > span {
2592
+ padding-bottom: 0.25em;
2593
+ }
2594
+ button.selected kol-span-wc > span {
2592
2595
  border-bottom: 0.25em solid;
2593
2596
  }
2594
2597
  button kol-span-wc > span {
@@ -10231,10 +10234,10 @@ const spinCss = css_248z$1H;
10231
10234
  var css_248z$1G = ".popover {\n background: #fff;\n}";
10232
10235
  const splitButtonCss = css_248z$1G;
10233
10236
 
10234
- var css_248z$1F = ":host * {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n}\n\n:host > div {\n overflow-x: auto;\n overflow-y: hidden;\n}\n\ncaption {\n padding: 0.5rem;\n}\n\nth {\n font-weight: normal;\n color: var(--color-primary);\n}\n\n:host table thead tr:first-child th,\n:host table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n}\n\n.table {\n padding: 0.5rem;\n}\n\n.table:has(caption:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n}\n\ntable {\n width: 100%;\n border-spacing: 0;\n}\n\ntable,\n:host table thead tr:last-child th,\n:host table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n}\n\nth {\n background-color: var(--color-light);\n}\n\nth div {\n width: 100%;\n display: flex;\n gap: 0.5rem;\n grid-template-columns: 1fr auto;\n align-items: center;\n}\n\ntr:nth-child(even) {\n background-color: var(--color-mute);\n}\n\nth,\ntd {\n padding: 0.5rem;\n}\n\nth[aria-sort=ascending],\nth[aria-sort=descending] {\n font-weight: 700;\n}\n\n@media (min-width: 1024px) {\n div.pagination kol-pagination {\n display: flex;\n align-items: center;\n }\n}";
10237
+ var css_248z$1F = ":host * {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n}\n\n:host > div {\n overflow-x: auto;\n overflow-y: hidden;\n}\n\ncaption {\n padding: 0.5rem;\n}\n\nth {\n font-weight: normal;\n color: var(--color-primary);\n}\n\n:host table thead tr:first-child th,\n:host table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n}\n\n.table {\n padding: 0.5rem;\n}\n\n.table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n}\n\ntable {\n width: 100%;\n border-spacing: 0;\n}\n\ntable,\n:host table thead tr:last-child th,\n:host table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n}\n\nth {\n background-color: var(--color-light);\n}\n\nth div {\n width: 100%;\n display: flex;\n gap: 0.5rem;\n grid-template-columns: 1fr auto;\n align-items: center;\n}\n\ntr:nth-child(even) {\n background-color: var(--color-mute);\n}\n\nth,\ntd {\n padding: 0.5rem;\n}\n\nth[aria-sort=ascending],\nth[aria-sort=descending] {\n font-weight: 700;\n}\n\n@media (min-width: 1024px) {\n div.pagination kol-pagination {\n display: flex;\n align-items: center;\n }\n}";
10235
10238
  const tableCss = css_248z$1F;
10236
10239
 
10237
- var css_248z$1E = "button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n:host kol-button-group-wc {\n display: inline-flex;\n gap: 2rem;\n flex-wrap: wrap;\n}\n\nbutton {\n box-sizing: border-box;\n background-color: transparent;\n border: 0;\n border-radius: var(--border-radius);\n font-style: normal;\n font-weight: 700;\n font-size: 18px;\n line-height: 22px;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n color: var(--color-subtle);\n padding: 0;\n}\n\nbutton:hover {\n color: var(--color-primary);\n}\n\nbutton.primary,\nbutton.selected {\n color: var(--color-primary);\n}\n\nbutton kol-span-wc > span {\n border-bottom: 0.25em solid;\n}\n\nbutton kol-span-wc > span {\n gap: 0.5rem;\n}\n\n:host > div > div {\n padding: 0.25em 0;\n}\n\ndiv[role=tabpanel] {\n height: 100%;\n}\n\ndiv.grid {\n height: 100%;\n}\n\n:host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n}\n\n:host > .tabs-align-right kol-button-group-wc {\n display: grid;\n order: 2;\n}\n\n:host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n}\n\n:host > .tabs-align-left kol-button-group-wc {\n display: grid;\n order: 0;\n}\n\n:host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n}\n\n:host > .tabs-align-bottom kol-button-group-wc {\n order: 2;\n}\n\n:host > .tabs-align-bottom kol-button-group-wc > div {\n display: flex;\n}\n\n:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n margin: 0px 1rem 0px 0px;\n}\n\n:host > .tabs-align-bottom > kol-button-group-wc > div > div {\n margin: 0px 1rem;\n}\n\n:host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n}\n\n:host > .tabs-align-top kol-button-group-wc {\n order: 0;\n}\n\n:host > .tabs-align-top kol-button-group-wc > div {\n display: flex;\n}\n\n:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n margin: 0px 1rem 0px 0px;\n}\n\n:host > .tabs-align-top > kol-button-group-wc > div > div {\n margin: 0px 1rem;\n}\n\n:host > div {\n display: grid;\n}\n\n:host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n}\n\n:host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n}\n\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-top kol-button-group-wc {\n order: 0;\n}\n\n:host > .tabs-align-bottom kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n order: 1;\n}\n\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n gap: inherit;\n}\n\n:host > div.tabs-align-left kol-button-group-wc > div,\n:host > div.tabs-align-left kol-button-group-wc > div > div,\n:host > div.tabs-align-right kol-button-group-wc > div,\n:host > div.tabs-align-right kol-button-group-wc > div > div {\n display: grid;\n}\n\n:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n width: 100%;\n}\n\n:host > div.tabs-align-bottom kol-button-group-wc div,\n:host > div.tabs-align-top kol-button-group-wc div {\n display: flex;\n flex-wrap: wrap;\n}\n\n:host kol-button-group-wc button {\n border: none;\n}";
10240
+ var css_248z$1E = "button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n:host kol-button-group-wc {\n display: inline-flex;\n gap: 2rem;\n flex-wrap: wrap;\n}\n\nbutton {\n box-sizing: border-box;\n background-color: transparent;\n border: 0;\n border-radius: var(--border-radius);\n font-style: normal;\n font-weight: 700;\n font-size: 18px;\n line-height: 22px;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n color: var(--color-subtle);\n padding: 0;\n}\n\nbutton:hover {\n color: var(--color-primary);\n}\n\nbutton.primary,\nbutton.selected {\n color: var(--color-primary);\n}\n\nbutton:not(.selected) kol-span-wc > span {\n padding-bottom: 0.25em;\n}\n\nbutton.selected kol-span-wc > span {\n border-bottom: 0.25em solid;\n}\n\nbutton kol-span-wc > span {\n gap: 0.5rem;\n}\n\n:host > div > div {\n padding: 0.25em 0;\n}\n\ndiv[role=tabpanel] {\n height: 100%;\n}\n\ndiv.grid {\n height: 100%;\n}\n\n:host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n}\n\n:host > .tabs-align-right kol-button-group-wc {\n display: grid;\n order: 2;\n}\n\n:host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n}\n\n:host > .tabs-align-left kol-button-group-wc {\n display: grid;\n order: 0;\n}\n\n:host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n}\n\n:host > .tabs-align-bottom kol-button-group-wc {\n order: 2;\n}\n\n:host > .tabs-align-bottom kol-button-group-wc > div {\n display: flex;\n}\n\n:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n margin: 0px 1rem 0px 0px;\n}\n\n:host > .tabs-align-bottom > kol-button-group-wc > div > div {\n margin: 0px 1rem;\n}\n\n:host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n}\n\n:host > .tabs-align-top kol-button-group-wc {\n order: 0;\n}\n\n:host > .tabs-align-top kol-button-group-wc > div {\n display: flex;\n}\n\n:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n margin: 0px 1rem 0px 0px;\n}\n\n:host > .tabs-align-top > kol-button-group-wc > div > div {\n margin: 0px 1rem;\n}\n\n:host > div {\n display: grid;\n}\n\n:host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n}\n\n:host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n}\n\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-top kol-button-group-wc {\n order: 0;\n}\n\n:host > .tabs-align-bottom kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n order: 1;\n}\n\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n gap: inherit;\n}\n\n:host > div.tabs-align-left kol-button-group-wc > div,\n:host > div.tabs-align-left kol-button-group-wc > div > div,\n:host > div.tabs-align-right kol-button-group-wc > div,\n:host > div.tabs-align-right kol-button-group-wc > div > div {\n display: grid;\n}\n\n:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n width: 100%;\n}\n\n:host > div.tabs-align-bottom kol-button-group-wc div,\n:host > div.tabs-align-top kol-button-group-wc div {\n display: flex;\n flex-wrap: wrap;\n}\n\n:host kol-button-group-wc button {\n border: none;\n}";
10238
10241
  const tabsCss = css_248z$1E;
10239
10242
 
10240
10243
  var css_248z$1D = "kol-input {\n gap: 0.25rem;\n}\n\nkol-input .error {\n order: 1;\n}\n\nkol-input label {\n order: 2;\n}\n\nkol-input .input {\n order: 3;\n}\n\nkol-input .counter {\n order: 4;\n}\n\nkol-input .hint {\n order: 5;\n font-size: 0.9rem;\n font-style: italic;\n}\n\ntextarea {\n border: none;\n}\n\ninput::placeholder {\n color: var(--color-subtle);\n}\n\n.input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5rem;\n}\n\n.input > kol-icon {\n width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n padding-right: var(--spacing);\n}\n\n.input:hover {\n border-color: var(--color-primary);\n}\n\ntextarea:read-only,\ntextarea:disabled {\n cursor: not-allowed;\n}\n\n.required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\nkol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\nkol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n}\n\nkol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\n.disabled {\n opacity: 0.33;\n}\n\nselect[multiple],\ntextarea {\n overflow: auto;\n}\n\ntextarea {\n display: block;\n}\n\n.input {\n position: relative;\n}";
@@ -10344,7 +10347,7 @@ var css_248z$19 = "kol-link-wc > a > kol-span-wc {\n border-radius: 0;\n borde
10344
10347
 
10345
10348
  var css_248z$18 = ".popover {\n background: #fff;\n}";
10346
10349
 
10347
- var css_248z$17 = ":host > div {\n overflow-x: auto;\n overflow-y: hidden;\n}\n\ncaption {\n padding: 0.5em;\n}\n\nth {\n font-weight: normal;\n color: var(--color-midnight);\n}\n\n:host table thead tr:first-child th,\n:host table thead tr:first-child td {\n border-width: 0;\n border-top-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n}\n\n.table {\n padding: 0.5em;\n}\n\n.table:has(caption:focus) {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n}\n\ntable {\n width: 100%;\n border-spacing: 0;\n}\n\ntable,\n:host table thead tr:last-child th,\n:host table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n}\n\nth {\n background-color: var(--color-white);\n}\n\nth div {\n width: 100%;\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n}\n\ntbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n}\n\nth,\ntd {\n padding: 0.5em;\n}\n\nth[aria-sort=ascending],\nth[aria-sort=descending] {\n font-weight: 700;\n}\n\n@media (min-width: 1024px) {\n :host > div:last-child,\n :host > div:last-child > div:last-child {\n grid-auto-flow: column;\n }\n :host > div:last-child kol-pagination {\n display: flex;\n gap: 1rem;\n }\n}";
10350
+ var css_248z$17 = ":host > div {\n overflow-x: auto;\n overflow-y: hidden;\n}\n\ncaption {\n padding: 0.5em;\n}\n\nth {\n font-weight: normal;\n color: var(--color-midnight);\n}\n\n:host table thead tr:first-child th,\n:host table thead tr:first-child td {\n border-width: 0;\n border-top-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n}\n\n.table {\n padding: 0.5em;\n}\n\n.table:has(.focus-element:focus) {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n}\n\ntable {\n width: 100%;\n border-spacing: 0;\n}\n\ntable,\n:host table thead tr:last-child th,\n:host table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n}\n\nth {\n background-color: var(--color-white);\n}\n\nth div {\n width: 100%;\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n}\n\ntbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n}\n\nth,\ntd {\n padding: 0.5em;\n}\n\nth[aria-sort=ascending],\nth[aria-sort=descending] {\n font-weight: 700;\n}\n\n@media (min-width: 1024px) {\n :host > div:last-child,\n :host > div:last-child > div:last-child {\n grid-auto-flow: column;\n }\n :host > div:last-child kol-pagination {\n display: flex;\n gap: 1rem;\n }\n}";
10348
10351
 
10349
10352
  var css_248z$16 = "kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n border: none;\n outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n height: 40px !important;\n min-height: 40px !important;\n}\n\nlabel {\n font-weight: var(--font-weight-bold);\n order: 1;\n}\n\n.hint {\n font-size: 0.875rem;\n order: 2;\n}\n\nkol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n}\n\n.input {\n min-height: 44px !important;\n border: 1px solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: 1px 0.5em;\n}\n\n.counter {\n order: 5;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n color: var(--color-grey-50);\n}\n\n.input:focus-within {\n box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n border-color: var(--color-blue) !important;\n}\n\n.error .input {\n border-color: var(--color-red);\n}";
10350
10353
 
@@ -10450,7 +10453,7 @@ var css_248z$E = "kol-link-wc > a > kol-span-wc {\n border-radius: 4px;\n gap:
10450
10453
 
10451
10454
  var css_248z$D = ".popover {\n background: #fff;\n}";
10452
10455
 
10453
- var css_248z$C = ":host > div {\n overflow-x: auto;\n overflow-y: hidden;\n}\n\ncaption {\n padding: 0.5em;\n}\n\nth {\n font-weight: normal;\n color: var(--color-midnight);\n}\n\n:host table thead tr:first-child th,\n:host table thead tr:first-child td {\n border-width: 0;\n border-top-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n}\n\n.table {\n padding: 0.5em;\n}\n\n.table:has(caption:focus) {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n}\n\ntable {\n width: 100%;\n border-spacing: 0;\n}\n\ntable,\n:host table thead tr:last-child th,\n:host table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n}\n\nth {\n background-color: var(--color-white);\n}\n\nth div {\n width: 100%;\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n}\n\ntbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n}\n\nth,\ntd {\n padding: 0.5em;\n}\n\nth[aria-sort=ascending],\nth[aria-sort=descending] {\n font-weight: 700;\n}\n\n@media (min-width: 1024px) {\n :host > div:last-child,\n :host > div:last-child > div:last-child {\n grid-auto-flow: column;\n }\n :host > div:last-child kol-pagination {\n display: flex;\n gap: 1rem;\n }\n}";
10456
+ var css_248z$C = ":host > div {\n overflow-x: auto;\n overflow-y: hidden;\n}\n\ncaption {\n padding: 0.5em;\n}\n\nth {\n font-weight: normal;\n color: var(--color-midnight);\n}\n\n:host table thead tr:first-child th,\n:host table thead tr:first-child td {\n border-width: 0;\n border-top-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n}\n\n.table {\n padding: 0.5em;\n}\n\n.table:has(.focus-element:focus) {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n}\n\ntable {\n width: 100%;\n border-spacing: 0;\n}\n\ntable,\n:host table thead tr:last-child th,\n:host table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n}\n\nth {\n background-color: var(--color-white);\n}\n\nth div {\n width: 100%;\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n}\n\ntbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n}\n\nth,\ntd {\n padding: 0.5em;\n}\n\nth[aria-sort=ascending],\nth[aria-sort=descending] {\n font-weight: 700;\n}\n\n@media (min-width: 1024px) {\n :host > div:last-child,\n :host > div:last-child > div:last-child {\n grid-auto-flow: column;\n }\n :host > div:last-child kol-pagination {\n display: flex;\n gap: 1rem;\n }\n}";
10454
10457
 
10455
10458
  var css_248z$B = ":host {\n --kolibri-spacing: 0.25rem;\n}\n\nkol-button-group-wc {\n border-bottom: 1px solid var(--color-grey-25);\n margin-bottom: -1px;\n}\n\nkol-button-group-wc button {\n border: none;\n margin-bottom: -1px;\n}\n\nkol-button-group-wc button kol-span-wc {\n padding: 0.5rem;\n min-height: 44px;\n min-width: 44px;\n}\n\nkol-button-group-wc button.selected kol-span-wc {\n border-color: var(--color-grey-25);\n border-style: solid;\n border-width: 1px;\n border-bottom-color: white;\n border-top-color: var(--color-blue);\n box-shadow: 0 -3px var(--color-blue);\n font-weight: var(--font-weight-bold);\n color: var(--color-blue);\n}\n\nkol-button-group-wc button:hover:not(:disabled) kol-span-wc {\n color: var(--color-blue-130);\n}\n\nkol-button-group-wc button:focus kol-span-wc {\n outline-color: var(--color-blue-130);\n outline-style: solid;\n outline-width: 2px;\n}";
10456
10459
 
@@ -10552,7 +10555,7 @@ var css_248z$7 = "kol-link-wc > a > kol-span-wc {\n border-radius: 2rem;\n bor
10552
10555
 
10553
10556
  var css_248z$6 = ".popover {\n background: #fff;\n}";
10554
10557
 
10555
- var css_248z$5 = ":host > div {\n overflow-x: auto;\n overflow-y: hidden;\n}\n\n:host > div:last-child {\n border-style: solid;\n border-width: 1px;\n border-color: var(--border-color);\n}\n\n.table {\n padding: 0.5em;\n}\n\n.table:has(caption:focus) {\n outline-color: var(--color-petrol);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n}\n\ntable,\ntr,\nth,\ntd {\n border: 0 solid var(--border-color);\n}\n\ntr {\n border-top-width: 1px;\n}\n\ntr:nth-child(even) {\n background-color: #f2f2f2;\n}\n\nth,\ntd {\n border-right-width: 1px;\n padding: 0.25em 0.5em;\n}\n\nth {\n background-color: #eee;\n}\n\n.table-sort-button .button {\n font-weight: bold;\n}\n\n@media (min-width: 1024px) {\n :host > div.pagination,\n :host > div.pagination > div:last-child {\n grid-auto-flow: column;\n }\n :host > div.pagination kol-pagination {\n display: flex;\n gap: 1rem;\n }\n}";
10558
+ var css_248z$5 = ":host > div {\n overflow-x: auto;\n overflow-y: hidden;\n}\n\n:host > div:last-child {\n border-style: solid;\n border-width: 1px;\n border-color: var(--border-color);\n}\n\n.table {\n padding: 0.5em;\n}\n\n.table:has(.focus-element:focus) {\n outline-color: var(--color-petrol);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n}\n\ntable,\ntr,\nth,\ntd {\n border: 0 solid var(--border-color);\n}\n\ntr {\n border-top-width: 1px;\n}\n\ntr:nth-child(even) {\n background-color: #f2f2f2;\n}\n\nth,\ntd {\n border-right-width: 1px;\n padding: 0.25em 0.5em;\n}\n\nth {\n background-color: #eee;\n}\n\n.table-sort-button .button {\n font-weight: bold;\n}\n\n@media (min-width: 1024px) {\n :host > div.pagination,\n :host > div.pagination > div:last-child {\n grid-auto-flow: column;\n }\n :host > div.pagination kol-pagination {\n display: flex;\n gap: 1rem;\n }\n}";
10556
10559
 
10557
10560
  var css_248z$4 = ":host > div {\n display: block;\n width: 100%;\n}\n\n:host kol-button-group-wc {\n display: flex;\n background-color: var(--color-petrol);\n}\n\n:host kol-button-group-wc > div {\n display: inline-flex;\n}\n\n:host kol-button-group-wc > div + div {\n margin-left: 0.25em;\n}\n\n:host > div > div {\n padding: 0.25em;\n border: 1px solid var(--border-color);\n}\n\nbutton {\n box-sizing: border-box;\n font-size: inherit;\n line-height: 1.25em;\n cursor: pointer;\n border-width: 2px;\n box-shadow: 0 0 0.25em gray;\n width: inherit;\n overflow: hidden;\n border-style: solid;\n padding: calc(4 * var(--spacing));\n display: grid;\n gap: 0.25em;\n align-items: center;\n justify-content: center;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n}\n\nkol-button-wc button.selected,\nkol-button-wc[aria-selected=true] button {\n background-color: white;\n border-bottom-width: 0.25em !important;\n border-bottom-style: solid;\n border-bottom-color: var(--color-citrin) !important;\n}\n\nbutton > kol-span-wc span {\n display: flex;\n gap: 0.25em;\n align-items: center;\n justify-content: center;\n}\n\nbutton:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\nbutton.primary,\nbutton.primary:disabled:hover {\n background-color: var(--kolibri-color-primary);\n border-color: var(--kolibri-color-primary);\n color: white;\n}\n\nbutton.primary:hover,\nbutton.primary:focus {\n color: var(--kolibri-color-primary);\n}\n\nbutton.secondary,\nbutton.secondary:disabled:hover {\n background-color: var(--kolibri-color-secondary);\n border-color: var(--kolibri-color-secondary);\n color: white;\n}\n\nbutton.secondary:hover,\nbutton.secondary:focus {\n color: var(--kolibri-color-secondary);\n}\n\nbutton.normal,\nbutton.normal:disabled:hover {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: white;\n}\n\nbutton.normal:hover,\nbutton.normal:focus {\n color: var(--color-petrol);\n}\n\nbutton.danger,\nbutton.danger:disabled:hover {\n background-color: var(--kolibri-color-danger);\n border-color: var(--kolibri-color-danger);\n color: white;\n}\n\nbutton.danger:hover,\nbutton.danger:focus {\n color: var(--kolibri-color-danger);\n}\n\nbutton.ghost,\nbutton.ghost:disabled:hover {\n background-color: white;\n border-color: var(--kolibri-color-ghost);\n color: var(--kolibri-color-ghost);\n}\n\nbutton.ghost:hover,\nbutton.ghost:focus {\n background-color: var(--kolibri-color-ghost);\n color: white;\n}\n\nbutton:hover,\nbutton:focus {\n background-color: white;\n box-shadow: 0 0 0.25em black;\n}\n\nbutton:active {\n outline: 0 !important;\n box-shadow: none !important;\n}\n\n.close-button {\n font-size: 25%;\n height: fit-content;\n width: 0;\n}\n\n.close-button button {\n width: 1rem;\n position: relative;\n height: 1rem;\n left: -4.25em;\n top: 0.25em;\n}\n\n:host > div {\n display: grid;\n}\n\n:host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n}\n\n:host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n}\n\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-top kol-button-group-wc {\n order: 0;\n}\n\n:host > .tabs-align-bottom kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n order: 1;\n}\n\n:host > div.tabs-align-left kol-button-group-wc > div,\n:host > div.tabs-align-left kol-button-group-wc > div > div,\n:host > div.tabs-align-right kol-button-group-wc > div,\n:host > div.tabs-align-right kol-button-group-wc > div > div {\n display: grid;\n}\n\n:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n width: 100%;\n}\n\n:host > div.tabs-align-bottom kol-button-group-wc div,\n:host > div.tabs-align-top kol-button-group-wc div {\n display: flex;\n flex-wrap: wrap;\n}";
10558
10561
 
package/dist/index.mjs CHANGED
@@ -1953,7 +1953,7 @@ const BMF = KoliBri.createTheme("bmf", {
1953
1953
  overflow-x: auto;
1954
1954
  overflow-y: hidden;
1955
1955
  }
1956
- .table:has(caption:focus) {
1956
+ .table:has(.focus-element:focus) {
1957
1957
  outline-color: var(--color-ocean);
1958
1958
  outline-style: solid;
1959
1959
  outline-width: 3px;
@@ -2586,7 +2586,10 @@ const BMF = KoliBri.createTheme("bmf", {
2586
2586
  /* border-bottom: 0.025rem solid var(--color-midnight); */
2587
2587
  color: var(--color-midnight);
2588
2588
  }
2589
- button kol-span-wc > span {
2589
+ button:not(.selected) kol-span-wc > span {
2590
+ padding-bottom: 0.25em;
2591
+ }
2592
+ button.selected kol-span-wc > span {
2590
2593
  border-bottom: 0.25em solid;
2591
2594
  }
2592
2595
  button kol-span-wc > span {
@@ -10229,10 +10232,10 @@ const spinCss = css_248z$1H;
10229
10232
  var css_248z$1G = ".popover {\n background: #fff;\n}";
10230
10233
  const splitButtonCss = css_248z$1G;
10231
10234
 
10232
- var css_248z$1F = ":host * {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n}\n\n:host > div {\n overflow-x: auto;\n overflow-y: hidden;\n}\n\ncaption {\n padding: 0.5rem;\n}\n\nth {\n font-weight: normal;\n color: var(--color-primary);\n}\n\n:host table thead tr:first-child th,\n:host table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n}\n\n.table {\n padding: 0.5rem;\n}\n\n.table:has(caption:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n}\n\ntable {\n width: 100%;\n border-spacing: 0;\n}\n\ntable,\n:host table thead tr:last-child th,\n:host table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n}\n\nth {\n background-color: var(--color-light);\n}\n\nth div {\n width: 100%;\n display: flex;\n gap: 0.5rem;\n grid-template-columns: 1fr auto;\n align-items: center;\n}\n\ntr:nth-child(even) {\n background-color: var(--color-mute);\n}\n\nth,\ntd {\n padding: 0.5rem;\n}\n\nth[aria-sort=ascending],\nth[aria-sort=descending] {\n font-weight: 700;\n}\n\n@media (min-width: 1024px) {\n div.pagination kol-pagination {\n display: flex;\n align-items: center;\n }\n}";
10235
+ var css_248z$1F = ":host * {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n}\n\n:host > div {\n overflow-x: auto;\n overflow-y: hidden;\n}\n\ncaption {\n padding: 0.5rem;\n}\n\nth {\n font-weight: normal;\n color: var(--color-primary);\n}\n\n:host table thead tr:first-child th,\n:host table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n}\n\n.table {\n padding: 0.5rem;\n}\n\n.table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n}\n\ntable {\n width: 100%;\n border-spacing: 0;\n}\n\ntable,\n:host table thead tr:last-child th,\n:host table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n}\n\nth {\n background-color: var(--color-light);\n}\n\nth div {\n width: 100%;\n display: flex;\n gap: 0.5rem;\n grid-template-columns: 1fr auto;\n align-items: center;\n}\n\ntr:nth-child(even) {\n background-color: var(--color-mute);\n}\n\nth,\ntd {\n padding: 0.5rem;\n}\n\nth[aria-sort=ascending],\nth[aria-sort=descending] {\n font-weight: 700;\n}\n\n@media (min-width: 1024px) {\n div.pagination kol-pagination {\n display: flex;\n align-items: center;\n }\n}";
10233
10236
  const tableCss = css_248z$1F;
10234
10237
 
10235
- var css_248z$1E = "button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n:host kol-button-group-wc {\n display: inline-flex;\n gap: 2rem;\n flex-wrap: wrap;\n}\n\nbutton {\n box-sizing: border-box;\n background-color: transparent;\n border: 0;\n border-radius: var(--border-radius);\n font-style: normal;\n font-weight: 700;\n font-size: 18px;\n line-height: 22px;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n color: var(--color-subtle);\n padding: 0;\n}\n\nbutton:hover {\n color: var(--color-primary);\n}\n\nbutton.primary,\nbutton.selected {\n color: var(--color-primary);\n}\n\nbutton kol-span-wc > span {\n border-bottom: 0.25em solid;\n}\n\nbutton kol-span-wc > span {\n gap: 0.5rem;\n}\n\n:host > div > div {\n padding: 0.25em 0;\n}\n\ndiv[role=tabpanel] {\n height: 100%;\n}\n\ndiv.grid {\n height: 100%;\n}\n\n:host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n}\n\n:host > .tabs-align-right kol-button-group-wc {\n display: grid;\n order: 2;\n}\n\n:host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n}\n\n:host > .tabs-align-left kol-button-group-wc {\n display: grid;\n order: 0;\n}\n\n:host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n}\n\n:host > .tabs-align-bottom kol-button-group-wc {\n order: 2;\n}\n\n:host > .tabs-align-bottom kol-button-group-wc > div {\n display: flex;\n}\n\n:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n margin: 0px 1rem 0px 0px;\n}\n\n:host > .tabs-align-bottom > kol-button-group-wc > div > div {\n margin: 0px 1rem;\n}\n\n:host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n}\n\n:host > .tabs-align-top kol-button-group-wc {\n order: 0;\n}\n\n:host > .tabs-align-top kol-button-group-wc > div {\n display: flex;\n}\n\n:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n margin: 0px 1rem 0px 0px;\n}\n\n:host > .tabs-align-top > kol-button-group-wc > div > div {\n margin: 0px 1rem;\n}\n\n:host > div {\n display: grid;\n}\n\n:host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n}\n\n:host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n}\n\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-top kol-button-group-wc {\n order: 0;\n}\n\n:host > .tabs-align-bottom kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n order: 1;\n}\n\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n gap: inherit;\n}\n\n:host > div.tabs-align-left kol-button-group-wc > div,\n:host > div.tabs-align-left kol-button-group-wc > div > div,\n:host > div.tabs-align-right kol-button-group-wc > div,\n:host > div.tabs-align-right kol-button-group-wc > div > div {\n display: grid;\n}\n\n:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n width: 100%;\n}\n\n:host > div.tabs-align-bottom kol-button-group-wc div,\n:host > div.tabs-align-top kol-button-group-wc div {\n display: flex;\n flex-wrap: wrap;\n}\n\n:host kol-button-group-wc button {\n border: none;\n}";
10238
+ var css_248z$1E = "button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n:host kol-button-group-wc {\n display: inline-flex;\n gap: 2rem;\n flex-wrap: wrap;\n}\n\nbutton {\n box-sizing: border-box;\n background-color: transparent;\n border: 0;\n border-radius: var(--border-radius);\n font-style: normal;\n font-weight: 700;\n font-size: 18px;\n line-height: 22px;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n color: var(--color-subtle);\n padding: 0;\n}\n\nbutton:hover {\n color: var(--color-primary);\n}\n\nbutton.primary,\nbutton.selected {\n color: var(--color-primary);\n}\n\nbutton:not(.selected) kol-span-wc > span {\n padding-bottom: 0.25em;\n}\n\nbutton.selected kol-span-wc > span {\n border-bottom: 0.25em solid;\n}\n\nbutton kol-span-wc > span {\n gap: 0.5rem;\n}\n\n:host > div > div {\n padding: 0.25em 0;\n}\n\ndiv[role=tabpanel] {\n height: 100%;\n}\n\ndiv.grid {\n height: 100%;\n}\n\n:host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n}\n\n:host > .tabs-align-right kol-button-group-wc {\n display: grid;\n order: 2;\n}\n\n:host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n}\n\n:host > .tabs-align-left kol-button-group-wc {\n display: grid;\n order: 0;\n}\n\n:host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n}\n\n:host > .tabs-align-bottom kol-button-group-wc {\n order: 2;\n}\n\n:host > .tabs-align-bottom kol-button-group-wc > div {\n display: flex;\n}\n\n:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n margin: 0px 1rem 0px 0px;\n}\n\n:host > .tabs-align-bottom > kol-button-group-wc > div > div {\n margin: 0px 1rem;\n}\n\n:host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n}\n\n:host > .tabs-align-top kol-button-group-wc {\n order: 0;\n}\n\n:host > .tabs-align-top kol-button-group-wc > div {\n display: flex;\n}\n\n:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n margin: 0px 1rem 0px 0px;\n}\n\n:host > .tabs-align-top > kol-button-group-wc > div > div {\n margin: 0px 1rem;\n}\n\n:host > div {\n display: grid;\n}\n\n:host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n}\n\n:host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n}\n\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-top kol-button-group-wc {\n order: 0;\n}\n\n:host > .tabs-align-bottom kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n order: 1;\n}\n\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n gap: inherit;\n}\n\n:host > div.tabs-align-left kol-button-group-wc > div,\n:host > div.tabs-align-left kol-button-group-wc > div > div,\n:host > div.tabs-align-right kol-button-group-wc > div,\n:host > div.tabs-align-right kol-button-group-wc > div > div {\n display: grid;\n}\n\n:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n width: 100%;\n}\n\n:host > div.tabs-align-bottom kol-button-group-wc div,\n:host > div.tabs-align-top kol-button-group-wc div {\n display: flex;\n flex-wrap: wrap;\n}\n\n:host kol-button-group-wc button {\n border: none;\n}";
10236
10239
  const tabsCss = css_248z$1E;
10237
10240
 
10238
10241
  var css_248z$1D = "kol-input {\n gap: 0.25rem;\n}\n\nkol-input .error {\n order: 1;\n}\n\nkol-input label {\n order: 2;\n}\n\nkol-input .input {\n order: 3;\n}\n\nkol-input .counter {\n order: 4;\n}\n\nkol-input .hint {\n order: 5;\n font-size: 0.9rem;\n font-style: italic;\n}\n\ntextarea {\n border: none;\n}\n\ninput::placeholder {\n color: var(--color-subtle);\n}\n\n.input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5rem;\n}\n\n.input > kol-icon {\n width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n padding-right: var(--spacing);\n}\n\n.input:hover {\n border-color: var(--color-primary);\n}\n\ntextarea:read-only,\ntextarea:disabled {\n cursor: not-allowed;\n}\n\n.required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\nkol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\nkol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n}\n\nkol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\n.disabled {\n opacity: 0.33;\n}\n\nselect[multiple],\ntextarea {\n overflow: auto;\n}\n\ntextarea {\n display: block;\n}\n\n.input {\n position: relative;\n}";
@@ -10342,7 +10345,7 @@ var css_248z$19 = "kol-link-wc > a > kol-span-wc {\n border-radius: 0;\n borde
10342
10345
 
10343
10346
  var css_248z$18 = ".popover {\n background: #fff;\n}";
10344
10347
 
10345
- var css_248z$17 = ":host > div {\n overflow-x: auto;\n overflow-y: hidden;\n}\n\ncaption {\n padding: 0.5em;\n}\n\nth {\n font-weight: normal;\n color: var(--color-midnight);\n}\n\n:host table thead tr:first-child th,\n:host table thead tr:first-child td {\n border-width: 0;\n border-top-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n}\n\n.table {\n padding: 0.5em;\n}\n\n.table:has(caption:focus) {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n}\n\ntable {\n width: 100%;\n border-spacing: 0;\n}\n\ntable,\n:host table thead tr:last-child th,\n:host table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n}\n\nth {\n background-color: var(--color-white);\n}\n\nth div {\n width: 100%;\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n}\n\ntbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n}\n\nth,\ntd {\n padding: 0.5em;\n}\n\nth[aria-sort=ascending],\nth[aria-sort=descending] {\n font-weight: 700;\n}\n\n@media (min-width: 1024px) {\n :host > div:last-child,\n :host > div:last-child > div:last-child {\n grid-auto-flow: column;\n }\n :host > div:last-child kol-pagination {\n display: flex;\n gap: 1rem;\n }\n}";
10348
+ var css_248z$17 = ":host > div {\n overflow-x: auto;\n overflow-y: hidden;\n}\n\ncaption {\n padding: 0.5em;\n}\n\nth {\n font-weight: normal;\n color: var(--color-midnight);\n}\n\n:host table thead tr:first-child th,\n:host table thead tr:first-child td {\n border-width: 0;\n border-top-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n}\n\n.table {\n padding: 0.5em;\n}\n\n.table:has(.focus-element:focus) {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n}\n\ntable {\n width: 100%;\n border-spacing: 0;\n}\n\ntable,\n:host table thead tr:last-child th,\n:host table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n}\n\nth {\n background-color: var(--color-white);\n}\n\nth div {\n width: 100%;\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n}\n\ntbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n}\n\nth,\ntd {\n padding: 0.5em;\n}\n\nth[aria-sort=ascending],\nth[aria-sort=descending] {\n font-weight: 700;\n}\n\n@media (min-width: 1024px) {\n :host > div:last-child,\n :host > div:last-child > div:last-child {\n grid-auto-flow: column;\n }\n :host > div:last-child kol-pagination {\n display: flex;\n gap: 1rem;\n }\n}";
10346
10349
 
10347
10350
  var css_248z$16 = "kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n}\n\ninput,\nselect,\ntextarea {\n border: none;\n outline: none;\n}\n\ninput,\nselect:not([multiple]) {\n height: 40px !important;\n min-height: 40px !important;\n}\n\nlabel {\n font-weight: var(--font-weight-bold);\n order: 1;\n}\n\n.hint {\n font-size: 0.875rem;\n order: 2;\n}\n\nkol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n}\n\n.input {\n min-height: 44px !important;\n border: 1px solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: 1px 0.5em;\n}\n\n.counter {\n order: 5;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n color: var(--color-grey-50);\n}\n\n.input:focus-within {\n box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n outline: none;\n}\n\n.input:focus-within,\n.input:hover {\n border-color: var(--color-blue) !important;\n}\n\n.error .input {\n border-color: var(--color-red);\n}";
10348
10351
 
@@ -10448,7 +10451,7 @@ var css_248z$E = "kol-link-wc > a > kol-span-wc {\n border-radius: 4px;\n gap:
10448
10451
 
10449
10452
  var css_248z$D = ".popover {\n background: #fff;\n}";
10450
10453
 
10451
- var css_248z$C = ":host > div {\n overflow-x: auto;\n overflow-y: hidden;\n}\n\ncaption {\n padding: 0.5em;\n}\n\nth {\n font-weight: normal;\n color: var(--color-midnight);\n}\n\n:host table thead tr:first-child th,\n:host table thead tr:first-child td {\n border-width: 0;\n border-top-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n}\n\n.table {\n padding: 0.5em;\n}\n\n.table:has(caption:focus) {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n}\n\ntable {\n width: 100%;\n border-spacing: 0;\n}\n\ntable,\n:host table thead tr:last-child th,\n:host table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n}\n\nth {\n background-color: var(--color-white);\n}\n\nth div {\n width: 100%;\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n}\n\ntbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n}\n\nth,\ntd {\n padding: 0.5em;\n}\n\nth[aria-sort=ascending],\nth[aria-sort=descending] {\n font-weight: 700;\n}\n\n@media (min-width: 1024px) {\n :host > div:last-child,\n :host > div:last-child > div:last-child {\n grid-auto-flow: column;\n }\n :host > div:last-child kol-pagination {\n display: flex;\n gap: 1rem;\n }\n}";
10454
+ var css_248z$C = ":host > div {\n overflow-x: auto;\n overflow-y: hidden;\n}\n\ncaption {\n padding: 0.5em;\n}\n\nth {\n font-weight: normal;\n color: var(--color-midnight);\n}\n\n:host table thead tr:first-child th,\n:host table thead tr:first-child td {\n border-width: 0;\n border-top-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n}\n\n.table {\n padding: 0.5em;\n}\n\n.table:has(.focus-element:focus) {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n}\n\ntable {\n width: 100%;\n border-spacing: 0;\n}\n\ntable,\n:host table thead tr:last-child th,\n:host table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n}\n\nth {\n background-color: var(--color-white);\n}\n\nth div {\n width: 100%;\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n}\n\ntbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n}\n\nth,\ntd {\n padding: 0.5em;\n}\n\nth[aria-sort=ascending],\nth[aria-sort=descending] {\n font-weight: 700;\n}\n\n@media (min-width: 1024px) {\n :host > div:last-child,\n :host > div:last-child > div:last-child {\n grid-auto-flow: column;\n }\n :host > div:last-child kol-pagination {\n display: flex;\n gap: 1rem;\n }\n}";
10452
10455
 
10453
10456
  var css_248z$B = ":host {\n --kolibri-spacing: 0.25rem;\n}\n\nkol-button-group-wc {\n border-bottom: 1px solid var(--color-grey-25);\n margin-bottom: -1px;\n}\n\nkol-button-group-wc button {\n border: none;\n margin-bottom: -1px;\n}\n\nkol-button-group-wc button kol-span-wc {\n padding: 0.5rem;\n min-height: 44px;\n min-width: 44px;\n}\n\nkol-button-group-wc button.selected kol-span-wc {\n border-color: var(--color-grey-25);\n border-style: solid;\n border-width: 1px;\n border-bottom-color: white;\n border-top-color: var(--color-blue);\n box-shadow: 0 -3px var(--color-blue);\n font-weight: var(--font-weight-bold);\n color: var(--color-blue);\n}\n\nkol-button-group-wc button:hover:not(:disabled) kol-span-wc {\n color: var(--color-blue-130);\n}\n\nkol-button-group-wc button:focus kol-span-wc {\n outline-color: var(--color-blue-130);\n outline-style: solid;\n outline-width: 2px;\n}";
10454
10457
 
@@ -10550,7 +10553,7 @@ var css_248z$7 = "kol-link-wc > a > kol-span-wc {\n border-radius: 2rem;\n bor
10550
10553
 
10551
10554
  var css_248z$6 = ".popover {\n background: #fff;\n}";
10552
10555
 
10553
- var css_248z$5 = ":host > div {\n overflow-x: auto;\n overflow-y: hidden;\n}\n\n:host > div:last-child {\n border-style: solid;\n border-width: 1px;\n border-color: var(--border-color);\n}\n\n.table {\n padding: 0.5em;\n}\n\n.table:has(caption:focus) {\n outline-color: var(--color-petrol);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n}\n\ntable,\ntr,\nth,\ntd {\n border: 0 solid var(--border-color);\n}\n\ntr {\n border-top-width: 1px;\n}\n\ntr:nth-child(even) {\n background-color: #f2f2f2;\n}\n\nth,\ntd {\n border-right-width: 1px;\n padding: 0.25em 0.5em;\n}\n\nth {\n background-color: #eee;\n}\n\n.table-sort-button .button {\n font-weight: bold;\n}\n\n@media (min-width: 1024px) {\n :host > div.pagination,\n :host > div.pagination > div:last-child {\n grid-auto-flow: column;\n }\n :host > div.pagination kol-pagination {\n display: flex;\n gap: 1rem;\n }\n}";
10556
+ var css_248z$5 = ":host > div {\n overflow-x: auto;\n overflow-y: hidden;\n}\n\n:host > div:last-child {\n border-style: solid;\n border-width: 1px;\n border-color: var(--border-color);\n}\n\n.table {\n padding: 0.5em;\n}\n\n.table:has(.focus-element:focus) {\n outline-color: var(--color-petrol);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n}\n\ntable,\ntr,\nth,\ntd {\n border: 0 solid var(--border-color);\n}\n\ntr {\n border-top-width: 1px;\n}\n\ntr:nth-child(even) {\n background-color: #f2f2f2;\n}\n\nth,\ntd {\n border-right-width: 1px;\n padding: 0.25em 0.5em;\n}\n\nth {\n background-color: #eee;\n}\n\n.table-sort-button .button {\n font-weight: bold;\n}\n\n@media (min-width: 1024px) {\n :host > div.pagination,\n :host > div.pagination > div:last-child {\n grid-auto-flow: column;\n }\n :host > div.pagination kol-pagination {\n display: flex;\n gap: 1rem;\n }\n}";
10554
10557
 
10555
10558
  var css_248z$4 = ":host > div {\n display: block;\n width: 100%;\n}\n\n:host kol-button-group-wc {\n display: flex;\n background-color: var(--color-petrol);\n}\n\n:host kol-button-group-wc > div {\n display: inline-flex;\n}\n\n:host kol-button-group-wc > div + div {\n margin-left: 0.25em;\n}\n\n:host > div > div {\n padding: 0.25em;\n border: 1px solid var(--border-color);\n}\n\nbutton {\n box-sizing: border-box;\n font-size: inherit;\n line-height: 1.25em;\n cursor: pointer;\n border-width: 2px;\n box-shadow: 0 0 0.25em gray;\n width: inherit;\n overflow: hidden;\n border-style: solid;\n padding: calc(4 * var(--spacing));\n display: grid;\n gap: 0.25em;\n align-items: center;\n justify-content: center;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n}\n\nkol-button-wc button.selected,\nkol-button-wc[aria-selected=true] button {\n background-color: white;\n border-bottom-width: 0.25em !important;\n border-bottom-style: solid;\n border-bottom-color: var(--color-citrin) !important;\n}\n\nbutton > kol-span-wc span {\n display: flex;\n gap: 0.25em;\n align-items: center;\n justify-content: center;\n}\n\nbutton:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\nbutton.primary,\nbutton.primary:disabled:hover {\n background-color: var(--kolibri-color-primary);\n border-color: var(--kolibri-color-primary);\n color: white;\n}\n\nbutton.primary:hover,\nbutton.primary:focus {\n color: var(--kolibri-color-primary);\n}\n\nbutton.secondary,\nbutton.secondary:disabled:hover {\n background-color: var(--kolibri-color-secondary);\n border-color: var(--kolibri-color-secondary);\n color: white;\n}\n\nbutton.secondary:hover,\nbutton.secondary:focus {\n color: var(--kolibri-color-secondary);\n}\n\nbutton.normal,\nbutton.normal:disabled:hover {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: white;\n}\n\nbutton.normal:hover,\nbutton.normal:focus {\n color: var(--color-petrol);\n}\n\nbutton.danger,\nbutton.danger:disabled:hover {\n background-color: var(--kolibri-color-danger);\n border-color: var(--kolibri-color-danger);\n color: white;\n}\n\nbutton.danger:hover,\nbutton.danger:focus {\n color: var(--kolibri-color-danger);\n}\n\nbutton.ghost,\nbutton.ghost:disabled:hover {\n background-color: white;\n border-color: var(--kolibri-color-ghost);\n color: var(--kolibri-color-ghost);\n}\n\nbutton.ghost:hover,\nbutton.ghost:focus {\n background-color: var(--kolibri-color-ghost);\n color: white;\n}\n\nbutton:hover,\nbutton:focus {\n background-color: white;\n box-shadow: 0 0 0.25em black;\n}\n\nbutton:active {\n outline: 0 !important;\n box-shadow: none !important;\n}\n\n.close-button {\n font-size: 25%;\n height: fit-content;\n width: 0;\n}\n\n.close-button button {\n width: 1rem;\n position: relative;\n height: 1rem;\n left: -4.25em;\n top: 0.25em;\n}\n\n:host > div {\n display: grid;\n}\n\n:host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n}\n\n:host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n}\n\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-top kol-button-group-wc {\n order: 0;\n}\n\n:host > .tabs-align-bottom kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n order: 1;\n}\n\n:host > div.tabs-align-left kol-button-group-wc > div,\n:host > div.tabs-align-left kol-button-group-wc > div > div,\n:host > div.tabs-align-right kol-button-group-wc > div,\n:host > div.tabs-align-right kol-button-group-wc > div > div {\n display: grid;\n}\n\n:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n width: 100%;\n}\n\n:host > div.tabs-align-bottom kol-button-group-wc div,\n:host > div.tabs-align-top kol-button-group-wc div {\n display: flex;\n flex-wrap: wrap;\n}";
10556
10559
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/themes",
3
- "version": "1.7.12",
3
+ "version": "1.7.14",
4
4
  "license": "EUPL-1.2",
5
5
  "homepage": "https://public-ui.github.io",
6
6
  "repository": "https://github.com/public-ui/kolibri",
@@ -41,10 +41,10 @@
41
41
  "wcag"
42
42
  ],
43
43
  "devDependencies": {
44
- "@public-ui/schema": "1.7.12",
44
+ "@public-ui/schema": "1.7.14",
45
45
  "@types/node": "ts5.3",
46
- "@typescript-eslint/eslint-plugin": "7.0.1",
47
- "@typescript-eslint/parser": "7.0.1",
46
+ "@typescript-eslint/eslint-plugin": "7.0.2",
47
+ "@typescript-eslint/parser": "7.0.2",
48
48
  "eslint": "8.56.0",
49
49
  "eslint-plugin-no-loops": "0.3.0",
50
50
  "nodemon": "3.0.3",
@@ -53,7 +53,7 @@
53
53
  "unbuild": "1.2.1"
54
54
  },
55
55
  "peerDependencies": {
56
- "@public-ui/components": "1.7.12"
56
+ "@public-ui/components": "1.7.14"
57
57
  },
58
58
  "sideEffects": false,
59
59
  "type": "module",