@public-ui/theme-default 1.7.11 → 1.7.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.cjs +1 -1
  2. package/dist/index.mjs +1 -1
  3. package/package.json +4 -4
package/dist/index.cjs CHANGED
@@ -429,7 +429,7 @@ const iconCss = css_248z$p;
429
429
  var css_248z$o = ":host > div {\n background-color: var(--color-light);\n border-left: none;\n box-shadow: -2px 0px 0px var(--color-primary-variant);\n padding: 0 0.5rem;\n width: 100%;\n}";
430
430
  const indentedTextCss = css_248z$o;
431
431
 
432
- var css_248z$n = ":host kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: 0.4rem;\n}\n\n:host kol-input.default {\n grid-template-columns: 1.5rem auto;\n}\n\n:host kol-input.switch {\n grid-template-columns: 3.5rem auto;\n}\n\n:host kol-input.button {\n gap: 0.4rem 0;\n}\n\n.checkbox-container {\n justify-content: flex-start;\n}\n\n:host kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n}\n\n:host kol-input > div.input input {\n margin: 0px;\n}\n\n:host kol-input > label {\n cursor: pointer;\n order: 3;\n}\n\n:host kol-input > kol-alert.error {\n order: 1;\n padding-top: calc(var(--spacing) / 2);\n grid-column: span 2/auto;\n}\n\n:host kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\n:host kol-input.error input:focus,\nkol-input.error select:focus,\nkol-input.error textarea:focus {\n outline-color: var(--color-danger) !important;\n}\n\n:host kol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\n:host input {\n cursor: pointer;\n order: 1;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: 2px;\n border-style: solid;\n border-radius: var(--border-radius);\n line-height: 24px;\n font-size: 1rem;\n}\n\n:host input:hover {\n border-color: var(--color-primary);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n}\n\n:host input:focus:hover {\n box-shadow: none;\n}\n\n:host input:active {\n box-shadow: none;\n}\n\n:host kol-alert {\n display: block;\n width: 100%;\n}\n\n/* CHECKBOX */\n:host kol-input label span {\n margin-top: 0.125rem;\n}\n\n:host .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\n:host kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n}\n\n:host kol-input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n}\n\n:host kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: 1.5rem;\n min-width: 1.5rem;\n width: 1.5rem;\n}\n\n:host kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-primary);\n}\n\n:host kol-input.default .icon {\n color: var(--color-light);\n margin-left: 0.25rem;\n}\n\n:host kol-input.switch input[type=checkbox] {\n background-color: var(--color-subtle);\n border-radius: 1.25em;\n border-width: 0;\n display: block;\n height: 1.5em;\n min-width: 3.5em;\n position: relative;\n width: 3.5em;\n}\n\n:host kol-input.switch input[type=checkbox]:before {\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2px);\n top: calc(0.25em - 2px);\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n}\n\n:host kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n}\n\n:host kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n}\n\n:host kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n}\n\n.switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: 2px;\n}\n.switch.checked .icon {\n transform: translate(2em, -50%);\n}\n.switch.indeterminate .icon {\n transform: translate(1em, -50%);\n}\n\n:host .disabled {\n opacity: 0.33;\n}\n\n.button:focus-within {\n border-radius: var(--border-radius);\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: calc(var(--border-width) * 2);\n}";
432
+ var css_248z$n = ":host kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: 0.4rem;\n}\n\n:host kol-input.default {\n grid-template-columns: 1.5rem auto;\n}\n\n:host kol-input.switch {\n grid-template-columns: 3.5rem auto;\n}\n\n:host kol-input.button {\n gap: 0.4rem 0;\n}\n\n.checkbox-container {\n justify-content: flex-start;\n}\n\n:host kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n}\n\n:host kol-input > div.input input {\n margin: 0px;\n}\n\n:host kol-input > label {\n cursor: pointer;\n order: 3;\n}\n\n:host kol-input > kol-alert.error {\n order: 1;\n padding-top: calc(var(--spacing) / 2);\n grid-column: span 2/auto;\n}\n\n:host kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\n:host kol-input.error input:focus,\nkol-input.error select:focus,\nkol-input.error textarea:focus {\n outline-color: var(--color-danger) !important;\n}\n\n:host kol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\n:host input {\n cursor: pointer;\n order: 1;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: 2px;\n border-style: solid;\n border-radius: var(--border-radius);\n line-height: 24px;\n font-size: 1rem;\n}\n\n:host input:hover {\n border-color: var(--color-primary);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n}\n\n:host input:focus:hover {\n box-shadow: none;\n}\n\n:host input:active {\n box-shadow: none;\n}\n\n:host kol-alert {\n display: block;\n width: 100%;\n}\n\n/* CHECKBOX */\n:host kol-input label span {\n margin-top: 0.125rem;\n}\n\n:host .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\n:host kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n}\n\n:host kol-input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n}\n\n:host kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: 1.5rem;\n min-width: 1.5rem;\n width: 1.5rem;\n}\n\n:host kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-primary);\n}\n\n:host kol-input.default .icon {\n color: var(--color-light);\n margin-left: 0.25rem;\n}\n\n:host kol-input.switch input[type=checkbox] {\n background-color: var(--color-subtle);\n border-radius: 1.25em;\n border-width: 0;\n display: block;\n height: 1.5em;\n min-width: 3.5em;\n position: relative;\n width: 3.5em;\n outline: transparent solid 1px;\n}\n\n:host kol-input.switch input[type=checkbox]:before {\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2px);\n top: calc(0.25em - 2px);\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n}\n\n:host kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n}\n\n:host kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n}\n\n:host kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n}\n\n.switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: 2px;\n}\n.switch.checked .icon {\n transform: translate(2em, -50%);\n}\n.switch.indeterminate .icon {\n transform: translate(1em, -50%);\n}\n\n:host .disabled {\n opacity: 0.33;\n}\n\n.button:focus-within {\n border-radius: var(--border-radius);\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: calc(var(--border-width) * 2);\n}";
433
433
  const inputCheckboxCss = css_248z$n;
