@public-ui/themes 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 +6 -4
- package/dist/index.mjs +6 -4
- package/package.json +6 -6
package/dist/index.cjs
CHANGED
|
@@ -2846,7 +2846,10 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
2846
2846
|
/* border-bottom: 0.025rem solid var(--color-midnight); */
|
|
2847
2847
|
color: var(--color-midnight);
|
|
2848
2848
|
}
|
|
2849
|
-
button kol-span-wc > span {
|
|
2849
|
+
button:not(.selected) kol-span-wc > span {
|
|
2850
|
+
padding-bottom: 0.25em;
|
|
2851
|
+
}
|
|
2852
|
+
button.selected kol-span-wc > span {
|
|
2850
2853
|
border-bottom: 0.25em solid;
|
|
2851
2854
|
}
|
|
2852
2855
|
button kol-span-wc > span {
|
|
@@ -3294,7 +3297,6 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
3294
3297
|
}
|
|
3295
3298
|
ul li > :is(span, kol-link) {
|
|
3296
3299
|
line-height: 1.25rem;
|
|
3297
|
-
height: 20px;
|
|
3298
3300
|
}
|
|
3299
3301
|
ul li:last-child > span {
|
|
3300
3302
|
color: var(--color-grey);
|
|
@@ -13864,7 +13866,7 @@ const avatarCss = css_248z$A;
|
|
|
13864
13866
|
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}";
|
|
13865
13867
|
const badgeCss = css_248z$z;
|
|
13866
13868
|
|
|
13867
|
-
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
|
|
13869
|
+
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}";
|
|
13868
13870
|
const breadcrumbCss = css_248z$y;
|
|
13869
13871
|
|
|
13870
13872
|
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}";
|
|
@@ -13954,7 +13956,7 @@ const splitButtonCss = css_248z$6;
|
|
|
13954
13956
|
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}";
|
|
13955
13957
|
const tableCss = css_248z$5;
|
|
13956
13958
|
|
|
13957
|
-
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
|
|
13959
|
+
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}";
|
|
13958
13960
|
const tabsCss = css_248z$4;
|
|
13959
13961
|
|
|
13960
13962
|
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
|
@@ -2844,7 +2844,10 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
2844
2844
|
/* border-bottom: 0.025rem solid var(--color-midnight); */
|
|
2845
2845
|
color: var(--color-midnight);
|
|
2846
2846
|
}
|
|
2847
|
-
button kol-span-wc > span {
|
|
2847
|
+
button:not(.selected) kol-span-wc > span {
|
|
2848
|
+
padding-bottom: 0.25em;
|
|
2849
|
+
}
|
|
2850
|
+
button.selected kol-span-wc > span {
|
|
2848
2851
|
border-bottom: 0.25em solid;
|
|
2849
2852
|
}
|
|
2850
2853
|
button kol-span-wc > span {
|
|
@@ -3292,7 +3295,6 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
3292
3295
|
}
|
|
3293
3296
|
ul li > :is(span, kol-link) {
|
|
3294
3297
|
line-height: 1.25rem;
|
|
3295
|
-
height: 20px;
|
|
3296
3298
|
}
|
|
3297
3299
|
ul li:last-child > span {
|
|
3298
3300
|
color: var(--color-grey);
|
|
@@ -13862,7 +13864,7 @@ const avatarCss = css_248z$A;
|
|
|
13862
13864
|
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}";
|
|
13863
13865
|
const badgeCss = css_248z$z;
|
|
13864
13866
|
|
|
13865
|
-
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
|
|
13867
|
+
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}";
|
|
13866
13868
|
const breadcrumbCss = css_248z$y;
|
|
13867
13869
|
|
|
13868
13870
|
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}";
|
|
@@ -13952,7 +13954,7 @@ const splitButtonCss = css_248z$6;
|
|
|
13952
13954
|
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}";
|
|
13953
13955
|
const tableCss = css_248z$5;
|
|
13954
13956
|
|
|
13955
|
-
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
|
|
13957
|
+
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}";
|
|
13956
13958
|
const tabsCss = css_248z$4;
|
|
13957
13959
|
|
|
13958
13960
|
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/themes",
|
|
3
|
-
"version": "2.0.
|
|
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",
|
|
@@ -41,21 +41,21 @@
|
|
|
41
41
|
"wcag"
|
|
42
42
|
],
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@public-ui/schema": "2.0.
|
|
44
|
+
"@public-ui/schema": "2.0.7",
|
|
45
45
|
"@types/node": "ts5.3",
|
|
46
|
-
"@typescript-eslint/eslint-plugin": "7.0.
|
|
47
|
-
"@typescript-eslint/parser": "7.0.
|
|
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",
|
|
51
51
|
"postcss": "8.4.35",
|
|
52
52
|
"rollup-plugin-postcss": "4.0.2",
|
|
53
|
-
"sass": "1.
|
|
53
|
+
"sass": "1.71.1",
|
|
54
54
|
"typescript": "5.3.3",
|
|
55
55
|
"unbuild": "1.2.1"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
|
-
"@public-ui/components": "2.0.
|
|
58
|
+
"@public-ui/components": "2.0.7"
|
|
59
59
|
},
|
|
60
60
|
"sideEffects": false,
|
|
61
61
|
"type": "module",
|