@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/dist/well/TerminalLog.d.ts

@@ -0,0 +1,53 @@
+import type { JSX } from "@solidjs/web";
+import type { StyleString } from "../style";
+import type { UnsafeClassName } from "../s2-internal/style-utils";
+/**
+ * The ink a log line (or one span of it) reports in. The four status channels are
+ * the register's shared ones; `prompt` is the shell's own blue and `muted` the
+ * well's recessive grey.
+ */
+export type TerminalLogChannel = "info" | "signal" | "metric" | "fault" | "prompt" | "muted";
+export interface TerminalLogSpan {
+    /** The span's text. */
+    text: string;
+    /** The channel this span reports in. Defaults to the line's channel. */
+    channel?: TerminalLogChannel;
+}
+export interface TerminalLogLine {
+    /** A timestamp, rendered in a `<time>` ahead of the text. */
+    time?: string;
+    /** The line's text. Ignored when `spans` is given. */
+    text?: string;
+    /** The line split into per-channel runs — a command and its result on one line. */
+    spans?: TerminalLogSpan[];
+    /** The channel the whole line reports in. @default undefined (the well's ink) */
+    channel?: TerminalLogChannel;
+}
+export interface TerminalLogProps {
+    /** The lines, oldest first. */
+    lines: readonly TerminalLogLine[];
+    /** Draw a blinking block caret after the last line. @default false */
+    showCaret?: boolean;
+    /** Boot the lines in one after another on mount. @default false */
+    bootIn?: boolean;
+    /** Spectrum-defined generated classes. */
+    styles?: StyleString | (() => StyleString | undefined);
+    /** Additional CSS class name. Use only as a last resort. */
+    UNSAFE_className?: UnsafeClassName | string;
+    /** Additional inline styles. Use only as a last resort. */
+    UNSAFE_style?: JSX.CSSProperties;
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+}
+/**
+ * A terminal transcript on the register's matte well — timestamps, per-channel
+ * ink, an optional boot-in stagger and a blinking caret.
+ *
+ * Local addition — no S2 counterpart. It is static content, not a live region:
+ * the lines render as an ordered list (`<ol>`/`<li>`, timestamps in `<time>`), so
+ * a reader gets the transcript in order and on demand. A caller streaming lines in
+ * and needing them announced should own that live region itself.
+ */
+export declare function TerminalLog(props: TerminalLogProps): JSX.Element;
+//# sourceMappingURL=TerminalLog.d.ts.map

package/dist/well/TerminalLog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalLog.d.ts","sourceRoot":"","sources":["../../src/well/TerminalLog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAIlE;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE7F,MAAM,WAAW,eAAe;IAC9B,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED,MAAM,WAAW,eAAe;IAC9B,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mFAAmF;IACnF,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,iFAAiF;IACjF,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED,MAAM,WAAW,gBAAgB;IAC/B,+BAA+B;IAC/B,KAAK,EAAE,SAAS,eAAe,EAAE,CAAC;IAClC,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC;IACvD,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IAC5C,2DAA2D;IAC3D,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAoGD;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA+DhE"}

package/dist/well/index.d.ts

@@ -1,10 +1,31 @@
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
+export type WellTone = "well" | "deep";
+export type WellSize = "S" | "M";
 export interface WellProps extends JSX.HTMLAttributes<HTMLDivElement> {
     class?: string;
+    /**
+     * Local addition — no S2 counterpart (S2 retired Well). The plate's depth:
+     * `well` is the register's standard matte terminal plate, `deep` the darker
+     * `--surface-well-deep` the handoff spends on the containers that hold other
+     * controls — the nav well and the tutor prompt well (TerminalGlassLab.tsx §07).
+     * Both are matte; depth is the only axis, so a deep well is not a second look.
+     * @default 'well'
+     */
+    tone?: WellTone;
+    /**
+     * Local addition — no S2 counterpart. The plate's inset. `M` is the reading
+     * well the handoff draws at 14px/16px for log and status content; `S` is the
+     * 8px container inset used when the well is holding rows that carry their own
+     * padding, so the plate does not double it.
+     * @default 'M'
+     */
+    size?: WellSize;
 }
 /**
  * A Well is a styled container that groups content into an inset, subtly
  * emphasized region — for example a code sample or a callout block.
  */
 export declare function Well(props: WellProps): JSX.Element;
