From 9a9df1fd64026e413e2041b2c33985d44f0402f6 Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Mon, 22 Sep 2025 09:39:26 -0600
Subject: [PATCH 1/4] Implement textarea as typescript

---
 .../src/components/Textarea.react.js          | 287 ------------------
 .../src/components/Textarea.tsx               |  99 ++++++
 .../src/components/css/textarea.css           |  14 +
 components/dash-core-components/src/index.ts  |   2 +-
 components/dash-core-components/src/types.ts  | 188 ++++++++++++
 5 files changed, 302 insertions(+), 288 deletions(-)
 delete mode 100644 components/dash-core-components/src/components/Textarea.react.js
 create mode 100644 components/dash-core-components/src/components/Textarea.tsx
 create mode 100644 components/dash-core-components/src/components/css/textarea.css

diff --git a/components/dash-core-components/src/components/Textarea.react.js b/components/dash-core-components/src/components/Textarea.react.js
deleted file mode 100644
index 2611823f02..0000000000
--- a/components/dash-core-components/src/components/Textarea.react.js
+++ /dev/null
@@ -1,287 +0,0 @@
-/* eslint-disable no-unused-vars */
-import React from 'react';
-import PropTypes from 'prop-types';
-import {pick} from 'ramda';
-
-const textAreaProps = [
-    'id',
-    'autoFocus',
-    'cols',
-    'disabled',
-    'form',
-    'maxLength',
-    'minLength',
-    'name',
-    'placeholder',
-    'readOnly',
-    'required',
-    'rows',
-    'wrap',
-    'accessKey',
-    'className',
-    'contentEditable',
-    'contextMenu',
-    'dir',
-    'draggable',
-    'hidden',
-    'lang',
-    'spellCheck',
-    'style',
-    'tabIndex',
-    'title',
-];
-
-/**
- * A basic HTML textarea for entering multiline text.
- *
- */
-const Textarea = ({
-    setProps,
-    value,
-    n_blur = 0,
-    n_blur_timestamp = -1,
-    n_clicks,
-    n_clicks_timestamp = -1,
-    persisted_props,
-    persistence_type,
-    ...props
-}) => {
-    const ctx = window.dash_component_api.useDashContext();
-    const isLoading = ctx.useLoading();
-
-    return (
-        <textarea
-            data-dash-is-loading={isLoading || undefined}
-            value={value}
-            onChange={e => {
-                setProps({value: e.target.value});
-            }}
-            onBlur={() => {
-                setProps({
-                    n_blur: n_blur + 1,
-                    n_blur_timestamp: Date.now(),
-                });
-            }}
-            onClick={() => {
-                setProps({
-                    n_clicks: n_clicks + 1,
-                    n_clicks_timestamp: Date.now(),
-                });
-            }}
-            {...pick(textAreaProps, props)}
-        />
-    );
-};
-
-Textarea.dashPersistence = {
-    persisted_props: ['value'],
-    persistence_type: 'local',
-};
-
-Textarea.propTypes = {
-    /**
-     * The ID of this component, used to identify dash components
-     * in callbacks. The ID needs to be unique across all of the
-     * components in an app.
-     */
-    id: PropTypes.string,
-
-    /**
-     * The value of the textarea
-     */
-    value: PropTypes.string,
-
-    /**
-     * The element should be automatically focused after the page loaded.
-     */
-    autoFocus: PropTypes.string,
-
-    /**
-     * Defines the number of columns in a textarea.
-     */
-    cols: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-    /**
-     * Indicates whether the user can interact with the element.
-     */
-    disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-
-    /**
-     * Indicates the form that is the owner of the element.
-     */
-    form: PropTypes.string,
-
-    /**
-     * Defines the maximum number of characters allowed in the element.
-     */
-    maxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-    /**
-     * Defines the minimum number of characters allowed in the element.
-     */
-    minLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-    /**
-     * Name of the element. For example used by the server to identify the fields in form submits.
-     */
-    name: PropTypes.string,
-
-    /**
-     * Provides a hint to the user of what can be entered in the field.
-     */
-    placeholder: PropTypes.string,
-
-    /**
-     * Indicates whether the element can be edited.
-     * readOnly is an HTML boolean attribute - it is enabled by a boolean or
-     * 'readOnly'. Alternative capitalizations `readonly` & `READONLY`
-     * are also acccepted.
-     */
-    readOnly: PropTypes.oneOfType([
-        PropTypes.bool,
-        PropTypes.oneOf(['readOnly', 'readonly', 'READONLY']),
-    ]),
-
-    /**
-     * Indicates whether this element is required to fill out or not.
-     * required is an HTML boolean attribute - it is enabled by a boolean or
-     * 'required'. Alternative capitalizations `REQUIRED`
-     * are also acccepted.
-     */
-    required: PropTypes.oneOfType([
-        PropTypes.oneOf(['required', 'REQUIRED']),
-        PropTypes.bool,
-    ]),
-
-    /**
-     * Defines the number of rows in a text area.
-     */
-    rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-    /**
-     * Indicates whether the text should be wrapped.
-     */
-    wrap: PropTypes.string,
-
-    /**
-     * Defines a keyboard shortcut to activate or add focus to the element.
-     */
-    accessKey: PropTypes.string,
-
-    /**
-     * Often used with CSS to style elements with common properties.
-     */
-    className: PropTypes.string,
-
-    /**
-     * Indicates whether the element's content is editable.
-     */
-    contentEditable: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-
-    /**
-     * Defines the ID of a <menu> element which will serve as the element's context menu.
-     */
-    contextMenu: PropTypes.string,
-
-    /**
-     * Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
-     */
-    dir: PropTypes.string,
-
-    /**
-     * Defines whether the element can be dragged.
-     */
-    draggable: PropTypes.oneOfType([
-        // enumerated property, not a boolean property: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable
-        PropTypes.oneOf(['true', 'false']),
-        PropTypes.bool,
-    ]),
-
-    /**
-     * Prevents rendering of given element, while keeping child elements, e.g. script elements, active.
-     */
-    hidden: PropTypes.string,
-
-    /**
-     * Defines the language used in the element.
-     */
-    lang: PropTypes.string,
-
-    /**
-     * Indicates whether spell checking is allowed for the element.
-     */
-    spellCheck: PropTypes.oneOfType([
-        // enumerated property, not a boolean property: https://www.w3.org/TR/html51/editing.html#spelling-and-grammar-checking
-        PropTypes.oneOf(['true', 'false']),
-        PropTypes.bool,
-    ]),
-
-    /**
-     * Defines CSS styles which will override styles previously set.
-     */
-    style: PropTypes.object,
-
-    /**
-     * Overrides the browser's default tab order and follows the one specified instead.
-     */
-    tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-    /**
-     * Text to be displayed in a tooltip when hovering over the element.
-     */
-    title: PropTypes.string,
-
-    /**
-     * Number of times the textarea lost focus.
-     */
-    n_blur: PropTypes.number,
-    /**
-     * Last time the textarea lost focus.
-     */
-    n_blur_timestamp: PropTypes.number,
-
-    /**
-     * Number of times the textarea has been clicked.
-     */
-    n_clicks: PropTypes.number,
-    /**
-     * Last time the textarea was clicked.
-     */
-    n_clicks_timestamp: PropTypes.number,
-
-    /**
-     * Dash-assigned callback that gets fired when the value changes.
-     */
-    setProps: PropTypes.func,
-
-    /**
-     * Used to allow user interactions in this component to be persisted when
-     * the component - or the page - is refreshed. If `persisted` is truthy and
-     * hasn't changed from its previous value, a `value` that the user has
-     * changed while using the app will keep that change, as long as
-     * the new `value` also matches what was given originally.
-     * Used in conjunction with `persistence_type`.
-     */
-    persistence: PropTypes.oneOfType([
-        PropTypes.bool,
-        PropTypes.string,
-        PropTypes.number,
-    ]),
-
-    /**
-     * Properties whose user interactions will persist after refreshing the
-     * component or the page. Since only `value` is allowed this prop can
-     * normally be ignored.
-     */
-    persisted_props: PropTypes.arrayOf(PropTypes.oneOf(['value'])),
-
-    /**
-     * Where persisted user changes will be stored:
-     * memory: only kept in memory, reset on page refresh.
-     * local: window.localStorage, data is kept after the browser quit.
-     * session: window.sessionStorage, data is cleared once the browser quit.
-     */
-    persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),
-};
-
-export default Textarea;
diff --git a/components/dash-core-components/src/components/Textarea.tsx b/components/dash-core-components/src/components/Textarea.tsx
new file mode 100644
index 0000000000..982592e1f4
--- /dev/null
+++ b/components/dash-core-components/src/components/Textarea.tsx
@@ -0,0 +1,99 @@
+/* eslint-disable no-unused-vars */
+import React from 'react';
+import {pick} from 'ramda';
+import {PersistedProps, PersistenceTypes, TextAreaProps} from '../types';
+import './css/textarea.css';
+
+const textAreaProps = [
+    'id',
+    'form',
+    'name',
+    'placeholder',
+    'wrap',
+    'accessKey',
+    'contextMenu',
+    'dir',
+    'draggable',
+    'lang',
+    'spellCheck',
+    'style',
+    'title',
+] as const;
+
+const asNumber = (value?: string | number): number | undefined => {
+    return typeof value === 'string'
+        ? isNaN(parseInt(value, 10))
+            ? undefined
+            : parseInt(value, 10)
+        : value;
+};
+const asBool = (value?: string | boolean): boolean | undefined => {
+    if (typeof value === 'string') {
+        if (['true', 'TRUE', 'True'].includes(value)) {
+            return true;
+        }
+        if (['false', 'FALSE', 'False'].includes(value)) {
+            return false;
+        }
+        return undefined;
+    }
+    return value;
+};
+
+/**
+ * A basic HTML textarea for entering multiline text.
+ *
+ */
+const Textarea = ({
+    setProps,
+    n_blur = 0,
+    n_blur_timestamp = -1,
+    n_clicks = 0,
+    n_clicks_timestamp = -1,
+    ...props
+}: TextAreaProps) => {
+    const ctx = window.dash_component_api.useDashContext();
+    const isLoading = ctx.useLoading();
+
+    return (
+        <textarea
+            data-dash-is-loading={isLoading || undefined}
+            className={'dash-textarea ' + props.className}
+            value={props.value}
+            cols={asNumber(props.cols)}
+            rows={asNumber(props.rows)}
+            disabled={asBool(props.disabled)}
+            minLength={asNumber(props.minLength)}
+            maxLength={asNumber(props.maxLength)}
+            readOnly={asBool(props.readOnly)}
+            required={asBool(props.required)}
+            autoFocus={asBool(props.autoFocus)}
+            contentEditable={asBool(props.contentEditable)}
+            hidden={asBool(props.hidden)}
+            tabIndex={asNumber(props.tabIndex)}
+            onChange={e => {
+                setProps({value: e.target.value});
+            }}
+            onBlur={() => {
+                setProps({
+                    n_blur: n_blur + 1,
+                    n_blur_timestamp: Date.now(),
+                });
+            }}
+            onClick={() => {
+                setProps({
+                    n_clicks: n_clicks + 1,
+                    n_clicks_timestamp: Date.now(),
+                });
+            }}
+            {...pick(textAreaProps, props)}
+        />
+    );
+};
+
+Textarea.dashPersistence = {
+    persisted_props: [PersistedProps.value],
+    persistence_type: PersistenceTypes.local,
+};
+
+export default Textarea;
diff --git a/components/dash-core-components/src/components/css/textarea.css b/components/dash-core-components/src/components/css/textarea.css
new file mode 100644
index 0000000000..c1d95c5131
--- /dev/null
+++ b/components/dash-core-components/src/components/css/textarea.css
@@ -0,0 +1,14 @@
+/* Input container styles */
+.dash-textarea {
+    background: var(--Dash-Fill-Inverse-Strong);
+    border-radius: var(--Dash-Spacing);
+    border: 1px solid var(--Dash-Stroke-Strong);
+    box-sizing: border-box;
+    color: var(--Dash-Text-Primary);
+    padding: var(--Dash-Spacing) calc(2 * var(--Dash-Spacing));
+    width: 100%;
+}
+
+.dash-textarea:invalid {
+    outline: solid red;
+}
diff --git a/components/dash-core-components/src/index.ts b/components/dash-core-components/src/index.ts
index 17ba5ad2a7..a26e6bd4b9 100644
--- a/components/dash-core-components/src/index.ts
+++ b/components/dash-core-components/src/index.ts
@@ -21,7 +21,7 @@ import Slider from './components/Slider';
 import Store from './components/Store.react';
 import Tab from './components/Tab.react';
 import Tabs from './components/Tabs.react';