434
434
 
435
435
  var css_248z$m = "kol-input {\n gap: 0.25rem;\n}\n\nkol-input .error {\n order: 1;\n}\n\nkol-input label {\n order: 2;\n}\n\nkol-input .input {\n order: 3;\n}\n\nkol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n}\n\ninput {\n border: none;\n}\n\ninput[type=color] {\n border: none;\n min-height: 40px !important;\n}\n\ninput[type=color] {\n background-color: transparent;\n}\n\ninput::placeholder {\n color: var(--color-subtle);\n}\n\n.input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5rem;\n}\n\n.input > kol-icon {\n width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n padding-right: var(--spacing);\n}\n\n.input:hover {\n border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n cursor: not-allowed;\n}\n\n.required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\nkol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\nkol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n}\n\nkol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\nkol-input.disabled :is(input, label) {\n opacity: 1;\n}\n\nkol-input.disabled :is(input, .input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n}";
package/dist/index.mjs CHANGED
@@ -427,7 +427,7 @@ const iconCss = css_248z$p;
427
427
  var css_248z$o = ":host > div {\n background-color: var(--color-light);\n border-left: none;\n box-shadow: -2px 0px 0px var(--color-primary-variant);\n padding: 0 0.5rem;\n width: 100%;\n}";
428
428
  const indentedTextCss = css_248z$o;
429
429
 
430
- var css_248z$n = ":host kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: 0.4rem;\n}\n\n:host kol-input.default {\n grid-template-columns: 1.5rem auto;\n}\n\n:host kol-input.switch {\n grid-template-columns: 3.5rem auto;\n}\n\n:host kol-input.button {\n gap: 0.4rem 0;\n}\n\n.checkbox-container {\n justify-content: flex-start;\n}\n\n:host kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n}\n\n:host kol-input > div.input input {\n margin: 0px;\n}\n\n:host kol-input > label {\n cursor: pointer;\n order: 3;\n}\n\n:host kol-input > kol-alert.error {\n order: 1;\n padding-top: calc(var(--spacing) / 2);\n grid-column: span 2/auto;\n}\n\n:host kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\n:host kol-input.error input:focus,\nkol-input.error select:focus,\nkol-input.error textarea:focus {\n outline-color: var(--color-danger) !important;\n}\n\n:host kol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\n:host input {\n cursor: pointer;\n order: 1;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: 2px;\n border-style: solid;\n border-radius: var(--border-radius);\n line-height: 24px;\n font-size: 1rem;\n}\n\n:host input:hover {\n border-color: var(--color-primary);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n}\n\n:host input:focus:hover {\n box-shadow: none;\n}\n\n:host input:active {\n box-shadow: none;\n}\n\n:host kol-alert {\n display: block;\n width: 100%;\n}\n\n/* CHECKBOX */\n:host kol-input label span {\n margin-top: 0.125rem;\n}\n\n:host .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\n:host kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n}\n\n:host kol-input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n}\n\n:host kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: 1.5rem;\n min-width: 1.5rem;\n width: 1.5rem;\n}\n\n:host kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-primary);\n}\n\n:host kol-input.default .icon {\n color: var(--color-light);\n margin-left: 0.25rem;\n}\n\n:host kol-input.switch input[type=checkbox] {\n background-color: var(--color-subtle);\n border-radius: 1.25em;\n border-width: 0;\n display: block;\n height: 1.5em;\n min-width: 3.5em;\n position: relative;\n width: 3.5em;\n}\n\n:host kol-input.switch input[type=checkbox]:before {\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2px);\n top: calc(0.25em - 2px);\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n}\n\n:host kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n}\n\n:host kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n}\n\n:host kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n}\n\n.switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: 2px;\n}\n.switch.checked .icon {\n transform: translate(2em, -50%);\n}\n.switch.indeterminate .icon {\n transform: translate(1em, -50%);\n}\n\n:host .disabled {\n opacity: 0.33;\n}\n\n.button:focus-within {\n border-radius: var(--border-radius);\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: calc(var(--border-width) * 2);\n}";
430
+ var css_248z$n = ":host kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: 0.4rem;\n}\n\n:host kol-input.default {\n grid-template-columns: 1.5rem auto;\n}\n\n:host kol-input.switch {\n grid-template-columns: 3.5rem auto;\n}\n\n:host kol-input.button {\n gap: 0.4rem 0;\n}\n\n.checkbox-container {\n justify-content: flex-start;\n}\n\n:host kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n}\n\n:host kol-input > div.input input {\n margin: 0px;\n}\n\n:host kol-input > label {\n cursor: pointer;\n order: 3;\n}\n\n:host kol-input > kol-alert.error {\n order: 1;\n padding-top: calc(var(--spacing) / 2);\n grid-column: span 2/auto;\n}\n\n:host kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\n:host kol-input.error input:focus,\nkol-input.error select:focus,\nkol-input.error textarea:focus {\n outline-color: var(--color-danger) !important;\n}\n\n:host kol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\n:host input {\n cursor: pointer;\n order: 1;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: 2px;\n border-style: solid;\n border-radius: var(--border-radius);\n line-height: 24px;\n font-size: 1rem;\n}\n\n:host input:hover {\n border-color: var(--color-primary);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n}\n\n:host input:focus:hover {\n box-shadow: none;\n}\n\n:host input:active {\n box-shadow: none;\n}\n\n:host kol-alert {\n display: block;\n width: 100%;\n}\n\n/* CHECKBOX */\n:host kol-input label span {\n margin-top: 0.125rem;\n}\n\n:host .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\n:host kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n}\n\n:host kol-input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n}\n\n:host kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: 1.5rem;\n min-width: 1.5rem;\n width: 1.5rem;\n}\n\n:host kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-primary);\n}\n\n:host kol-input.default .icon {\n color: var(--color-light);\n margin-left: 0.25rem;\n}\n\n:host kol-input.switch input[type=checkbox] {\n background-color: var(--color-subtle);\n border-radius: 1.25em;\n border-width: 0;\n display: block;\n height: 1.5em;\n min-width: 3.5em;\n position: relative;\n width: 3.5em;\n outline: transparent solid 1px;\n}\n\n:host kol-input.switch input[type=checkbox]:before {\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2px);\n top: calc(0.25em - 2px);\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n}\n\n:host kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n}\n\n:host kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n}\n\n:host kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n}\n\n.switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: 2px;\n}\n.switch.checked .icon {\n transform: translate(2em, -50%);\n}\n.switch.indeterminate .icon {\n transform: translate(1em, -50%);\n}\n\n:host .disabled {\n opacity: 0.33;\n}\n\n.button:focus-within {\n border-radius: var(--border-radius);\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: calc(var(--border-width) * 2);\n}";
431
431
  const inputCheckboxCss = css_248z$n;