+export { TerminalLog } from "./TerminalLog";
+export type { TerminalLogProps, TerminalLogLine, TerminalLogSpan, TerminalLogChannel, } from "./TerminalLog";
 //# sourceMappingURL=index.d.ts.map

package/dist/well/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/well/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAc,MAAM,UAAU,CAAC;AAIhD,MAAM,WAAW,SAAU,SAAQ,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkCD;;;GAGG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAOlD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/well/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAKxC,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AACvC,MAAM,MAAM,QAAQ,GAAG,GAAG,GAAG,GAAG,CAAC;AAEjC,MAAM,WAAW,SAAU,SAAQ,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAsDD;;;GAGG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAQlD;AAED,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,kBAAkB,GACnB,MAAM,eAAe,CAAC"}

package/dist/well/index.js

@@ -1,25 +1,2 @@
-import { getNextElement, insert, mergeProps, runHydrationEvents, spread, template } from "solid-js/web";
-import { splitProps } from "solid-js";
-//#region src/well/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
-const wellStyles = " sb151 gHPXipd151 _iRvAxPd151 _ilc151 __mrmLYsd151 _kb151 hb151 mb151 lb151 _jf151 iAv83Hb151 oc151 nc151 kc151 jc151 Tf151 Qf151 Sf151 Rf151";
-/**
-* A Well is a styled container that groups content into an inset, subtly
-* emphasized region — for example a code sample or a callout block.
-*/
-function Well(props) {
-	const [local, domProps] = splitProps(props, ["class", "children"]);
-	return (() => {
-		var _el$ = getNextElement(_tmpl$);
-		spread(_el$, mergeProps(domProps, { get ["class"]() {
-			return [wellStyles, local.class].filter(Boolean).join(" ");
-		} }), false, true);
-		insert(_el$, () => local.children);
-		runHydrationEvents();
-		return _el$;
-	})();
-}
-//#endregion
-export { Well };
-
-//# sourceMappingURL=index.js.map
+import { n as TerminalLog, t as Well } from "../_chunk/well.js";
+export { TerminalLog, Well };

package/dist/well/index.jsx

@@ -1,16 +1,2 @@
-import { splitProps } from "solid-js";
-//#region src/well/index.tsx
-const wellStyles = " sb151 gHPXipd151 _iRvAxPd151 _ilc151 __mrmLYsd151 _kb151 hb151 mb151 lb151 _jf151 iAv83Hb151 oc151 nc151 kc151 jc151 Tf151 Qf151 Sf151 Rf151";
-/**
-* A Well is a styled container that groups content into an inset, subtly
-* emphasized region — for example a code sample or a callout block.
-*/ function Well(props) {
-	const [local, domProps] = splitProps(props, ["class", "children"]);
-	return <div {...domProps} class={[wellStyles, local.class].filter(Boolean).join(" ")}>
-      {local.children}
-    </div>;
-}
-//#endregion
-export { Well };
-
-//# sourceMappingURL=index.jsx.map
+import { n as TerminalLog, t as Well } from "../_chunk/well.jsx";
+export { TerminalLog, Well };

package/package.json