-import Textarea from './components/Textarea.react';
+import Textarea from './components/Textarea';
 import Tooltip from './components/Tooltip.react';
 import Upload from './components/Upload.react';
 
diff --git a/components/dash-core-components/src/types.ts b/components/dash-core-components/src/types.ts
index a1443623f9..988959a47b 100644
--- a/components/dash-core-components/src/types.ts
+++ b/components/dash-core-components/src/types.ts
@@ -329,3 +329,191 @@ export interface RangeSliderProps {
      */
     persistence_type?: PersistenceTypes;
 }
+
+export interface TextAreaProps {
+    /**
+     * The ID of this component, used to identify dash components
+     * in callbacks. The ID needs to be unique across all of the
+     * components in an app.
+     */
+    id?: string;
+
+    /**
+     * The value of the textarea
+     */
+    value?: string;
+
+    /**
+     * The element should be automatically focused after the page loaded.
+     */
+    autoFocus?: string;
+
+    /**
+     * Defines the number of columns in a textarea.
+     */
+    cols?: string | number;
+
+    /**
+     * Indicates whether the user can interact with the element.
+     */
+    disabled?: string | boolean;
+
+    /**
+     * Indicates the form that is the owner of the element.
+     */
+    form?: string;
+
+    /**
+     * Defines the maximum number of characters allowed in the element.
+     */
+    maxLength?: string | number;
+
+    /**
+     * Defines the minimum number of characters allowed in the element.
+     */
+    minLength?: string | number;
+
+    /**
+     * Name of the element. For example used by the server to identify the fields in form submits.
+     */
+    name?: string;
+
+    /**
+     * Provides a hint to the user of what can be entered in the field.
+     */
+    placeholder?: string;
+
+    /**
+     * Indicates whether the element can be edited.
+     * readOnly is an HTML boolean attribute - it is enabled by a boolean or
+     * 'readOnly'. Alternative capitalizations `readonly` & `READONLY`
+     * are also acccepted.
+     */
+    readOnly?: boolean | 'readOnly' | 'readonly' | 'READONLY';
+
+    /**
+     * Indicates whether this element is required to fill out or not.
+     * required is an HTML boolean attribute - it is enabled by a boolean or
+     * 'required'. Alternative capitalizations `REQUIRED`
+     * are also acccepted.
+     */
+    required?: boolean | 'required' | 'REQUIRED';
+
+    /**
+     * Defines the number of rows in a text area.
+     */
+    rows?: string | number;
+
+    /**
+     * Indicates whether the text should be wrapped.
+     */
+    wrap?: string;
+
+    /**
+     * Defines a keyboard shortcut to activate or add focus to the element.
+     */
+    accessKey?: string;
+
+    /**
+     * Often used with CSS to style elements with common properties.
+     */
+    className?: string;
+
+    /**
+     * Indicates whether the element's content is editable.
+     */
+    contentEditable?: string | boolean;
+
+    /**
+     * Defines the ID of a <menu> element which will serve as the element's context menu.
+     */
+    contextMenu?: string;
+
+    /**
+     * Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+     */
+    dir?: string;
+
+    /**
+     * Defines whether the element can be dragged.
+     */
+    draggable?: boolean | 'true' | 'false';
+
+    /**
+     * Prevents rendering of given element, while keeping child elements, e.g. script elements, active.
+     */
+    hidden?: string;
+
+    /**
+     * Defines the language used in the element.
+     */
+    lang?: string;
+
+    /**
+     * Indicates whether spell checking is allowed for the element.
+     */
+    spellCheck?: boolean | 'true' | 'false';
+
+    /**
+     * Defines CSS styles which will override styles previously set.
+     */
+    style?: React.CSSProperties;
+
+    /**
+     * Overrides the browser's default tab order and follows the one specified instead.
+     */
+    tabIndex?: string | number;
+
+    /**
+     * Text to be displayed in a tooltip when hovering over the element.
+     */
+    title?: string;
+
+    /**
+     * Number of times the textarea lost focus.
+     */
+    n_blur?: number;
+    /**
+     * Last time the textarea lost focus.
+     */
+    n_blur_timestamp?: number;
+
+    /**
+     * Number of times the textarea has been clicked.
+     */
+    n_clicks?: number;
+    /**
+     * Last time the textarea was clicked.
+     */
+    n_clicks_timestamp?: number;
+
+    /**
+     * Dash-assigned callback that gets fired when the value changes.
+     */
+    setProps: (props: Partial<TextAreaProps>) => void;
+
+    /**
+     * Used to allow user interactions in this component to be persisted when
+     * the component - or the page - is refreshed. If `persisted` is truthy and
+     * hasn't changed from its previous value, a `value` that the user has
+     * changed while using the app will keep that change, as long as
+     * the new `value` also matches what was given originally.
+     * Used in conjunction with `persistence_type`.
+     */
+    persistence?: boolean | string | number;
+
+    /**
+     * Properties whose user interactions will persist after refreshing the
+     * component or the page. Since only `value` is allowed this prop can
+     * normally be ignored.
+     */
+    persisted_props?: PersistedProps[];
+
+    /**
+     * Where persisted user changes will be stored:
+     * memory: only kept in memory, reset on page refresh.
+     * local: window.localStorage, data is kept after the browser quit.
+     * session: window.sessionStorage, data is cleared once the browser quit.
+     */
+    persistence_type?: PersistenceTypes;
+}

