@public-ui/theme-default 2.0.0-rc.11 → 2.0.0-rc.13

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 +20 -45
  2. package/dist/index.mjs +20 -45
  3. package/package.json +9 -9
package/dist/index.cjs CHANGED
@@ -1972,6 +1972,9 @@ const DEFAULT = KoliBri.createTheme("default", {
1972
1972
  :host kol-input.button {
1973
1973
  gap: 0.4rem 0;
1974
1974
  }
1975
+ .checkbox-container {
1976
+ justify-content: flex-start;
1977
+ }
1975
1978
  :host kol-input > div.input {
1976
1979
  display: inherit;
1977
1980
  min-height: var(--a11y-min-size);
@@ -2040,13 +2043,6 @@ const DEFAULT = KoliBri.createTheme("default", {
2040
2043
  cursor: pointer;
2041
2044
  transition: 0.5s;
2042
2045
  }
2043
- :host kol-input input[type='checkbox'].kol-disabled:before {
2044
- cursor: not-allowed;
2045
- }
2046
- :host kol-input input[type='checkbox']:before {
2047
- content: '';
2048
- cursor: pointer;
2049
- }
2050
2046
  :host kol-input input[type='checkbox']:checked {
2051
2047
  background-color: var(--color-primary);
2052
2048
  border-color: var(--color-primary);
@@ -2057,51 +2053,23 @@ const DEFAULT = KoliBri.createTheme("default", {
2057
2053
  min-width: calc(6 * 0.25rem);
2058
2054
  width: calc(6 * 0.25rem);
2059
2055
  }
2060
- :host kol-input.default input[type='checkbox']:before {
2061
- border-radius: 1.5em;
2062
- background-color: transparent;
2063
- display: block;
2064
- height: calc(6 * 0.25rem);
2065
- position: relative;
2066
- width: calc(6 * 0.25rem);
2067
- }
2068
- :host kol-input.default input[type='checkbox']:checked:before {
2069
- border-right-width: 3px;
2070
- border-bottom-width: 3px;
2071
- left: calc(1.5 * 0.25rem - 2px);
2072
- top: calc(2.85 * 0.25rem - 2px);
2073
- transform: rotate(40deg) translate(-50%, -50%);
2074
- background-color: transparent;
2075
- border-width: 0px 3px 3px 0px;
2076
- border-color: white;
2077
- border-radius: 1px;
2078
- border-style: solid;
2079
- height: calc(3 * 0.25rem);
2080
- width: calc(1.5 * 0.25rem);
2081
- }
2082
2056
  :host kol-input.default input[type='checkbox']:indeterminate {
2083
2057
  background-color: var(--color-primary);
2084
2058
  }
2085
- :host kol-input.default input[type='checkbox']:indeterminate:before {
2086
- background-color: var(--color-light);
2087
- height: 0.125rem;
2088
- top: 0.6rem;
2089
- left: 0.25rem;
2090
- width: calc(3 * 0.25rem);
2091
- transform: inherit;
2092
- }
2093
- :host kol-input.default input[type='checkbox']:checked:indeterminate:before {
2094
- border-width: 0px 1px 1px 0px;
2059
+ :host kol-input.default .icon {
2060
+ color: var(--color-light);
2061
+ margin-left: 0.25rem;
2095
2062
  }
2063
+
2096
2064
  :host kol-input.switch input[type='checkbox'] {
2097
- min-width: 3.5em;
2098
- width: 3.5em;
2099
2065
  background-color: var(--color-subtle);
2066
+ border-radius: 1.25em;
2100
2067
  border-width: 0;
2068
+ display: block;
2101
2069
  height: 1.5em;
2102
- border-radius: 1.25em;
2103
- display: inline-block;
2070
+ min-width: 3.5em;
2104
2071
  position: relative;
2072
+ width: 3.5em;
2105
2073
  }
2106
2074
  :host kol-input.switch input[type='checkbox']:before {
2107
2075
  width: 1.25em;
@@ -2128,17 +2096,24 @@ const DEFAULT = KoliBri.createTheme("default", {
2128
2096
  left: 2px;
2129
2097
  }
2130
2098
 
2131
- &:has(input:checked) .icon {
2099
+ &.checked .icon {
2132
2100
  transform: translate(2em, -50%);
2133
2101
  }
2134
2102
 
2135
- &:has(input:indeterminate) .icon {
2103
+ &.indeterminate .icon {
2136
2104
  transform: translate(1em, -50%);
2137
2105
  }
2138
2106
  }
2139
2107
  :host .disabled {
2140
2108
  opacity: 0.33;
2141
2109
  }
2110
+ .button:focus-within {
2111
+ border-radius: var(--border-radius);
2112
+ outline-color: var(--color-primary-variant);
2113
+ outline-offset: 2px;
2114
+ outline-style: solid;
2115
+ outline-width: calc(var(--border-width) * 2);
2116
+ }
2142
2117
  `,
2143
2118
  "KOL-INPUT-RADIO": css`
2144
2119
  label {
package/dist/index.mjs CHANGED
@@ -1970,6 +1970,9 @@ const DEFAULT = KoliBri.createTheme("default", {
1970
1970
  :host kol-input.button {
1971
1971
  gap: 0.4rem 0;
1972
1972
  }
1973
+ .checkbox-container {
1974
+ justify-content: flex-start;
1975
+ }
1973
1976
  :host kol-input > div.input {
1974
1977
  display: inherit;
1975
1978
  min-height: var(--a11y-min-size);
@@ -2038,13 +2041,6 @@ const DEFAULT = KoliBri.createTheme("default", {
2038
2041
  cursor: pointer;
2039
2042
  transition: 0.5s;
2040
2043
  }
2041
- :host kol-input input[type='checkbox'].kol-disabled:before {
2042
- cursor: not-allowed;
2043
- }
2044
- :host kol-input input[type='checkbox']:before {
2045
- content: '';
2046
- cursor: pointer;
2047
- }
2048
2044
  :host kol-input input[type='checkbox']:checked {
2049
2045
  background-color: var(--color-primary);
2050
2046
  border-color: var(--color-primary);
@@ -2055,51 +2051,23 @@ const DEFAULT = KoliBri.createTheme("default", {
2055
2051
  min-width: calc(6 * 0.25rem);
2056
2052
  width: calc(6 * 0.25rem);
2057
2053
  }
2058
- :host kol-input.default input[type='checkbox']:before {
2059
- border-radius: 1.5em;
2060
- background-color: transparent;
2061
- display: block;
2062
- height: calc(6 * 0.25rem);
2063
- position: relative;
2064
- width: calc(6 * 0.25rem);
2065
- }
2066
- :host kol-input.default input[type='checkbox']:checked:before {
2067
- border-right-width: 3px;
2068
- border-bottom-width: 3px;
2069
- left: calc(1.5 * 0.25rem - 2px);
2070
- top: calc(2.85 * 0.25rem - 2px);
2071
- transform: rotate(40deg) translate(-50%, -50%);
2072
- background-color: transparent;
2073
- border-width: 0px 3px 3px 0px;
2074
- border-color: white;
2075
- border-radius: 1px;
2076
- border-style: solid;
2077
- height: calc(3 * 0.25rem);
2078
- width: calc(1.5 * 0.25rem);
2079
- }
2080
2054
  :host kol-input.default input[type='checkbox']:indeterminate {
2081
2055
  background-color: var(--color-primary);
2082
2056
  }
2083
- :host kol-input.default input[type='checkbox']:indeterminate:before {
2084
- background-color: var(--color-light);
2085
- height: 0.125rem;
2086
- top: 0.6rem;
2087
- left: 0.25rem;
2088
- width: calc(3 * 0.25rem);
2089
- transform: inherit;
2090
- }
2091
- :host kol-input.default input[type='checkbox']:checked:indeterminate:before {
2092
- border-width: 0px 1px 1px 0px;
2057
+ :host kol-input.default .icon {
2058
+ color: var(--color-light);
2059
+ margin-left: 0.25rem;
2093
2060
  }
2061
+
2094
2062
  :host kol-input.switch input[type='checkbox'] {
2095
- min-width: 3.5em;
2096
- width: 3.5em;
2097
2063
  background-color: var(--color-subtle);
2064
+ border-radius: 1.25em;
2098
2065
  border-width: 0;
2066
+ display: block;
2099
2067
  height: 1.5em;
2100
- border-radius: 1.25em;
2101
- display: inline-block;
2068
+ min-width: 3.5em;
2102
2069
  position: relative;
2070
+ width: 3.5em;
2103
2071
  }
2104
2072
  :host kol-input.switch input[type='checkbox']:before {
2105
2073
  width: 1.25em;
@@ -2126,17 +2094,24 @@ const DEFAULT = KoliBri.createTheme("default", {
2126
2094
  left: 2px;
2127
2095
  }
2128
2096
 
2129
- &:has(input:checked) .icon {
2097
+ &.checked .icon {
2130
2098
  transform: translate(2em, -50%);
2131
2099
  }
2132
2100
 
2133
- &:has(input:indeterminate) .icon {
2101
+ &.indeterminate .icon {
2134
2102
  transform: translate(1em, -50%);
2135
2103
  }
2136
2104
  }
2137
2105
  :host .disabled {
2138
2106
  opacity: 0.33;
2139
2107
  }
2108
+ .button:focus-within {
2109
+ border-radius: var(--border-radius);
2110
+ outline-color: var(--color-primary-variant);
2111
+ outline-offset: 2px;
2112
+ outline-style: solid;
2113
+ outline-width: calc(var(--border-width) * 2);
2114
+ }
2140
2115
  `,
2141
2116
  "KOL-INPUT-RADIO": css`
2142
2117
  label {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/theme-default",
3
- "version": "2.0.0-rc.11",
3
+ "version": "2.0.0-rc.13",
4
4
  "license": "EUPL-1.2",
5
5
  "homepage": "https://public-ui.github.io",
6
6
  "repository": "https://github.com/public-ui/kolibri",
@@ -38,18 +38,18 @@
38
38
  "wcag"
39
39
  ],
40
40
  "devDependencies": {
41
- "@public-ui/schema": "2.0.0-rc.11",
42
- "@public-ui/visual-tests": "2.0.0-rc.11",
43
- "@types/node": "ts5.2",
44
- "@typescript-eslint/eslint-plugin": "6.10.0",
45
- "@typescript-eslint/parser": "6.10.0",
46
- "eslint": "8.53.0",
41
+ "@public-ui/schema": "2.0.0-rc.13",
42
+ "@public-ui/visual-tests": "2.0.0-rc.13",
43
+ "@types/node": "ts5.3",
44
+ "@typescript-eslint/eslint-plugin": "6.13.1",
45
+ "@typescript-eslint/parser": "6.13.1",
46
+ "eslint": "8.55.0",
47
47
  "eslint-plugin-no-loops": "0.3.0",
48
- "typescript": "5.2.2",
48
+ "typescript": "5.3.2",
49
49
  "unbuild": "1.2.1"
50
50
  },
51
51
  "peerDependencies": {
52
- "@public-ui/components": "2.0.0-rc.11"
52
+ "@public-ui/components": "2.0.0-rc.13"
53
53
  },
54
54
  "sideEffects": false,
55
55
  "type": "module",