@@ -1,8 +1,21 @@
 {
   "name": "@proyecto-viviana/ui",
-  "version": "0.6.2",
-  "description": "Viviana design system. A reskinned fork of @proyecto-viviana/solid-spectrum: the styled top layer is duplicated and remapped to the Viviana v2 (Glasselated) register, over the shared solidaria headless stack.",
-  "license": "MIT",
+  "version": "0.8.0-rc.0",
+  "description": "The Viviana design system for SolidJS: accessible, themeable components on a headless ARIA foundation",
+  "keywords": [
+    "a11y",
+    "accessibility",
+    "aria",
+    "components",
+    "design-system",
+    "solid",
+    "solidjs",
+    "ui",
+    "viviana"
+  ],
+  "homepage": "https://ui.proyectoviviana.org",
+  "bugs": "https://github.com/proyecto-viviana/ui/issues",
+  "license": "MIT AND Apache-2.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/proyecto-viviana/ui.git",
@@ -10,7 +23,10 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "LICENSE",
+    "LICENSE-APACHE-2.0",
+    "NOTICE"
   ],
   "type": "module",
   "sideEffects": [
@@ -246,20 +262,22 @@
     "access": "public"
   },
   "dependencies": {
-    "@adobe/spectrum-tokens": "14.0.0",
+    "@adobe/spectrum-tokens": "14.15.0",
     "@parcel/macros": "^2.16.4",
     "csstype": "^3.2.3",
-    "@proyecto-viviana/solid-stately": "0.5.0",
-    "@proyecto-viviana/solidaria-components": "0.5.0",
-    "@proyecto-viviana/solidaria": "0.4.2"
+    "@proyecto-viviana/solid-stately": "0.6.0-rc.0",
+    "@proyecto-viviana/solidaria": "0.6.0-rc.0",
+    "@proyecto-viviana/solidaria-components": "0.7.0-rc.0"
   },
   "devDependencies": {
-    "solid-js": "^1.9.11",
+    "@solidjs/web": "2.0.0-rc.9",
+    "solid-js": "2.0.0-rc.9",
     "unplugin-parcel-macros": "0.2.0",
     "@proyecto-viviana/solid-spectrum-test-utils": "0.0.8"
   },
   "peerDependencies": {
-    "solid-js": "^1.9.0",
+    "@solidjs/web": ">=2.0.0-rc.9 <3",
+    "solid-js": ">=2.0.0-rc.9 <3",
     "unplugin-parcel-macros": "^0.2.0"
   },
   "peerDependenciesMeta": {
@@ -268,7 +286,7 @@
     }
   },
   "scripts": {
-    "build": "NODE_ENV=production vp pack && rm -f tsconfig.build.tsbuildinfo && tsc -p tsconfig.build.json",
+    "build": "NODE_ENV=production PACK_PASS=dom vp pack && NODE_ENV=production PACK_PASS=jsx vp pack && rm -f tsconfig.build.tsbuildinfo && tsc -p tsconfig.build.json && node ../../scripts/write-package-declaration-attribution.mjs .",
     "dev": "vp pack --watch"
   }
 }

package/src/accordion/index.tsx

