@public-ui/theme-default 2.0.6 → 2.0.7

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.cjs CHANGED
@@ -709,7 +709,7 @@ const avatarCss = css_248z$A;
709
709
  var css_248z$z = "@layer kol-theme-component {\n :host {\n display: inline-block;\n font-family: var(--font-family);\n font-size: inherit;\n }\n :host > span {\n border-radius: var(--border-radius);\n display: inline-flex;\n font-style: normal;\n }\n :host > span.smart-button {\n align-items: center;\n }\n :host > span kol-button-wc:hover > button {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n :host > span kol-button-wc > button {\n color: inherit;\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n padding: 0.2rem;\n }\n :host > span kol-span-wc {\n padding: 0.25rem 0.75rem;\n }\n :host > span > kol-span-wc {\n align-items: center;\n font-style: normal;\n gap: 0.5rem;\n }\n :host > span > kol-span-wc > span {\n display: flex;\n gap: 0.25rem;\n }\n}";
710
710
  const badgeCss = css_248z$z;
711
711
 
712
- var css_248z$y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n li:has(:is(kol-icon + kol-link, kol-icon + span)) kol-icon {\n font-size: 0.75rem;\n color: var(--color-subtle);\n }\n kol-link::part(icon) {\n font-size: 1.25rem;\n }\n ul li > :is(span, kol-link) {\n line-height: 1.25rem;\n height: 20px;\n }\n ul li:last-child > span {\n color: var(--color-subtle);\n }\n kol-link {\n font-family: var(--font-family);\n }\n}";
712
+ var css_248z$y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n li:has(:is(kol-icon + kol-link, kol-icon + span)) kol-icon {\n font-size: 0.75rem;\n color: var(--color-subtle);\n }\n kol-link::part(icon) {\n font-size: 1.25rem;\n }\n ul li > :is(span, kol-link) {\n line-height: 1.25rem;\n }\n ul li:last-child > span {\n color: var(--color-subtle);\n }\n kol-link {\n font-family: var(--font-family);\n }\n}";
713
713
  const breadcrumbCss = css_248z$y;
714
714
 
