@stainless-api/ui-primitives 0.1.0-beta.28 → 0.1.0-beta.29

package/dist/{Accordion-Cj5GURin.d.ts → Accordion-CvvTR8p8.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/components/Accordion.d.ts
 type AccordionProps = React.ComponentProps<'details'>;
@@ -7,7 +7,7 @@ declare function Accordion({
   className,
   children,
   ...props
-}: AccordionProps): react_jsx_runtime0.JSX.Element;
+}: AccordionProps): react_jsx_runtime3.JSX.Element;
 declare namespace Accordion {
   var Summary: typeof AccordionSummary;
   var Group: typeof AccordionGroup;
@@ -16,11 +16,11 @@ declare function AccordionSummary({
   children,
   className,
   ...props
-}: React.ComponentProps<'summary'>): react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<'summary'>): react_jsx_runtime3.JSX.Element;
 declare function AccordionGroup({
   className,
   children,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime3.JSX.Element;
 //#endregion
 export { AccordionProps as n, Accordion as t };

package/dist/{Button-CxQtPObH.d.ts → Button-DMtVJEuK.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { LucideIcon } from "lucide-react";
 
 //#region src/components/Button.d.ts
@@ -17,17 +17,17 @@ type ButtonBranch = BaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElemen
   href?: never;
 };
 type ButtonProps = AnchorBranch | ButtonBranch;
-declare function Button(props: ButtonProps): react_jsx_runtime2.JSX.Element;
+declare function Button(props: ButtonProps): react_jsx_runtime0.JSX.Element;
 declare namespace Button {
   var Label: ({
     className,
     ...rest
-  }: LabelProps) => react_jsx_runtime2.JSX.Element;
+  }: LabelProps) => react_jsx_runtime0.JSX.Element;
   var Icon: ({
     className,
     icon: Icon,
     size
-  }: IconProps) => react_jsx_runtime2.JSX.Element;
+  }: IconProps) => react_jsx_runtime0.JSX.Element;
 }
 type LabelProps = React.HTMLAttributes<HTMLSpanElement>;
 type IconProps = {

package/dist/{Callout-DlwbfFHm.d.ts → Callout-Desqa2PM.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/Callout.d.ts
 type CalloutVariant = 'info' | 'note' | 'tip' | 'success' | 'warning' | 'danger';
@@ -13,6 +13,6 @@ declare function Callout({
   className,
   children,
   ...props
-}: CalloutProps): react_jsx_runtime5.JSX.Element;
+}: CalloutProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { CalloutProps as n, CalloutVariant as r, Callout as t };

package/dist/components/Accordion.d.ts

@@ -1,2 +1,2 @@
-import { n as AccordionProps, t as Accordion } from "../Accordion-Cj5GURin.js";
+import { n as AccordionProps, t as Accordion } from "../Accordion-CvvTR8p8.js";
 export { Accordion, AccordionProps };

package/dist/components/Button.d.ts

@@ -1,2 +1,2 @@
-import { n as ButtonProps, r as ButtonVariant, t as Button } from "../Button-CxQtPObH.js";
+import { n as ButtonProps, r as ButtonVariant, t as Button } from "../Button-DMtVJEuK.js";
 export { Button, ButtonProps, ButtonVariant };

package/dist/components/Callout.d.ts

@@ -1,2 +1,2 @@
-import { n as CalloutProps, r as CalloutVariant, t as Callout } from "../Callout-DlwbfFHm.js";
+import { n as CalloutProps, r as CalloutVariant, t as Callout } from "../Callout-Desqa2PM.js";
 export { Callout, CalloutProps, CalloutVariant };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import { n as AccordionProps, t as Accordion } from "./Accordion-Cj5GURin.js";
-import { n as ButtonProps, r as ButtonVariant, t as Button } from "./Button-CxQtPObH.js";
-import { n as CalloutProps, r as CalloutVariant, t as Callout } from "./Callout-DlwbfFHm.js";
+import { n as AccordionProps, t as Accordion } from "./Accordion-CvvTR8p8.js";
+import { n as ButtonProps, r as ButtonVariant, t as Button } from "./Button-DMtVJEuK.js";
+import { n as CalloutProps, r as CalloutVariant, t as Callout } from "./Callout-Desqa2PM.js";
 import * as react3 from "react";
 import { ComponentProps } from "react";
 import * as react_jsx_runtime21 from "react/jsx-runtime";

package/dist/index.js

@@ -9,7 +9,7 @@ import { CheckIcon, ChevronsUpDown, ExternalLink } from "lucide-react";
 function Menu({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
-		role: "listbox",
+		role: "menu",
 		"data-state": "closed",
 		"data-part": "menu",
 		className: clsx("stl-ui-dropdown-menu", className)
@@ -40,7 +40,7 @@ function MenuItem({ children, value, href, isExternalLink, isSelected, ...props
 		})
 	] });
 	if (href) return /* @__PURE__ */ jsx("a", {
-		role: "option",
+		role: "menuitem",
 		"data-part": "item",
 		"data-value": value,
 		"aria-selected": isSelected,
@@ -51,7 +51,7 @@ function MenuItem({ children, value, href, isExternalLink, isSelected, ...props
 	});
 	return /* @__PURE__ */ jsx("button", {
 		...props,
-		role: "option",
+		role: "menuitem",
 		"data-part": "item",
 		"data-value": value,
 		"aria-selected": isSelected,
@@ -81,6 +81,9 @@ Menu.ItemTemplate = MenuItemTemplate;
 //#region src/components/dropdown/Dropdown.tsx
 function Trigger$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx("button", {
+		"aria-label": "Select an option",
+		"aria-haspopup": "menu",
+		"aria-expanded": "false",
 		...props,
 		"data-part": "trigger",
 		className: clsx("stl-ui-dropdown__button", className),
@@ -111,8 +114,6 @@ function Icon$1({ className, ...props }) {
 function Dropdown({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
-		"aria-haspopup": "listbox",
-		"aria-expanded": "false",
 		className: clsx("stl-ui-dropdown stl-ui-not-prose not-content", className)
 	});
 }
@@ -135,6 +136,8 @@ function PrimaryActionText({ children }) {
 }
 function PrimaryAction({ className, ...props }) {
 	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": "Select primary option",
 		...props,
 		"data-part": "primary-action",
 		className: clsx("stl-ui-dropdown__button stl-ui-dropdown-button--action", className)
@@ -142,8 +145,11 @@ function PrimaryAction({ className, ...props }) {
 }
 function Trigger({ className, ...props }) {
 	return /* @__PURE__ */ jsx("button", {
-		...props,
 		type: "button",
+		"aria-haspopup": "menu",
+		"aria-expanded": "false",
+		"aria-label": "Select an option",
+		...props,
 		"data-part": "trigger",
 		className: clsx("stl-ui-dropdown__button stl-ui-dropdown-button__trigger", className),
 		children: /* @__PURE__ */ jsx(ChevronsUpDown, { size: 16 })
@@ -159,8 +165,6 @@ function Icon({ className, ...props }) {
 function DropdownButton({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
-		"aria-haspopup": "listbox",
-		"aria-expanded": "false",
 		className: clsx("stl-ui-dropdown stl-ui-not-prose not-content", className)
 	});
 }

package/dist/scripts/index.js

@@ -18,7 +18,7 @@ function initDropdown({ root, onSelect, initialValue }) {
 	const items = Array.from(menu.querySelectorAll("[data-part=\"item\"]"));
 	function open() {
 		if (!trigger || !menu || !root) return;
-		root.setAttribute("aria-expanded", "true");
+		trigger.setAttribute("aria-expanded", "true");
 		menu.dataset.state = "open";
 		menu.removeAttribute("aria-hidden");
 		const triggerRect = trigger.getBoundingClientRect();
@@ -31,7 +31,7 @@ function initDropdown({ root, onSelect, initialValue }) {
 	}
 	function close() {
 		if (!trigger || !menu || !root) return;
-		root.setAttribute("aria-expanded", "false");
+		trigger.setAttribute("aria-expanded", "false");
 		menu.dataset.state = "closed";
 		menu.setAttribute("aria-hidden", "true");
 	}
@@ -71,8 +71,8 @@ function initDropdown({ root, onSelect, initialValue }) {
 		trigger.focus();
 	}
 	function handleTriggerClick() {
-		if (!root) return false;
-		if (root.getAttribute("aria-expanded") === "true") {
+		if (!trigger) return false;
+		if (trigger.getAttribute("aria-expanded") === "true") {
 			close();
 			return false;
 		} else {
@@ -94,7 +94,7 @@ function initDropdown({ root, onSelect, initialValue }) {
 		handleItemSelection(e);
 	});
 	document.addEventListener("keydown", (e) => {
-		if (!(root.getAttribute("aria-expanded") === "true")) return;
+		if (!(trigger.getAttribute("aria-expanded") === "true")) return;
 		if (e.key === "Escape") {
 			close();
 			trigger.focus();

package/dist/styles.css

@@ -29,11 +29,10 @@
     --stl-typography-scale-5xl: 42px;
     --stl-typography-scale-6xl: 64px;
 
-    --stl-typography-selection-base: var(--stl-color-accent-background);
-    --stl-typography-selection-foreground: /* unset by default; text colors are unchanged */;
-    --stl-typography-selection-background: light-dark(
-      rgb(from var(--stl-typography-selection-base) r g b / calc(alpha * 0.2)),
-      rgb(from var(--stl-typography-selection-base) r g b / calc(alpha * 0.35))
+    --stl-color-text-selection-foreground: /* unset by default; text colors are unchanged */;
+    --stl-color-text-selection-background: light-dark(
+      rgb(from var(--stl-color-text-selection) r g b / calc(alpha * 0.2)),
+      rgb(from var(--stl-color-text-selection) r g b / calc(alpha * 0.35))
     );
   }
 }
@@ -64,16 +63,12 @@ body {
     color: initial;
   }
 
-  :where(p:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose p) {
-    margin-top: 16px;
-  }
-
   :where(strong:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose strong) {
     color: var(--stl-color-foreground);
   }
 
   :where(a:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose a) {
-    color: var(--stl-color-foreground-accent);
+    color: var(--stl-color-link-foreground);
     text-decoration-color: rgb(from currentColor r g b / calc(alpha * var(--stl-opacity-level-040)));
     transition: text-decoration-color 0.1s ease-out;
     &:hover {
@@ -181,6 +176,11 @@ body {
   }
 }
 
+/* _direct_ children of stl-ui-prose should get a margin-top by default for spacing. */
+:where(.stl-ui-prose, .stl-ui-prose > .sl-markdown-content) > :where(:not(:first-child)) {
+  margin-top: 16px;
+}
+
 @layer starlight.content {
   .stl-ui-prose .sl-markdown-content {
     a,
@@ -191,8 +191,8 @@ body {
 }
 
 ::selection {
-  background-color: var(--stl-typography-selection-background);
-  color: var(--stl-typography-selection-foreground);
+  background-color: var(--stl-color-text-selection-background);
+  color: var(--stl-color-text-selection-foreground);
 }
 
 @layer stl-ui.tokens {
@@ -364,6 +364,13 @@ body {
     color: var(--stl-color-foreground);
   }
 }
+/* Semantic color roles */
+@layer stl-ui.tokens {
+  :root {
+    --stl-color-link-foreground: var(--stl-color-foreground-accent);
+    --stl-color-text-selection: var(--stl-color-accent-background);
+  }
+}
 .stl-ui-button {
   height: 32px;
   padding: 8px 10px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stainless-api/ui-primitives",
-  "version": "0.1.0-beta.28",
+  "version": "0.1.0-beta.29",
   "publishConfig": {
     "access": "public"
   },
@@ -23,7 +23,7 @@
     "react-dom": "^19.2.0",
     "rolldown": "1.0.0-beta.51",
     "sass": "^1.94.2",
-    "tsdown": "^0.16.6",
+    "tsdown": "^0.16.7",
     "typescript": "5.9.3",
     "@stainless/eslint-config": "0.1.0-beta.0"
   },