@studiolxd/brand 49.8.1 → 49.10.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 };

package/dist/site-nav.css

@@ -1 +1 @@
-.site-nav{gap:var(--site-nav-group-gap);grid-template-columns:repeat(12,1fr);display:grid}.site-nav__group{grid-column:span 12;min-inline-size:0}@media (width>=768px){.site-nav__group{grid-column:span 6}}@media (width>=768px) and (width<=1023.98px){.site-nav__group:nth-child(odd):last-child{grid-column:span 12}}@media (width>=1024px){.site-nav__group{grid-column:span 4}}@media (width>=1024px) and (width<=1279.98px){.site-nav__group:nth-child(3n+1):last-child{grid-column:span 12}.site-nav__group:nth-child(3n+1):nth-last-child(2),.site-nav__group:nth-child(3n+1):nth-last-child(2)~.site-nav__group{grid-column:span 6}}@media (width>=1280px){.site-nav__group{grid-column:span 3}.site-nav[data-columns="1"]>.site-nav__group{grid-column:span 12}.site-nav[data-columns="2"]>.site-nav__group{grid-column:span 6}.site-nav[data-columns="3"]>.site-nav__group{grid-column:span 4}.site-nav[data-columns="4"]>.site-nav__group{grid-column:span 3}.site-nav[data-columns="5"]{grid-template-columns:repeat(5,1fr)}.site-nav[data-columns="5"]>.site-nav__group{grid-column:span 1}.site-nav[data-columns="5"]>.site-nav__group:nth-child(5n+1):last-child{grid-column:span 5}}.site-nav__label{margin-block:0 var(--site-nav-label-margin-block-end)}.site-nav__list{gap:var(--site-nav-item-gap);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.site-nav__link,.site-nav__label-link{color:inherit;box-shadow:none;padding-block-end:var(--site-nav-item-underline-offset);text-decoration:none}.site-nav__link{font-size:var(--site-nav-item-font-size);font-weight:var(--site-nav-item-font-weight);line-height:var(--site-nav-item-line-height);color:var(--site-nav-item-color);display:inline-block}.site-nav__link:hover,.site-nav__label-link:hover{color:var(--site-nav-item-hover-color);box-shadow:inset 0 calc(-1 * var(--site-nav-item-hover-line-width)) 0 0 currentColor}.site-nav__link.site-nav__link--current{font-weight:var(--site-nav-item-current-font-weight)}.site-nav__link:focus-visible,.site-nav__label-link:focus-visible{outline:var(--site-nav-focus-ring-width) solid var(--site-nav-focus-ring-color);outline-offset:var(--site-nav-focus-ring-offset)}
+.site-nav{gap:var(--site-nav-group-gap);grid-template-columns:repeat(12,1fr);display:grid}.site-nav__group{grid-column:span 12;min-inline-size:0}@media (width>=768px){.site-nav__group{grid-column:span 6}}@media (width>=768px) and (width<=1023.98px){.site-nav__group:nth-child(odd):last-child{grid-column:span 12}}@media (width>=1024px){.site-nav__group{grid-column:span 4}}@media (width>=1024px) and (width<=1279.98px){.site-nav__group:nth-child(3n+1):last-child{grid-column:span 12}.site-nav__group:nth-child(3n+1):nth-last-child(2),.site-nav__group:nth-child(3n+1):nth-last-child(2)~.site-nav__group{grid-column:span 6}}@media (width>=1280px){.site-nav__group{grid-column:span 3}.site-nav[data-columns="1"]>.site-nav__group{grid-column:span 12}.site-nav[data-columns="2"]>.site-nav__group{grid-column:span 6}.site-nav[data-columns="3"]>.site-nav__group{grid-column:span 4}.site-nav[data-columns="4"]>.site-nav__group{grid-column:span 3}.site-nav[data-columns="5"]{grid-template-columns:repeat(5,1fr)}.site-nav[data-columns="5"]>.site-nav__group{grid-column:span 1}.site-nav[data-columns="5"]>.site-nav__group:nth-child(5n+1):last-child{grid-column:span 5}}.site-nav__label{margin-block:0 var(--site-nav-label-margin-block-end)}.site-nav__item{align-items:center;gap:var(--site-nav-item-badge-gap);flex-wrap:wrap;display:flex}.site-nav__list{gap:var(--site-nav-item-gap);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.site-nav__link,.site-nav__label-link{color:inherit;box-shadow:none;padding-block-end:var(--site-nav-item-underline-offset);text-decoration:none}.site-nav__link{font-size:var(--site-nav-item-font-size);font-weight:var(--site-nav-item-font-weight);line-height:var(--site-nav-item-line-height);color:var(--site-nav-item-color);display:inline-block}.site-nav__link:not(.site-nav__link--disabled):hover,.site-nav__label-link:hover{color:var(--site-nav-item-hover-color);box-shadow:inset 0 calc(-1 * var(--site-nav-item-hover-line-width)) 0 0 currentColor}.site-nav__link.site-nav__link--current{font-weight:var(--site-nav-item-current-font-weight)}.site-nav__link.site-nav__link--disabled{color:var(--site-nav-item-disabled-color);cursor:default}.site-nav__link:focus-visible,.site-nav__label-link:focus-visible{outline:var(--site-nav-focus-ring-width) solid var(--site-nav-focus-ring-color);outline-offset:var(--site-nav-focus-ring-offset)}

package/dist/site-nav.js

@@ -2,55 +2,65 @@
 import './site-nav.css';
 import { n as e } from "./_shared/brandmessagescontext.js";
 import { Heading as t } from "./heading.js";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Tag as n } from "./tag.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/stories/molecules/SiteNav/SiteNav.tsx
-function i({ href: e, children: t, className: r, "aria-current": i, target: a, rel: o }) {
-	return /* @__PURE__ */ n("a", {
+function a({ href: e, children: t, className: n, "aria-current": i, target: a, rel: o }) {
+	return /* @__PURE__ */ r("a", {
 		href: e,
-		className: r,
+		className: n,
 		"aria-current": i,
 		target: a,
 		rel: o,
 		children: t
 	});
 }
-function a(e, t) {
+function o(e, t) {
 	return t || (e === "_blank" ? "noopener noreferrer" : void 0);
 }
-var o = 5;
-function s({ groups: s, label: c, renderLink: l = i, className: u }) {
-	let d = e("siteNav"), f = ["site-nav", u].filter(Boolean).join(" "), p = Math.min(s.length, o) || 1;
-	return /* @__PURE__ */ n("nav", {
-		className: f,
-		"aria-label": d("label", c),
-		"data-columns": p,
-		children: s.map((e) => /* @__PURE__ */ r("div", {
+var s = 5;
+function c({ groups: c, label: l, renderLink: u = a, className: d }) {
+	let f = e("siteNav"), p = ["site-nav", d].filter(Boolean).join(" "), m = Math.min(c.length, s) || 1;
+	return /* @__PURE__ */ r("nav", {
+		className: p,
+		"aria-label": f("label", l),
+		"data-columns": m,
+		children: c.map((e) => /* @__PURE__ */ i("div", {
 			className: "site-nav__group",
-			children: [/* @__PURE__ */ n(t, {
+			children: [/* @__PURE__ */ r(t, {
 				level: 2,
 				size: 6,
 				className: "site-nav__label",
-				children: e.href ? l({
+				children: e.href ? u({
 					href: e.href,
 					className: "site-nav__label-link",
 					children: e.label
 				}) : e.label
-			}), /* @__PURE__ */ n("ul", {
+			}), /* @__PURE__ */ r("ul", {
 				className: "site-nav__list",
-				children: e.items.map((e) => /* @__PURE__ */ n("li", {
+				children: e.items.map((e) => /* @__PURE__ */ i("li", {
 					className: "site-nav__item",
-					children: l({
+					children: [e.disabled ? /* @__PURE__ */ r("span", {
+						className: "site-nav__link site-nav__link--disabled",
+						role: "link",
+						"aria-disabled": "true",
+						children: e.label
+					}) : u({
 						href: e.href,
 						className: ["site-nav__link", e.current ? "site-nav__link--current" : ""].filter(Boolean).join(" "),
 						"aria-current": e.current ? "page" : void 0,
 						target: e.target,
-						rel: a(e.target, e.rel),
+						rel: o(e.target, e.rel),
 						children: e.label
-					})
+					}), e.badge && /* @__PURE__ */ r(n, {
+						variant: e.disabled ? "neutral" : "info",
+						className: "site-nav__badge",
+						children: e.badge
+					})]
 				}, e.id))
 			})]
 		}, e.id))
 	});
 }
 //#endregion
-export { s as SiteNav };
+export { c as SiteNav };