@public-ui/themes 2.0.5 → 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 +49 -41
- package/dist/index.mjs +49 -41
- package/package.json +6 -6
package/dist/index.cjs
CHANGED
|
@@ -611,57 +611,63 @@ var TagEnum = /* @__PURE__ */ ((TagEnum2) => {
|
|
|
611
611
|
TagEnum2[TagEnum2["tree-item"] = 49] = "tree-item";
|
|
612
612
|
return TagEnum2;
|
|
613
613
|
})(TagEnum || {});
|
|
614
|
-
|
|
615
|
-
const
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
614
|
+
let DEV_MODE = null;
|
|
615
|
+
const getDevMode = () => DEV_MODE === true;
|
|
616
|
+
const LOG_STYLE = "color: white; background: #666; font-weight: bold; padding: .25em .5em; border-radius: 3px; border: 1px solid #000";
|
|
617
|
+
const mapToArray = (msg) => {
|
|
618
|
+
return Array.isArray(msg) ? msg : [msg];
|
|
619
|
+
};
|
|
620
|
+
const getLogLabel = (label) => {
|
|
621
|
+
return `%c${label}`;
|
|
622
|
+
};
|
|
623
|
+
const handleClassifier = (label, classifier) => {
|
|
624
|
+
if (typeof classifier === "string" && classifier.length > 0) {
|
|
625
|
+
return `${getLogLabel(label)} | ${classifier}`;
|
|
626
|
+
} else {
|
|
627
|
+
return getLogLabel(label);
|
|
625
628
|
}
|
|
626
|
-
|
|
627
|
-
|
|
629
|
+
};
|
|
630
|
+
const getShield = (label, options) => {
|
|
631
|
+
return [handleClassifier(label, options?.classifier), `${LOG_STYLE};${options?.overwriteStyle || ""}`];
|
|
632
|
+
};
|
|
633
|
+
const isDevModeOrForceLog = (devMode, forceLog) => devMode() || forceLog === true;
|
|
634
|
+
class Logger {
|
|
635
|
+
constructor(label, devMode) {
|
|
636
|
+
this.label = label;
|
|
637
|
+
this.devMode = devMode;
|
|
628
638
|
}
|
|
629
|
-
|
|
630
|
-
if (options?.forceLog
|
|
631
|
-
console.debug(...
|
|
639
|
+
debug(msg, options) {
|
|
640
|
+
if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
|
|
641
|
+
console.debug(...getShield(this.label, options), ...mapToArray(msg));
|
|
632
642
|
}
|
|
633
643
|
}
|
|
634
|
-
|
|
635
|
-
if (options?.forceLog
|
|
636
|
-
console.info(...
|
|
644
|
+
info(msg, options) {
|
|
645
|
+
if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
|
|
646
|
+
console.info(...getShield(this.label, options), ...mapToArray(msg));
|
|
637
647
|
}
|
|
638
648
|
}
|
|
639
|
-
|
|
640
|
-
if (options?.forceLog
|
|
641
|
-
console.trace(...
|
|
649
|
+
trace(msg, options) {
|
|
650
|
+
if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
|
|
651
|
+
console.trace(...getShield(this.label, options), ...mapToArray(msg));
|
|
642
652
|
}
|
|
643
653
|
}
|
|
644
|
-
|
|
645
|
-
if (options?.forceLog
|
|
646
|
-
console.warn(...
|
|
654
|
+
warn(msg, options) {
|
|
655
|
+
if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
|
|
656
|
+
console.warn(...getShield(this.label, options), ...mapToArray(msg));
|
|
647
657
|
}
|
|
648
658
|
}
|
|
649
|
-
|
|
650
|
-
if (options?.forceLog
|
|
651
|
-
console.error(...
|
|
659
|
+
error(msg, options) {
|
|
660
|
+
if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
|
|
661
|
+
console.error(...getShield(this.label, options), ...mapToArray(msg));
|
|
652
662
|
}
|
|
653
663
|
}
|
|
654
|
-
|
|
655
|
-
if (options?.forceLog
|
|
656
|
-
throw new Error(...
|
|
664
|
+
throw(msg, options) {
|
|
665
|
+
if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
|
|
666
|
+
throw new Error(...getShield(this.label, options), ...mapToArray(msg));
|
|
657
667
|
}
|
|
658
668
|
}
|
|
659
|
-
}
|
|
660
|
-
|
|
661
|
-
Log.shield = {
|
|
662
|
-
label: "%cKoliBri",
|
|
663
|
-
style: "color: white; background: #666; font-weight: bold; padding: .25em .5em; border-radius: 3px; border: 1px solid #000"
|
|
664
|
-
};
|
|
669
|
+
}
|
|
670
|
+
const Log = new Logger("KoliBri", getDevMode);
|
|
665
671
|
const devCache = /* @__PURE__ */ new Set();
|
|
666
672
|
const devHint = (msg, options) => {
|
|
667
673
|
if (devCache.has(msg) === false || !!options?.force) {
|
|
@@ -2840,7 +2846,10 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
2840
2846
|
/* border-bottom: 0.025rem solid var(--color-midnight); */
|
|
2841
2847
|
color: var(--color-midnight);
|
|
2842
2848
|
}
|
|
2843
|
-
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 {
|
|
2844
2853
|
border-bottom: 0.25em solid;
|
|
2845
2854
|
}
|
|
2846
2855
|
button kol-span-wc > span {
|
|
@@ -3288,7 +3297,6 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
3288
3297
|
}
|
|
3289
3298
|
ul li > :is(span, kol-link) {
|
|
3290
3299
|
line-height: 1.25rem;
|
|
3291
|
-
height: 20px;
|
|
3292
3300
|
}
|
|
3293
3301
|
ul li:last-child > span {
|
|
3294
3302
|
color: var(--color-grey);
|
|
@@ -13858,7 +13866,7 @@ const avatarCss = css_248z$A;
|
|
|
13858
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}";
|
|
13859
13867
|
const badgeCss = css_248z$z;
|
|
13860
13868
|
|
|
13861
|
-
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}";
|
|
13862
13870
|
const breadcrumbCss = css_248z$y;
|
|
13863
13871
|
|
|
13864
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}";
|
|
@@ -13948,7 +13956,7 @@ const splitButtonCss = css_248z$6;
|
|
|
13948
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}";
|
|
13949
13957
|
const tableCss = css_248z$5;
|
|
13950
13958
|
|
|
13951
|
-
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}";
|
|
13952
13960
|
const tabsCss = css_248z$4;
|
|
13953
13961
|
|
|
13954
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
|
@@ -609,57 +609,63 @@ var TagEnum = /* @__PURE__ */ ((TagEnum2) => {
|
|
|
609
609
|
TagEnum2[TagEnum2["tree-item"] = 49] = "tree-item";
|
|
610
610
|
return TagEnum2;
|
|
611
611
|
})(TagEnum || {});
|
|
612
|
-
|
|
613
|
-
const
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
612
|
+
let DEV_MODE = null;
|
|
613
|
+
const getDevMode = () => DEV_MODE === true;
|
|
614
|
+
const LOG_STYLE = "color: white; background: #666; font-weight: bold; padding: .25em .5em; border-radius: 3px; border: 1px solid #000";
|
|
615
|
+
const mapToArray = (msg) => {
|
|
616
|
+
return Array.isArray(msg) ? msg : [msg];
|
|
617
|
+
};
|
|
618
|
+
const getLogLabel = (label) => {
|
|
619
|
+
return `%c${label}`;
|
|
620
|
+
};
|
|
621
|
+
const handleClassifier = (label, classifier) => {
|
|
622
|
+
if (typeof classifier === "string" && classifier.length > 0) {
|
|
623
|
+
return `${getLogLabel(label)} | ${classifier}`;
|
|
624
|
+
} else {
|
|
625
|
+
return getLogLabel(label);
|
|
623
626
|
}
|
|
624
|
-
|
|
625
|
-
|
|
627
|
+
};
|
|
628
|
+
const getShield = (label, options) => {
|
|
629
|
+
return [handleClassifier(label, options?.classifier), `${LOG_STYLE};${options?.overwriteStyle || ""}`];
|
|
630
|
+
};
|
|
631
|
+
const isDevModeOrForceLog = (devMode, forceLog) => devMode() || forceLog === true;
|
|
632
|
+
class Logger {
|
|
633
|
+
constructor(label, devMode) {
|
|
634
|
+
this.label = label;
|
|
635
|
+
this.devMode = devMode;
|
|
626
636
|
}
|
|
627
|
-
|
|
628
|
-
if (options?.forceLog
|
|
629
|
-
console.debug(...
|
|
637
|
+
debug(msg, options) {
|
|
638
|
+
if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
|
|
639
|
+
console.debug(...getShield(this.label, options), ...mapToArray(msg));
|
|
630
640
|
}
|
|
631
641
|
}
|
|
632
|
-
|
|
633
|
-
if (options?.forceLog
|
|
634
|
-
console.info(...
|
|
642
|
+
info(msg, options) {
|
|
643
|
+
if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
|
|
644
|
+
console.info(...getShield(this.label, options), ...mapToArray(msg));
|
|
635
645
|
}
|
|
636
646
|
}
|
|
637
|
-
|
|
638
|
-
if (options?.forceLog
|
|
639
|
-
console.trace(...
|
|
647
|
+
trace(msg, options) {
|
|
648
|
+
if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
|
|
649
|
+
console.trace(...getShield(this.label, options), ...mapToArray(msg));
|
|
640
650
|
}
|
|
641
651
|
}
|
|
642
|
-
|
|
643
|
-
if (options?.forceLog
|
|
644
|
-
console.warn(...
|
|
652
|
+
warn(msg, options) {
|
|
653
|
+
if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
|
|
654
|
+
console.warn(...getShield(this.label, options), ...mapToArray(msg));
|
|
645
655
|
}
|
|
646
656
|
}
|
|
647
|
-
|
|
648
|
-
if (options?.forceLog
|
|
649
|
-
console.error(...
|
|
657
|
+
error(msg, options) {
|
|
658
|
+
if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
|
|
659
|
+
console.error(...getShield(this.label, options), ...mapToArray(msg));
|
|
650
660
|
}
|
|
651
661
|
}
|
|
652
|
-
|
|
653
|
-
if (options?.forceLog
|
|
654
|
-
throw new Error(...
|
|
662
|
+
throw(msg, options) {
|
|
663
|
+
if (isDevModeOrForceLog(this.devMode, options?.forceLog)) {
|
|
664
|
+
throw new Error(...getShield(this.label, options), ...mapToArray(msg));
|
|
655
665
|
}
|
|
656
666
|
}
|
|
657
|
-
}
|
|
658
|
-
|
|
659
|
-
Log.shield = {
|
|
660
|
-
label: "%cKoliBri",
|
|
661
|
-
style: "color: white; background: #666; font-weight: bold; padding: .25em .5em; border-radius: 3px; border: 1px solid #000"
|
|
662
|
-
};
|
|
667
|
+
}
|
|
668
|
+
const Log = new Logger("KoliBri", getDevMode);
|
|
663
669
|
const devCache = /* @__PURE__ */ new Set();
|
|
664
670
|
const devHint = (msg, options) => {
|
|
665
671
|
if (devCache.has(msg) === false || !!options?.force) {
|
|
@@ -2838,7 +2844,10 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
2838
2844
|
/* border-bottom: 0.025rem solid var(--color-midnight); */
|
|
2839
2845
|
color: var(--color-midnight);
|
|
2840
2846
|
}
|
|
2841
|
-
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 {
|
|
2842
2851
|
border-bottom: 0.25em solid;
|
|
2843
2852
|
}
|
|
2844
2853
|
button kol-span-wc > span {
|
|
@@ -3286,7 +3295,6 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
3286
3295
|
}
|
|
3287
3296
|
ul li > :is(span, kol-link) {
|
|
3288
3297
|
line-height: 1.25rem;
|
|
3289
|
-
height: 20px;
|
|
3290
3298
|
}
|
|
3291
3299
|
ul li:last-child > span {
|
|
3292
3300
|
color: var(--color-grey);
|
|
@@ -13856,7 +13864,7 @@ const avatarCss = css_248z$A;
|
|
|
13856
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}";
|
|
13857
13865
|
const badgeCss = css_248z$z;
|
|
13858
13866
|
|
|
13859
|
-
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}";
|
|
13860
13868
|
const breadcrumbCss = css_248z$y;
|
|
13861
13869
|
|
|
13862
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}";
|
|
@@ -13946,7 +13954,7 @@ const splitButtonCss = css_248z$6;
|
|
|
13946
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}";
|
|
13947
13955
|
const tableCss = css_248z$5;
|
|
13948
13956
|
|
|
13949
|
-
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}";
|
|
13950
13958
|
const tabsCss = css_248z$4;
|
|
13951
13959
|
|
|
13952
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",
|