@studiolxd/brand 49.8.1 → 49.9.0

package/dist/card.css

@@ -1 +1 @@
-.card{box-shadow:none;color:inherit;padding-inline:var(--card-padding-inline);align-items:flex-start;gap:var(--card-gap);border-radius:var(--card-border-radius);flex-direction:column;padding-block-start:var(--card-padding-block-start);padding-block-end:var(--card-padding-block-end);text-decoration:none;display:flex}.card p:not(.paragraph){font-size:var(--card-description-font-size);margin-block-end:var(--card-description-margin-block-end)}.card .arrow{margin-block-start:auto}:where(button.card){appearance:none;font:inherit;text-align:start;cursor:pointer;background:0 0;border:0;inline-size:100%;margin:0}.card__footer.card__footer--column{flex-direction:column;align-items:stretch}.card.card--primary{background-color:var(--card-primary-bg);color:var(--card-primary-color);--text-list-color:var(--card-primary-color);--text-h1-color:var(--card-primary-color);--text-h2-color:var(--card-primary-color);--text-h3-color:var(--card-primary-color);--text-h4-color:var(--card-primary-color);--text-h5-color:var(--card-primary-color);--text-h6-color:var(--card-primary-color)}.card.card--outline{background-color:var(--card-outline-bg);color:var(--card-outline-color);border:var(--card-outline-border-width) solid var(--card-outline-border-color)}.card.card--accent-1{background-color:var(--card-accent-1-bg);color:var(--card-accent-1-color);--text-list-color:var(--card-accent-1-color)}.card.card--accent-2{background-color:var(--card-accent-2-bg);color:var(--card-accent-2-color);--text-list-color:var(--card-accent-2-color)}.card.card--support-1{background-color:var(--card-support-1-bg);color:var(--card-support-1-color);--text-list-color:var(--card-support-1-color)}.card.card--support-2{background-color:var(--card-support-2-bg);color:var(--card-support-2-color);--text-list-color:var(--card-support-2-color)}.card.card--square,.card.card--split{gap:0;padding-block:0;padding-inline:0}.card__body{align-items:flex-start;gap:var(--card-gap);inline-size:100%;padding-inline:var(--card-padding-inline);flex-direction:column;flex:1;padding-block-start:var(--card-padding-block-start);padding-block-end:var(--card-padding-block-end);display:flex}.card__media img{object-fit:cover;block-size:100%;inline-size:100%;display:block}.card--square .card__media,.card--split .card__media{aspect-ratio:1;inline-size:100%}@media (width>=768px){.card.card--split{flex-direction:row;align-items:stretch}.card--split .card__media,.card--split .card__body{flex:50%;inline-size:50%}.card--split .card__media{aspect-ratio:auto}}.card__header,.card__content,.card__footer{inline-size:100%}.card__header{align-items:start;column-gap:var(--card-header-gap);row-gap:var(--card-header-row-gap);grid-template-columns:minmax(0,1fr) auto;display:grid}.card__header>*{grid-column:1}.card__header>.card__action{grid-area:1/2;justify-self:end}.card__title{font-weight:var(--card-title-font-weight);color:inherit;margin-block:0}.card__description{color:inherit;margin-block:0}.card__description--lines-1{min-block-size:1lh}.card__description--lines-2{min-block-size:2lh}.card__description--lines-3{min-block-size:3lh}.card__footer{align-items:stretch;gap:var(--card-footer-gap);flex-direction:column;margin-block-start:auto;display:flex}.card__footer>*{inline-size:100%}@media (width>=768px){.card__footer:not(.card__footer--column){flex-direction:row}.card__footer:not(.card__footer--column)>*{inline-size:auto}}.card.card--selectable{cursor:pointer;position:relative}.card--selectable .radio-field,.card--selectable .checkbox-field{margin:0;position:absolute;inset:0}.card--selectable .radio-field__control,.card--selectable .checkbox-field__control{opacity:0;cursor:pointer;position:absolute;inset:0}.card.card--selectable:has(input:focus-visible){outline:var(--card-selectable-focus-ring-width) solid var(--card-selectable-focus-ring-color);outline-offset:var(--card-selectable-focus-ring-offset)}.card.card--selectable.card--selected{background-color:var(--card-accent-1-bg);color:var(--card-accent-1-color);border-color:var(--card-accent-1-bg);--text-list-color:var(--card-accent-1-color)}.card.card--selectable:has(input:checked){background-color:var(--card-accent-1-bg);color:var(--card-accent-1-color);border-color:var(--card-accent-1-bg);--text-list-color:var(--card-accent-1-color)}.card.card--link-overlay{position:relative}.card.card--link-overlay .card__title a:after{content:"";position:absolute;inset:0}.card.card--link-overlay .card__action{z-index:1;position:relative}
+.card{box-shadow:none;color:inherit;padding-inline:var(--card-padding-inline);align-items:flex-start;gap:var(--card-gap);border-radius:var(--card-border-radius);flex-direction:column;padding-block-start:var(--card-padding-block-start);padding-block-end:var(--card-padding-block-end);text-decoration:none;display:flex}.card p:not(.paragraph){font-size:var(--card-description-font-size);margin-block-end:var(--card-description-margin-block-end)}.card .arrow{margin-block-start:auto}:where(button.card){appearance:none;font:inherit;text-align:start;cursor:pointer;background:0 0;border:0;inline-size:100%;margin:0}.card__footer.card__footer--column{flex-direction:column;align-items:stretch}.card.card--primary{background-color:var(--card-primary-bg);color:var(--card-primary-color);--text-list-color:var(--card-primary-color);--text-h1-color:var(--card-primary-color);--text-h2-color:var(--card-primary-color);--text-h3-color:var(--card-primary-color);--text-h4-color:var(--card-primary-color);--text-h5-color:var(--card-primary-color);--text-h6-color:var(--card-primary-color)}.card.card--outline{background-color:var(--card-outline-bg);color:var(--card-outline-color);border:var(--card-outline-border-width) solid var(--card-outline-border-color)}.card.card--accent-1{background-color:var(--card-accent-1-bg);color:var(--card-accent-1-color);--text-list-color:var(--card-accent-1-color)}.card.card--accent-2{background-color:var(--card-accent-2-bg);color:var(--card-accent-2-color);--text-list-color:var(--card-accent-2-color)}.card.card--support-1{background-color:var(--card-support-1-bg);color:var(--card-support-1-color);--text-list-color:var(--card-support-1-color)}.card.card--support-2{background-color:var(--card-support-2-bg);color:var(--card-support-2-color);--text-list-color:var(--card-support-2-color)}.card.card--square,.card.card--split{gap:0;padding-block:0;padding-inline:0}.card__body{align-items:flex-start;gap:var(--card-gap);inline-size:100%;padding-inline:var(--card-padding-inline);flex-direction:column;flex:1;padding-block-start:var(--card-padding-block-start);padding-block-end:var(--card-padding-block-end);display:flex}.card__media img{object-fit:cover;block-size:100%;inline-size:100%;display:block}.card--square .card__media,.card--split .card__media{aspect-ratio:1;inline-size:100%}@media (width>=768px){.card.card--split{flex-direction:row;align-items:stretch}.card--split .card__media,.card--split .card__body{flex:50%;inline-size:50%}.card--split .card__media{aspect-ratio:auto}}.card__header,.card__content,.card__footer{inline-size:100%}.card__header{align-items:start;column-gap:var(--card-header-gap);row-gap:var(--card-header-row-gap);grid-template-columns:minmax(0,1fr) auto;display:grid}.card__header>*{grid-column:1}.card__header>.card__action{grid-area:1/2;justify-self:end}.card__header:has(>.card__selection){grid-template-columns:auto minmax(0,1fr) auto}.card__header:has(>.card__selection)>*{grid-column:2}.card__header>.card__selection{grid-area:1/1;align-self:start}.card__header:has(>.card__selection)>.card__action{grid-area:1/3;justify-self:end}.card__title{font-weight:var(--card-title-font-weight);color:inherit;margin-block:0}.card__description{color:inherit;margin-block:0}.card__description--lines-1{min-block-size:1lh}.card__description--lines-2{min-block-size:2lh}.card__description--lines-3{min-block-size:3lh}.card__footer{align-items:stretch;gap:var(--card-footer-gap);flex-direction:column;margin-block-start:auto;display:flex}.card__footer>*{inline-size:100%}@media (width>=768px){.card__footer:not(.card__footer--column){flex-direction:row}.card__footer:not(.card__footer--column)>*{inline-size:auto}}.card.card--selectable{cursor:pointer;position:relative}.card--selectable .radio-field,.card--selectable .checkbox-field{margin:0;position:absolute;inset:0}.card--selectable .radio-field__control,.card--selectable .checkbox-field__control{opacity:0;cursor:pointer;position:absolute;inset:0}.card.card--selectable:has(input:focus-visible){outline:var(--card-selectable-focus-ring-width) solid var(--card-selectable-focus-ring-color);outline-offset:var(--card-selectable-focus-ring-offset)}.card.card--selectable.card--selected{background-color:var(--card-accent-1-bg);color:var(--card-accent-1-color);border-color:var(--card-accent-1-bg);--text-list-color:var(--card-accent-1-color)}.card.card--selectable:has(input:checked){background-color:var(--card-accent-1-bg);color:var(--card-accent-1-color);border-color:var(--card-accent-1-bg);--text-list-color:var(--card-accent-1-color)}.card.card--link-overlay{position:relative}.card.card--link-overlay .card__title a:after{content:"";position:absolute;inset:0}.card.card--link-overlay .card__action,.card.card--link-overlay .card__selection,.card.card--link-overlay .card__interactive{z-index:1;position:relative}

