@treeseed/core 0.8.8 → 0.8.9

package/dist/styles/forms.css

@@ -0,0 +1,258 @@
+.ts-field {
+	display: grid;
+	gap: var(--ts-space-2);
+	min-width: 0;
+}
+
+.ts-field--full {
+	grid-column: 1 / -1;
+}
+
+.ts-field__label,
+.ts-radio-group__legend {
+	color: var(--ts-color-text);
+	font-size: 0.875rem;
+	font-weight: 700;
+	line-height: 1.35;
+}
+
+.ts-field__required {
+	color: var(--ts-color-danger-text);
+	margin-left: 0.25rem;
+}
+
+.ts-field__control {
+	min-width: 0;
+}
+
+.ts-field__help,
+.ts-field__error {
+	font-size: 0.8125rem;
+	line-height: 1.45;
+	margin: 0;
+}
+
+.ts-field__help {
+	color: var(--ts-color-text-muted);
+}
+
+.ts-field__error {
+	color: var(--ts-color-danger-text);
+	font-weight: 650;
+}
+
+.ts-control {
+	appearance: none;
+	background: var(--ts-color-surface);
+	border: 1px solid var(--ts-color-border);
+	border-radius: var(--ts-radius-md);
+	color: var(--ts-color-text);
+	font: inherit;
+	font-size: 0.95rem;
+	line-height: 1.4;
+	min-height: 2.25rem;
+	padding: 0.45rem 0.65rem;
+	transition:
+		background-color 140ms ease,
+		border-color 140ms ease,
+		box-shadow 140ms ease;
+	width: 100%;
+}
+
+.ts-control::placeholder {
+	color: var(--ts-color-text-subtle);
+}
+
+.ts-control:focus {
+	border-color: var(--ts-color-focus);
+	box-shadow: 0 0 0 3px var(--ts-color-accent-soft);
+	outline: none;
+}
+
+.ts-control:disabled,
+.ts-control:read-only {
+	background: var(--ts-color-surface-muted);
+	color: var(--ts-color-text-muted);
+}
+
+.ts-control--select {
+	background-image:
+		linear-gradient(45deg, transparent 50%, currentColor 50%),
+		linear-gradient(135deg, currentColor 50%, transparent 50%);
+	background-position:
+		calc(100% - 1rem) 50%,
+		calc(100% - 0.7rem) 50%;
+	background-size:
+		0.32rem 0.32rem,
+		0.32rem 0.32rem;
+	background-repeat: no-repeat;
+	padding-right: 2rem;
+}
+
+.ts-control--textarea {
+	min-height: 7rem;
+	resize: vertical;
+}
+
+.ts-radio-group {
+	border: 0;
+	display: grid;
+	gap: var(--ts-space-3);
+	margin: 0;
+	min-inline-size: 0;
+	padding: 0;
+}
+
+.ts-radio-group__options {
+	display: grid;
+	gap: var(--ts-space-2);
+}
+
+.ts-radio-option {
+	align-items: flex-start;
+	background: var(--ts-color-surface);
+	border: 1px solid var(--ts-color-border);
+	border-radius: var(--ts-radius-md);
+	color: var(--ts-color-text);
+	cursor: pointer;
+	display: flex;
+	gap: var(--ts-space-2);
+	padding: var(--ts-space-2);
+}
+
+.ts-radio-option:hover {
+	background: var(--ts-color-surface-raised);
+	border-color: var(--ts-color-border-strong);
+}
+
+.ts-radio-option input {
+	accent-color: var(--ts-color-accent);
+	margin-top: 0.15rem;
+}
+
+.ts-radio-option:has(input:checked) {
+	background: var(--ts-color-accent-soft);
+	border-color: var(--ts-color-accent);
+}
+
+.ts-radio-option:has(input:focus-visible) {
+	outline: 3px solid var(--ts-color-focus);
+	outline-offset: 2px;
+}
+
+.ts-radio-option[data-disabled='true'] {
+	cursor: not-allowed;
+	opacity: 0.58;
+}
+
+.ts-radio-option__body {
+	display: grid;
+	gap: 0.25rem;
+}
+
+.ts-radio-option__label {
+	font-weight: 700;
+}
+
+.ts-radio-option__help {
+	color: var(--ts-color-text-muted);
+	font-size: 0.8125rem;
+	line-height: 1.45;
+}
+
+.ts-form-actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--ts-space-2);
+}
+
+.ts-form-actions--start {
+	justify-content: flex-start;
+}
+
+.ts-form-actions--end {
+	justify-content: flex-end;
+}
+
+.ts-form-actions--between {
+	justify-content: space-between;
+}
+
+.ts-password-meter {
+	display: grid;
+	gap: var(--ts-space-2);
+}
+
+.ts-password-meter__header {
+	align-items: center;
+	color: var(--ts-color-text-muted);
+	display: flex;
+	font-size: 0.8125rem;
+	font-weight: 650;
+	justify-content: space-between;
+}
+
+.ts-password-meter__track {
+	background: var(--ts-color-surface-muted);
+	border-radius: 999px;
+	height: 0.5rem;
+	overflow: hidden;
+}
+
+.ts-password-meter__bar {
+	background: var(--ts-color-danger);
+	border-radius: inherit;
+	display: block;
+	height: 100%;
+	transform-origin: left;
+	transition:
+		background-color 140ms ease,
+		width 140ms ease;
+	width: calc((var(--ts-password-strength, 0) / 4) * 100%);
+}
+
+.ts-password-meter[data-strength='2'] .ts-password-meter__bar {
+	background: var(--ts-color-warning);
+}
+
+.ts-password-meter[data-strength='3'] .ts-password-meter__bar {
+	background: var(--ts-color-info);
+}
+
+.ts-password-meter[data-strength='4'] .ts-password-meter__bar {
+	background: var(--ts-color-success);
+}
+
+.ts-password-meter__rules {
+	color: var(--ts-color-text-muted);
+	display: grid;
+	font-size: 0.8125rem;
+	gap: 0.25rem;
+	line-height: 1.45;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.ts-password-meter__rules li {
+	align-items: center;
+	display: flex;
+	gap: 0.45rem;
+}
+
+.ts-password-meter__rules li::before {
+	border: 1px solid currentColor;
+	border-radius: 999px;
+	content: '';
+	display: inline-block;
+	height: 0.55rem;
+	width: 0.55rem;
+}
+
+.ts-password-meter__rules li[data-passed='true'] {
+	color: var(--ts-color-success-text);
+}
+
+.ts-password-meter__rules li[data-passed='true']::before {
+	background: currentColor;
+}