715
715
  var css_248z$x = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid 3px;\n transition: 200ms outline-offset linear;\n }\n :is(a, button) > kol-span-wc {\n font-weight: 700;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 8px 14px;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .primary :is(a, button) > kol-span-wc,\n .primary :is(a, button):disabled:hover > kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > kol-span-wc,\n .secondary :is(a, button):disabled:hover > kol-span-wc,\n .normal :is(a, button) > kol-span-wc,\n .normal :is(a, button):disabled:hover > kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > kol-span-wc,\n .danger :is(a, button):disabled:hover > kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > kol-span-wc,\n .ghost :is(a, button):disabled:hover > kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > kol-span-wc,\n .primary :is(a, button):hover > kol-span-wc,\n .secondary :is(a, button):active > kol-span-wc,\n .secondary :is(a, button):hover > kol-span-wc,\n .normal :is(a, button):active > kol-span-wc,\n .normal :is(a, button):hover > kol-span-wc,\n .danger :is(a, button):active > kol-span-wc,\n .danger :is(a, button):hover > kol-span-wc,\n .ghost :is(a, button):active > kol-span-wc,\n .ghost :is(a, button):hover > kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > kol-span-wc,\n .danger :is(a, button):hover > kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > kol-span-wc,\n :is(a, button):focus:hover > kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > kol-span-wc,\n .secondary :is(a, button):active > kol-span-wc,\n .normal :is(a, button):active > kol-span-wc,\n .danger :is(a, button):active > kol-span-wc,\n .ghost :is(a, button):active > kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > kol-span-wc {\n padding: 0.8rem;\n width: unset;\n }\n :is(a, button).hide-label > kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > kol-span-wc kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > kol-span-wc > span,\n .ghost :is(a, button).small:hover > kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > kol-span-wc > span,\n .ghost :is(a, button).small.transparent > kol-span-wc > span,\n :is(a, button).transparent > kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n .access-key-hint {\n background: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
@@ -799,7 +799,7 @@ const splitButtonCss = css_248z$6;
799
799
  var css_248z$5 = "@layer kol-theme-component {\n :host * {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: 0.5rem;\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\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 .table {\n padding: 0.5rem;\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 table {\n width: 100%;\n border-spacing: 0;\n }\n table,\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 th {\n background-color: var(--color-light);\n }\n th div {\n width: 100%;\n display: flex;\n gap: 0.5rem;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: 0.5rem;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n @media (min-width: 1024px) {\n div.pagination kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}";
800
800
  const tableCss = css_248z$5;
801
801
 
802
- var css_248z$4 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host kol-button-group-wc {\n display: inline-flex;\n gap: 2rem;\n flex-wrap: wrap;\n }\n button {\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 button:hover {\n color: var(--color-primary);\n }\n button.primary,\n button.selected {\n color: var(--color-primary);\n }\n button:not(.selected) kol-span-wc > span {\n border-bottom: 0.25em solid transparent;\n }\n button.selected kol-span-wc > span {\n border-bottom: 0.25em solid;\n }\n button kol-span-wc > span {\n gap: 0.5rem;\n }\n kol-icon {\n font-size: 1rem;\n }\n :host > div > div {\n padding: 0.25em 0;\n }\n div[role=tabpanel] {\n height: 100%;\n }\n div.grid {\n height: 100%;\n }\n :host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-right kol-button-group-wc {\n display: grid;\n order: 2;\n }\n :host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n }\n :host > .tabs-align-left kol-button-group-wc {\n display: grid;\n order: 0;\n }\n :host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n }\n :host > .tabs-align-bottom kol-button-group-wc {\n order: 2;\n }\n :host > .tabs-align-bottom kol-button-group-wc > div {\n display: flex;\n }\n :host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n margin: 0px 1rem 0px 0px;\n }\n :host > .tabs-align-bottom > kol-button-group-wc > div > div {\n margin: 0px 1rem;\n }\n :host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n }\n :host > .tabs-align-top kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-top kol-button-group-wc > div {\n display: flex;\n }\n :host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n margin: 0px 1rem 0px 0px;\n }\n :host > .tabs-align-top > kol-button-group-wc > div > div {\n margin: 0px 1rem;\n }\n :host > div {\n display: grid;\n }\n :host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n }\n :host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-left kol-button-group-wc,\n :host > .tabs-align-top kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-bottom kol-button-group-wc,\n :host > .tabs-align-right kol-button-group-wc {\n order: 1;\n }\n :host > .tabs-align-left kol-button-group-wc,\n :host > .tabs-align-right kol-button-group-wc {\n gap: inherit;\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 :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 :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 :host kol-button-group-wc button {\n border: none;\n }\n}";
802
+ var css_248z$4 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host kol-button-group-wc {\n display: inline-flex;\n gap: 2rem;\n flex-wrap: wrap;\n }\n button {\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 button:hover {\n color: var(--color-primary);\n }\n button.primary,\n button.selected {\n color: var(--color-primary);\n }\n button:not(.selected) kol-span-wc > span {\n padding-bottom: 0.25em;\n }\n button.selected kol-span-wc > span {\n border-bottom: 0.25em solid;\n }\n button kol-span-wc > span {\n gap: 0.5rem;\n }\n kol-icon {\n font-size: 1rem;\n }\n :host > div > div {\n padding: 0.25em 0;\n }\n div[role=tabpanel] {\n height: 100%;\n }\n div.grid {\n height: 100%;\n }\n :host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-right kol-button-group-wc {\n display: grid;\n order: 2;\n }\n :host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n }\n :host > .tabs-align-left kol-button-group-wc {\n display: grid;\n order: 0;\n }\n :host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n }\n :host > .tabs-align-bottom kol-button-group-wc {\n order: 2;\n }\n :host > .tabs-align-bottom kol-button-group-wc > div {\n display: flex;\n }\n :host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n margin: 0px 1rem 0px 0px;\n }\n :host > .tabs-align-bottom > kol-button-group-wc > div > div {\n margin: 0px 1rem;\n }\n :host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n }\n :host > .tabs-align-top kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-top kol-button-group-wc > div {\n display: flex;\n }\n :host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n margin: 0px 1rem 0px 0px;\n }\n :host > .tabs-align-top > kol-button-group-wc > div > div {\n margin: 0px 1rem;\n }\n :host > div {\n display: grid;\n }\n :host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n }\n :host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-left kol-button-group-wc,\n :host > .tabs-align-top kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-bottom kol-button-group-wc,\n :host > .tabs-align-right kol-button-group-wc {\n order: 1;\n }\n :host > .tabs-align-left kol-button-group-wc,\n :host > .tabs-align-right kol-button-group-wc {\n gap: inherit;\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 :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 :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 :host kol-button-group-wc button {\n border: none;\n }\n}";
803
803
  const tabsCss = css_248z$4;