package/dist/card.js

@@ -61,13 +61,21 @@ var d = i(function({ href: r, render: i, external: a = !1, title: o, description
 		...x,
 		children: E
 	}));
-}), f = i(function({ className: e, ...t }, n) {
+});
+function f(e, t, n) {
+	return [
+		e,
+		t ? "card__interactive" : "",
+		n
+	].filter(Boolean).join(" ");
+}
+var p = i(function({ interactive: e, className: t, ...n }, r) {
 	return /* @__PURE__ */ c("div", {
-		ref: n,
-		className: ["card__header", e].filter(Boolean).join(" "),
-		...t
+		ref: r,
+		className: f("card__header", e, t),
+		...n
 	});
-}), p = i(function({ level: e = 3, size: t = 4, className: r, children: i, ...a }, o) {
+}), m = i(function({ level: e = 3, size: t = 4, className: r, children: i, ...a }, o) {
 	return /* @__PURE__ */ c(n, {
 		ref: o,
 		level: e,
@@ -76,7 +84,7 @@ var d = i(function({ href: r, render: i, external: a = !1, title: o, description
 		...a,
 		children: i
 	});
-}), m = i(function({ size: e = "small", lines: t, className: n, children: i, ...a }, o) {
+}), h = i(function({ size: e = "small", lines: t, className: n, children: i, ...a }, o) {
 	return /* @__PURE__ */ c(r, {
 		ref: o,
 		size: e,
@@ -88,7 +96,7 @@ var d = i(function({ href: r, render: i, external: a = !1, title: o, description
 		...a,
 		children: i
 	});
-}), h = i(function({ isolate: e = !0, className: t, onClick: n, ...r }, i) {
+}), g = i(function({ isolate: e = !0, className: t, onClick: n, ...r }, i) {
 	let s = o(null);
 	return /* @__PURE__ */ c("div", {
 		ref: a((e) => {
@@ -105,22 +113,27 @@ var d = i(function({ href: r, render: i, external: a = !1, title: o, description
 		},
 		...r
 	});
-}), g = i(function({ className: e, ...t }, n) {
+}), _ = i(function({ isolate: e = !0, className: t, onClick: n, ...r }, i) {
 	return /* @__PURE__ */ c("div", {
-		ref: n,
-		className: ["card__content", e].filter(Boolean).join(" "),
-		...t
+		ref: i,
+		className: ["card__selection", t].filter(Boolean).join(" "),
+		onClick: (t) => {
+			e && t.stopPropagation(), n?.(t);
+		},
+		...r
 	});
-}), _ = i(function({ direction: e = "row", className: t, ...n }, r) {
+}), v = i(function({ interactive: e, className: t, ...n }, r) {
 	return /* @__PURE__ */ c("div", {
 		ref: r,
-		className: [
-			"card__footer",
-			e === "column" ? "card__footer--column" : "",
-			t
-		].filter(Boolean).join(" "),
+		className: f("card__content", e, t),
 		...n
 	});
+}), y = i(function({ direction: e = "row", interactive: t, className: n, ...r }, i) {
+	return /* @__PURE__ */ c("div", {
+		ref: i,
+		className: f("card__footer", t, [e === "column" ? "card__footer--column" : "", n].filter(Boolean).join(" ") || void 0),
+		...r
+	});
 });
 //#endregion
-export { d as Card, h as CardAction, g as CardContent, m as CardDescription, _ as CardFooter, f as CardHeader, p as CardTitle };
+export { d as Card, g as CardAction, v as CardContent, h as CardDescription, y as CardFooter, p as CardHeader, _ as CardSelection, m as CardTitle };