From b05416d6efc5c5ee8684ba4b8803cc7b28fd2b43 Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Mon, 22 Sep 2025 13:43:18 -0600
Subject: [PATCH 2/4] Implement tooltip as tsx

---
 .../src/components/css/Tooltip.tsx            | 182 ++++++++++++++++++
 components/dash-core-components/src/types.ts  |  78 ++++++++
 2 files changed, 260 insertions(+)
 create mode 100644 components/dash-core-components/src/components/css/Tooltip.tsx

diff --git a/components/dash-core-components/src/components/css/Tooltip.tsx b/components/dash-core-components/src/components/css/Tooltip.tsx
new file mode 100644
index 0000000000..5a6e462d72
--- /dev/null
+++ b/components/dash-core-components/src/components/css/Tooltip.tsx
@@ -0,0 +1,182 @@
+import React from 'react';
+
+import _JSXStyle from 'styled-jsx/style';
+import {TooltipProps} from '../../types';
+
+/**
+ * A tooltip with an absolute position.
+ */
+const Tooltip = ({
+    show = true,
+    targetable = false,
+    direction = 'right',
+    border_color = '#d6d6d6',
+    background_color = 'white',
+    className = '',
+    zindex = 1,
+    loading_text = 'Loading...',
+    ...props
+}: TooltipProps) => {
+    const {bbox, id} = props;
+    const show_tooltip = show && bbox;
+
+    const ctx = window.dash_component_api.useDashContext();
+    const is_loading = ctx.useLoading();
+
+    return (
+        <>
+            <div className="dcc-tooltip-bounding-box">
+                <div
+                    className={`hover hover-${direction}`}
+                    data-dash-is-loading={is_loading}
+                >
+                    <span
+                        id={id}
+                        className={`hover-content ${className}`}
+                        style={props.style}
+                    >
+                        {is_loading ? (
+                            <span>{loading_text}</span>
+                        ) : (
+                            props.children
+                        )}
+                    </span>
+                </div>
+            </div>
+            <style jsx>{`
+                .dcc-tooltip-bounding-box {
+                    position: absolute;
+                    top: ${bbox?.y0 || 0}px;
+                    left: ${bbox?.x0 || 0}px;
+                    width: ${bbox?.x1 - bbox?.x0 || 0}px;
+                    height: ${bbox?.y1 - bbox?.y0 || 0}px;
+                    display: ${show_tooltip ? 'inline-block' : 'none'};
+                    pointer-events: ${targetable ? 'auto' : 'none'};
+                }
+                .hover {
+                    position: absolute;
+                }
+                .hover-right {
+                    /* Offset so that the triangle caret lands directly on what's hovered */
+                    transform: translate(5px, 0);
+                    top: 50%;
+                    left: 100%;
+                }
+                .hover-left {
+                    transform: translate(-5px, 0);
+                    top: 50%;
+                }
+                .hover-bottom {
+                    transform: translate(0, 6px);
+                    top: 100%;
+                    left: 50%;
+                }
+                .hover-top {
+                    transform: translate(0, -5px);
+                    left: 50%;
+                }
+                .hover-content {
+                    position: absolute;
+                    border: 1px solid ${border_color};
+                    border-radius: 2px;
+                    padding: 5px 10px;
+                    background: ${background_color};
+                    white-space: nowrap;
+                    z-index: ${zindex};
+                    pointer-events: none;
+                }
+                .hover .hover-content,
+                .hover-right .hover-content {
+                    transform: translate(0, -50%);
+                }
+                .hover-left .hover-content {
+                    transform: translate(-100%, -50%);
+                }
+                .hover-top .hover-content {
+                    transform: translate(-50%, -100%);
+                }
+                .hover-bottom .hover-content {
+                    transform: translate(-50%, 0);
+                }
+                /* Add a small triangle on the left side of the box */
+                .hover:before,
+                .hover:after {
+                    content: '';
+                    width: 0;
+                    height: 0;
+                    position: absolute;
+                    border-style: solid;
+                    top: -6px;
+                    z-index: ${zindex};
+                }
+                .hover:before,
+                .hover:after,
+                .hover-right:before,
+                .hover-right:after {
+                    border-width: 6px 6px 6px 0;
+                }
+                .hover-top:before,
+                .hover-top:after {
+                    border-width: 6px 6px 0 6px;
+                }
+                .hover-bottom:before,
+                .hover-bottom:after {
+                    border-width: 0 6px 6px 6px;
+                }
+                .hover-left:before,
+                .hover-left:after {
+                    border-width: 6px 0 6px 6px;
+                }
+                .hover:before,
+                .hover-right:before {
+                    border-color: transparent ${border_color} transparent
+                        transparent;
+                    left: -5px;
+                }
+                .hover:after,
+                .hover-right:after {
+                    border-color: transparent ${background_color} transparent
+                        transparent;
+                    left: -4px;
+                }
+                .hover-left:before {
+                    border-color: transparent transparent transparent
+                        ${border_color};
+                    left: -1px;
+                }
+                .hover-left:after {
+                    border-color: transparent transparent transparent
+                        ${background_color};
+                    left: -2px;
+                }
+                .hover-top:before,
+                .hover-top:after,
+                .hover-bottom:before,
+                .hover-bottom:after {
+                    left: -6px;
+                }
+                .hover-bottom:before {
+                    border-color: transparent transparent ${border_color}
+                        transparent;
+                }
+                .hover-bottom:after {
+                    border-color: transparent transparent ${background_color}
+                        transparent;
+                    top: -5px;
+                }
+                .hover-top:before {
+                    border-color: ${border_color} transparent transparent
+                        transparent;
+                    top: -1px;
+                }
+                .hover-top:after {
+                    border-color: ${background_color} transparent transparent
+                        transparent;
+                    top: -2px;
+                }
+            `}</style>
+        </>
+    );
+};
+
+export default Tooltip;
diff --git a/components/dash-core-components/src/types.ts b/components/dash-core-components/src/types.ts
index 988959a47b..9a4597c8b4 100644
--- a/components/dash-core-components/src/types.ts
+++ b/components/dash-core-components/src/types.ts
@@ -517,3 +517,81 @@ export interface TextAreaProps {
      */
     persistence_type?: PersistenceTypes;
 }