804
804
 
805
805
  var css_248z$3 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n kol-input {\n gap: 0.25rem;\n }\n kol-input .error {\n order: 1;\n }\n kol-input label {\n order: 2;\n }\n kol-input .input {\n order: 3;\n }\n kol-input .counter {\n order: 4;\n }\n kol-input .hint {\n order: 5;\n font-size: 0.9rem;\n font-style: italic;\n }\n textarea {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\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 .input > kol-icon {\n width: 1rem;\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n .input:hover {\n border-color: var(--color-primary);\n }\n textarea:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n }\n kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n }\n kol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n select[multiple],\n textarea {\n overflow: auto;\n }\n textarea {\n display: block;\n }\n .input {\n position: relative;\n }\n}";
package/dist/index.mjs CHANGED
@@ -707,7 +707,7 @@ const avatarCss = css_248z$A;
707
707
  var css_248z$z = "@layer kol-theme-component {\n :host {\n display: inline-block;\n font-family: var(--font-family);\n font-size: inherit;\n }\n :host > span {\n border-radius: var(--border-radius);\n display: inline-flex;\n font-style: normal;\n }\n :host > span.smart-button {\n align-items: center;\n }\n :host > span kol-button-wc:hover > button {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n :host > span kol-button-wc > button {\n color: inherit;\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n padding: 0.2rem;\n }\n :host > span kol-span-wc {\n padding: 0.25rem 0.75rem;\n }\n :host > span > kol-span-wc {\n align-items: center;\n font-style: normal;\n gap: 0.5rem;\n }\n :host > span > kol-span-wc > span {\n display: flex;\n gap: 0.25rem;\n }\n}";
708
708
  const badgeCss = css_248z$z;
709
709
 
710
- var css_248z$y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n li:has(:is(kol-icon + kol-link, kol-icon + span)) kol-icon {\n font-size: 0.75rem;\n color: var(--color-subtle);\n }\n kol-link::part(icon) {\n font-size: 1.25rem;\n }\n ul li > :is(span, kol-link) {\n line-height: 1.25rem;\n height: 20px;\n }\n ul li:last-child > span {\n color: var(--color-subtle);\n }\n kol-link {\n font-family: var(--font-family);\n }\n}";
710
+ var css_248z$y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n li:has(:is(kol-icon + kol-link, kol-icon + span)) kol-icon {\n font-size: 0.75rem;\n color: var(--color-subtle);\n }\n kol-link::part(icon) {\n font-size: 1.25rem;\n }\n ul li > :is(span, kol-link) {\n line-height: 1.25rem;\n }\n ul li:last-child > span {\n color: var(--color-subtle);\n }\n kol-link {\n font-family: var(--font-family);\n }\n}";
711
711
  const breadcrumbCss = css_248z$y;
712
712
 
