@studiolxd/brand 49.3.0 → 49.4.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{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}

package/dist/card.js

@@ -4,80 +4,81 @@ import { VisuallyHidden as e } from "./visually-hidden.js";
 import { Arrow as t } from "./arrow.js";
 import { Heading as n } from "./heading.js";
 import { Paragraph as r } from "./paragraph.js";
-import { forwardRef as i } from "react";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-import { useRender as c } from "@base-ui/react/use-render";
+import { forwardRef as i, useCallback as a, useRef as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useRender as u } from "@base-ui/react/use-render";
 //#region src/stories/molecules/Card/Card.tsx
-var l = i(function({ href: r, render: i, external: l = !1, title: u, description: d, ctaLabel: f, color: p = "outline", variant: m = "default", media: h, selectable: g = !1, selected: _ = !1, className: v, children: y, ...b }, x) {
-	let S = [
+var d = i(function({ href: r, render: i, external: a = !1, title: o, description: d, ctaLabel: f, color: p = "outline", variant: m = "default", media: h, linkOverlay: g = !1, selectable: _ = !1, selected: v = !1, className: y, children: b, ...x }, S) {
+	let C = [
 		"card",
 		`card--${p}`,
 		m === "default" ? "" : `card--${m}`,
-		g ? "card--selectable" : "",
-		g && _ ? "card--selected" : "",
-		v ?? ""
-	].filter(Boolean).join(" "), C = /* @__PURE__ */ s(a, { children: [
-		u !== void 0 && /* @__PURE__ */ o(n, {
+		g ? "card--link-overlay" : "",
+		_ ? "card--selectable" : "",
+		_ && v ? "card--selected" : "",
+		y ?? ""
+	].filter(Boolean).join(" "), w = /* @__PURE__ */ l(s, { children: [
+		o !== void 0 && /* @__PURE__ */ c(n, {
 			level: 2,
 			size: 8,
-			children: u
+			children: o
 		}),
-		d && (typeof d == "string" ? /* @__PURE__ */ o("p", { children: d }) : d),
-		y,
-		f !== void 0 && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(e, { children: f }), /* @__PURE__ */ o(t, { size: "lg" })] })
-	] }), w = h && /* @__PURE__ */ o("div", {
+		d && (typeof d == "string" ? /* @__PURE__ */ c("p", { children: d }) : d),
+		b,
+		f !== void 0 && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(e, { children: f }), /* @__PURE__ */ c(t, { size: "lg" })] })
+	] }), T = h && /* @__PURE__ */ c("div", {
 		className: "card__media",
-		children: /* @__PURE__ */ o("img", {
+		children: /* @__PURE__ */ c("img", {
 			src: h.src,
 			alt: h.alt
 		})
-	}), T = m === "default" && !h ? C : /* @__PURE__ */ s(a, { children: [w, /* @__PURE__ */ o("div", {
+	}), E = m === "default" && !h ? w : /* @__PURE__ */ l(s, { children: [T, /* @__PURE__ */ c("div", {
 		className: "card__body",
-		children: C
+		children: w
 	})] });
-	return c({
+	return u({
 		render: i,
-		ref: x,
+		ref: S,
 		enabled: i !== void 0,
 		props: {
-			className: S,
-			...b,
-			children: T
+			className: C,
+			...x,
+			children: E
 		}
-	}) || (r === void 0 ? /* @__PURE__ */ o("div", {
-		ref: x,
-		className: S,
-		...b,
-		children: y
-	}) : /* @__PURE__ */ o("a", {
-		ref: x,
+	}) || (r === void 0 ? /* @__PURE__ */ c("div", {
+		ref: S,
+		className: C,
+		...x,
+		children: b
+	}) : /* @__PURE__ */ c("a", {
+		ref: S,
 		href: r,
-		className: S,
-		...l ? {
+		className: C,
+		...a ? {
 			target: "_blank",
 			rel: "noopener noreferrer"
 		} : {},
-		...b,
-		children: T
+		...x,
+		children: E
 	}));
-}), u = i(function({ className: e, ...t }, n) {
-	return /* @__PURE__ */ o("div", {
+}), f = i(function({ className: e, ...t }, n) {
+	return /* @__PURE__ */ c("div", {
 		ref: n,
 		className: ["card__header", e].filter(Boolean).join(" "),
 		...t
 	});
-}), d = i(function({ level: e = 3, size: t = 4, className: r, children: i, ...a }, s) {
-	return /* @__PURE__ */ o(n, {
-		ref: s,
+}), p = i(function({ level: e = 3, size: t = 4, className: r, children: i, ...a }, o) {
+	return /* @__PURE__ */ c(n, {
+		ref: o,
 		level: e,
 		size: t,
 		className: ["card__title", r].filter(Boolean).join(" "),
 		...a,
 		children: i
 	});
-}), f = i(function({ size: e = "small", lines: t, className: n, children: i, ...a }, s) {
-	return /* @__PURE__ */ o(r, {
-		ref: s,
+}), m = i(function({ size: e = "small", lines: t, className: n, children: i, ...a }, o) {
+	return /* @__PURE__ */ c(r, {
+		ref: o,
 		size: e,
 		className: [
 			"card__description",
@@ -87,20 +88,31 @@ var l = i(function({ href: r, render: i, external: l = !1, title: u, description
 		...a,
 		children: i
 	});
-}), p = i(function({ className: e, ...t }, n) {
-	return /* @__PURE__ */ o("div", {
-		ref: n,
-		className: ["card__action", e].filter(Boolean).join(" "),
-		...t
+}), h = i(function({ isolate: e = !0, className: t, onClick: n, ...r }, i) {
+	let s = o(null);
+	return /* @__PURE__ */ c("div", {
+		ref: a((e) => {
+			s.current = e, typeof i == "function" ? i(e) : i && (i.current = e);
+		}, [i]),
+		className: ["card__action", t].filter(Boolean).join(" "),
+		onClick: (t) => {
+			if (e) {
+				t.stopPropagation();
+				let e = s.current;
+				(e?.contains(t.target) ?? !1) && e?.parentElement?.closest("a[href], [role=\"link\"]") && t.preventDefault();
+			}
+			n?.(t);
+		},
+		...r
 	});
-}), m = i(function({ className: e, ...t }, n) {
-	return /* @__PURE__ */ o("div", {
+}), g = i(function({ className: e, ...t }, n) {
+	return /* @__PURE__ */ c("div", {
 		ref: n,
 		className: ["card__content", e].filter(Boolean).join(" "),
 		...t
 	});
-}), h = i(function({ direction: e = "row", className: t, ...n }, r) {
-	return /* @__PURE__ */ o("div", {
+}), _ = i(function({ direction: e = "row", className: t, ...n }, r) {
+	return /* @__PURE__ */ c("div", {
 		ref: r,
 		className: [
 			"card__footer",
@@ -111,4 +123,4 @@ var l = i(function({ href: r, render: i, external: l = !1, title: u, description
 	});
 });
 //#endregion
-export { l as Card, p as CardAction, m as CardContent, f as CardDescription, h as CardFooter, u as CardHeader, d as CardTitle };
+export { d as Card, h as CardAction, g as CardContent, m as CardDescription, _ as CardFooter, f as CardHeader, p as CardTitle };

package/dist/link.css

@@ -1 +1 @@
-:where(button.link){appearance:none;font:inherit;text-align:inherit;color:inherit;background:0 0;border:0;margin:0;padding:0}a:where(:not(.button)),:where(.link){color:var(--link-color);box-shadow:inset 0 calc(-1 * var(--link-underline-width)) 0 0 currentColor;cursor:var(--link-cursor);padding-block-end:var(--link-underline-offset);text-decoration:none}:where(.link){inline-size:fit-content}a:where(:not(.button)):hover,:where(.link):hover{color:var(--link-hover-color);box-shadow:inset 0 calc(-1 * var(--link-hover-underline-width)) 0 0 currentColor}a:focus-visible,:where(.link):focus-visible{outline:var(--link-focus-ring-width) solid var(--link-focus-ring-color);outline-offset:var(--link-focus-ring-offset)}.link--with-icon{align-items:center;gap:var(--link-icon-gap);display:inline-flex}.link__icon{flex-shrink:0}.link--ink{color:var(--link-ink-color);box-shadow:inset 0 calc(-1 * var(--link-ink-underline-width)) 0 0 currentColor}.link--ink:hover{color:var(--link-ink-color);box-shadow:inset 0 calc(-1 * var(--link-ink-hover-underline-width)) 0 0 currentColor}.link--accent-1{color:var(--link-accent-1-color);box-shadow:inset 0 calc(-1 * var(--link-accent-1-underline-width)) 0 0 currentColor}.link--accent-1:hover{color:var(--link-accent-1-hover-color);box-shadow:inset 0 calc(-1 * var(--link-accent-1-hover-underline-width)) 0 0 currentColor}
+:where(button.link){appearance:none;font:inherit;text-align:inherit;color:inherit;background:0 0;border:0;margin:0;padding:0}a:where(:not(.button)),:where(.link){color:var(--link-color);box-shadow:inset 0 calc(-1 * var(--link-underline-width)) 0 0 currentColor;cursor:var(--link-cursor);padding-block-end:var(--link-underline-offset);text-decoration:none}:where(.link),:where(.stack>a:not([class])){inline-size:fit-content}a:where(:not(.button)):hover,:where(.link):hover{color:var(--link-hover-color);box-shadow:inset 0 calc(-1 * var(--link-hover-underline-width)) 0 0 currentColor}a:focus-visible,:where(.link):focus-visible{outline:var(--link-focus-ring-width) solid var(--link-focus-ring-color);outline-offset:var(--link-focus-ring-offset)}.link--with-icon{align-items:center;gap:var(--link-icon-gap);display:inline-flex}.link__icon{flex-shrink:0}.link--ink{color:var(--link-ink-color);box-shadow:inset 0 calc(-1 * var(--link-ink-underline-width)) 0 0 currentColor}.link--ink:hover{color:var(--link-ink-color);box-shadow:inset 0 calc(-1 * var(--link-ink-hover-underline-width)) 0 0 currentColor}.link--accent-1{color:var(--link-accent-1-color);box-shadow:inset 0 calc(-1 * var(--link-accent-1-underline-width)) 0 0 currentColor}.link--accent-1:hover{color:var(--link-accent-1-hover-color);box-shadow:inset 0 calc(-1 * var(--link-accent-1-hover-underline-width)) 0 0 currentColor}

package/dist/prose.js

@@ -2,17 +2,23 @@ import './prose.css';
 import { forwardRef as e } from "react";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/stories/molecules/Prose/Prose.tsx
-var n = e(function({ as: e = "div", size: n = "md", measure: r = !0, className: i, children: a, ...o }, s) {
-	return /* @__PURE__ */ t(e, {
-		ref: s,
-		className: [
-			"prose",
-			n === "md" ? "" : `prose--${n}`,
-			r ? "" : "prose--full",
-			i ?? ""
-		].filter(Boolean).join(" "),
-		...o,
+var n = e(function({ as: e = "div", size: n = "md", measure: r = !0, className: i, children: a, html: o, ...s }, c) {
+	let l = [
+		"prose",
+		n === "md" ? "" : `prose--${n}`,
+		r ? "" : "prose--full",
+		i ?? ""
+	].filter(Boolean).join(" ");
+	return o === void 0 ? /* @__PURE__ */ t(e, {
+		ref: c,
+		className: l,
+		...s,
 		children: a
+	}) : /* @__PURE__ */ t(e, {
+		ref: c,
+		className: l,
+		...s,
+		dangerouslySetInnerHTML: { __html: o }
 	});
 });
 //#endregion

package/dist/sortable.css

@@ -0,0 +1 @@
+.sortable{transform:translate3d(var(--sortable-x,0px), var(--sortable-y,0px), 0) scale(var(--sortable-scale-x,1), var(--sortable-scale-y,1));transition:var(--sortable-transition,none)}.sortable[data-dragging]{opacity:var(--opacity-disabled)}@media (prefers-reduced-motion:reduce){.sortable{transition:none}}

package/dist/sortable.js

@@ -0,0 +1,26 @@
+'use client';
+import './sortable.css';
+import { t as e } from "./_shared/css-properties.js";
+import { forwardRef as t, useCallback as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/stories/atoms/Sortable/Sortable.tsx
+var i = t(function({ as: t = "div", transform: i, transition: a, dragging: o = !1, className: s, children: c, ...l }, u) {
+	let d = e({
+		"--sortable-x": i ? `${i.x}px` : void 0,
+		"--sortable-y": i ? `${i.y}px` : void 0,
+		"--sortable-scale-x": i?.scaleX === void 0 ? void 0 : String(i.scaleX),
+		"--sortable-scale-y": i?.scaleY === void 0 ? void 0 : String(i.scaleY),
+		"--sortable-transition": a ?? void 0
+	});
+	return /* @__PURE__ */ r(t, {
+		ref: n((e) => {
+			d(e), typeof u == "function" ? u(e) : u && (u.current = e);
+		}, [d, u]),
+		className: ["sortable", s].filter(Boolean).join(" "),
+		"data-dragging": o ? "" : void 0,
+		...l,
+		children: c
+	});
+});
+//#endregion
+export { i as Sortable };

package/dist/tooltip.css

@@ -1 +1 @@
-.tooltip{box-sizing:border-box;max-width:var(--tooltip-max-width);padding-block:var(--tooltip-padding-block);padding-inline:var(--tooltip-padding-inline);border-radius:var(--tooltip-border-radius);background-color:var(--tooltip-bg);color:var(--tooltip-color);font-family:var(--tooltip-font-family);font-size:var(--tooltip-font-size);line-height:var(--tooltip-line-height);transform-origin:var(--transform-origin);animation-duration:var(--tooltip-transition-duration);animation-timing-function:var(--tooltip-transition-easing)}.tooltip[data-open]{animation-name:tooltip-in}.tooltip[data-closed]{animation-name:tooltip-out}.tooltip__arrow{fill:var(--tooltip-bg);line-height:0}.tooltip__arrow[data-side=top]{top:100%}.tooltip__arrow[data-side=bottom]{bottom:100%;rotate:180deg}.tooltip__arrow[data-side=left]{left:100%;translate:-25%;rotate:-90deg}.tooltip__arrow[data-side=right]{right:100%;translate:25%;rotate:90deg}@keyframes tooltip-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes tooltip-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.tooltip__positioner{z-index:var(--tooltip-z-index)}
+.tooltip{box-sizing:border-box;max-width:var(--tooltip-max-width);padding-block:var(--tooltip-padding-block);padding-inline:var(--tooltip-padding-inline);border-radius:var(--tooltip-border-radius);background-color:var(--tooltip-bg);color:var(--tooltip-color);font-family:var(--tooltip-font-family);font-size:var(--tooltip-font-size);line-height:var(--tooltip-line-height);transform-origin:var(--transform-origin);animation-duration:var(--tooltip-transition-duration);animation-timing-function:var(--tooltip-transition-easing)}.tooltip[data-open]{animation-name:tooltip-in}.tooltip[data-closed]{animation-name:tooltip-out}.tooltip__arrow{fill:var(--tooltip-bg);line-height:0}.tooltip__arrow[data-side=top]{top:100%}.tooltip__arrow[data-side=bottom]{bottom:100%;rotate:180deg}.tooltip__arrow[data-side=left]{left:100%;translate:-25%;rotate:-90deg}.tooltip__arrow[data-side=right]{right:100%;translate:25%;rotate:90deg}@keyframes tooltip-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes tooltip-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.tooltip__positioner{z-index:var(--tooltip-z-index)}.tooltip__trigger{display:inline-flex}.tooltip__trigger:focus-visible{outline:var(--border-width-focus) solid currentColor;outline-offset:var(--spacing-1)}.tooltip__trigger>:disabled,.tooltip__trigger>[aria-disabled=true]{pointer-events:none}

package/dist/tooltip.js

@@ -20,31 +20,35 @@ function l() {
 	let e = document.documentElement;
 	return c(getComputedStyle(e).getPropertyValue("--tooltip-offset").trim(), e);
 }
-var u = t(function({ label: t, children: s, side: c = "top", align: u = "center", sideOffset: d, open: f, defaultOpen: p, onOpenChange: m, delayDuration: h, describe: g = !0, container: _, className: v, ...y }, b) {
-	let x = e(_), S = n(), [C, w] = r(p ?? !1), T = f ?? C;
+var u = t(function({ label: t, children: s, side: c = "top", align: u = "center", sideOffset: d, open: f, defaultOpen: p, onOpenChange: m, delayDuration: h, describe: g = !0, disabledTrigger: _ = !1, container: v, className: y, ...b }, x) {
+	let S = e(v), C = n(), [w, T] = r(p ?? !1), E = f ?? w;
 	return /* @__PURE__ */ a(o.Root, {
 		open: f,
 		defaultOpen: p,
 		onOpenChange: (e) => {
-			f === void 0 && w(e), m?.(e);
+			f === void 0 && T(e), m?.(e);
 		},
 		children: [/* @__PURE__ */ i(o.Trigger, {
-			ref: b,
-			render: s,
-			"aria-describedby": T && g ? S : void 0,
+			ref: x,
+			render: _ ? /* @__PURE__ */ i("span", {
+				className: "tooltip__trigger",
+				tabIndex: 0,
+				children: s
+			}) : s,
+			"aria-describedby": E && g ? C : void 0,
 			...h === void 0 ? {} : { delay: h },
-			...y
+			...b
 		}), /* @__PURE__ */ i(o.Portal, {
-			container: x,
+			container: S,
 			children: /* @__PURE__ */ i(o.Positioner, {
 				className: "tooltip__positioner",
 				side: c,
 				align: u,
 				sideOffset: d ?? l,
 				children: /* @__PURE__ */ a(o.Popup, {
-					id: S,
+					id: C,
 					role: "tooltip",
-					className: ["tooltip", v].filter(Boolean).join(" "),
+					className: ["tooltip", y].filter(Boolean).join(" "),
 					children: [t, /* @__PURE__ */ i(o.Arrow, {
 						className: "tooltip__arrow",
 						children: /* @__PURE__ */ i("svg", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "49.3.0",
+  "version": "49.4.0",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",
@@ -574,6 +574,10 @@
       "types": "./dist/_types/atoms/Sparkline/Sparkline.d.ts",
       "import": "./dist/sparkline.js"
     },
+    "./sortable": {
+      "types": "./dist/_types/atoms/Sortable/Sortable.d.ts",
+      "import": "./dist/sortable.js"
+    },
     "./spinner": {
       "types": "./dist/_types/atoms/Spinner/Spinner.d.ts",
       "import": "./dist/spinner.js"