@nxgt/material-vue 0.29.0 → 0.30.1

package/lib/components/ui/primitives/label/label.css

@@ -1,33 +1,26 @@
-/* The required mark of `Label withAsterisk`. Drawn, not typed: a "*" in the
- * label's text joined its name ("Email *") for `getByLabel(…, { exact })`,
- * `getByLabelText` and screen readers, and generated text (`content: "*"`)
- * joins the accessible name too. An empty `content` painted by a mask adds
- * nothing to the name or the text. The field's own `required` /
- * `aria-required` is what is announced. Restyle it from your own CSS:
- * `background-color` for the colour, `width` / `height` for the size. */
-[data-slot="label-text"][data-required]::after {
-	content: "";
+/* The required mark of `Label withAsterisk`: an `aria-hidden` inline SVG in
+ * the label's markup, not a "*" in its text. A typed "*" joined the label's
+ * name ("Email *") for `getByLabel(…, { exact })`, `getByLabelText` and
+ * screen readers, and so does generated text (`content: "*"`). The field's
+ * own `required` / `aria-required` is what is announced. Drawn by the markup,
+ * it loads no image: a Content-Security-Policy whose `img-src` refuses
+ * `data:` draws it too. Restyle it from your own CSS: `color` for the colour,
+ * `width` / `height` for the size. */
+[data-slot="label-required-mark"] {
 	display: inline-block;
 	flex: none;
 	align-self: flex-start;
 	width: 0.5em;
 	height: 0.5em;
 	margin-block-start: 0.05em;
-	background-color: var(--color-error);
-	--label-required-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 1v8M1.5 3l7 4M8.5 3l-7 4' stroke='black' stroke-width='1.75' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
-	mask-image: var(--label-required-mark);
-	mask-size: contain;
-	mask-repeat: no-repeat;
-	mask-position: center;
-	/* A browser's print stylesheet drops backgrounds; this one is the mark. */
-	print-color-adjust: exact;
-	-webkit-print-color-adjust: exact;
+	color: var(--color-error);
+	overflow: visible;
 }
 
-/* Forced colours replace background-color with the system palette's own;
+/* Forced colours keep an SVG's `currentColor` stroke as authored;
  * CanvasText keeps the mark visible on any theme. */
 @media (forced-colors: active) {
-	[data-slot="label-text"][data-required]::after {
-		background-color: CanvasText;
+	[data-slot="label-required-mark"] {
+		color: CanvasText;
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material-vue",
-	"version": "0.29.0",
+	"version": "0.30.1",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -119,7 +119,7 @@
 		"docs:previews": "vitest run --project previews"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.7.0",
+		"@nxgt/material-core": "^0.7.1",
 		"@floating-ui/dom": "^1.8.0",
 		"@fortawesome/fontawesome-common-types": "7.3.1",
 		"@lucide/vue": "^1.45.0",