diff --git a/CHANGELOG.md b/CHANGELOG.md index 1c4470d..03acc2d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +## [v0.4.1] - 2026-09-22 + +### Changed +- Switch to using `:user-invalid` instead of outdated hacks around `:invalid` +- Implement form styles using nesting + ## [v0.4.0] - 2026-06-14 ### Added diff --git a/forms.js b/forms.js index 3f8ac26..091857c 100644 --- a/forms.js +++ b/forms.js @@ -7,66 +7,67 @@ export const forms = css`@layer component.aegisjsproject.forms { margin-bottom: 0.4em; border-radius: 6px; transition: border-color 200ms ease-in-out; - } - - .form-group:focus-within { - border-color: var(--form-group-border, #cacaca); - } - .form-group .input-label { - display: block; - margin: 0.4em 0; - } + &:focus-within { + border-color: var(--form-group-border, #cacaca); + } - .form-group .input-label.required::after { - content: ' *'; - display: inline; - font-size: 0.8em; - font-weight: 800; - } + .input-label { + display: block; + margin: 0.4em 0; - .form-group .input, .form-group .input:required:invalid:placeholder-shown { - display: block; - width: var(--input-width, 100%); - max-width: 100%; - color: currentColor; - border-style: solid; - border-color: var(--input-border, #cacaca); - border-width: 0 0 1px 0; - background: transparent; - padding: var(--form-group-padding, 0.5em 0.3em); - transition: color 300ms ease-in-out, background-color 300ms ease-in-out; - } + &.required::after { + content: ' *'; + display: inline; + font-size: 0.8em; + font-weight: 800; + } + } - .form-group textarea.input { - resize: vertical; - } + .input { + display: block; + width: var(--input-width, 100%); + max-width: 100%; + color: currentColor; + border-style: solid; + border-color: var(--input-border, #cacaca); + border-width: 0 0 1px 0; + background: transparent; + padding: var(--form-group-padding, 0.5em 0.3em); + transition: color 300ms ease-in-out, background-color 300ms ease-in-out; - .form-group .input:invalid { - box-shadow: none; - } + &:user-invalid { + box-shadow: none; + color: var(--invalid-color, #871717); + border-color: currentColor; + background-color: var(--invalid-background, #F7C1C1); + } + } - .form-group .input:invalid:not(:focus) { - color: var(--invalid-color, #-871717); - border-color: currentColor; - background-color: var(--invalid-background, #F7C1C1); - } + textarea.input { + resize: vertical; + } - .form-group input[hidden] + label[for].btn-toggle { - background-color: var(--button-disabled-background); - margin: var(--form-group-margin, 0.3rem); - transition: background-color 300ms ease-in-out; - } + input[hidden] { + & + label[for].btn-toggle { + background-color: var(--button-disabled-background); + margin: var(--form-group-margin, 0.3rem); + transition: background-color 300ms ease-in-out; + } - .form-group input[hidden]:checked + label[for].btn-toggle { - background-color: var(--button-background); - } + &:checked + label[for].btn-toggle { + background-color: var(--button-background); - .form-group input[hidden]:not(:checked) + label[for].btn-toggle .when-checked { - display: none; - } + .when-unchecked { + display: none; + } + } - .form-group input[hidden]:checked + label[for].btn-toggle .when-unchecked { - display: none; + &:not(:checked) + label[for].btn-toggle { + .when-checked { + display: none; + } + } + } } }`; diff --git a/package-lock.json b/package-lock.json index b511590..ec50dfc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@aegisjsproject/styles", - "version": "0.4.0", + "version": "0.4.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@aegisjsproject/styles", - "version": "0.4.0", + "version": "0.4.1", "funding": [ { "type": "librepay", @@ -1079,16 +1079,16 @@ } }, "node_modules/brace-expansion": { - "version": "5.0.7", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.7.tgz", - "integrity": "sha512-7oFy703dxfY3/NLxC1fh2SUCQ0H9rmAY+5EpDVfXjUTTs+HEwR2nYaqLv+GWcTsumwxPfiz6CzCNkwXwBUwqCA==", + "version": "5.0.12", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.12.tgz", + "integrity": "sha512-YovQ3rzhaLMIrDjNDMkNS01tea93qhEhG5xy8f6+R0l+dw3Ki+5sCoIoI942iuLZTHWogWktgwVDhU09iNEimQ==", "dev": true, "license": "MIT", "dependencies": { "balanced-match": "^4.0.2" }, "engines": { - "node": "18 || 20 || >=22" + "node": "20 || >=22" } }, "node_modules/cacheable": { @@ -1279,9 +1279,9 @@ } }, "node_modules/es-object-atoms": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz", - "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz", + "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==", "dev": true, "license": "MIT", "dependencies": { @@ -2180,13 +2180,14 @@ "license": "MIT" }, "node_modules/qs": { - "version": "6.15.2", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.2.tgz", - "integrity": "sha512-Rzq0KEyX/w/tEybncDgdkZrJgVUsUMk3xjh3t5bv3S1HTAtg+uOYt72+ZfwiQwKdysThkTBdL/rTi6HDmX9Ddw==", + "version": "6.16.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.16.0.tgz", + "integrity": "sha512-h6fhOIaRrID2CbEY2fqs+7t+UXZo+MLAnU5gRIq85uFtdiUPCdsApMlHhXogKVM4HM2DVbIjGNTTYH2OcmP1vA==", "dev": true, "license": "BSD-3-Clause", "dependencies": { - "side-channel": "^1.1.0" + "es-define-property": "^1.0.1", + "side-channel": "^1.1.1" }, "engines": { "node": ">=0.6" @@ -2314,15 +2315,15 @@ } }, "node_modules/side-channel": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz", - "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz", + "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==", "dev": true, "license": "MIT", "dependencies": { "es-errors": "^1.3.0", - "object-inspect": "^1.13.3", - "side-channel-list": "^1.0.0", + "object-inspect": "^1.13.4", + "side-channel-list": "^1.0.1", "side-channel-map": "^1.0.1", "side-channel-weakmap": "^1.0.2" }, @@ -2334,14 +2335,14 @@ } }, "node_modules/side-channel-list": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz", - "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz", + "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==", "dev": true, "license": "MIT", "dependencies": { "es-errors": "^1.3.0", - "object-inspect": "^1.13.3" + "object-inspect": "^1.13.4" }, "engines": { "node": ">= 0.4" diff --git a/package.json b/package.json index 4c0d879..ddceee6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@aegisjsproject/styles", - "version": "0.4.0", + "version": "0.4.1", "description": "Pre-made and reusable styles for `@aegisjsproject/core`", "keywords": [ "aegis",