@public-ui/themes 1.5.0-rc.14 → 1.5.0-rc.16

package/dist/index.mjs

@@ -4160,13 +4160,6 @@ const BMF = KoliBri.createTheme("bmf", {
 		margin: 0;
 		padding: 0;
 	}
-	input,
-	option,
-	select,
-	summary,
-	textarea {
-		display: inline-block;
-	}
 	a,
 	button,
 	input,
@@ -4174,8 +4167,6 @@ const BMF = KoliBri.createTheme("bmf", {
 	select,
 	summary,
 	textarea {
-		-ms-hyphens: auto;
-		-webkit-hyphens: auto;
 		hyphens: auto;
 		letter-spacing: inherit;
 		word-break: break-word;
@@ -4381,11 +4372,18 @@ const BMF = KoliBri.createTheme("bmf", {
 		font-size: 0.875em;
 		font-style: italic;
 	}
-	input {
+	input,
+	select,
+	textarea {
+		border: none;
+	}
+	input[type="color"] {
 		border: none;
-		line-height: 1em;
 		min-height: 40px !important;
-		padding: 0.625em 0;
+	}
+	input[type="color"],
+	input[type="file"] {
+		background-color: transparent;
 	}
 	input::placeholder {
 		color: var(--color-grey);
@@ -4395,7 +4393,6 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-radius: 0.3125rem;
 		border-style: solid;
 		border-width: 2px;
-		height: 44px;
 		padding: 0 0.5em;
 	}
 	.input > kol-icon {
@@ -4471,11 +4468,18 @@ const BMF = KoliBri.createTheme("bmf", {
 		font-size: 0.875em;
 		font-style: italic;
 	}
-	input {
+	input,
+	select,
+	textarea {
+		border: none;
+	}
+	input[type="color"] {
 		border: none;
-		line-height: 1em;
 		min-height: 40px !important;
-		padding: 0.625em 0;
+	}
+	input[type="color"],
+	input[type="file"] {
+		background-color: transparent;
 	}
 	input::placeholder {
 		color: var(--color-grey);
@@ -4485,7 +4489,6 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-radius: 0.3125rem;
 		border-style: solid;
 		border-width: 2px;
-		height: 44px;
 		padding: 0 0.5em;
 	}
 	.input > kol-icon {
@@ -4561,11 +4564,18 @@ const BMF = KoliBri.createTheme("bmf", {
 		font-size: 0.875em;
 		font-style: italic;
 	}
-	input {
+	input,
+	select,
+	textarea {
+		border: none;
+	}
+	input[type="color"] {
 		border: none;
-		line-height: 1em;
 		min-height: 40px !important;
-		padding: 0.625em 0;
+	}
+	input[type="color"],
+	input[type="file"] {
+		background-color: transparent;
 	}
 	input::placeholder {
 		color: var(--color-grey);
@@ -4575,7 +4585,6 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-radius: 0.3125rem;
 		border-style: solid;
 		border-width: 2px;
-		height: 44px;
 		padding: 0 0.5em;
 	}
 	.input > kol-icon {
@@ -4651,11 +4660,18 @@ const BMF = KoliBri.createTheme("bmf", {
 		font-size: 0.875em;
 		font-style: italic;
 	}
-	input {
+	input,
+	select,
+	textarea {
+		border: none;
+	}
+	input[type="color"] {
 		border: none;
-		line-height: 1em;
 		min-height: 40px !important;
-		padding: 0.625em 0;
+	}
+	input[type="color"],
+	input[type="file"] {
+		background-color: transparent;
 	}
 	input::placeholder {
 		color: var(--color-grey);
@@ -4665,7 +4681,6 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-radius: 0.3125rem;
 		border-style: solid;
 		border-width: 2px;
-		height: 44px;
 		padding: 0 0.5em;
 	}
 	.input > kol-icon {
@@ -4741,11 +4756,18 @@ const BMF = KoliBri.createTheme("bmf", {
 		font-size: 0.875em;
 		font-style: italic;
 	}
-	input {
+	input,
+	select,
+	textarea {
+		border: none;
+	}
+	input[type="color"] {
 		border: none;
-		line-height: 1em;
 		min-height: 40px !important;
-		padding: 0.625em 0;
+	}
+	input[type="color"],
+	input[type="file"] {
+		background-color: transparent;
 	}
 	input::placeholder {
 		color: var(--color-grey);
@@ -4755,7 +4777,6 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-radius: 0.3125rem;
 		border-style: solid;
 		border-width: 2px;
-		height: 44px;
 		padding: 0 0.5em;
 	}
 	.input > kol-icon {
@@ -4815,99 +4836,75 @@ const BMF = KoliBri.createTheme("bmf", {
 		color: white;
 	}`,
   "KOL-TEXTAREA": `kol-input {
-		display: grid;
 		gap: 0.4em;
 	}
+	kol-input .error {
+		order: 1;
+	}
 	kol-input label {
 		order: 2;
 	}
-	kol-input div.input {
-		box-sizing: border-box;
+	kol-input .input {
 		order: 3;
-		background-color: white;
-		border-radius: 0.3125rem;
 	}
-	kol-input kol-alert.error {
-		order: 1;
+	kol-input .hint {
+		order: 4;
+		font-size: 0.875em;
+		font-style: italic;
 	}
 	input,
 	select,
 	textarea {
-		font-family: var(--font-family);
+		border: none;
+	}
+	input[type="color"] {
+		border: none;
+		min-height: 40px !important;
+	}
+	input[type="color"],
+	input[type="file"] {
 		background-color: transparent;
-		box-sizing: border-box;
-		font-size: 1rem;
-		display: inline-flex;
-		line-height: 1.5em;
+	}
+	input::placeholder {
+		color: var(--color-grey);
+	}
+	.input {
 		border-color: var(--color-grey);
-		border-width: 2px;
-		border-style: solid;
-		padding: 0.625em 0.875em;
 		border-radius: 0.3125rem;
-		overflow: hidden;
-		width: 100%;
+		border-style: solid;
+		border-width: 2px;
+		padding: 0 0.5em;
 	}
-	input,
-	select:not([multiple]) {
-		height: 2.75em;
+	.input > kol-icon {
+		width: 1.5em;
 	}
-	input::placeholder {
-		color: var(--color-grey);
+	.input > input:first-child {
+		padding-left: 0.375em;
 	}
-	input:hover {
+	.input > input:last-child {
+		padding-right: 0.375em;
+	}
+	.input:hover {
 		border-color: var(--color-midnight);
 	}
 	input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
 		cursor: not-allowed;
-		border-color: var(--border-default);
 	}
 	.required label > span::after {
 		content: "*";
 		padding-left: 0.125em;
 	}
-	.icons {
-		display: flex;
-		justify-content: space-between;
-		height: 0;
-	}
-	.icon-left input,
-	.icon-left select {
-		padding-left: 2em;
-	}
-	.icon-right input,
-	.icon-right select {
-		padding-right: 2em;
-	}
 	kol-input.error {
 		border-left: 3px solid var(--color-red);
 		padding-left: 1em;
 	}
-	kol-input.error input:focus,
-	kol-input.error select:focus,
-	kol-input.error textarea:focus {
+	kol-input.error .input:focus-within {
 		outline-color: var(--color-red) !important;
 	}
 	kol-input.error kol-alert.error {
 		color: var(--color-red);
 		font-weight: 700;
 	}
-	kol-button-wc {
-		position: relative;
-		float: right;
-		z-index: 1000;
-	}
-	kol-button-wc button {
-		border-radius: 0.25rem;
-	}
-	kol-button-wc button kol-span-wc {
-		border: 1px solid var(--color-grey);
-		display: grid;
-		min-height: 44px;
-		min-width: 44px;
-	}
-	.icon-right kol-button-wc {
-		margin-right: 2.5em;
-	}
 	.disabled {
 		opacity: 0.33;
 	}
@@ -5367,99 +5364,75 @@ const BMF = KoliBri.createTheme("bmf", {
 		stroke: var(--color-midnight);
 	}`,
   "KOL-SELECT": `kol-input {
-		display: grid;
 		gap: 0.4em;
 	}
+	kol-input .error {
+		order: 1;
+	}
 	kol-input label {
 		order: 2;
 	}
-	kol-input div.input {
-		box-sizing: border-box;
+	kol-input .input {
 		order: 3;
-		background-color: white;
-		border-radius: 0.3125rem;
 	}
-	kol-input kol-alert.error {
-		order: 1;
+	kol-input .hint {
+		order: 4;
+		font-size: 0.875em;
+		font-style: italic;
 	}
 	input,
 	select,
 	textarea {
-		font-family: var(--font-family);
+		border: none;
+	}
+	input[type="color"] {
+		border: none;
+		min-height: 40px !important;
+	}
+	input[type="color"],
+	input[type="file"] {
 		background-color: transparent;
-		box-sizing: border-box;
-		font-size: 1rem;
-		display: inline-flex;
-		line-height: 2.5em;
+	}
+	input::placeholder {
+		color: var(--color-grey);
+	}
+	.input {
 		border-color: var(--color-grey);
-		border-width: 2px;
-		border-style: solid;
-		padding: 0.125em 0.875em;
 		border-radius: 0.3125rem;
-		overflow: hidden;
-		width: 100%;
+		border-style: solid;
+		border-width: 2px;
+		padding: 0 0.5em;
 	}
-	input,
-	select:not([multiple]) {
-		height: 2.75em;
+	.input > kol-icon {
+		width: 1.5em;
 	}
-	input::placeholder {
-		color: var(--color-grey);
+	.input > input:first-child {
+		padding-left: 0.375em;
 	}
-	input:hover {
+	.input > input:last-child {
+		padding-right: 0.375em;
+	}
+	.input:hover {
 		border-color: var(--color-midnight);
 	}
 	input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
 		cursor: not-allowed;
-		border-color: var(--border-default);
 	}
 	.required label > span::after {
 		content: "*";
 		padding-left: 0.125em;
 	}
-	.icons {
-		display: flex;
-		justify-content: space-between;
-		height: 0;
-	}
-	.icon-left input,
-	.icon-left select {
-		padding-left: 2em;
-	}
-	.icon-right input,
-	.icon-right select {
-		padding-right: 2em;
-	}
 	kol-input.error {
 		border-left: 3px solid var(--color-red);
 		padding-left: 1em;
 	}
-	kol-input.error input:focus,
-	kol-input.error select:focus,
-	kol-input.error textarea:focus {
+	kol-input.error .input:focus-within {
 		outline-color: var(--color-red) !important;
 	}
 	kol-input.error kol-alert.error {
 		color: var(--color-red);
 		font-weight: 700;
 	}
-	kol-button-wc {
-		position: relative;
-		float: right;
-		z-index: 1000;
-	}
-	kol-button-wc button {
-		border-radius: 0.25rem;
-	}
-	kol-button-wc button kol-span-wc {
-		border: 1px solid var(--color-grey);
-		display: grid;
-		min-height: 44px;
-		min-width: 44px;
-	}
-	.icon-right kol-button-wc {
-		margin-right: 2.5em;
-	}
 	.disabled {
 		opacity: 0.33;
 	}
@@ -5503,11 +5476,18 @@ const BMF = KoliBri.createTheme("bmf", {
 		font-size: 0.875em;
 		font-style: italic;
 	}
-	input {
+	input,
+	select,
+	textarea {
+		border: none;
+	}
+	input[type="color"] {
 		border: none;
-		line-height: 1em;
 		min-height: 40px !important;
-		padding: 0.625em 0;
+	}
+	input[type="color"],
+	input[type="file"] {
+		background-color: transparent;
 	}
 	input::placeholder {
 		color: var(--color-grey);
@@ -5517,7 +5497,6 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-radius: 0.3125rem;
 		border-style: solid;
 		border-width: 2px;
-		height: 44px;
 		padding: 0 0.5em;
 	}
 	.input > kol-icon {
@@ -6041,13 +6020,8 @@ const BMF = KoliBri.createTheme("bmf", {
 	fieldset div input[type="radio"]:before {
 		content: "";
 		cursor: pointer;
-		left: calc(1.5 * var(--spacing) - 2px);
-		top: calc(1.5 * var(--spacing) - 2px);
-		position: relative;
 		border-radius: 100%;
 		display: block;
-		height: calc(3 * var(--spacing));
-		width: calc(3 * var(--spacing));
 	}
 	fieldset div input[type="radio"]:checked:before {
 		background-color: var(--color-midnight);
@@ -6302,140 +6276,101 @@ const BMF = KoliBri.createTheme("bmf", {
 		padding-bottom: 0.5rem;
 		color: var(--color-midnight);
 	}`,
-  "KOL-INPUT-RANGE": `/* https://www.cssportal.com/style-input-range/ */
-	kol-input {
-		display: grid;
+  "KOL-INPUT-RANGE": `kol-input {
 		gap: 0.4em;
 	}
+	kol-input .error {
+		order: 1;
+	}
 	kol-input label {
 		order: 2;
 	}
-	kol-input div.input {
-		box-sizing: border-box;
+	kol-input .input {
 		order: 3;
-		background-color: white;
-		border-radius: 0.3125rem;
 	}
-	kol-input kol-alert.error {
-		order: 1;
+	kol-input .hint {
+		order: 4;
+		font-size: 0.875em;
+		font-style: italic;
 	}
 	input,
 	select,
 	textarea {
-		font-family: var(--font-family);
+		border: none;
+	}
+	input[type="color"] {
+		border: none;
+		min-height: 40px !important;
+	}
+	input[type="color"],
+	input[type="file"] {
 		background-color: transparent;
-		box-sizing: border-box;
-		font-size: 1rem;
-		display: inline-flex;
-		line-height: 1.5em;
+	}
+	input::placeholder {
+		color: var(--color-grey);
+	}
+	.input {
 		border-color: var(--color-grey);
-		border-width: 2px;
-		border-style: solid;
-		padding: 0.625em 0.875em;
 		border-radius: 0.3125rem;
-		overflow: hidden;
-		width: calc(100% - 4em);
+		border-style: solid;
+		border-width: 2px;
+		padding: 0 0.5em;
 	}
-	input,
-	select:not([multiple]) {
-		height: 2.75em;
+	.input > kol-icon {
+		width: 1.5em;
 	}
-	input::placeholder {
-		color: var(--color-grey);
+	.input > input:first-child {
+		padding-left: 0.375em;
 	}
-	input:hover {
+	.input > input:last-child {
+		padding-right: 0.375em;
+	}
+	.input:hover {
 		border-color: var(--color-midnight);
 	}
 	input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
 		cursor: not-allowed;
-		border-color: var(--border-default);
 	}
-	.required #label::after {
+	.required label > span::after {
 		content: "*";
 		padding-left: 0.125em;
 	}
-	.icons {
-		display: flex;
-		justify-content: space-between;
-		height: 0;
-	}
-	.icons > * {
-		margin: 0.725em 0.875em;
-		box-sizing: border-box;
-		border-color: transparent;
-		border-width: 2px;
-		border-style: solid;
-	}
-	.icon-left input,
-	.icon-left select {
-		padding-left: calc(0.875em + 1em + 0.5em);
-	}
-	.icon-right input,
-	.icon-right select {
-		padding-right: calc(0.875em + 1em + 0.5em);
-	}
 	kol-input.error {
 		border-left: 3px solid var(--color-red);
 		padding-left: 1em;
 	}
-	kol-input.error input:focus,
-	kol-input.error select:focus,
-	kol-input.error textarea:focus {
+	kol-input.error .input:focus-within {
 		outline-color: var(--color-red) !important;
 	}
 	kol-input.error kol-alert.error {
 		color: var(--color-red);
 		font-weight: 700;
 	}
-	kol-button-wc {
-		position: relative;
-		float: right;
-		z-index: 1000;
-		margin-top: -33px;
-	}
-	kol-button-wc button {
-		border: 1px solid var(--color-grey);
-		border-radius: 0.25rem;
-		box-sizing: border-box;
-		background-color: transparent;
-		cursor: pointer;
-	}
-	.icon-right kol-button-wc {
-		margin-right: 2.5em;
-	}
 	.disabled {
 		opacity: 0.33;
 	}
-	.icon-left input,
-	.icon-left select {
-		margin-left: 2em;
+	select[multiple],
+	textarea {
+		overflow: auto;
 	}
-	.icon-right input,
-	.icon-right select {
-		margin-right: 2em;
+	textarea {
+		display: block;
 	}
-	input[type="range"] {
-		appearance: none;
-		-webkit-appearance: none;
-		-moz-appearance: none;
+	select option {
+		margin: 1px 0;
+		padding: 0.5em;
+		border-radius: 0.25em;
+		cursor: pointer;
 	}
-	input[type="range"] {
-		overflow: visible;
-		background-color: var(--color-ice);
-		border: 0;
-		height: 0.5rem;
-		padding: 0;
-		padding-bottom: 0;
-		margin-bottom: 0;
+	select option:disabled {
+		cursor: not-allowed;
 	}
-	input[type="range"]::-webkit-slider-thumb {
-		box-sizing: border-box;
-		background-color: var(--color-midnight);
-		height: 20px;
-		width: 20px;
-		border-radius: 20px;
-		cursor: pointer;
-		-webkit-appearance: none;
+	option:active:not(:disabled),
+	option:checked:not(:disabled),
+	option:focus:not(:disabled),
+	option:hover:not(:disabled) {
+		background: var(--color-ocean);
+		color: white;
 	}`,
   "KOL-LINK-BUTTON": `a {
 		display: inline-flex;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/themes",
-	"version": "1.5.0-rc.14",
+	"version": "1.5.0-rc.16",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": "https://github.com/public-ui/kolibri",
@@ -46,7 +46,7 @@
 		"format": "prettier --check src",
 		"lint": "eslint src && tsc --noemit",
 		"postinstall": "npm-run-all postinstall:*",
-		"postinstall:assets": "cpy \"assets/**/*\" public/assets --dot",
+		"postinstall:assets": "cpy \"assets/**/*\"  ../../../public/assets --dot",
 		"prepack": "unbuild"
 	},
 	"dependencies": {
@@ -54,17 +54,17 @@
 		"npm-run-all": "4.1.5"
 	},
 	"devDependencies": {
-		"@public-ui/components": "1.5.0-rc.14",
+		"@public-ui/components": "1.5.0-rc.16",
 		"@types/node": "ts4.9",
-		"@typescript-eslint/eslint-plugin": "5.57.1",
-		"@typescript-eslint/parser": "5.57.1",
-		"eslint": "8.37.0",
+		"@typescript-eslint/eslint-plugin": "5.59.0",
+		"@typescript-eslint/parser": "5.59.0",
+		"eslint": "8.38.0",
 		"eslint-plugin-no-loops": "0.3.0",
 		"typescript": "4.9.5",
 		"unbuild": "1.1.2"
 	},
 	"peerDependencies": {
-		"@public-ui/components": "1.5.0-rc.14"
+		"@public-ui/components": "1.5.0-rc.16"
 	},
 	"sideEffects": false,
 	"type": "module",