713
713
  var css_248z$x = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid 3px;\n transition: 200ms outline-offset linear;\n }\n :is(a, button) > kol-span-wc {\n font-weight: 700;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 8px 14px;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .primary :is(a, button) > kol-span-wc,\n .primary :is(a, button):disabled:hover > kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > kol-span-wc,\n .secondary :is(a, button):disabled:hover > kol-span-wc,\n .normal :is(a, button) > kol-span-wc,\n .normal :is(a, button):disabled:hover > kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > kol-span-wc,\n .danger :is(a, button):disabled:hover > kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > kol-span-wc,\n .ghost :is(a, button):disabled:hover > kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > kol-span-wc,\n .primary :is(a, button):hover > kol-span-wc,\n .secondary :is(a, button):active > kol-span-wc,\n .secondary :is(a, button):hover > kol-span-wc,\n .normal :is(a, button):active > kol-span-wc,\n .normal :is(a, button):hover > kol-span-wc,\n .danger :is(a, button):active > kol-span-wc,\n .danger :is(a, button):hover > kol-span-wc,\n .ghost :is(a, button):active > kol-span-wc,\n .ghost :is(a, button):hover > kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > kol-span-wc,\n .danger :is(a, button):hover > kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > kol-span-wc,\n :is(a, button):focus:hover > kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > kol-span-wc,\n .secondary :is(a, button):active > kol-span-wc,\n .normal :is(a, button):active > kol-span-wc,\n .danger :is(a, button):active > kol-span-wc,\n .ghost :is(a, button):active > kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > kol-span-wc {\n padding: 0.8rem;\n width: unset;\n }\n :is(a, button).hide-label > kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > kol-span-wc kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > kol-span-wc > span,\n .ghost :is(a, button).small:hover > kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > kol-span-wc > span,\n .ghost :is(a, button).small.transparent > kol-span-wc > span,\n :is(a, button).transparent > kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n .access-key-hint {\n background: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
@@ -797,7 +797,7 @@ const splitButtonCss = css_248z$6;
797
797
  var css_248z$5 = "@layer kol-theme-component {\n :host * {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: 0.5rem;\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\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 .table {\n padding: 0.5rem;\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 table {\n width: 100%;\n border-spacing: 0;\n }\n table,\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 th {\n background-color: var(--color-light);\n }\n th div {\n width: 100%;\n display: flex;\n gap: 0.5rem;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: 0.5rem;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n @media (min-width: 1024px) {\n div.pagination kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}";
798
798
  const tableCss = css_248z$5;
799
799
 
800
- var css_248z$4 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host kol-button-group-wc {\n display: inline-flex;\n gap: 2rem;\n flex-wrap: wrap;\n }\n button {\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 button:hover {\n color: var(--color-primary);\n }\n button.primary,\n button.selected {\n color: var(--color-primary);\n }\n button:not(.selected) kol-span-wc > span {\n border-bottom: 0.25em solid transparent;\n }\n button.selected kol-span-wc > span {\n border-bottom: 0.25em solid;\n }\n button kol-span-wc > span {\n gap: 0.5rem;\n }\n kol-icon {\n font-size: 1rem;\n }\n :host > div > div {\n padding: 0.25em 0;\n }\n div[role=tabpanel] {\n height: 100%;\n }\n div.grid {\n height: 100%;\n }\n :host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-right kol-button-group-wc {\n display: grid;\n order: 2;\n }\n :host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n }\n :host > .tabs-align-left kol-button-group-wc {\n display: grid;\n order: 0;\n }\n :host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n }\n :host > .tabs-align-bottom kol-button-group-wc {\n order: 2;\n }\n :host > .tabs-align-bottom kol-button-group-wc > div {\n display: flex;\n }\n :host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n margin: 0px 1rem 0px 0px;\n }\n :host > .tabs-align-bottom > kol-button-group-wc > div > div {\n margin: 0px 1rem;\n }\n :host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n }\n :host > .tabs-align-top kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-top kol-button-group-wc > div {\n display: flex;\n }\n :host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n margin: 0px 1rem 0px 0px;\n }\n :host > .tabs-align-top > kol-button-group-wc > div > div {\n margin: 0px 1rem;\n }\n :host > div {\n display: grid;\n }\n :host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n }\n :host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-left kol-button-group-wc,\n :host > .tabs-align-top kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-bottom kol-button-group-wc,\n :host > .tabs-align-right kol-button-group-wc {\n order: 1;\n }\n :host > .tabs-align-left kol-button-group-wc,\n :host > .tabs-align-right kol-button-group-wc {\n gap: inherit;\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 :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 :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 :host kol-button-group-wc button {\n border: none;\n }\n}";
800
+ var css_248z$4 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host kol-button-group-wc {\n display: inline-flex;\n gap: 2rem;\n flex-wrap: wrap;\n }\n button {\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 button:hover {\n color: var(--color-primary);\n }\n button.primary,\n button.selected {\n color: var(--color-primary);\n }\n button:not(.selected) kol-span-wc > span {\n padding-bottom: 0.25em;\n }\n button.selected kol-span-wc > span {\n border-bottom: 0.25em solid;\n }\n button kol-span-wc > span {\n gap: 0.5rem;\n }\n kol-icon {\n font-size: 1rem;\n }\n :host > div > div {\n padding: 0.25em 0;\n }\n div[role=tabpanel] {\n height: 100%;\n }\n div.grid {\n height: 100%;\n }\n :host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-right kol-button-group-wc {\n display: grid;\n order: 2;\n }\n :host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n }\n :host > .tabs-align-left kol-button-group-wc {\n display: grid;\n order: 0;\n }\n :host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n }\n :host > .tabs-align-bottom kol-button-group-wc {\n order: 2;\n }\n :host > .tabs-align-bottom kol-button-group-wc > div {\n display: flex;\n }\n :host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n margin: 0px 1rem 0px 0px;\n }\n :host > .tabs-align-bottom > kol-button-group-wc > div > div {\n margin: 0px 1rem;\n }\n :host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n }\n :host > .tabs-align-top kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-top kol-button-group-wc > div {\n display: flex;\n }\n :host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n margin: 0px 1rem 0px 0px;\n }\n :host > .tabs-align-top > kol-button-group-wc > div > div {\n margin: 0px 1rem;\n }\n :host > div {\n display: grid;\n }\n :host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n }\n :host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-left kol-button-group-wc,\n :host > .tabs-align-top kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-bottom kol-button-group-wc,\n :host > .tabs-align-right kol-button-group-wc {\n order: 1;\n }\n :host > .tabs-align-left kol-button-group-wc,\n :host > .tabs-align-right kol-button-group-wc {\n gap: inherit;\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 :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 :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 :host kol-button-group-wc button {\n border: none;\n }\n}";
801
801
  const tabsCss = css_248z$4;