432
432
 
433
433
  var css_248z$m = "kol-input {\n gap: 0.25rem;\n}\n\nkol-input .error {\n order: 1;\n}\n\nkol-input label {\n order: 2;\n}\n\nkol-input .input {\n order: 3;\n}\n\nkol-input .hint {\n order: 4;\n font-size: 0.9rem;\n font-style: italic;\n}\n\ninput {\n border: none;\n}\n\ninput[type=color] {\n border: none;\n min-height: 40px !important;\n}\n\ninput[type=color] {\n background-color: transparent;\n}\n\ninput::placeholder {\n color: var(--color-subtle);\n}\n\n.input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5rem;\n}\n\n.input > kol-icon {\n width: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.input:is(.icon-left, .icon-right) input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.input > input:first-child {\n padding-left: var(--spacing);\n}\n\n.input > input:last-child {\n padding-right: var(--spacing);\n}\n\n.input:hover {\n border-color: var(--color-primary);\n}\n\ninput:read-only,\ninput:disabled {\n cursor: not-allowed;\n}\n\n.required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n}\n\nkol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: 1rem;\n}\n\nkol-input.error .input:focus-within {\n outline-color: var(--color-danger) !important;\n}\n\nkol-input.error kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n}\n\nkol-input.disabled :is(input, label) {\n opacity: 1;\n}\n\nkol-input.disabled :is(input, .input) {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n}";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/theme-default",
3
- "version": "1.7.11",
3
+ "version": "1.7.12",
4
4
  "license": "EUPL-1.2",
5
5
  "homepage": "https://public-ui.github.io",
6
6
  "repository": "https://github.com/public-ui/kolibri",
@@ -38,8 +38,8 @@
38
38
  "wcag"
39
39
  ],
40
40
  "devDependencies": {
41
- "@public-ui/schema": "1.7.11",
42
- "@public-ui/visual-tests": "1.7.11",
41
+ "@public-ui/schema": "1.7.12",
42
+ "@public-ui/visual-tests": "1.7.12",
43
43
  "@types/node": "ts5.3",
44
44
  "@typescript-eslint/eslint-plugin": "7.0.1",
45
45
  "@typescript-eslint/parser": "7.0.1",
@@ -50,7 +50,7 @@
50
50
  "unbuild": "1.2.1"
51
51
  },
52
52
  "peerDependencies": {
53
- "@public-ui/components": "1.7.11"
53
+ "@public-ui/components": "1.7.12"
54
54
  },
55
55
  "sideEffects": false,
56
56
  "type": "module",