+
+export interface TooltipProps {
+    /**
+     * The contents of the tooltip
+     */
+    children?: React.ReactNode;
+
+    /**
+     * The ID of this component, used to identify dash components
+     * in callbacks. The ID needs to be unique across all of the
+     * components in an app.
+     */
+    id?: string;
+
+    /**
+     * The class of the tooltip
+     */
+    className?: string;
+
+    /**
+     * The style of the tooltip
+     */
+    style?: React.CSSProperties;
+
+    /**
+     * The bounding box coordinates of the item to label, in px relative to
+     * the positioning parent of the Tooltip component.
+     */
+    bbox?: {
+        x0: number;
+        y0: number;
+        x1: number;
+        y1: number;
+    };
+
+    /**
+     * Whether to show the tooltip
+     */
+    show?: boolean;
+
+    /**
+     * The side of the `bbox` on which the tooltip should open.
+     */
+    direction?: 'top' | 'right' | 'bottom' | 'left';
+
+    /**
+     * Color of the tooltip border, as a CSS color string.
+     */
+    border_color?: string;
+
+    /**
+     * Color of the tooltip background, as a CSS color string.
+     */
+    background_color?: string;
+
+    /**
+     * The text displayed in the tooltip while loading
+     */
+    loading_text?: string;
+
+    /**
+     * The `z-index` CSS property to assign to the tooltip. Components with
+     * higher values will be displayed on top of components with lower values.
+     */
+    zindex?: number;
+
+    /**
+     * Whether the tooltip itself can be targeted by pointer events.
+     * For tooltips triggered by hover events, typically this should be left
+     * `false` to avoid the tooltip interfering with those same events.
+     */
+    targetable?: boolean;
+
+    /**
+     * Dash-assigned callback that gets fired when the value changes.
+     */
+    setProps: (props: Partial<TooltipProps>) => void;
+}