802
802
 
803
803
  var css_248z$3 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n kol-input {\n gap: 0.25rem;\n }\n kol-input .error {\n order: 1;\n }\n kol-input label {\n order: 2;\n }\n kol-input .input {\n order: 3;\n }\n kol-input .counter {\n order: 4;\n }\n kol-input .hint {\n order: 5;\n font-size: 0.9rem;\n font-style: italic;\n }\n textarea {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\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 .input > kol-icon {\n width: 1rem;\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n .input:hover {\n border-color: var(--color-primary);\n }\n textarea:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n }\n kol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n }\n kol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n select[multiple],\n textarea {\n overflow: auto;\n }\n textarea {\n display: block;\n }\n .input {\n position: relative;\n }\n}";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/theme-default",
3
- "version": "2.0.6",
3
+ "version": "2.0.7",
4
4
  "license": "EUPL-1.2",
5
5
  "homepage": "https://public-ui.github.io",
6
6
  "repository": "https://github.com/public-ui/kolibri",
@@ -38,11 +38,11 @@
38
38
  "wcag"
39
39
  ],
40
40
  "devDependencies": {
41
- "@public-ui/schema": "2.0.6",
42
- "@public-ui/visual-tests": "2.0.6",
41
+ "@public-ui/schema": "2.0.7",
42
+ "@public-ui/visual-tests": "2.0.7",
43
43
  "@types/node": "ts5.3",
44
- "@typescript-eslint/eslint-plugin": "7.0.1",
45
- "@typescript-eslint/parser": "7.0.1",
44
+ "@typescript-eslint/eslint-plugin": "7.0.2",
45
+ "@typescript-eslint/parser": "7.0.2",
46
46
  "eslint": "8.56.0",
47
47
  "eslint-plugin-no-loops": "0.3.0",
48
48
  "rollup-plugin-postcss": "4.0.2",
@@ -50,7 +50,7 @@
50
50
  "unbuild": "1.2.1"
51
51
  },
52
52
  "peerDependencies": {
53
- "@public-ui/components": "2.0.6"
53
+ "@public-ui/components": "2.0.7"
54
54
  },
55
55
  "sideEffects": false,
56
56
  "type": "module",