@@ -1,4 +1,21 @@
-import { type JSX, createContext, mergeProps, useContext } from "solid-js";
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Accordion.tsx
+
+// Port of packages/@react-spectrum/s2/src/Accordion.tsx.
+import { createContext, useContext } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { mergeProps } from "@proyecto-viviana/solidaria/utils";
 import {
   Disclosure,
   DisclosureContext,

package/src/actionbar/index.tsx

@@ -1,16 +1,31 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ActionBar.tsx
+
+// Port of packages/@react-spectrum/s2/src/ActionBar.tsx.
+
 import {
-  type JSX,
   Show,
   createContext,
   createEffect,
   createMemo,
   createSignal,
-  mergeProps,
+  flush,
   onCleanup,
-  onMount,
-  splitProps,
+  onSettled,
   useContext,
 } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   ActionBar as HeadlessActionBar,
   ActionBarContainer as HeadlessActionBarContainer,
@@ -19,10 +34,10 @@ import {
   type ButtonRenderProps,
   useActionBarContext,
 } from "@proyecto-viviana/solidaria-components";
-import { FocusScope, createStringFormatter } from "@proyecto-viviana/solidaria";
+import { mergeProps, FocusScope, createStringFormatter } from "@proyecto-viviana/solidaria";
 import type { Key } from "@proyecto-viviana/solid-stately";
 import type { StyleString } from "../style";
-import { baseColor, focusRing, lightDark, style } from "../style" with { type: "macro" };
+import { baseColor, focusRing, style } from "../style" with { type: "macro" };
 import { mergeStyles } from "../style/runtime";
 import { controlSize, staticColor } from "../s2-internal/style-utils" with { type: "macro" };
 import { ActionButtonGroup } from "../actionbuttongroup";
@@ -36,6 +51,7 @@ import {
   type SpectrumContextValue,
 } from "../button/spectrum-context";
 import type { StaticColor } from "../button/types";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 type ScrollRef = { current?: HTMLElement | null } | HTMLElement | undefined;
 type SelectedItemCount = number | "all";
@@ -57,20 +73,28 @@ const actionBarStyles = style<ActionBarAnimationState>({
   "--s2-container-bg": {
     type: "backgroundColor",
     value: {
-      default: "elevated",
+      default: "well",
       isEmphasized: "neutral",
     },
   },
   backgroundColor: "--s2-container-bg",
-  // Glasselated: frost the scene behind the surface — the container bg is the
-  // translucent `--surface-card`; the blur is what makes it read as glass.
-  backdropFilter: "var(--blur-card)",
-  boxShadow: "elevated",
+  // Glasselated: the action bar is a COMMAND STRIP, so it takes the matte
+  // treatment the terminal Tabs strip and the Toolbar take — an opaque well
+  // under the register's dither, hairline `--well-border`, control rim. It is
+  // explicitly NOT glass: the handoff's wells are "never glass", and a bar that
+  // frosts the selection it is acting on makes that selection unreadable.
+  backgroundImage: {
+    default: "[repeating-conic-gradient(var(--well-scan) 0% 25%, transparent 0% 50%)]",
+    isEmphasized: "none",
+    forcedColors: "none",
+  },
+  backgroundSize: "[var(--dither-tile) var(--dither-tile)]",
+  boxShadow: "edge-glass",
   boxSizing: "border-box",
   outlineStyle: "solid",
   outlineWidth: 1,
   outlineColor: {
-    default: lightDark("transparent-white-25", "gray-200"),
+    default: "well-border",
     isEmphasized: "transparent",
     forcedColors: "ButtonBorder",
   },
@@ -316,9 +340,9 @@ export function createActionBarContainer(
     selectedKeys,
     onSelectionChange: setSelectedKeys,
     actionBar: () => (
-      <ActionBarContext.Provider value={actionBarContext}>
+      <ActionBarContext value={actionBarContext}>
         {props.renderActionBar?.(selectedKeys())}
-      </ActionBarContext.Provider>
+      </ActionBarContext>
     ),
     actionBarHeight,
   };
@@ -368,8 +392,7 @@ function countMessage(
     return formatter.format("actionbar.selectedAll");
   }
 
-  const message = formatter.format("actionbar.selected", { count });
-  return message.includes("{count}") ? message.replace("{count}", String(count)) : message;
+  return formatter.format("actionbar.selected", { count });
 }
 
 function ActionBarCloseButton(props: {
@@ -398,7 +421,7 @@ function ActionBarCloseButton(props: {
 
 export function ActionBar(props: ActionBarProps): JSX.Element {
   const contextProps = getSlottedContextProps(useContext(ActionBarContext), props.slot);
-  const merged = mergeProps(contextProps ?? {}, props);
+  const merged = mergeProps<ActionBarProps>(contextProps ?? {}, props);
   const [local, headlessProps] = splitProps(merged, [
     "class",
     "children",
@@ -410,12 +433,15 @@ export function ActionBar(props: ActionBarProps): JSX.Element {
     "ref",
     "scrollRef",
   ]);
-  const [scrollbarWidth, setScrollbarWidth] = createSignal(0);
-  const [isRendered, setIsRendered] = createSignal((headlessProps.selectedItemCount ?? 0) !== 0);
-  const [isEntering, setIsEntering] = createSignal(false);
-  const [isExiting, setIsExiting] = createSignal(false);
+  const [scrollbarWidth, setScrollbarWidth] = createSignal(0, { ownedWrite: true });
+  const [isRendered, setIsRendered] = createSignal((headlessProps.selectedItemCount ?? 0) !== 0, {
+    ownedWrite: true,
+  });
+  const [isEntering, setIsEntering] = createSignal(false, { ownedWrite: true });
+  const [isExiting, setIsExiting] = createSignal(false, { ownedWrite: true });
   const [lastCount, setLastCount] = createSignal<SelectedItemCount>(
     headlessProps.selectedItemCount ?? 0,
+    { ownedWrite: true },
   );
   let exitTimeout: ReturnType<typeof setTimeout> | undefined;
   let enterFrame: number | undefined;
@@ -446,63 +472,87 @@ export function ActionBar(props: ActionBarProps): JSX.Element {
     setScrollbarWidth(element ? element.offsetWidth - element.clientWidth : 0);
   };
 
-  createEffect(updateScrollbarWidth);
-  createEffect(() => {
-    const count = selectedItemCount();
-    const open = count !== 0;
-
-    if (count === "all" || count > 0) {
-      setLastCount(count);
-    }
-
-    if (exitTimeout) {
-      clearTimeout(exitTimeout);
-      exitTimeout = undefined;
-    }
+  createEffect(
+    () => scrollElement(),
+    () => {
+      updateScrollbarWidth();
+    },
+  );
+  createEffect(
+    () => {
+      const count = selectedItemCount();
+      return {
+        count,
+        open: count !== 0,
+        rendered: isRendered(),
+        hasScrollRef: !!local.scrollRef,
+      };
+    },
+    ({ count, open, rendered, hasScrollRef }) => {
+      if (count === "all" || (typeof count === "number" && count > 0)) {
+        setLastCount(count);
+      }
 
-    if (open) {
-      setIsRendered(true);
-      setIsExiting(false);
+      if (exitTimeout) {
+        clearTimeout(exitTimeout);
+        exitTimeout = undefined;
+      }
 
-      if (local.scrollRef) {
-        setIsEntering(true);
-        if (typeof requestAnimationFrame !== "undefined") {
-          if (enterFrame != null) {
-            cancelAnimationFrame(enterFrame);
+      if (open) {
+        setIsRendered(true);
+        setIsExiting(false);
+
+        if (hasScrollRef) {
+          setIsEntering(true);
+          if (typeof requestAnimationFrame !== "undefined") {
+            if (enterFrame != null) {
+              cancelAnimationFrame(enterFrame);
+            }
+            enterFrame = requestAnimationFrame(() => {
+              enterFrame = undefined;
+              setIsEntering(false);
+            });
+          } else {
+            setTimeout(() => setIsEntering(false), 0);
           }
-          enterFrame = requestAnimationFrame(() => {
-            enterFrame = undefined;
-            setIsEntering(false);
-          });
         } else {
-          setTimeout(() => setIsEntering(false), 0);
+          setIsEntering(false);
         }
-      } else {
-        setIsEntering(false);
+        return;
       }
-      return;
-    }
 
-    setIsEntering(false);
-    if (!isRendered()) {
-      setIsExiting(false);
-      return;
-    }
+      setIsEntering(false);
+      if (!rendered) {
+        setIsExiting(false);
+        return;
+      }
 
-    if (!local.scrollRef) {
-      setIsRendered(false);
-      setIsExiting(false);
-      return;
-    }
+      if (!hasScrollRef) {
+        setIsRendered(false);
+        setIsExiting(false);
+        return;
+      }
 
-    setIsExiting(true);
-    exitTimeout = setTimeout(() => {
-      exitTimeout = undefined;
-      setIsRendered(false);
-      setIsExiting(false);
-    }, ACTION_BAR_EXIT_DURATION);
-  });
-  onMount(() => {
+      setIsExiting(true);
+      exitTimeout = setTimeout(() => {
+        exitTimeout = undefined;
+        setIsRendered(false);
+        setIsExiting(false);
+        try {
+          flush();
+        } catch {
+          /* forbidden in apply */
+        }
+      }, ACTION_BAR_EXIT_DURATION);
+      return () => {
+        if (exitTimeout) {
+          clearTimeout(exitTimeout);
+          exitTimeout = undefined;
+        }
+      };
+    },
+  );
+  onSettled(() => {
     updateScrollbarWidth();
     const element = scrollElement();
     if (!element || typeof ResizeObserver === "undefined") {
@@ -511,7 +561,7 @@ export function ActionBar(props: ActionBarProps): JSX.Element {
 
     const observer = new ResizeObserver(updateScrollbarWidth);
     observer.observe(element);
-    onCleanup(() => observer.disconnect());
+    return () => observer.disconnect();
   });
   onCleanup(() => {
     if (exitTimeout) {

package/src/actionbuttongroup/index.tsx

@@ -1,4 +1,20 @@
-import { type JSX, mergeProps, splitProps } from "solid-js";
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ActionButtonGroup.tsx
+
+// Port of packages/@react-spectrum/s2/src/ActionButtonGroup.tsx.
+import type { JSX } from "@solidjs/web";
+import { attrString, mergeProps } from "@proyecto-viviana/solidaria/utils";
 import { Toolbar as HeadlessToolbar } from "@proyecto-viviana/solidaria-components";
 import type { StyleString } from "../style";
 import {
@@ -9,7 +25,7 @@ import {
   useActionButtonGroupContext,
 } from "../button/group-context";
 import { s2ActionButtonGroup } from "../button/s2-action-button-styles";
-import { useProviderProps } from "../provider";
+import { useProviderProps, type ProviderInheritedProps } from "../provider";
 import {
   getSlottedContextProps,
   mergeContextRefs,
@@ -18,6 +34,7 @@ import {
   type RefLike,
 } from "../button/spectrum-context";
 import type { StaticColor } from "../button/types";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export interface ActionButtonGroupProps extends Omit<
   JSX.HTMLAttributes<HTMLDivElement>,
@@ -51,9 +68,17 @@ export interface ActionButtonGroupProps extends Omit<
  * An ActionButtonGroup is a grouping of related ActionButtons.
  */
 export function ActionButtonGroup(props: ActionButtonGroupProps): JSX.Element {
-  const providerProps = useProviderProps(props);
+  const providerProps = useProviderProps(props) as ActionButtonGroupProps & ProviderInheritedProps;
+  const [flags] = splitProps(providerProps, [
+    "isQuiet",
+    "isEmphasized",
+    "isDisabled",
+    "isRequired",
+    "isReadOnly",
+    "validationState",
+  ]);
   const contextProps = getSlottedContextProps(useActionButtonGroupContext(), props.slot);
-  const merged = mergeProps(providerProps, contextProps ?? {}, props);
+  const merged = mergeProps<ActionButtonGroupProps>(flags, contextProps ?? {}, props);
   const [local, domProps] = splitProps(merged, [
     "children",
     "size",
@@ -121,15 +146,15 @@ export function ActionButtonGroup(props: ActionButtonGroupProps): JSX.Element {
   return (
     <HeadlessToolbar
       {...domProps}
+      aria-label={attrString(domProps["aria-label"])}
+      aria-labelledby={attrString(domProps["aria-labelledby"])}
       orientation={orientation()}
       ref={assignGroupRefs}
       class={className()}
       style={mergedUnsafeStyle()}
       data-orientation={orientation()}
     >
-      <ActionButtonGroupContext.Provider value={contextValue}>
-        {local.children}
-      </ActionButtonGroupContext.Provider>
+      <ActionButtonGroupContext value={contextValue}>{local.children}</ActionButtonGroupContext>
     </HeadlessToolbar>
   );
 }

package/src/actiongroup/index.tsx

@@ -1,4 +1,38 @@
-import { type JSX, splitProps } from "solid-js";
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@adobe/react-spectrum/src/actiongroup/ActionGroup.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ActionButtonGroup.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/SegmentedControl.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ToggleButtonGroup.tsx
+
+// Port of @react-spectrum source: https://github.com/adobe/react-spectrum/blob/5ecb3333001313e83898cd07644227897e3bae1f/packages/@adobe/react-spectrum/src/actiongroup/ActionGroup.tsx.
+// Port of packages/@react-spectrum/s2/src/ActionButtonGroup.tsx.
+// Port of packages/@react-spectrum/s2/src/SegmentedControl.tsx.
+// Port of packages/@react-spectrum/s2/src/ToggleButtonGroup.tsx.
+
+import type { JSX } from "@solidjs/web";
 import {
   ActionGroup as HeadlessActionGroup,
   type ActionGroupProps as HeadlessActionGroupProps,
@@ -11,6 +45,7 @@ import type { StyleString } from "../style";
 import { baseColor, css, focusRing, style } from "../style" with { type: "macro" };
 import { mergeStyles } from "../style/runtime";
 import { useProviderProps } from "../provider";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export interface ActionGroupProps<T extends ActionGroupItem = ActionGroupItem> {
   /** The items in the action group. */