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

package/dist/index.cjs

@@ -4162,13 +4162,6 @@ const BMF = components.KoliBri.createTheme("bmf", {
 		margin: 0;
 		padding: 0;
 	}
-	input,
-	option,
-	select,
-	summary,
-	textarea {
-		display: inline-block;
-	}
 	a,
 	button,
 	input,
@@ -4176,8 +4169,6 @@ const BMF = components.KoliBri.createTheme("bmf", {
 	select,
 	summary,
 	textarea {
-		-ms-hyphens: auto;
-		-webkit-hyphens: auto;
 		hyphens: auto;
 		letter-spacing: inherit;
 		word-break: break-word;
@@ -4383,11 +4374,18 @@ const BMF = components.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);
@@ -4397,7 +4395,6 @@ const BMF = components.KoliBri.createTheme("bmf", {
 		border-radius: 0.3125rem;
 		border-style: solid;
 		border-width: 2px;
-		height: 44px;
 		padding: 0 0.5em;
 	}
 	.input > kol-icon {
@@ -4473,11 +4470,18 @@ const BMF = components.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);
@@ -4487,7 +4491,6 @@ const BMF = components.KoliBri.createTheme("bmf", {
 		border-radius: 0.3125rem;
 		border-style: solid;
 		border-width: 2px;
-		height: 44px;
 		padding: 0 0.5em;
 	}
 	.input > kol-icon {
@@ -4563,11 +4566,18 @@ const BMF = components.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);
@@ -4577,7 +4587,6 @@ const BMF = components.KoliBri.createTheme("bmf", {
 		border-radius: 0.3125rem;
 		border-style: solid;
 		border-width: 2px;
-		height: 44px;
 		padding: 0 0.5em;
 	}
 	.input > kol-icon {
@@ -4653,11 +4662,18 @@ const BMF = components.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);
@@ -4667,7 +4683,6 @@ const BMF = components.KoliBri.createTheme("bmf", {
 		border-radius: 0.3125rem;
 		border-style: solid;
 		border-width: 2px;
-		height: 44px;
 		padding: 0 0.5em;
 	}
 	.input > kol-icon {
@@ -4743,11 +4758,18 @@ const BMF = components.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);
@@ -4757,7 +4779,6 @@ const BMF = components.KoliBri.createTheme("bmf", {
 		border-radius: 0.3125rem;
 		border-style: solid;
 		border-width: 2px;
-		height: 44px;
 		padding: 0 0.5em;
 	}
 	.input > kol-icon {
@@ -4817,99 +4838,75 @@ const BMF = components.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;
 	}
@@ -5369,99 +5366,75 @@ const BMF = components.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;
 	}
@@ -5505,11 +5478,18 @@ const BMF = components.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);
@@ -5519,7 +5499,6 @@ const BMF = components.KoliBri.createTheme("bmf", {
 		border-radius: 0.3125rem;
 		border-style: solid;
 		border-width: 2px;
-		height: 44px;
 		padding: 0 0.5em;
 	}
 	.input > kol-icon {
@@ -6043,13 +6022,8 @@ const BMF = components.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);
@@ -6304,140 +6278,101 @@ const BMF = components.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;