+
+
+
In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält. Er wird standardmäßig
als inline-Element ausgegeben.
diff --git a/packages/schema/package.json b/packages/schema/package.json
index b42f19c0bc..acdaafb303 100644
--- a/packages/schema/package.json
+++ b/packages/schema/package.json
@@ -45,7 +45,7 @@
"depcheck": "depcheck --ignore-bin-package --skip-missing --ignores=@types/*",
"dev": "nodemon --exec unbuild --ext js,json,ts --watch src",
"format": "prettier --check src",
- "lint": "eslint src && tsc --noemit",
+ "lint": "tsc --noemit && eslint src",
"prepack": "unbuild"
},
"dependencies": {
@@ -54,10 +54,13 @@
"color-rgba": "2.4.0",
"rgba-convert": "0.3.0",
"query-selector-all-shadow-root": "0.0.3",
- "query-selector-shadow-root": "0.0.3"
+ "query-selector-shadow-root": "0.0.3",
+ "wcag-contrast": "3.0.0"
},
"devDependencies": {
+ "@types/color-convert": "2.0.3",
"@types/node": "ts5.3",
+ "@types/wcag-contrast": "3.0.3",
"@typescript-eslint/eslint-plugin": "6.19.1",
"@typescript-eslint/parser": "6.19.1",
"eslint": "8.56.0",
diff --git a/packages/schema/src/components/accordion.ts b/packages/schema/src/components/accordion.ts
index 980b111072..2dc27d04cc 100644
--- a/packages/schema/src/components/accordion.ts
+++ b/packages/schema/src/components/accordion.ts
@@ -1,6 +1,6 @@
import type { Generic } from 'adopted-style-sheets';
import type { Events } from '../enums';
-import type { HeadingLevel, PropLabel, PropOpen } from '../props';
+import type { HeadingLevel, PropDisabled, PropLabel, PropOpen } from '../props';
import type { EventValueOrEventCallback } from '../types';
export type KoliBriAccordionCallbacks = {
@@ -11,7 +11,8 @@ type RequiredProps = PropLabel;
type OptionalProps = {
level: HeadingLevel;
on: KoliBriAccordionCallbacks;
-} & PropOpen;
+} & PropDisabled &
+ PropOpen;
type RequiredStates = RequiredProps & PropLabel;
type OptionalStates = OptionalProps;
diff --git a/packages/schema/src/components/details.ts b/packages/schema/src/components/details.ts
index b0613922c8..cdf31b57f4 100644
--- a/packages/schema/src/components/details.ts
+++ b/packages/schema/src/components/details.ts
@@ -1,6 +1,6 @@
import type { Generic } from 'adopted-style-sheets';
-import type { PropLabel, PropOpen } from '../props';
+import type { PropDisabled, PropLabel, PropOpen } from '../props';
import type { EventValueOrEventCallback } from '../types';
export type EventCallbacks = {
@@ -10,7 +10,8 @@ export type EventCallbacks = {
type RequiredProps = PropLabel;
type OptionalProps = {
on: EventCallbacks;
-} & PropOpen;
+} & PropDisabled &
+ PropOpen;
type RequiredStates = RequiredProps;
type OptionalStates = OptionalProps;
diff --git a/packages/schema/src/components/link.ts b/packages/schema/src/components/link.ts
index c21daa34c4..ff0c9dfbe3 100644
--- a/packages/schema/src/components/link.ts
+++ b/packages/schema/src/components/link.ts
@@ -3,6 +3,7 @@ import type {
PropAccessKey,
PropAlternativeButtonLinkRole,
PropAriaCurrentValue,
+ PropDisabled,
PropDownload,
PropHideLabel,
PropHref,
@@ -22,8 +23,9 @@ export type RequiredProps = PropHref;
export type OptionalProps = {
tabIndex: number;
} & PropAccessKey &
- PropAriaCurrentValue &
PropAlternativeButtonLinkRole &
+ PropAriaCurrentValue &
+ PropDisabled &
PropDownload &
PropHideLabel &
PropIcons &
diff --git a/packages/schema/src/props/disabled.ts b/packages/schema/src/props/disabled.ts
index b80932686b..813dcdaf65 100644
--- a/packages/schema/src/props/disabled.ts
+++ b/packages/schema/src/props/disabled.ts
@@ -1,6 +1,6 @@
import type { Generic } from 'adopted-style-sheets';
-import { watchBoolean } from '../utils';
+import { a11yHintDisabled, watchBoolean } from '../utils';
/* types */
export type DisabledPropType = boolean;
@@ -14,5 +14,13 @@ export type PropDisabled = {
/* validator */
export const validateDisabled = (component: Generic.Element.Component, value?: DisabledPropType): void => {
- watchBoolean(component, '_disabled', value);
+ watchBoolean(component, '_disabled', value, {
+ hooks: {
+ afterPatch: (value) => {
+ if (value === true) {
+ a11yHintDisabled();
+ }
+ },
+ },
+ });
};
diff --git a/packages/themes/bmf/package.json b/packages/themes/bmf/package.json
index e5fbc11022..558489d918 100644
--- a/packages/themes/bmf/package.json
+++ b/packages/themes/bmf/package.json
@@ -5,7 +5,7 @@
"scripts": {
"depcheck": "depcheck --ignore-bin-package --skip-missing --ignores=@types/*",
"format": "prettier --check src",
- "lint": "eslint src && tsc --noemit",
+ "lint": "tsc --noemit && eslint src",
"test": "THEME_MODULE=src/index THEME_EXPORT=BMF kolibri-visual-test",
"test-update": "THEME_MODULE=src/index THEME_EXPORT=BMF kolibri-visual-test --update-snapshots theme-snapshots.spec.js"
},
diff --git a/packages/themes/bmf/src/index.ts b/packages/themes/bmf/src/index.ts
index 575031fb13..c1f74a918f 100644
--- a/packages/themes/bmf/src/index.ts
+++ b/packages/themes/bmf/src/index.ts
@@ -132,10 +132,6 @@ export const BMF = KoliBri.createTheme('bmf', {
transition-duration: 0.5s;
transition-property: background-color, color, border-color;
}
- :is(a, button):disabled > kol-span-wc {
- cursor: not-allowed;
- opacity: 0.5;
- }
.primary :is(a, button) > kol-span-wc,
.primary :is(a, button):disabled:hover > kol-span-wc {
background-color: var(--color-midnight);
@@ -227,11 +223,11 @@ export const BMF = KoliBri.createTheme('bmf', {
border-color: transparent;
}
/** CUSTOM_CLASS */
- :is(a, button).icon-only > kol-span-wc {
+ :is(a, button).hide-label > kol-span-wc {
padding: 8px;
width: unset;
}
- :is(a, button).icon-only > kol-span-wc > span > span {
+ :is(a, button).hide-label > kol-span-wc > span > span {
display: block;
}
`,
@@ -309,9 +305,6 @@ export const BMF = KoliBri.createTheme('bmf', {
color: var(--color-red);
font-weight: 700;
}
- kol-input.disabled :is(input, label) {
- opacity: 1;
- }
kol-input.disabled :is(input, .input) {
background-color: var(--color-smoke);
border-color: var(--color-granite);
@@ -391,9 +384,6 @@ export const BMF = KoliBri.createTheme('bmf', {
color: var(--color-red);
font-weight: 700;
}
- kol-input.disabled :is(button, input, label, option, select, textarea) {
- opacity: 1;
- }
kol-input.disabled :is(input, select, textarea, .input) {
background-color: var(--color-smoke);
border-color: var(--color-granite);
@@ -474,9 +464,6 @@ export const BMF = KoliBri.createTheme('bmf', {
color: var(--color-red);
font-weight: 700;
}
- kol-input.disabled :is(input, label) {
- opacity: 1;
- }
kol-input.disabled :is(input, .input) {
background-color: var(--color-smoke);
border-color: var(--color-granite);
@@ -557,9 +544,6 @@ export const BMF = KoliBri.createTheme('bmf', {
color: var(--color-red);
font-weight: 700;
}
- kol-input.disabled :is(input, label) {
- opacity: 1;
- }
kol-input.disabled :is(input, .input) {
background-color: var(--color-smoke);
border-color: var(--color-granite);
@@ -640,9 +624,6 @@ export const BMF = KoliBri.createTheme('bmf', {
color: var(--color-red);
font-weight: 700;
}
- kol-input.disabled :is(input, label) {
- opacity: 1;
- }
kol-input.disabled :is(input, .input) {
background-color: var(--color-smoke);
border-color: var(--color-granite);
@@ -729,9 +710,6 @@ export const BMF = KoliBri.createTheme('bmf', {
color: var(--color-red);
font-weight: 700;
}
- kol-input.disabled :is(button, input, label, option, select, textarea) {
- opacity: 1;
- }
kol-input.disabled :is(input, select, textarea, .input) {
background-color: var(--color-smoke);
border-color: var(--color-granite);
@@ -824,9 +802,6 @@ export const BMF = KoliBri.createTheme('bmf', {
color: var(--color-red);
font-weight: 700;
}
- .disabled {
- opacity: 0.33;
- }
select[multiple],
textarea {
overflow: auto;
@@ -1411,9 +1386,6 @@ export const BMF = KoliBri.createTheme('bmf', {
color: var(--color-red);
font-weight: 700;
}
- kol-input.disabled :is(select, label, option) {
- opacity: 1;
- }
kol-input.disabled :is(select, .input) {
background-color: var(--color-smoke);
border-color: var(--color-granite);
@@ -1522,9 +1494,6 @@ export const BMF = KoliBri.createTheme('bmf', {
color: var(--color-red);
font-weight: 700;
}
- kol-input.disabled :is(input, label) {
- opacity: 1;
- }
kol-input.disabled :is(input, .input) {
background-color: var(--color-smoke);
border-color: var(--color-granite);
@@ -1964,9 +1933,6 @@ export const BMF = KoliBri.createTheme('bmf', {
}
}
}
- :host .disabled {
- opacity: 0.33;
- }
:host kol-input.button {
row-gap: 0.5rem;
}
@@ -2128,9 +2094,6 @@ export const BMF = KoliBri.createTheme('bmf', {
color: var(--color-red);
font-weight: 700;
}
- .disabled {
- opacity: 0.33;
- }
fieldset.horizontal {
display: flex;
flex-wrap: wrap;
@@ -2162,10 +2125,6 @@ export const BMF = KoliBri.createTheme('bmf', {
:host {
font-family: var(--font-family);
}
- button:disabled {
- opacity: 0.5;
- cursor: not-allowed;
- }
:host kol-button-group-wc {
display: inline-flex;
gap: 2rem;
@@ -2362,14 +2321,9 @@ export const BMF = KoliBri.createTheme('bmf', {
border-color: var(--color-white);
outline: none;
}
- .button:disabled .button-inner {
- cursor: not-allowed;
- opacity: 0.5;
- }
.selected .button-inner {
background-color: var(--color-ice);
border-color: var(--color-ice);
- opacity: 1 !important;
font-weight: 700;
}
`,
@@ -2443,9 +2397,6 @@ export const BMF = KoliBri.createTheme('bmf', {
color: var(--color-red);
font-weight: 700;
}
- kol-input.disabled :is(input, label) {
- opacity: 1;
- }
kol-input.disabled :is(.input) {
background-color: var(--color-smoke);
border-color: var(--color-granite);
@@ -2486,10 +2437,6 @@ export const BMF = KoliBri.createTheme('bmf', {
transition-duration: 0.5s;
transition-property: background-color, color, border-color;
}
- :is(a, button):disabled > kol-span-wc {
- cursor: not-allowed;
- opacity: 0.5;
- }
.primary :is(a, button) > kol-span-wc,
.primary :is(a, button):disabled:hover > kol-span-wc {
background-color: var(--color-midnight);
diff --git a/packages/themes/default/package.json b/packages/themes/default/package.json
index f1091a947f..fe3281ee0f 100644
--- a/packages/themes/default/package.json
+++ b/packages/themes/default/package.json
@@ -41,7 +41,7 @@
"build": "unbuild",
"depcheck": "depcheck --ignore-bin-package --skip-missing --ignores=@types/*",
"format": "prettier --check src",
- "lint": "eslint src && tsc --noemit",
+ "lint": "tsc --noemit && eslint src",
"prepack": "unbuild",
"test": "THEME_MODULE=dist THEME_EXPORT=DEFAULT kolibri-visual-test",
"test-update": "THEME_MODULE=dist THEME_EXPORT=DEFAULT kolibri-visual-test --update-snapshots theme-snapshots.spec.js",
diff --git a/packages/themes/default/src/components/button.scss b/packages/themes/default/src/components/button.scss
index 3b77dc4439..d2446c571d 100644
--- a/packages/themes/default/src/components/button.scss
+++ b/packages/themes/default/src/components/button.scss
@@ -7,9 +7,11 @@
:is(a, button):focus {
outline: none;
}
+
:is(a, button):focus kol-span-wc {
@include focus-outline;
}
+
:is(a, button) > kol-span-wc {
font-weight: 700;
border-radius: var(--border-radius);
@@ -22,16 +24,14 @@
transition-duration: 0.5s;
transition-property: background-color, color, border-color;
}
- :is(a, button):disabled > kol-span-wc {
- cursor: not-allowed;
- opacity: 0.5;
- }
+
.primary :is(a, button) > kol-span-wc,
.primary :is(a, button):disabled:hover > kol-span-wc {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-light);
}
+
.secondary :is(a, button) > kol-span-wc,
.secondary :is(a, button):disabled:hover > kol-span-wc,
.normal :is(a, button) > kol-span-wc,
@@ -40,19 +40,23 @@
border-color: var(--color-primary);
color: var(--color-primary);
}
+
.danger :is(a, button) > kol-span-wc,
.danger :is(a, button):disabled:hover > kol-span-wc {
background-color: var(--color-danger);
border-color: var(--color-danger);
color: var(--color-light);
}
+
.ghost :is(a, button) > kol-span-wc,
.ghost :is(a, button):disabled:hover > kol-span-wc {
border-color: var(--color-light);
background-color: var(--color-light);
box-shadow: none;
color: var(--color-primary);
- } /*-----------*/
+ }
+
+ /*-----------*/
.primary :is(a, button):active > kol-span-wc,
.primary :is(a, button):hover > kol-span-wc,
.secondary :is(a, button):active > kol-span-wc,
@@ -68,15 +72,18 @@
box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);
color: var(--color-light);
}
+
.danger :is(a, button):active > kol-span-wc,
.danger :is(a, button):hover > kol-span-wc {
background-color: var(--color-danger);
border-color: var(--color-danger);
}
+
:is(a, button):disabled:hover > kol-span-wc,
:is(a, button):focus:hover > kol-span-wc {
box-shadow: none;
}
+
.primary :is(a, button):active > kol-span-wc,
.secondary :is(a, button):active > kol-span-wc,
.normal :is(a, button):active > kol-span-wc,
@@ -86,22 +93,27 @@
box-shadow: none;
outline: none;
}
+
:is(a, button).hide-label > kol-span-wc {
padding: 0.8rem;
width: unset;
}
+
:is(a, button).hide-label > kol-span-wc > span > span {
display: none;
}
+
:is(a, button).loading > kol-span-wc kol-icon {
animation: spin 5s infinite linear;
}
+
/** small ghost button */
.ghost :is(a, button).small > kol-span-wc {
border: none;
background-color: transparent;
box-shadow: none;
}
+
.ghost :is(a, button).small > kol-span-wc > span {
border-radius: 1.5em;
border-style: solid;
@@ -109,6 +121,7 @@
border-color: var(--color-light);
background-color: var(--color-light);
}
+
.ghost :is(a, button).small:active > kol-span-wc > span,
.ghost :is(a, button).small:hover > kol-span-wc > span,
.ghost :is(a, button).small.transparent:active > kol-span-wc > span,
@@ -117,13 +130,16 @@
border-color: var(--color-primary-variant);
box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);
color: var(--color-light);
- } /** :is(a,button) with transparent background */
+ }
+
+ /** :is(a,button) with transparent background */
:is(a, button).transparent > kol-span-wc > span,
.ghost :is(a, button).small.transparent > kol-span-wc > span,
:is(a, button).transparent > kol-span-wc {
background-color: transparent;
border-color: transparent;
}
+
.access-key-hint {
background: var(--color-mute-variant);
border-radius: 3px;
diff --git a/packages/themes/default/src/components/input-checkbox.scss b/packages/themes/default/src/components/input-checkbox.scss
index f68a4a07c9..c85ff1ac58 100644
--- a/packages/themes/default/src/components/input-checkbox.scss
+++ b/packages/themes/default/src/components/input-checkbox.scss
@@ -12,48 +12,60 @@
min-height: var(--a11y-min-size);
gap: 0.4rem;
}
+
:host kol-input.default {
grid-template-columns: 1.5rem auto;
}
+
:host kol-input.switch {
grid-template-columns: 3.5rem auto;
}
+
:host kol-input.button {
gap: 0.4rem 0;
}
+
.checkbox-container {
justify-content: flex-start;
}
+
:host kol-input > div.input {
display: inherit;
min-height: var(--a11y-min-size);
order: 2;
}
+
:host kol-input > div.input input {
margin: 0px;
}
+
:host kol-input > label {
cursor: pointer;
order: 3;
}
+
:host kol-input > kol-alert.error {
order: 1;
padding-top: calc(var(--spacing) / 2);
grid-column: span 2 / auto;
}
+
:host kol-input.error {
border-left: 3px solid var(--color-danger);
padding-left: 1rem;
}
+
:host kol-input.error input:focus,
kol-input.error select:focus,
kol-input.error textarea:focus {
outline-color: var(--color-danger) !important;
}
+
:host kol-input.error kol-alert.error {
color: var(--color-danger);
font-weight: 700;
}
+
:host input {
cursor: pointer;
order: 1;
@@ -65,46 +77,58 @@
line-height: 24px;
font-size: 1rem;
}
+
:host input:hover {
border-color: var(--color-primary);
box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
}
+
:host input:focus:hover {
box-shadow: none;
}
+
:host input:active {
box-shadow: none;
}
+
:host kol-alert {
display: block;
width: 100%;
- } /* CHECKBOX */
+ }
+
+ /* CHECKBOX */
:host kol-input label span {
margin-top: 0.125rem;
}
+
:host .required label > span::after {
content: '*';
padding-left: 0.125em;
}
+
:host kol-input input[type='checkbox'] {
appearance: none;
background-color: white;
cursor: pointer;
transition: 0.5s;
}
+
:host kol-input input[type='checkbox']:checked {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
+
:host kol-input.default input[type='checkbox'] {
border-radius: var(--border-radius);
height: calc(6 * 0.25rem);
min-width: calc(6 * 0.25rem);
width: calc(6 * 0.25rem);
}
+
:host kol-input.default input[type='checkbox']:indeterminate {
background-color: var(--color-primary);
}
+
:host kol-input.default .icon {
color: var(--color-light);
margin-left: 0.25rem;
@@ -120,6 +144,7 @@
position: relative;
width: 3.5em;
}
+
:host kol-input.switch input[type='checkbox']:before {
width: 1.25em;
height: 1.25em;
@@ -129,15 +154,19 @@
background-color: white;
position: absolute;
}
+
:host kol-input.switch input[type='checkbox']:checked {
background-color: var(--color-primary);
}
+
:host kol-input.switch input[type='checkbox']:checked:before {
transform: translateX(2em);
}
+
:host kol-input.switch input[type='checkbox']:indeterminate:before {
transform: translateX(1em);
}
+
.switch {
& .icon {
width: 1.25em;
@@ -153,9 +182,7 @@
transform: translate(1em, -50%);
}
}
- :host .disabled {
- opacity: 0.33;
- }
+
.button:focus-within {
@include focus-outline;
}
diff --git a/packages/themes/default/src/components/input-color.scss b/packages/themes/default/src/components/input-color.scss
index d8c943f3ff..2f8635608c 100644
--- a/packages/themes/default/src/components/input-color.scss
+++ b/packages/themes/default/src/components/input-color.scss
@@ -5,33 +5,42 @@
kol-input {
gap: 0.25rem;
}
+
kol-input .error {
order: 1;
}
+
kol-input label {
order: 2;
}
+
kol-input .input {
order: 3;
}
+
kol-input .hint {
order: 4;
font-size: 0.9rem;
font-style: italic;
}
+
input {
border: none;
}
+
input[type='color'] {
border: none;
min-height: 40px !important;
}
+
input[type='color'] {
background-color: transparent;
}
+
input::placeholder {
color: var(--color-subtle);
}
+
.input {
background-color: var(--color-light);
border-color: var(--color-subtle);
@@ -40,47 +49,56 @@
border-width: 2px;
padding: 0 0.5rem;
}
+
.input > kol-icon {
width: 1rem;
}
+
.input:is(.icon-left, .icon-right) {
padding-left: 1rem;
padding-right: 1rem;
}
+
.input:is(.icon-left, .icon-right) input {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
+
.input > input:first-child {
padding-left: var(--spacing);
}
+
.input > input:last-child {
padding-right: var(--spacing);
}
+
.input:hover {
border-color: var(--color-primary);
}
+
input:disabled {
cursor: not-allowed;
}
+
.required label > span::after {
content: '*';
padding-left: 0.125em;
}
+
kol-input.error {
border-left: 3px solid var(--color-danger);
padding-left: 1rem;
}
+
kol-input.error .input:focus-within {
outline-color: var(--color-danger) !important;
}
+
kol-input.error kol-alert.error {
color: var(--color-danger);
font-weight: 700;
}
- kol-input.disabled :is(input, label) {
- opacity: 1;
- }
+
kol-input.disabled :is(input, .input) {
background-color: var(--color-mute);
border-color: var(--color-mute-variant);
diff --git a/packages/themes/default/src/components/input-date.scss b/packages/themes/default/src/components/input-date.scss
index bbac137fdf..3c9c2e2933 100644
--- a/packages/themes/default/src/components/input-date.scss
+++ b/packages/themes/default/src/components/input-date.scss
@@ -5,26 +5,33 @@
kol-input {
gap: 0.25rem;
}
+
kol-input .error {
order: 1;
}
+
kol-input label {
order: 2;
}
+
kol-input .input {
order: 3;
}
+
kol-input .hint {
order: 4;
font-size: 0.9rem;
font-style: italic;
}
+
input {
border: none;
}
+
input::placeholder {
color: var(--color-subtle);
}
+
.input {
background-color: var(--color-light);
border-color: var(--color-subtle);
@@ -33,47 +40,56 @@
border-width: 2px;
padding: 0 0.5rem;
}
+
.input > kol-icon {
width: 1rem;
}
+
.input:is(.icon-left, .icon-right) {
padding-left: 1rem;
padding-right: 1rem;
}
+
.input:is(.icon-left, .icon-right) input {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
+
.input > input:first-child {
padding-left: var(--spacing);
}
+
.input > input:last-child {
padding-right: var(--spacing);
}
+
.input:hover {
border-color: var(--color-primary);
}
+
input:disabled {
cursor: not-allowed;
}
+
.required label > span::after {
content: '*';
padding-left: 0.125em;
}
+
kol-input.error {
border-left: 3px solid var(--color-danger);
padding-left: 1rem;
}
+
kol-input.error .input:focus-within {
outline-color: var(--color-danger) !important;
}
+
kol-input.error kol-alert.error {
color: var(--color-danger);
font-weight: 700;
}
- kol-input.disabled :is(input, label) {
- opacity: 1;
- }
+
kol-input.disabled :is(input, .input) {
background-color: var(--color-mute);
border-color: var(--color-mute-variant);
diff --git a/packages/themes/default/src/components/input-email.scss b/packages/themes/default/src/components/input-email.scss
index bbac137fdf..3c9c2e2933 100644
--- a/packages/themes/default/src/components/input-email.scss
+++ b/packages/themes/default/src/components/input-email.scss
@@ -5,26 +5,33 @@
kol-input {
gap: 0.25rem;
}
+
kol-input .error {
order: 1;
}
+
kol-input label {
order: 2;
}
+
kol-input .input {
order: 3;
}
+
kol-input .hint {
order: 4;
font-size: 0.9rem;
font-style: italic;
}
+
input {
border: none;
}
+
input::placeholder {
color: var(--color-subtle);
}
+
.input {
background-color: var(--color-light);
border-color: var(--color-subtle);
@@ -33,47 +40,56 @@
border-width: 2px;
padding: 0 0.5rem;
}
+
.input > kol-icon {
width: 1rem;
}
+
.input:is(.icon-left, .icon-right) {
padding-left: 1rem;
padding-right: 1rem;
}
+
.input:is(.icon-left, .icon-right) input {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
+
.input > input:first-child {
padding-left: var(--spacing);
}
+
.input > input:last-child {
padding-right: var(--spacing);
}
+
.input:hover {
border-color: var(--color-primary);
}
+
input:disabled {
cursor: not-allowed;
}
+
.required label > span::after {
content: '*';
padding-left: 0.125em;
}
+
kol-input.error {
border-left: 3px solid var(--color-danger);
padding-left: 1rem;
}
+
kol-input.error .input:focus-within {
outline-color: var(--color-danger) !important;
}
+
kol-input.error kol-alert.error {
color: var(--color-danger);
font-weight: 700;
}
- kol-input.disabled :is(input, label) {
- opacity: 1;
- }
+
kol-input.disabled :is(input, .input) {
background-color: var(--color-mute);
border-color: var(--color-mute-variant);
diff --git a/packages/themes/default/src/components/input-file.scss b/packages/themes/default/src/components/input-file.scss
index 07ee06f5e1..a6060c1677 100644
--- a/packages/themes/default/src/components/input-file.scss
+++ b/packages/themes/default/src/components/input-file.scss
@@ -5,32 +5,41 @@
kol-input {
gap: 0.25rem;
}
+
kol-input .error {
order: 1;
}
+
kol-input label {
order: 2;
}
+
kol-input .input {
order: 3;
}
+
kol-input .hint {
order: 4;
font-size: 0.9rem;
font-style: italic;
}
+
kol-input .input input[type='file'] {
padding-top: calc(0.5em + 2px);
}
+
input {
border: none;
}
+
input[type='file'] {
background-color: transparent;
}
+
input::placeholder {
color: var(--color-subtle);
}
+
.input {
background-color: var(--color-light);
border-color: var(--color-subtle);
@@ -39,47 +48,56 @@
border-width: 2px;
padding: 0 0.5rem;
}
+
.input > kol-icon {
width: 1rem;
}
+
.input:is(.icon-left, .icon-right) {
padding-left: 1rem;
padding-right: 1rem;
}
+
.input:is(.icon-left, .icon-right) input {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
+
.input > input:first-child {
padding-left: var(--spacing);
}
+
.input > input:last-child {
padding-right: var(--spacing);
}
+
.input:hover {
border-color: var(--color-primary);
}
+
input:disabled {
cursor: not-allowed;
}
+
.required label > span::after {
content: '*';
padding-left: 0.125em;
}
+
kol-input.error {
border-left: 3px solid var(--color-danger);
padding-left: 1rem;
}
+
kol-input.error .input:focus-within {
outline-color: var(--color-danger) !important;
}
+
kol-input.error kol-alert.error {
color: var(--color-danger);
font-weight: 700;
}
- kol-input.disabled :is(button, input, label, option, select, textarea) {
- opacity: 1;
- }
+
kol-input.disabled :is(input, select, textarea, .input) {
background-color: var(--color-mute);
border-color: var(--color-mute-variant);
diff --git a/packages/themes/default/src/components/input-number.scss b/packages/themes/default/src/components/input-number.scss
index bbac137fdf..3c9c2e2933 100644
--- a/packages/themes/default/src/components/input-number.scss
+++ b/packages/themes/default/src/components/input-number.scss
@@ -5,26 +5,33 @@
kol-input {
gap: 0.25rem;
}
+
kol-input .error {
order: 1;
}
+
kol-input label {
order: 2;
}
+
kol-input .input {
order: 3;
}
+
kol-input .hint {
order: 4;
font-size: 0.9rem;
font-style: italic;
}
+
input {
border: none;
}
+
input::placeholder {
color: var(--color-subtle);
}
+
.input {
background-color: var(--color-light);
border-color: var(--color-subtle);
@@ -33,47 +40,56 @@
border-width: 2px;
padding: 0 0.5rem;
}
+
.input > kol-icon {
width: 1rem;
}
+
.input:is(.icon-left, .icon-right) {
padding-left: 1rem;
padding-right: 1rem;
}
+
.input:is(.icon-left, .icon-right) input {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
+
.input > input:first-child {
padding-left: var(--spacing);
}
+
.input > input:last-child {
padding-right: var(--spacing);
}
+
.input:hover {
border-color: var(--color-primary);
}
+
input:disabled {
cursor: not-allowed;
}
+
.required label > span::after {
content: '*';
padding-left: 0.125em;
}
+
kol-input.error {
border-left: 3px solid var(--color-danger);
padding-left: 1rem;
}
+
kol-input.error .input:focus-within {
outline-color: var(--color-danger) !important;
}
+
kol-input.error kol-alert.error {
color: var(--color-danger);
font-weight: 700;
}
- kol-input.disabled :is(input, label) {
- opacity: 1;
- }
+
kol-input.disabled :is(input, .input) {
background-color: var(--color-mute);
border-color: var(--color-mute-variant);
diff --git a/packages/themes/default/src/components/input-password.scss b/packages/themes/default/src/components/input-password.scss
index 4a6a33c4a0..a70e337428 100644
--- a/packages/themes/default/src/components/input-password.scss
+++ b/packages/themes/default/src/components/input-password.scss
@@ -5,26 +5,33 @@
kol-input {
gap: 0.25rem;
}
+
kol-input .error {
order: 1;
}
+
kol-input label {
order: 2;
}
+
kol-input .input {
order: 3;
}
+
kol-input .hint {
order: 4;
font-size: 0.9rem;
font-style: italic;
}
+
input {
border: none;
}
+
input::placeholder {
color: var(--color-subtle);
}
+
.input {
background-color: var(--color-light);
border-color: var(--color-subtle);
@@ -33,47 +40,56 @@
border-width: 2px;
padding: 0 0.5rem;
}
+
.input > kol-icon {
width: 1rem;
}
+
.input:is(.icon-left, .icon-right) {
padding-left: 1rem;
padding-right: 1rem;
}
+
.input:is(.icon-left, .icon-right) input {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
+
.input > input:first-child {
padding-left: var(--spacing);
}
+
.input > input:last-child {
padding-right: var(--spacing);
}
+
.input:hover {
border-color: var(--color-primary);
}
+
input:disabled {
cursor: not-allowed;
}
+
.required label > span::after {
content: '*';
padding-left: 0.125em;
}
+
kol-input.error {
border-left: 3px solid var(--color-danger);
padding-left: 1rem;
}
+
kol-input.error .input:focus-within {
outline-color: var(--color-danger) !important;
}
+
kol-input.error kol-alert.error {
color: var(--color-danger);
font-weight: 700;
}
- kol-input.disabled :is(button, input, label, option, select, textarea) {
- opacity: 1;
- }
+
kol-input.disabled :is(input, select, textarea, .input) {
background-color: var(--color-mute);
border-color: var(--color-mute-variant);
diff --git a/packages/themes/default/src/components/input-radio.scss b/packages/themes/default/src/components/input-radio.scss
index f25425f54c..166a305759 100644
--- a/packages/themes/default/src/components/input-radio.scss
+++ b/packages/themes/default/src/components/input-radio.scss
@@ -9,6 +9,7 @@
gap: calc(var(--spacing) * 2);
width: 100%;
}
+
input {
cursor: pointer;
width: 100%;
@@ -18,24 +19,31 @@
border-radius: 5px;
line-height: 24px;
}
+
input:hover {
border-color: var(--color-primary);
box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
}
+
input:focus:hover {
box-shadow: none;
}
+
input:hover {
border-color: var(--color-primary);
}
+
kol-alert {
display: block;
width: 100%;
}
+
.required legend > span::after {
content: '*';
padding-left: 0.125em;
- } /* RADIO */
+ }
+
+ /* RADIO */
fieldset {
border: 0px;
margin: 0px;
@@ -43,6 +51,7 @@
display: grid;
gap: 0.25em;
}
+
.radio-input-wrapper {
align-items: center;
cursor: pointer;
@@ -53,15 +62,18 @@
min-height: var(--a11y-min-size);
position: relative;
}
+
.radio-input-wrapper label {
cursor: pointer;
display: flex;
padding-left: calc(var(--spacing) / 2);
width: 100%;
}
+
.radio-input-wrapper label span {
margin-top: 0.125em;
}
+
.radio-input-wrapper input[type='radio'] {
appearance: none;
transition: 0.5s;
@@ -70,60 +82,70 @@
min-width: calc(6 * 0.25rem);
width: calc(6 * 0.25rem);
}
+
.radio-input-wrapper input[type='radio']:before {
content: '';
cursor: pointer;
border-radius: 100%;
display: block;
}
+
.radio-input-wrapper input[type='radio']:checked:before {
background-color: var(--color-primary);
}
+
.radio-input-wrapper input[type='radio']:disabled {
cursor: not-allowed;
background-color: var(--color-mute-variant);
}
+
kol-alert.error {
order: 1;
}
+
fieldset legend {
order: 2;
display: contents;
}
+
fieldset kol-input {
order: 3;
}
+
fieldset.error {
border-left: 3px solid var(--color-danger);
color: var(--color-danger);
font-weight: 700;
padding-left: 1rem;
}
+
fieldset.error input:focus,
fieldset.error select:focus,
fieldset.error textarea:focus {
outline-color: var(--color-danger) !important;
}
+
fieldset.error kol-alert.error {
margin-left: -0.25em;
color: var(--color-danger);
font-weight: 700;
}
- .disabled {
- opacity: 0.33;
- }
+
fieldset.horizontal {
display: flex;
flex-wrap: wrap;
gap: var(--spacing) calc(var(--spacing) * 2);
}
+
fieldset.horizontal legend {
display: inline-block;
margin-bottom: calc(var(--spacing) / 2);
}
+
fieldset .input-slot {
gap: var(--spacing);
}
+
.radio-input-wrapper label {
padding-left: 0;
}
diff --git a/packages/themes/default/src/components/input-range.scss b/packages/themes/default/src/components/input-range.scss
index c68c9fd185..5d48dd8160 100644
--- a/packages/themes/default/src/components/input-range.scss
+++ b/packages/themes/default/src/components/input-range.scss
@@ -5,26 +5,33 @@
.inputs-wrapper {
gap: 1rem;
}
+
kol-input {
gap: 0.25rem;
}
+
kol-input .error {
order: 1;
}
+
kol-input label {
order: 2;
}
+
kol-input .input {
order: 3;
}
+
kol-input .hint {
order: 4;
font-size: 0.9rem;
font-style: italic;
}
+
input::placeholder {
color: var(--color-subtle);
}
+
.input {
background-color: var(--color-light);
border-color: var(--color-subtle);
@@ -33,43 +40,51 @@
border-width: 2px;
padding: 0 0.5rem;
}
+
.input > kol-icon {
width: 1rem;
}
+
.input.icon-left > kol-icon:first-child {
margin-right: 0.5rem;
}
+
.input.icon-right > kol-icon:last-child {
margin-left: 0.5rem;
}
+
.input:is(.icon-left, .icon-right) {
padding-left: 1rem;
padding-right: 1rem;
}
+
.input:hover {
border-color: var(--color-primary);
}
+
input:disabled {
cursor: not-allowed;
}
+
.required label > span::after {
content: '*';
padding-left: 0.125em;
}
+
kol-input.error {
border-left: 3px solid var(--color-danger);
padding-left: 1rem;
}
+
kol-input.error .input:focus-within {
outline-color: var(--color-danger) !important;
}
+
kol-input.error kol-alert.error {
color: var(--color-danger);
font-weight: 700;
}
- kol-input.disabled :is(input, label) {
- opacity: 1;
- }
+
kol-input.disabled :is(.input) {
background-color: var(--color-mute);
border-color: var(--color-mute-variant);
diff --git a/packages/themes/default/src/components/input-text.scss b/packages/themes/default/src/components/input-text.scss
index bf7283a1d4..01fe5982ce 100644
--- a/packages/themes/default/src/components/input-text.scss
+++ b/packages/themes/default/src/components/input-text.scss
@@ -5,26 +5,33 @@
kol-input {
gap: 0.25rem;
}
+
kol-input .error {
order: 1;
}
+
kol-input label {
order: 2;
}
+
kol-input .input {
order: 3;
}
+
kol-input .hint {
order: 4;
font-size: 0.9rem;
font-style: italic;
}
+
input {
border: none;
}
+
input::placeholder {
color: var(--color-subtle);
}
+
.input {
background-color: var(--color-light);
border-color: var(--color-subtle);
@@ -33,47 +40,56 @@
border-width: 2px;
padding: 0 0.5rem;
}
+
.input > kol-icon {
width: 1rem;
}
+
.input:is(.icon-left, .icon-right) {
padding-left: 1rem;
padding-right: 1rem;
}
+
.input:is(.icon-left, .icon-right) input {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
+
.input > input:first-child {
padding-left: var(--spacing);
}
+
.input > input:last-child {
padding-right: var(--spacing);
}
+
.input:hover {
border-color: var(--color-primary);
}
+
input:disabled {
cursor: not-allowed;
}
+
.required label > span::after {
content: '*';
padding-left: 0.125em;
}
+
kol-input.error {
border-left: 3px solid var(--color-danger);
padding-left: 1rem;
}
+
kol-input.error .input:focus-within {
outline-color: var(--color-danger) !important;
}
+
kol-input.error kol-alert.error {
color: var(--color-danger);
font-weight: 700;
}
- kol-input.disabled :is(input, label) {
- opacity: 1;
- }
+
kol-input.disabled :is(input, .input) {
background-color: var(--color-mute);
border-color: var(--color-mute-variant);
diff --git a/packages/themes/default/src/components/link-button.scss b/packages/themes/default/src/components/link-button.scss
index 0c2500f5c6..f5c5946e2e 100644
--- a/packages/themes/default/src/components/link-button.scss
+++ b/packages/themes/default/src/components/link-button.scss
@@ -5,6 +5,7 @@
:is(a, button):focus {
outline: none;
}
+
:is(a, button):focus kol-span-wc {
outline-color: var(--color-primary-variant);
outline-offset: 2px;
@@ -12,6 +13,7 @@
outline-width: calc(var(--border-width) * 2);
transition: outline-offset 0.2s linear;
}
+
:is(a, button) > kol-span-wc {
font-weight: 700;
border-radius: var(--a11y-min-size);
@@ -24,16 +26,14 @@
transition-duration: 0.5s;
transition-property: background-color, color, border-color;
}
- :is(a, button):disabled > kol-span-wc {
- cursor: not-allowed;
- opacity: 0.5;
- }
+
.primary :is(a, button) > kol-span-wc,
.primary :is(a, button):disabled:hover > kol-span-wc {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-light);
}
+
.secondary :is(a, button) > kol-span-wc,
.secondary :is(a, button):disabled:hover > kol-span-wc,
.normal :is(a, button) > kol-span-wc,
@@ -42,19 +42,23 @@
border-color: var(--color-primary);
color: var(--color-primary);
}
+
.danger :is(a, button) > kol-span-wc,
.danger :is(a, button):disabled:hover > kol-span-wc {
background-color: var(--color-danger);
border-color: var(--color-danger);
color: var(--color-light);
}
+
.ghost :is(a, button) > kol-span-wc,
.ghost :is(a, button):disabled:hover > kol-span-wc {
border-color: var(--color-light);
background-color: var(--color-light);
box-shadow: none;
color: var(--color-primary);
- } /*-----------*/
+ }
+
+ /*-----------*/
.primary :is(a, button):active > kol-span-wc,
.primary :is(a, button):hover > kol-span-wc,
.secondary :is(a, button):active > kol-span-wc,
@@ -70,15 +74,18 @@
box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
color: var(--color-light);
}
+
.danger :is(a, button):active > kol-span-wc,
.danger :is(a, button):hover > kol-span-wc {
background-color: var(--color-danger);
border-color: var(--color-danger);
}
+
:is(a, button):disabled:hover > kol-span-wc,
:is(a, button):focus:hover > kol-span-wc {
box-shadow: none;
}
+
.primary :is(a, button):active > kol-span-wc,
.secondary :is(a, button):active > kol-span-wc,
.normal :is(a, button):active > kol-span-wc,
@@ -88,22 +95,27 @@
box-shadow: none;
outline: none;
}
+
:is(a, button).hide-label > kol-span-wc {
padding: 0.8rem;
width: unset;
}
+
:is(a, button).hide-label > kol-span-wc > span > span {
display: none;
}
+
:is(a, button).loading > kol-span-wc kol-icon {
animation: spin 5s infinite linear;
}
+
/** small ghost button */
.ghost :is(a, button).small > kol-span-wc {
border: none;
background-color: transparent;
box-shadow: none;
}
+
.ghost :is(a, button).small > kol-span-wc > span {
border-radius: 1.5em;
border-style: solid;
@@ -111,6 +123,7 @@
border-color: var(--color-light);
background-color: var(--color-light);
}
+
.ghost :is(a, button).small:active > kol-span-wc > span,
.ghost :is(a, button).small:hover > kol-span-wc > span,
.ghost :is(a, button).small.transparent:active > kol-span-wc > span,
@@ -119,7 +132,9 @@
border-color: var(--color-primary-variant);
box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
color: var(--color-light);
- } /** :is(a,button) with transparent background */
+ }
+
+ /** :is(a,button) with transparent background */
:is(a, button).transparent > kol-span-wc > span,
.ghost :is(a, button).small.transparent > kol-span-wc > span,
:is(a, button).transparent > kol-span-wc {
diff --git a/packages/themes/default/src/components/pagination.scss b/packages/themes/default/src/components/pagination.scss
index b8eb88a07d..5666fb4250 100644
--- a/packages/themes/default/src/components/pagination.scss
+++ b/packages/themes/default/src/components/pagination.scss
@@ -7,6 +7,7 @@
.button:focus {
outline: none;
}
+
.button-inner {
background-color: var(--color-light);
border-radius: var(--border-radius);
@@ -20,27 +21,26 @@
transition-duration: 0.5s;
transition-property: background-color, color, border-color;
}
+
.button:focus .button-inner {
@include focus-outline;
}
+
.button:is(:active, :hover):not(:disabled) .button-inner {
background-color: var(--color-primary-variant);
border-color: var(--color-primary-variant);
box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);
color: var(--color-light);
}
+
.button:active .button-inner {
color: var(--color-light);
outline: none;
}
- .button:disabled .button-inner {
- cursor: not-allowed;
- opacity: 0.5;
- }
+
.selected .button-inner {
background-color: var(--color-mute-variant);
border-radius: var(--a11y-min-size);
border: 0;
- opacity: 1 !important;
}
}
diff --git a/packages/themes/default/src/components/select.scss b/packages/themes/default/src/components/select.scss
index 54893c2068..da71608073 100644
--- a/packages/themes/default/src/components/select.scss
+++ b/packages/themes/default/src/components/select.scss
@@ -5,26 +5,33 @@
kol-input {
gap: 0.25rem;
}
+
kol-input .error {
order: 1;
}
+
kol-input label {
order: 2;
}
+
kol-input .input {
order: 3;
}
+
kol-input .hint {
order: 4;
font-size: 0.9rem;
font-style: italic;
}
+
select {
border: none;
}
+
input::placeholder {
color: var(--color-subtle);
}
+
.input {
background-color: var(--color-light);
border-color: var(--color-subtle);
@@ -33,65 +40,79 @@
border-width: 2px;
padding: 0 0.5rem;
}
+
.input > kol-icon {
width: 2rem;
}
+
.input:is(.icon-left, .icon-right) {
padding-left: 1rem;
padding-right: 1rem;
}
+
.input:is(.icon-left, .icon-right) input {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
+
.input > input:first-child {
padding-left: var(--spacing);
}
+
.input > input:last-child {
padding-right: var(--spacing);
}
+
.input:hover {
border-color: var(--color-primary);
}
+
select:disabled {
cursor: not-allowed;
}
+
.required label > span::after {
content: '*';
padding-left: 0.125em;
}
+
kol-input.error {
border-left: 3px solid var(--color-danger);
padding-left: 1rem;
}
+
kol-input.error .input:focus-within {
outline-color: var(--color-danger) !important;
}
+
kol-input.error kol-alert.error {
color: var(--color-danger);
font-weight: 700;
}
- kol-input.disabled :is(select, label, option) {
- opacity: 1;
- }
+
kol-input.disabled :is(select, .input) {
background-color: var(--color-mute);
border-color: var(--color-mute-variant);
}
+
select[multiple] {
overflow: auto;
}
+
select option {
margin: 1px 0;
border-radius: var(--border-radius);
cursor: pointer;
}
+
select option:disabled {
cursor: not-allowed;
}
+
select:not([multiple]) option {
padding: 0.5em;
}
+
option:active:not(:disabled),
option:checked:not(:disabled),
option:focus:not(:disabled),
diff --git a/packages/themes/default/src/components/tabs.scss b/packages/themes/default/src/components/tabs.scss
index 1387c83e1e..6786d22748 100644
--- a/packages/themes/default/src/components/tabs.scss
+++ b/packages/themes/default/src/components/tabs.scss
@@ -3,11 +3,6 @@
font-family: var(--font-family);
}
- button:disabled {
- opacity: 0.5;
- cursor: not-allowed;
- }
-
:host kol-button-group-wc {
display: inline-flex;
gap: 2rem;
diff --git a/packages/themes/default/src/components/textarea.scss b/packages/themes/default/src/components/textarea.scss
index 4f08801d92..a3b30d80c7 100644
--- a/packages/themes/default/src/components/textarea.scss
+++ b/packages/themes/default/src/components/textarea.scss
@@ -5,29 +5,37 @@
kol-input {
gap: 0.25rem;
}
+
kol-input .error {
order: 1;
}
+
kol-input label {
order: 2;
}
+
kol-input .input {
order: 3;
}
+
kol-input .counter {
order: 4;
}
+
kol-input .hint {
order: 5;
font-size: 0.9rem;
font-style: italic;
}
+
textarea {
border: none;
}
+
input::placeholder {
color: var(--color-subtle);
}
+
.input {
background-color: var(--color-light);
border-color: var(--color-subtle);
@@ -36,54 +44,65 @@
border-width: 2px;
padding: 0 0.5rem;
}
+
.input > kol-icon {
width: 1rem;
}
+
.input:is(.icon-left, .icon-right) {
padding-left: 1rem;
padding-right: 1rem;
}
+
.input:is(.icon-left, .icon-right) input {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
+
.input > input:first-child {
padding-left: var(--spacing);
}
+
.input > input:last-child {
padding-right: var(--spacing);
}
+
.input:hover {
border-color: var(--color-primary);
}
+
textarea:disabled {
cursor: not-allowed;
}
+
.required label > span::after {
content: '*';
padding-left: 0.125em;
}
+
kol-input.error {
border-left: 3px solid var(--color-danger);
padding-left: 1rem;
}
+
kol-input.error .input:focus-within {
outline-color: var(--color-danger) !important;
}
+
kol-input.error kol-alert.error {
color: var(--color-danger);
font-weight: 700;
}
- .disabled {
- opacity: 0.33;
- }
+
select[multiple],
textarea {
overflow: auto;
}
+
textarea {
display: block;
}
+
.input {
position: relative;
}
diff --git a/packages/themes/ecl/package.json b/packages/themes/ecl/package.json
index d3c2054565..13dc1800ed 100644
--- a/packages/themes/ecl/package.json
+++ b/packages/themes/ecl/package.json
@@ -5,7 +5,7 @@
"scripts": {
"depcheck": "depcheck --ignore-bin-package --skip-missing --ignores=@types/*",
"format": "prettier --check src",
- "lint": "eslint src && tsc --noemit",
+ "lint": "tsc --noemit && eslint src",
"xtest": "npm-run-all test:*",
"test:ecl-ec": "THEME_MODULE=src/index THEME_EXPORT=ECL_EC kolibri-visual-test",
"test:ecl-eu": "THEME_MODULE=src/index THEME_EXPORT=ECL_EU kolibri-visual-test",
diff --git a/packages/themes/itzbund/package.json b/packages/themes/itzbund/package.json
index 4925a029cb..15155bc6c7 100644
--- a/packages/themes/itzbund/package.json
+++ b/packages/themes/itzbund/package.json
@@ -5,7 +5,7 @@
"scripts": {
"depcheck": "depcheck --ignore-bin-package --skip-missing --ignores=@types/*",
"format": "prettier --check src",
- "lint": "eslint src && tsc --noemit",
+ "lint": "tsc --noemit && eslint src",
"xtest": "THEME_MODULE=src/index THEME_EXPORT=ITZBund kolibri-visual-test",
"xtest-update": "THEME_MODULE=src/index THEME_EXPORT=ITZBund kolibri-visual-test --update-snapshots theme-snapshots.spec.js"
},
diff --git a/packages/themes/itzbund/src/index.ts b/packages/themes/itzbund/src/index.ts
index ee8163f029..aa6f5e6b55 100644
--- a/packages/themes/itzbund/src/index.ts
+++ b/packages/themes/itzbund/src/index.ts
@@ -337,16 +337,11 @@ export const ITZBund = KoliBri.createTheme('itzbund', {
border-color: var(--color-anthrazit);
color: var(--color-weiss);
}
- .button:disabled .button-inner {
- cursor: not-allowed;
- opacity: 0.5;
- }
.selected .button-inner {
background-color: var(--color-achat);
border-color: var(--color-achat);
color: var(--color-weiss);
font-weight: bold;
- opacity: 1 !important;
text-decoration: underline;
}
`,
@@ -1413,9 +1408,6 @@ export const ITZBund = KoliBri.createTheme('itzbund', {
.switch:is(:not(.checked), .indeterminate) .icon {
color: #fff;
}
- .disabled {
- opacity: 0.33;
- }
kol-input span.hint {
grid-column: span 2;
font-style: italic;
@@ -1579,10 +1571,6 @@ export const ITZBund = KoliBri.createTheme('itzbund', {
align-items: center;
justify-content: center;
}
- button:disabled {
- cursor: not-allowed;
- opacity: 0.5;
- }
button.primary,
button.primary:disabled:hover {
background-color: var(--kolibri-color-primary);
diff --git a/packages/themes/package.json b/packages/themes/package.json
index 8f804a5f09..6f032d99b7 100644
--- a/packages/themes/package.json
+++ b/packages/themes/package.json
@@ -44,7 +44,7 @@
"build": "unbuild",
"depcheck": "depcheck --ignore-bin-package --skip-missing --ignores=@public-ui/schema,@types/*",
"format": "prettier --check src",
- "lint": "eslint src && tsc --noemit",
+ "lint": "tsc --noemit && eslint src",
"prepack": "unbuild",
"dev": "nodemon --ignore dist -e ts,tsx,scss --exec \"pnpm build\"",
"test-all": "pnpm -r --workspace-concurrency=1 test",
diff --git a/packages/tools/kolibri-cli/package.json b/packages/tools/kolibri-cli/package.json
index 342819d9be..fc898ec8e7 100644
--- a/packages/tools/kolibri-cli/package.json
+++ b/packages/tools/kolibri-cli/package.json
@@ -20,7 +20,7 @@
"reset": "pnpm i @public-ui/components@1.1.7",
"depcheck": "depcheck --ignores=\"@public-ui/components,deepmerge,loglevel,mocha\"",
"format": "prettier -c src",
- "lint": "eslint src && tsc --noEmit",
+ "lint": "tsc --noemit && eslint src",
"prepack": "tsc",
"start": "rimraf test && cpy \"../../samples/react/src/components\" test/src && cpy \"../../samples/react/public/*.html\" test/ && ts-node src/index.ts migrate --ignore-uncommitted-changes --test-tasks test",
"restart": "pnpm reset && pnpm start",
From ee26b61bce3b17db0734b5b2f656fc94cf6c0064 Mon Sep 17 00:00:00 2001
From: Martin Oppitz <6279703+deleonio@users.noreply.github.com>
Date: Fri, 9 Feb 2024 06:05:36 +0100
Subject: [PATCH 02/18] feat: optimize click event for details
---
.../src/components/details/component.tsx | 21 +++++++++++++------
1 file changed, 15 insertions(+), 6 deletions(-)
diff --git a/packages/components/src/components/details/component.tsx b/packages/components/src/components/details/component.tsx
index 00de170edd..d0f47d9732 100644
--- a/packages/components/src/components/details/component.tsx
+++ b/packages/components/src/components/details/component.tsx
@@ -30,13 +30,17 @@ export class KolDetails implements DetailsAPI {
this.detailsElement = ref as HTMLDetailsElement;
};
- private readonly catchRef = (ref?: HTMLElement) => {
+ private readonly catchSummary = (ref?: HTMLElement) => {
this.summaryElement = ref;
propagateFocus(this.host, this.summaryElement);
- /* Handle disabled, because the toogle event is to late. */
+ };
+
+ /**
+ * Handle disabled, because the toggle event is to late.
+ */
+ private readonly preventToggleIfDisabled = (event: Event) => {
if (this.state._disabled === true) {
- this.summaryElement?.removeEventListener('click', preventDefault);
- this.summaryElement?.addEventListener('click', preventDefault);
+ preventDefault(event);
}
};
@@ -44,14 +48,19 @@ export class KolDetails implements DetailsAPI {
return (
-
+
{this.state._label}
From f930cfb44e97bc0b0f543498854d73b2e311abf7 Mon Sep 17 00:00:00 2001
From: deleonio
Date: Fri, 9 Feb 2024 05:18:37 +0000
Subject: [PATCH 03/18] Update all snapshots
---
...shot-for-accordion-basic-firefox-linux.png | Bin 17867 -> 18450 bytes
...napshot-for-button-basic-firefox-linux.png | Bin 72420 -> 74601 bytes
...t-for-button-group-basic-firefox-linux.png | Bin 10038 -> 10340 bytes
...ot-for-button-hide-label-firefox-linux.png | Bin 11566 -> 11870 bytes
...ot-for-button-link-basic-firefox-linux.png | Bin 55174 -> 54907 bytes
...napshot-for-button-width-firefox-linux.png | Bin 26541 -> 27427 bytes
...apshot-for-details-basic-firefox-linux.png | Bin 34636 -> 64402 bytes
...apshot-for-handout-basic-firefox-linux.png | Bin 384851 -> 385150 bytes
...for-input-checkbox-basic-firefox-linux.png | Bin 59437 -> 60741 bytes
...or-input-checkbox-button-firefox-linux.png | Bin 63015 -> 64252 bytes
...or-input-checkbox-switch-firefox-linux.png | Bin 63639 -> 65093 bytes
...ot-for-input-color-basic-firefox-linux.png | Bin 54255 -> 54188 bytes
...hot-for-input-date-basic-firefox-linux.png | Bin 97710 -> 97460 bytes
...ot-for-input-email-basic-firefox-linux.png | Bin 66993 -> 66602 bytes
...hot-for-input-file-basic-firefox-linux.png | Bin 64852 -> 64122 bytes
...t-for-input-number-basic-firefox-linux.png | Bin 56126 -> 56080 bytes
...for-input-password-basic-firefox-linux.png | Bin 54624 -> 54577 bytes
...ot-for-input-radio-basic-firefox-linux.png | Bin 105353 -> 110842 bytes
...t-for-input-radio-select-firefox-linux.png | Bin 17246 -> 17466 bytes
...ot-for-input-range-basic-firefox-linux.png | Bin 61321 -> 61303 bytes
...hot-for-input-text-basic-firefox-linux.png | Bin 105698 -> 105114 bytes
.../snapshot-for-link-basic-firefox-linux.png | Bin 51167 -> 57563 bytes
...hot-for-pagination-basic-firefox-linux.png | Bin 31034 -> 29926 bytes
...napshot-for-select-basic-firefox-linux.png | Bin 105551 -> 105206 bytes
...able-pagination-position-firefox-linux.png | Bin 168184 -> 167342 bytes
...or-table-with-pagination-firefox-linux.png | Bin 43826 -> 43629 bytes
...ot-for-textarea-disabled-firefox-linux.png | Bin 12798 -> 13742 bytes
...shot-for-accordion-basic-firefox-linux.png | Bin 17132 -> 17742 bytes
...napshot-for-button-basic-firefox-linux.png | Bin 58220 -> 59289 bytes
...t-for-button-group-basic-firefox-linux.png | Bin 7067 -> 7208 bytes
...ot-for-button-hide-label-firefox-linux.png | Bin 8248 -> 8323 bytes
...ot-for-button-link-basic-firefox-linux.png | Bin 55174 -> 54907 bytes
...napshot-for-button-width-firefox-linux.png | Bin 21872 -> 22333 bytes
...apshot-for-details-basic-firefox-linux.png | Bin 34072 -> 63652 bytes
...apshot-for-handout-basic-firefox-linux.png | Bin 374671 -> 372726 bytes
...for-input-checkbox-basic-firefox-linux.png | Bin 56016 -> 57398 bytes
...or-input-checkbox-button-firefox-linux.png | Bin 56364 -> 57655 bytes
...or-input-checkbox-switch-firefox-linux.png | Bin 59812 -> 61209 bytes
...ot-for-input-color-basic-firefox-linux.png | Bin 51827 -> 51762 bytes
...hot-for-input-date-basic-firefox-linux.png | Bin 95148 -> 94886 bytes
...ot-for-input-email-basic-firefox-linux.png | Bin 64244 -> 63865 bytes
...hot-for-input-file-basic-firefox-linux.png | Bin 62001 -> 61284 bytes
...t-for-input-number-basic-firefox-linux.png | Bin 53443 -> 53362 bytes
...for-input-password-basic-firefox-linux.png | Bin 52220 -> 52171 bytes
...ot-for-input-radio-basic-firefox-linux.png | Bin 82619 -> 86533 bytes
...t-for-input-radio-select-firefox-linux.png | Bin 17058 -> 17299 bytes
...ot-for-input-range-basic-firefox-linux.png | Bin 58636 -> 58615 bytes
...hot-for-input-text-basic-firefox-linux.png | Bin 103165 -> 102563 bytes
.../snapshot-for-link-basic-firefox-linux.png | Bin 51167 -> 57563 bytes
...hot-for-pagination-basic-firefox-linux.png | Bin 26889 -> 26910 bytes
...napshot-for-select-basic-firefox-linux.png | Bin 103020 -> 102685 bytes
...able-pagination-position-firefox-linux.png | Bin 174857 -> 174750 bytes
...or-table-with-pagination-firefox-linux.png | Bin 46133 -> 46115 bytes
...ot-for-textarea-disabled-firefox-linux.png | Bin 12633 -> 13577 bytes
54 files changed, 0 insertions(+), 0 deletions(-)
diff --git a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-accordion-basic-firefox-linux.png b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-accordion-basic-firefox-linux.png
index eb8611c1b76306c6616a975fe08ff2ce81a1c27a..18bd031cf72e7299ecf4d07768b54f033b579605 100644
GIT binary patch
literal 18450
zcmeIaWmJ@H`}R%B&_jpB5E3FK;m`vPGDwFA5(=o4NOyM)jfhG}gQ9dOB@Gu!ONr9m
z()}KDrPuxb*ZV#np7pHttaX2Jv2f-*;yhyCw*9vgp{cG!O2kNng@r|`j6!N-Vd28S
z&vTGV;NJ(+h`U%=Ff3)Hyso>+dK!L;QCrn5Vn{Gn(|56&TKsBaqtxye!JZc5AQgL$
z8siCLfdsrjDZB$bay&}PYnJW?ZEroe)mEJ~+$Pg28)NOb1{a44@7)nuYux|g(td1S
zfv<)`8Rw733Bx8tA;6CaW(YbLs}T1QE8CyH`Qty4I7Cpoz<)jmeye!{hbZo2=Dz&D
z9^jADD)!gI{`l%pv_DSH(*mEke|`HkmILYUE&koO3&(4$!pqjIod0T=2VsQ!uLcm`
zAv}nc&~XA~On?9WHW75>@1KAF^?$nuUc>)^*+X;_#bM)K3SLb25_nR(US)c^-9cXc
z!_#JI_?@A?+jp1MOC$gBuFNSd!?75o*S__gB%hlm&eM^|(51Y)x$tnijgDNfepkC@
zKH0GOXSX10UWV_nP!D`Ic)BGlEQ0H0!Oe85>|fqGSg;N_q!ciViF1AUR^&njjoQu7?{1Sa
z*QzHRrw?ai?P@RbGkl3Un4DB=&i22xl$f?OpPy{9lF6NJMSiyYZcx>&3%_
zlD%QWyWV~rPvOT)*|@6@gGj|8pcfAh_eSoUPab)GcNuBZt&b^_^*P2{$VrNq9If{{
z2z)Mf@{wOmR_^(q`{VTvX8N%Yl(O48u7(*iUGgz7q$umZbvZ<8vreR_et&!#)4us*
z!N${{C4=fxAK7wafAGU=*1cD9wPZ$5U
z->9}@n|GCZs>U~yY%9O&U7;IqCKhBe@!9+8{+*CJ6&eGd2~Ri>Jq|R&R&ZW^9YhvM
z0mZvRX~o>HQN!*ol;gQC!Fc%
z8$Wnd{OiEbP2&}538_?t84!t|I4t%|XlcysmBn0y8zP+pQ7HM8xbAsZvb_fN-GiyK+;URuAYc~$rAX>D5}
z%o-7mUnrgWsjWvmhJ{yl?lkddaCtAG5t4%^CSM(&LySmi3(OKBtKX?Zic^n73)o5Y
z9JFK9MLHTXVv=v*M=Jc4x~H1?#Wna!oDQ2VX(1y9
z+tJ)xymo_1L)t-gaE8VAyj!p_m_^1D$%2$0pm!Q!a^XOeb4g!>vHC)KWlx^084iyw
zbI&g(s0a{l*6paPavOrTI$IB)YHQb!%1JL((eR}9$@bBQxtA0-9AAA>x81&-B%<9F
zBe_zLVs`LZq_?#<0uIHW;WJnC_c=dWwB^-b_I)4X_LA;B#~WO_VdiAlR&|;n(d)n`BScsP;$AW3w9b+VDCDHRPB-G;B2!I~XBRQ(|942V2Dxv3M=M
z=c#KRh&=3!gEw4xZgjos9adrgeeGBAf9>WcIBIN&CH|1*@VEon3!PwT&)=S!7P5#u
zlZkUS^}Q_$sIV(?;c?3ozWj``*`
zXutK>iP6&a8+-J;Z8p^5eQE7xgVeCoLmL!Sp0B8+`F_n0up3Pi)x?jwd%>))EvYUt
z@){0Blti635wHf|B$p9o@kl*Rt7oAIa*B!93x>V$J3q>f;}i33#UA-7W`i^iANmXq
z0tbO5V)T@T^_W={KP`U8Y^)qhn%i;rG%kcCOHBU_w(`M_NGo%5s94Fk_1m_a#3k1*
zUfDHBJgFLcyuIl3MeMHo#o2*5l8`{oW}&7RB<6a2+>ij-4aGh9F!J)~iw=7|-ZvUJ
z!LB@2N)Ms7^3)IUAw6$s0%f6YupAa2R+IAk!PW1Y@iRW^{EH{5dCt-~5WP^{n6od##u73FS
z?)~pvh(q)~MKnaXT_ZT`B>~wLf5Ee?o{+(|NJ40g!w<)9{%lLOtDz_)iVYb7E1@mn
zL_9$2o3E|Dt2Q}J{V;D4QlyU;Y)PP%b+qtG(8znc&9WimFhE)P0t~IJ_l1
z+{nHOzkj(mja*hx%r}byQU(qw?lo{jm8xakmKOP%Iv4f8o|#*jt+NCZ2<0)Geh`Bl
zZD=%y?IDTutT{>*EMYSVSY5;RahKfMXzsR#Q)cDIJu}1&T!NJaxj+2Q7W(t6|J?g;
zW`YyC{<_D{+gAU&0}5yY@}RJKI}c7K*RL67nT*>_XGrdFEKLh}7N6m8Rr_%Y3PSDI
zCEhViE+iAN@jWe1y(0DJ0yV6J+hV#Ojik=1E1~HrbmGY1Q~rlN6zs%nC5bG-J1N?A
zWxbsvPlrocgdQNKINx{@LE8g%(q1_x9jmo+C?=xJ*?&tAWJJ8wDc!b^>y3O#ZObNk
zla+`Nx*$h0n%^n^0f%!>N>RBc*14Qof<3Zwt*m>21_r`|yQ&%HvM)yVA<%(tcqY1l
zye?4&ghUSf$>mRV>QN1gdq6NQGIa}v_41Jns$Q?de%b*)+JApC-
zx&yf)S#k|ONiOln?I4rg@WHA2h5V!Vti6c9#aFX{+)Cm+H
z`AR5Db0}>t%3qfcfqI)=Tn9@)k+^Vv#_zzRqk?@{tr}&;#Yg4(U9C6yQ>p~qqp&Q%
zl9+Dy%^ayDZz~;A@a`i!I<|TL;qjBi#C#r3CAcP3^-FVSJV(n5i*$zlZ+4CDY8&d;
z`ym5i1rGX;p52+*kSV+#P7(RMPzhzH)xnl?>mfMZ_^u+{#cfS_uS9s_45S`P>_M0;
zROBUkGlisbpMEv;&oOsbCg9+|mZ5cDA)3UyP)Ye#MfgVs?GS;wt!8&mJ<8yrk~rB`
zWo@K*LIF5-iB2PMH0^uuZscwR3<(o8Q8<;N-8-%Ci%@?KA1l3-FBaDj6r8@nKh
zU2v&=%)8%c`oKbp+3#hl+IX&J+Bn$;+cWgc
zt|xKa+VbtSW+!T)7`N*K{o0&t)xN%eg#^X!oG;LgqX?oN3txSsG4zolISA@ULYbhftydq4_;U^~KTVZz~U9tEDPwJHxRf!!O;c|CIOYDWk@f+aX=2sm#tR3ho!Tu4iExJy#Pn
zJNR(7*ks$7r0~ne_u3AxBM&z0KoR98@%zFtD&Ik{j?1gQOE{av!A{218#QfIeqvJa
zJ*Eg-{uIi4yGMMJAk$u!Vc9lZ7!NN-dbW$vJK;elDbqKgimv57VcVd@9eAC>+J5iJ
zsgd6ou@PkHr#iE6)W9cg-NF>CX%=@UO{~y@*KyL7%6`P(FHU!QJ9H|cMf3{6;rI5>
zSeV%m?zAon$Q2=WPh@L>Rc2Kv<15DzTi2&$&5zN_m(R$Dz4u9%KV+QP{S%q`>q<|)y&ru48@9jZgO2o>^oDwUegDn+
zc)I>?t@t__qZ8>rm2CQwB&rR)d)#BopE;WRFN32`7>|()A^8|yb@g9{hNuWOK1!rF
z#^F)^v3gEvV{qGF?cLx49%z&i<_Rsa|$xw`o#PB$U4R{pr
z=_tX5@ca2drP97q2;=x=j|N;Y;qdbzFn*1YS!;O7s997<7uTz6yQ?FDXt7~^(`d0_
zi1A0~quv*6UcYYc09y9GGMu@cUODpnerGNzK=$7pd2ieTE^+2|7O%CwY^7M*m$G5(
z0mo2S;31IWVPh5)eQk`)`XIh=2<8NwIGx{5Bcq_NVwhze!k;ip6mKA?kNc
zk4L2n%}e)O5zfOWAkqrN72EkN($RZ~jENp2+l7G0P%0gGBJRA@xAntoGeqwEkmFkI
zS{aSoCPwoXH=cWMz!|&oO<>fw*$jA=I7>R{~8lMftwP;}32!CIfYx?1H
z@O=qOUF3_XX^+Gr`UwFEJrrYP(HcAVlev@__!YHii_fA(XrqU|I(<**IULf_XcN;$
zeOkQEFV^5FdjXVgi;7@9wJ(sxC9RYyt&_{Q(T(`5-dpl1z)5PZ7*sbLez*Q1zbI6M
zZoBpXxM3YheKdOdY_}eZ{pm+ru=hFQ%(cWY|rnsIq?U8nA
z$z2nVE8hEK7T95SnIW{+A3x;V?Z)%;SigOz=Wt=KtFvqIu5#Gg$@PcFV%k!wDWuF}
z;RQEFOip8bx5l%5Lwdi{?e5!mRMrQ3uD&gz{OGc(=fJw^(?Tp*2elVuZB}=^BGikX=mi6m_?TC4yZie>Fi7QiWEZ^
zgorho8({A(=Vyf8z3(G-{$<)Omg|odx}=J?!jAA|J(HWBR63(*U)3J%>LT!&>un5u
zYD_F;dbFYCk5E%F{id~<{rJL5oA*opGd$D5vf#oNmMj5Q!*iPc
zPYxXtZKKTj?;ckhSuk`k#kb$ZQ&!qQ&7N|bNN<83qigIFxYONd#GN6{W@nbMSZtL0
zz)-k&2qK_@lM0+UEhSbwm-Cs14m>~RU`zT&Zy*FR7)sn)a?A?7JtXM
zlSZklay1AD-q5gLWpJ9TwwvTh(KB*rbNsj<_Q%Z{kj$n@hwa$pqY-A;z{*gy^ua#G
z{Nqoi0Hynv=~+DXf=YHLM8aH>dE~@yV{3cbvWv3-JJ+4f$~ed3iq~3chgqbi1P-S}
zK7?-Iwqsh+fQ;2=8s_P1)fSxa%!5fkzdDxyd|FEt;%oWufHujJ&FN<23fG;k;l>^+
zx9An>M^c^5_anQYB}l5MG}s7*YIn4M9nh@~Ou#&2iedI4<&DXSpFjDI`m6`cJYn`5
z%-^}c{b{UDwUqY;Un@HlAevbr6P*&Sl$bw6dwoA|SL06^O2kxAxdR=*UPAgID{9&wDS0*Ep73xEr5JP%kre~-S{bkYT4Z^)ikCD&zE~wthypdSy$;^t
zs6LJ3wh^#@q^n|YMsP&--#u>Cudx7LtuUhk>y&)v6Grn5&N|>MoA$kykEbfs503-x
zyFiSf4SXEUv6tqWpX&HqmF3OS?Lo45#$yt{<69>sDEzvi%&9rkt;aV~E0~T0DIBJJ
zU9%bZ&YC``)gF(XP?$vU_69QZ`WVFqsi&z{RfUgJ$j&Yb<;Fs;FT^BOndzze_uaMj
zgLg%XrMLt8(!I2c6Y-ltb;$9jnz4|MaR0es)$JXN3?K0rD-eJ(ah$!O9^CyLD|^h7
z=Mx`_C%3?#ThkQ%AUS_vH@v
z)ocuGA$M9xJ7z^sDi2>;#kn-*r9U!{&hFckT}|2x(zH<9l8WN59MTrP!WU7iNNd1(
zo^JK$vg}cKEr9dzaA~Qd@wfpRdLeW@GVa~2sJJnr@VE{WR{G=mpZSL=P9J%dh?5nY
z;WViq2TiaO?3&AY6~l3v=+PB~so8U?Q%sLTaAJ%do$YHdX#wVoq`_FHRM%98I{0<^
ze*ftwj)FaWJ^I!+?qAr?6&QRfux+B~-X{%T*3vi^T?d6_s-7R1db{Y1&A6WJi7{FBG7A0=2T39^
z3XLa43CC(zHcH_70$tj|Xu$q?Jn$)BwA@r$x
zb9n5@_S9BE!kqas2XyR&*N=mCB0nK4ryjg(I9{=h=g1;Z9-W$MBJK~M>LPO}+|K`q
zuV3PXW+SPQEA5qhb4s#E&4%N|r04qD;m0)b-4&xz7eOw>fIGchZwSS#xpX)S(MBmJ
zB0PnSewlbRtWx{U(=1?~by7CdW`OlOk{h~AyilQjAvuVCkRY4M4}{3^ZTssz`sqXT!u%%8ONw|=RTLddbLSE;l2Kt
zStON_smxod8Z9+>wmT1uVzj=aPM)@dXCWgLcmk5gpZ(BO+kv<*)E1i@+6lXFuo_rY
z^&KV#g*#|$|HzE-D}@JaA;(xk^0@t;{0_r
zoER@FR`ZUGJ(RVMczr~#{te^;NQ<^D
zS=hPl8M46ad*W=iUO95!t?u!Lw5!K_U;mpU9;(6D!iFoszMC7Nt;@}4a+L-)#Gu70
z?}J^Jn45O&IBffduFFS!y)->SGHGQN`1;fwmw0is1qP{&yKZc73h8$YeSkfT_;^Ky
z_n`rHg6z#Fiw#oQAZvDcc@sAA*Do9=-qNsEMBi-j%fTsCNmJvSp73!s-I*V-n8ZzRP0(o&uWeh~;GjnZ
z{ZErf;XQLE^g
zvS7CAMURi4+QvtIPEUHd9>E^zz&!mN&fK|N#yH0pdB>O7X^QrWa&gHLI?YM7bXq>L
z<0NSKYi7&iQC<2#@#;1nq|iTwZuut&|ZTgMN)J!Ft-
zns`M+v@CihHOfpK(yPvWk(0z}eF^1sTb(|JagQDzw5GXpP1}2gAEB*fS6b)n+FNMe
zRUc~nMB8X80e(duHO^QlvRp8-TXn2GYa#GL=TK`%?b}4lj!sT)9996^PP