From e0e3a6078d1195fc582f13b2877d79639760a5fd Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Fri, 3 Oct 2025 09:22:20 -0600
Subject: [PATCH 3/4] refactor tooltip

---
 .../src/components/Tooltip.tsx                |  66 +++++++
 .../src/components/css/Tooltip.tsx            | 182 ------------------
 .../src/components/css/textarea.css           |   9 +-
 .../src/components/css/tooltip.css            | 127 ++++++++++++
 components/dash-core-components/src/index.ts  |   2 +-
 components/dash-core-components/src/types.ts  |  44 +----
 6 files changed, 203 insertions(+), 227 deletions(-)
 create mode 100644 components/dash-core-components/src/components/Tooltip.tsx
 delete mode 100644 components/dash-core-components/src/components/css/Tooltip.tsx
 create mode 100644 components/dash-core-components/src/components/css/tooltip.css

diff --git a/components/dash-core-components/src/components/Tooltip.tsx b/components/dash-core-components/src/components/Tooltip.tsx
new file mode 100644
index 0000000000..16a5c95504
--- /dev/null
+++ b/components/dash-core-components/src/components/Tooltip.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import {TooltipProps} from '../types';
+import './css/tooltip.css';
+
+/**
+ * A tooltip with an absolute position.
+ */
+const Tooltip = ({
+    show = true,
+    targetable = false,
+    direction = 'right',
+    border_color = 'var(--Dash-Stroke-Weak)',
+    background_color = 'var(--Dash-Fill-Inverse-Strong)',
+    className = '',
+    zindex = 1,
+    loading_text = 'Loading...',
+    ...props
+}: TooltipProps) => {
+    const {bbox, id} = props;
+    const show_tooltip = show && bbox;
+
+    const ctx = window.dash_component_api.useDashContext();
+    const is_loading = ctx.useLoading();
+
+    const position = bbox ?? {x0: 0, x1: 0, y0: 0, y1: 0};
+
+    const styles = {
+        top: `${position?.y0}px`,
+        left: `${position?.x0}px`,
+        width: `${position?.x1 - position?.x0}px`,
+        height: `${position?.y1 - position?.y0}px`,
+        display: `${show_tooltip ? 'inline-block' : 'none'}`,
+        pointerEvents: `${targetable ? 'auto' : 'none'}`,
+        '--Dash-Tooltip-Border-Color': border_color,
+        '--Dash-Tooltip-Background-Color': background_color,
+        '--Dash-Tooltip-ZIndex': zindex,
+    } as const;
+
+    return (
+        <>
+            <div
+                className="dcc-tooltip-bounding-box dash-tooltip"
+                style={styles}
+            >
+                <div
+                    className={`hover hover-${direction}`}
+                    data-dash-is-loading={is_loading}
+                >
+                    <span
+                        id={id}
+                        className={`hover-content ${className}`}
+                        style={props.style}
+                    >
+                        {is_loading ? (
+                            <span>{loading_text}</span>
+                        ) : (
+                            props.children
+                        )}
+                    </span>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default Tooltip;
diff --git a/components/dash-core-components/src/components/css/Tooltip.tsx b/components/dash-core-components/src/components/css/Tooltip.tsx
deleted file mode 100644
index 5a6e462d72..0000000000
--- a/components/dash-core-components/src/components/css/Tooltip.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import React from 'react';
-
-import _JSXStyle from 'styled-jsx/style';
-import {TooltipProps} from '../../types';
-
-/**
- * A tooltip with an absolute position.
- */
-const Tooltip = ({
-    show = true,
-    targetable = false,
-    direction = 'right',
-    border_color = '#d6d6d6',
-    background_color = 'white',
-    className = '',
-    zindex = 1,
-    loading_text = 'Loading...',
-    ...props
-}: TooltipProps) => {
-    const {bbox, id} = props;
-    const show_tooltip = show && bbox;
-
-    const ctx = window.dash_component_api.useDashContext();
-    const is_loading = ctx.useLoading();
-
-    return (
-        <>
-            <div className="dcc-tooltip-bounding-box">
-                <div
-                    className={`hover hover-${direction}`}
-                    data-dash-is-loading={is_loading}
-                >
-                    <span
-                        id={id}
-                        className={`hover-content ${className}`}
-                        style={props.style}
-                    >
-                        {is_loading ? (
-                            <span>{loading_text}</span>
-                        ) : (
-                            props.children
-                        )}
-                    </span>
-                </div>
-            </div>
-            <style jsx>{`
-                .dcc-tooltip-bounding-box {
-                    position: absolute;
-                    top: ${bbox?.y0 || 0}px;
-                    left: ${bbox?.x0 || 0}px;
-                    width: ${bbox?.x1 - bbox?.x0 || 0}px;
-                    height: ${bbox?.y1 - bbox?.y0 || 0}px;
-                    display: ${show_tooltip ? 'inline-block' : 'none'};
-                    pointer-events: ${targetable ? 'auto' : 'none'};
-                }
-                .hover {
-                    position: absolute;
-                }
-                .hover-right {
-                    /* Offset so that the triangle caret lands directly on what's hovered */
-                    transform: translate(5px, 0);
-                    top: 50%;
-                    left: 100%;
-                }
-                .hover-left {
-                    transform: translate(-5px, 0);
-                    top: 50%;
-                }
-                .hover-bottom {
-                    transform: translate(0, 6px);
-                    top: 100%;
-                    left: 50%;
-                }
-                .hover-top {
-                    transform: translate(0, -5px);
-                    left: 50%;
-                }
-                .hover-content {
-                    position: absolute;
-                    border: 1px solid ${border_color};
-                    border-radius: 2px;
-                    padding: 5px 10px;
-                    background: ${background_color};
-                    white-space: nowrap;
-                    z-index: ${zindex};
-                    pointer-events: none;
-                }
-                .hover .hover-content,
-                .hover-right .hover-content {
-                    transform: translate(0, -50%);
-                }
-                .hover-left .hover-content {
-                    transform: translate(-100%, -50%);
-                }
-                .hover-top .hover-content {
-                    transform: translate(-50%, -100%);
-                }
-                .hover-bottom .hover-content {
-                    transform: translate(-50%, 0);
-                }
-                /* Add a small triangle on the left side of the box */
-                .hover:before,
-                .hover:after {
-                    content: '';
-                    width: 0;
-                    height: 0;
-                    position: absolute;
-                    border-style: solid;
-                    top: -6px;
-                    z-index: ${zindex};
-                }
-                .hover:before,
-                .hover:after,
-                .hover-right:before,
-                .hover-right:after {
-                    border-width: 6px 6px 6px 0;
-                }
-                .hover-top:before,
-                .hover-top:after {
-                    border-width: 6px 6px 0 6px;
-                }
-                .hover-bottom:before,
-                .hover-bottom:after {
-                    border-width: 0 6px 6px 6px;
-                }
-                .hover-left:before,
-                .hover-left:after {
-                    border-width: 6px 0 6px 6px;
-                }
-                .hover:before,
-                .hover-right:before {
-                    border-color: transparent ${border_color} transparent
-                        transparent;
-                    left: -5px;
-                }
-                .hover:after,
-                .hover-right:after {
-                    border-color: transparent ${background_color} transparent
-                        transparent;
-                    left: -4px;
-                }
-                .hover-left:before {
-                    border-color: transparent transparent transparent
-                        ${border_color};
-                    left: -1px;
-                }
-                .hover-left:after {
-                    border-color: transparent transparent transparent
-                        ${background_color};
-                    left: -2px;
-                }
-                .hover-top:before,
-                .hover-top:after,
-                .hover-bottom:before,
-                .hover-bottom:after {
-                    left: -6px;
-                }
-                .hover-bottom:before {
-                    border-color: transparent transparent ${border_color}
-                        transparent;
-                }
-                .hover-bottom:after {
-                    border-color: transparent transparent ${background_color}
-                        transparent;
-                    top: -5px;
-                }
-                .hover-top:before {
-                    border-color: ${border_color} transparent transparent
-                        transparent;
-                    top: -1px;
-                }
-                .hover-top:after {
-                    border-color: ${background_color} transparent transparent
-                        transparent;
-                    top: -2px;
-                }
-            `}</style>
-        </>
-    );
-};
-
-export default Tooltip;
diff --git a/components/dash-core-components/src/components/css/textarea.css b/components/dash-core-components/src/components/css/textarea.css
index c1d95c5131..d90e695075 100644
--- a/components/dash-core-components/src/components/css/textarea.css
+++ b/components/dash-core-components/src/components/css/textarea.css
@@ -4,9 +4,16 @@
     border-radius: var(--Dash-Spacing);
     border: 1px solid var(--Dash-Stroke-Strong);
     box-sizing: border-box;
-    color: var(--Dash-Text-Primary);
+    color: inherit;
     padding: var(--Dash-Spacing) calc(2 * var(--Dash-Spacing));
     width: 100%;
+    accent-color: var(--Dash-Fill-Interactive-Strong);
+    outline-color: var(--Dash-Fill-Interactive-Strong);
+}
+
+.dash-textarea:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
 }
 
 .dash-textarea:invalid {
diff --git a/components/dash-core-components/src/components/css/tooltip.css b/components/dash-core-components/src/components/css/tooltip.css
new file mode 100644
index 0000000000..2549b442a5
--- /dev/null
+++ b/components/dash-core-components/src/components/css/tooltip.css
@@ -0,0 +1,127 @@
+.dash-tooltip {
+    position: absolute;
+}
+
+.hover {
+    position: absolute;
+}
+.hover-right {
+    /* Offset so that the triangle caret lands directly on what's hovered */
+    transform: translate(5px, 0);
+    top: 50%;
+    left: 100%;
+}
+.hover-left {
+    transform: translate(-5px, 0);
+    top: 50%;
+}
+.hover-bottom {
+    transform: translate(0, 6px);
+    top: 100%;
+    left: 50%;
+}
+.hover-top {
+    transform: translate(0, -5px);
+    left: 50%;
+}
+.hover-content {
+    position: absolute;
+    border: 1px solid var(--Dash-Tooltip-Border-Color);
+    border-radius: 2px;
+    padding: 5px 10px;
+    background: var(--Dash-Tooltip-Background-Color);
+    white-space: nowrap;
+    z-index: var(--Dash-Tooltip-ZIndex);
+    pointer-events: none;
+    box-shadow: 0px 10px 38px -10px var(--Dash-Shading-Strong),
+        0px 10px 20px -15px var(--Dash-Shading-Weak);
+}
+.hover .hover-content,
+.hover-right .hover-content {
+    transform: translate(0, -50%);
+}
+.hover-left .hover-content {
+    transform: translate(-100%, -50%);
+}
+.hover-top .hover-content {
+    transform: translate(-50%, -100%);
+}
+.hover-bottom .hover-content {
+    transform: translate(-50%, 0);
+}
+/* Add a small triangle on the left side of the box */
+.hover:before,
+.hover:after {
+    content: '';
+    width: 0;
+    height: 0;
+    position: absolute;
+    border-style: solid;
+    top: -6px;
+    z-index: var(--Dash-Tooltip-ZIndex);
+}
+.hover:before,
+.hover:after,
+.hover-right:before,
+.hover-right:after {
+    border-width: 6px 6px 6px 0;
+}
+.hover-top:before,
+.hover-top:after {
+    border-width: 6px 6px 0 6px;
+}
+.hover-bottom:before,
+.hover-bottom:after {
+    border-width: 0 6px 6px 6px;
+}
+.hover-left:before,
+.hover-left:after {
+    border-width: 6px 0 6px 6px;
+}
+.hover:before,
+.hover-right:before {
+    border-color: transparent var(--Dash-Tooltip-Border-Color) transparent
+        transparent;
+    left: -5px;
+}
+.hover:after,
+.hover-right:after {
+    border-color: transparent var(--Dash-Tooltip-Background-Color) transparent
+        transparent;
+    left: -4px;
+}
+.hover-left:before {
+    border-color: transparent transparent transparent
+        var(--Dash-Tooltip-Border-Color);
+    left: -1px;
+}
+.hover-left:after {
+    border-color: transparent transparent transparent
+        var(--Dash-Tooltip-Background-Color);
+    left: -2px;
+}
+.hover-top:before,
+.hover-top:after,
+.hover-bottom:before,
+.hover-bottom:after {
+    left: -6px;
+}
+.hover-bottom:before {
+    border-color: transparent transparent var(--Dash-Tooltip-Border-Color)
+        transparent;
+}
+.hover-bottom:after {
+    border-color: transparent transparent var(--Dash-Tooltip-Background-Color)
+        transparent;
+    top: -5px;
+}
+.hover-top:before {
+    border-color: var(--Dash-Tooltip-Border-Color) transparent transparent
+        transparent;
+    top: -1px;
+}
+.hover-top:after {
+    border-color: var(--Dash-Tooltip-Border-Color) transparent transparent
+        transparent;
+    top: -2px;
+}
diff --git a/components/dash-core-components/src/index.ts b/components/dash-core-components/src/index.ts
index 3c1aa6c10f..ac9b59a634 100644
--- a/components/dash-core-components/src/index.ts
+++ b/components/dash-core-components/src/index.ts
@@ -22,7 +22,7 @@ import Store from './components/Store.react';
 import Tab from './components/Tab.react';
 import Tabs from './components/Tabs.react';
 import Textarea from './components/Textarea';
-import Tooltip from './components/Tooltip.react';
+import Tooltip from './components/Tooltip';
 import Upload from './components/Upload.react';
 
 import './components/css/dcc.css';
diff --git a/components/dash-core-components/src/types.ts b/components/dash-core-components/src/types.ts
index 6b40d564db..9927c66e8b 100644
--- a/components/dash-core-components/src/types.ts
+++ b/components/dash-core-components/src/types.ts
@@ -519,14 +519,7 @@ export interface RadioItemsProps extends BaseComponentProps<RadioItemsProps> {
     labelClassName?: string;
 }
 
-export interface TextAreaProps {
-    /**
-     * The ID of this component, used to identify dash components
-     * in callbacks. The ID needs to be unique across all of the
-     * components in an app.
-     */
-    id?: string;
-
+export interface TextAreaProps extends BaseComponentProps<TextAreaProps> {
     /**
      * The value of the textarea
      */
@@ -603,11 +596,6 @@ export interface TextAreaProps {
      */
     accessKey?: string;
 
-    /**
-     * Often used with CSS to style elements with common properties.
-     */
-    className?: string;
-
     /**
      * Indicates whether the element's content is editable.
      */
@@ -675,36 +663,6 @@ export interface TextAreaProps {
      * Last time the textarea was clicked.
      */
     n_clicks_timestamp?: number;
-
-    /**
-     * Dash-assigned callback that gets fired when the value changes.
-     */
-    setProps: (props: Partial<TextAreaProps>) => void;
-
-    /**
-     * Used to allow user interactions in this component to be persisted when
-     * the component - or the page - is refreshed. If `persisted` is truthy and
-     * hasn't changed from its previous value, a `value` that the user has
-     * changed while using the app will keep that change, as long as
-     * the new `value` also matches what was given originally.
-     * Used in conjunction with `persistence_type`.
-     */
-    persistence?: boolean | string | number;
-
-    /**
-     * Properties whose user interactions will persist after refreshing the
-     * component or the page. Since only `value` is allowed this prop can
-     * normally be ignored.
-     */
-    persisted_props?: PersistedProps[];
-
-    /**
-     * Where persisted user changes will be stored:
-     * memory: only kept in memory, reset on page refresh.
-     * local: window.localStorage, data is kept after the browser quit.
-     * session: window.sessionStorage, data is cleared once the browser quit.
-     */
-    persistence_type?: PersistenceTypes;
 }
 
 export interface TooltipProps {

From 0deace39732d9078be47640a5739168f640a73f2 Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Fri, 3 Oct 2025 17:02:47 -0600
Subject: [PATCH 4/4] empty commit for ci