@chiralkit/design-system 0.1.0-alpha.0

package/dist/cjs/ds-select.cjs.entry.js

@@ -0,0 +1,85 @@
+'use strict';
+
+var index = require('./index-mMvyq7U_.js');
+
+const dsSelectCss = () => `:host{display:inline-block;position:relative}.ds-select{font-family:var(--ds-font-family);font-size:var(--ds-font-size-md);background-color:transparent;color:inherit;border:1px solid color-mix(in oklch, currentColor 22%, transparent);cursor:pointer;-webkit-appearance:none;appearance:none}:host::after{content:"";position:absolute;top:50%;right:var(--ds-spacing-sm);width:12px;height:12px;transform:translateY(-50%);background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M2.5 4.5L6 8L9.5 4.5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M2.5 4.5L6 8L9.5 4.5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;pointer-events:none}.ds-select:disabled{opacity:0.5;cursor:not-allowed}:host(:has(.ds-select:disabled))::after{opacity:0.5}.ds-select--md{border-radius:var(--ds-radius-sm);padding:var(--ds-spacing-sm) var(--ds-spacing-lg);padding-right:calc(var(--ds-spacing-lg) + var(--ds-spacing-lg))}.ds-select--lg{border-radius:var(--ds-radius-md);padding:var(--ds-spacing-md) var(--ds-spacing-xl);padding-right:calc(var(--ds-spacing-xl) + var(--ds-spacing-lg))}`;
+
+const DsSelect = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dsChange = index.createEvent(this, "dsChange");
+    }
+    selectEl;
+    value;
+    name;
+    disabled = false;
+    size = "md";
+    label;
+    /**
+     * Options rendered inside the internal shadow `<select>`. Accepts either:
+     * - a JSON string (SSR-friendly — server-rendered HTML can only set
+     *   string attributes, and Stencil does not JSON-parse array attributes),
+     *   e.g. `options='[{"value":"en","label":"EN"}]'`
+     * - an array property set from client-side JS,
+     *   e.g. `el.options = [{ value: 'en', label: 'EN' }]`
+     *
+     * Malformed JSON fails safe to an empty list rather than throwing, so the
+     * component still renders a visible (if empty) select.
+     */
+    options = "[]";
+    dsChange;
+    watchValue(newValue) {
+        if (this.selectEl && this.selectEl.value !== newValue) {
+            this.selectEl.value = newValue ?? "";
+        }
+    }
+    // Empty-bodied on purpose: `options` is already a @Prop, so Stencil
+    // schedules a re-render on its own whenever it changes — this watcher
+    // exists only to document that `options` is reactive. The actual value
+    // re-sync happens in componentDidUpdate, once the new <option> elements
+    // are actually in the DOM (syncing here, before that render lands, would
+    // assign `this.value` against the *old* option list and get dropped).
+    watchOptions() { }
+    componentDidLoad() {
+        this.syncValue();
+    }
+    componentDidUpdate() {
+        this.syncValue();
+    }
+    syncValue() {
+        if (this.selectEl && this.value !== undefined) {
+            this.selectEl.value = this.value;
+        }
+    }
+    parseOptions() {
+        if (typeof this.options === "string") {
+            try {
+                return JSON.parse(this.options);
+            }
+            catch {
+                console.warn("[ds-select] failed to parse options prop:", this.options);
+                return [];
+            }
+        }
+        return this.options;
+    }
+    onChange = (event) => {
+        const value = event.target.value;
+        this.dsChange.emit(value);
+    };
+    render() {
+        const cls = `ds-select ds-select--${this.size}`;
+        return (index.h(index.Host, { key: '9c5755ca98a3a3a1340414de0109133ffb6617c4' }, index.h("select", { key: '7ac471b32e083e754c398ed22baf8ba993997ee5', class: cls, name: this.name, disabled: this.disabled, "aria-label": this.label, ref: (el) => (this.selectEl = el), onChange: this.onChange }, this.parseOptions().map((o) => (index.h("option", { value: o.value }, o.label))))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "watchValue": 0
+            }],
+        "options": [{
+                "watchOptions": 0
+            }]
+    }; }
+};
+DsSelect.style = dsSelectCss();
+
+exports.ds_select = DsSelect;

package/dist/cjs/ds-tabs.cjs.entry.js

@@ -0,0 +1,138 @@
+'use strict';
+
+var index = require('./index-mMvyq7U_.js');
+
+const dsTabsCss = () => `ds-tabs{display:block;color:inherit;font-family:var(--ds-font-family);font-size:var(--ds-font-size-md)}.ds-tabs{display:flex;gap:var(--ds-spacing-sm);border-bottom:1px solid color-mix(in oklch, currentColor 15%, transparent)}.ds-tabs--vertical{flex-direction:column;align-items:stretch;border-bottom:none;border-right:1px solid color-mix(in oklch, currentColor 15%, transparent)}.ds-tab{font:inherit;color:inherit;background-color:transparent;border:none;padding:var(--ds-spacing-sm) var(--ds-spacing-lg);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}.ds-tabs--vertical .ds-tab{text-align:left;border-bottom:none;border-right:2px solid transparent;margin-bottom:0;margin-right:-1px}.ds-tab--active{border-bottom-color:currentColor}.ds-tabs--vertical .ds-tab--active{border-bottom-color:transparent;border-right-color:currentColor}.ds-tab:disabled{opacity:0.5;cursor:not-allowed}`;
+
+const DsTabs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dsChange = index.createEvent(this, "dsChange");
+    }
+    tabRefs = new Map();
+    pendingFocusId;
+    items = "[]";
+    active;
+    orientation = "horizontal";
+    label;
+    dsChange;
+    watchItems() {
+        // Re-reconcile the active id when items change: if the current
+        // active is no longer in the list, fall back to the first enabled.
+        const parsed = this.parseItems();
+        if (parsed.length === 0)
+            return;
+        if (!parsed.some((it) => it.id === this.active && !it.disabled)) {
+            const firstEnabled = parsed.find((it) => !it.disabled);
+            if (firstEnabled) {
+                this.active = firstEnabled.id;
+                this.dsChange.emit(firstEnabled.id);
+            }
+        }
+    }
+    componentWillLoad() {
+        const parsed = this.parseItems();
+        if (parsed.length === 0)
+            return;
+        // Reconcile initial active — if the consumer passed an id that
+        // isn't in items (or none at all), fall back to the first enabled
+        // and emit dsChange once so their state matches ours.
+        if (!this.active || !parsed.some((it) => it.id === this.active && !it.disabled)) {
+            const firstEnabled = parsed.find((it) => !it.disabled);
+            if (firstEnabled) {
+                this.active = firstEnabled.id;
+                this.dsChange.emit(firstEnabled.id);
+            }
+        }
+    }
+    componentDidRender() {
+        // Move programmatic focus to the newly selected tab after
+        // arrow/Home/End nav so the visible focus ring tracks selection.
+        // Click-driven selection does not set pendingFocusId — the native
+        // button click already lands focus on the clicked element.
+        if (this.pendingFocusId) {
+            const target = this.tabRefs.get(this.pendingFocusId);
+            target?.focus();
+            this.pendingFocusId = undefined;
+        }
+    }
+    parseItems() {
+        if (typeof this.items === "string") {
+            try {
+                return JSON.parse(this.items);
+            }
+            catch {
+                console.warn("[ds-tabs] failed to parse items prop:", this.items);
+                return [];
+            }
+        }
+        return this.items;
+    }
+    enabledItems() {
+        return this.parseItems().filter((it) => !it.disabled);
+    }
+    selectAndFocus(id) {
+        if (id === this.active)
+            return;
+        this.active = id;
+        this.pendingFocusId = id;
+        this.dsChange.emit(id);
+    }
+    onClick = (id) => {
+        if (id === this.active)
+            return;
+        this.active = id;
+        // No pendingFocusId: click already focused the button natively.
+        this.dsChange.emit(id);
+    };
+    onKeyDown = (event, currentId) => {
+        const enabled = this.enabledItems();
+        if (enabled.length === 0)
+            return;
+        const isHorizontal = this.orientation === "horizontal";
+        const nextKey = isHorizontal ? "ArrowRight" : "ArrowDown";
+        const prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
+        const currentIdx = enabled.findIndex((it) => it.id === currentId);
+        if (event.key === nextKey) {
+            event.preventDefault();
+            const nextIdx = (currentIdx + 1) % enabled.length;
+            this.selectAndFocus(enabled[nextIdx].id);
+        }
+        else if (event.key === prevKey) {
+            event.preventDefault();
+            const prevIdx = (currentIdx - 1 + enabled.length) % enabled.length;
+            this.selectAndFocus(enabled[prevIdx].id);
+        }
+        else if (event.key === "Home") {
+            event.preventDefault();
+            this.selectAndFocus(enabled[0].id);
+        }
+        else if (event.key === "End") {
+            event.preventDefault();
+            this.selectAndFocus(enabled[enabled.length - 1].id);
+        }
+        // Enter / Space intentionally not handled — automatic activation
+        // already selected the tab on focus move, and the native button
+        // click behavior remains available for consumers who bind to it.
+    };
+    render() {
+        const items = this.parseItems();
+        return (index.h(index.Host, { key: 'efc6a329ddbc14550f7e186480e41218f52b4865' }, index.h("div", { key: '4d475ddcb89198d97440e1e807acbef5984f658e', class: `ds-tabs ds-tabs--${this.orientation}`, role: "tablist", "aria-label": this.label, "aria-orientation": this.orientation === "vertical" ? "vertical" : undefined }, items.map((item) => {
+            const isActive = item.id === this.active;
+            return (index.h("button", { key: item.id, type: "button", role: "tab", id: item.id, class: `ds-tab${isActive ? " ds-tab--active" : ""}`, "aria-selected": isActive ? "true" : "false", "aria-controls": item.controls ?? item.id, tabindex: isActive ? 0 : -1, disabled: item.disabled, ref: (el) => {
+                    if (el)
+                        this.tabRefs.set(item.id, el);
+                    else
+                        this.tabRefs.delete(item.id);
+                }, onClick: () => this.onClick(item.id), onKeyDown: (e) => this.onKeyDown(e, item.id) }, item.label));
+        }))));
+    }
+    static get watchers() { return {
+        "items": [{
+                "watchItems": 0
+            }]
+    }; }
+};
+DsTabs.style = dsTabsCss();
+
+exports.ds_tabs = DsTabs;

package/dist/cjs/ds-textarea.cjs.entry.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var index = require('./index-mMvyq7U_.js');
+
+const dsTextareaCss = () => `:host{display:inline-block;width:100%}.ds-textarea{font-family:var(--ds-font-family);font-size:var(--ds-font-size-md);background-color:transparent;color:inherit;border:1px solid color-mix(in oklch, currentColor 22%, transparent);-webkit-appearance:none;appearance:none;box-sizing:border-box;width:100%;resize:vertical}.ds-textarea::placeholder{color:color-mix(in oklch, currentColor 45%, transparent)}.ds-textarea:disabled{opacity:0.5;cursor:not-allowed;resize:none}.ds-textarea[aria-invalid="true"]{border-color:color-mix(in oklch, currentColor 55%, transparent)}.ds-textarea--md{border-radius:var(--ds-radius-sm);padding:var(--ds-spacing-sm) var(--ds-spacing-lg)}.ds-textarea--lg{border-radius:var(--ds-radius-md);padding:var(--ds-spacing-md) var(--ds-spacing-xl)}`;
+
+const DsTextarea = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dsInput = index.createEvent(this, "dsInput");
+    }
+    textareaEl;
+    value;
+    name;
+    placeholder;
+    disabled = false;
+    required = false;
+    invalid = false;
+    describedBy;
+    label;
+    rows = 3;
+    size = "md";
+    dsInput;
+    watchValue(newValue) {
+        if (this.textareaEl && this.textareaEl.value !== (newValue ?? "")) {
+            this.textareaEl.value = newValue ?? "";
+        }
+    }
+    componentDidLoad() {
+        if (this.textareaEl && this.value !== undefined) {
+            this.textareaEl.value = this.value;
+        }
+    }
+    onInput = (event) => {
+        const value = event.target.value;
+        this.dsInput.emit(value);
+    };
+    render() {
+        const cls = `ds-textarea ds-textarea--${this.size}`;
+        return (index.h(index.Host, { key: '89e63314bca9f6f1b70f36c540a3ac48eed7311c' }, index.h("textarea", { key: '59f9b8ee9a48a4e495da7fb56745102a1f0ee7c2', class: cls, name: this.name, placeholder: this.placeholder, disabled: this.disabled, rows: this.rows, "aria-label": this.label, "aria-required": this.required ? "true" : undefined, "aria-invalid": this.invalid ? "true" : undefined, "aria-describedby": this.describedBy, ref: (el) => (this.textareaEl = el), onInput: this.onInput })));
+    }
+    static get watchers() { return {
+        "value": [{
+                "watchValue": 0
+            }]
+    }; }
+};
+DsTextarea.style = dsTextareaCss();
+
+exports.ds_textarea = DsTextarea;

package/dist/cjs/ds-tooltip.cjs.entry.js

@@ -0,0 +1,233 @@
+'use strict';
+
+var index = require('./index-mMvyq7U_.js');
+
+const dsTooltipCss = () => `ds-tooltip{display:inline-block;position:relative;color:inherit}.ds-tooltip{position:absolute;left:50%;transform:translateX(-50%);z-index:1;max-width:240px;padding:var(--ds-spacing-xs) var(--ds-spacing-sm);font-family:var(--ds-font-family);font-size:var(--ds-font-size-md);line-height:1.3;color:inherit;background-color:Canvas;border:1px solid color-mix(in oklch, currentColor 25%, transparent);border-radius:var(--ds-radius-sm);pointer-events:none;white-space:normal}.ds-tooltip--bottom{top:calc(100% + var(--ds-spacing-xs))}.ds-tooltip--top{bottom:calc(100% + var(--ds-spacing-xs))}`;
+
+/**
+ * ## Accessibility
+ *
+ * **Category:** state-machine (Tier 2)
+ * **APG pattern:** https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
+ *
+ * Scratch build (there is no native tooltip element). Per the a11y
+ * spec §D ceremony: APG citation above, full keyboard enumeration
+ * and ARIA below, focus lifecycle in the tsx and spec.json, manual
+ * VoiceOver evidence pending (see commit message TODO).
+ *
+ * **Scope choice — wraps the consumer's first Element child as the
+ * trigger.** `<ds-tooltip label="Delete"><ds-button>×</ds-button>`
+ * — the first Element inside the ds-tooltip host is treated as the
+ * trigger. shadow:false so we can imperatively set `aria-describedby`
+ * on that light-DOM child (shadow-scoped ids can't be referenced
+ * from a light-DOM `aria-describedby`).
+ *
+ * **Consumer contract:** the first Element child MUST be focusable
+ * (`<button>`, `<a href>`, native form control, or an element with
+ * `tabindex="0"`) — otherwise keyboard users cannot summon the
+ * tooltip and the pattern fails WCAG 1.4.13. The component does not
+ * force focusability onto arbitrary children; that would produce
+ * silent AT surprises. The tooltip's `label` prop is required — a
+ * tooltip with no accessible text is inert.
+ *
+ * **Keyboard interactions (full APG enumeration):**
+ * - Focus (Tab into trigger): tooltip opens immediately (no
+ *   `openDelay`). Delay-on-open is a mouse-hover ergonomic, not a
+ *   keyboard one — waiting for keyboard users to see supplementary
+ *   info is friction, not smoothing.
+ * - Escape (anywhere inside the tooltip's host, tooltip open):
+ *   dismisses the tooltip WITHOUT moving focus. The trigger remains
+ *   focused so the user can Tab away or re-summon. This is the WCAG
+ *   1.4.13 "dismissable" requirement.
+ * - Blur (Tab out of the trigger): tooltip closes immediately.
+ * - Enter / Space / arrow / printable: forwarded to the trigger
+ *   (the tooltip does not intercept them). If Enter activates the
+ *   underlying `<button>`, the button click closes the tooltip via
+ *   the natural blur-then-refocus cycle.
+ *
+ * **Pointer interactions:**
+ * - mouseenter on the host → start `openDelay` timer → show.
+ * - mouseleave on the host → start `closeDelay` timer → hide.
+ * - Re-entering during the closeDelay window cancels the hide (the
+ *   tooltip is "hoverable" — WCAG 1.4.13 — so users can move the
+ *   pointer INTO the tooltip surface without it disappearing).
+ *
+ * **Persistence** (WCAG 1.4.13): the tooltip stays visible while
+ * the trigger is focused or hovered, and while the pointer is over
+ * the tooltip content itself. Dismissal only happens via Escape,
+ * blur, or genuine mouseleave (no residual hover on host or
+ * tooltip content).
+ *
+ * **ARIA attributes and value triggers:**
+ * - Tooltip element: `role="tooltip"`, `id` (auto-generated per
+ *   instance so multiple tooltips on a page do not collide).
+ * - Trigger (the first Element child): `aria-describedby={tooltipId}`
+ *   set on componentDidLoad and refreshed on slot mutations. We use
+ *   describedby (APG default), NOT labelledby — the trigger has its
+ *   own accessible name (its text or aria-label), and the tooltip
+ *   supplements it.
+ *
+ * **Focus lifecycle:**
+ * - On mount: no auto-focus.
+ * - On trigger focus: tooltip opens immediately.
+ * - On trigger blur: tooltip closes.
+ * - On Escape while open: tooltip closes, focus stays on trigger.
+ * - The tooltip surface itself is NOT focusable — it is
+ *   supplementary content, not an interactive region.
+ *
+ * **Motion:**
+ * - Animations: none applied by the component. Consumers who want a
+ *   fade can style `[data-open="true"]` transitions gated on
+ *   `prefers-reduced-motion: no-preference`.
+ *
+ * **Contrast:**
+ * - Tooltip surface: solid background via `Canvas` system color
+ *   with `currentColor` text so it inherits the consumer theme's
+ *   text color. Border uses `color-mix(currentColor 25%,
+ *   transparent)`. Consumer theme owns the 4.5:1 text contrast and
+ *   3:1 non-text.
+ *
+ * **Screen reader announcement:**
+ * - Rendered state (closed): tooltip content is `hidden`, not in
+ *   the a11y tree.
+ * - On focus: because the trigger has `aria-describedby`, AT reads
+ *   the trigger's accessible name plus the tooltip text as a
+ *   description. AT usually announces "…, [description]" after the
+ *   trigger's role.
+ * - On Escape: the tooltip vanishes silently; AT falls back to
+ *   announcing the trigger without its description on next
+ *   interaction. This is APG behavior for dismissed tooltips.
+ *
+ * **Pending manual verification (see commit message TODO):**
+ * - VoiceOver on macOS: confirm the tooltip text is announced as a
+ *   description of the trigger when the trigger gains focus.
+ * - VoiceOver: confirm Escape dismisses the tooltip and leaves the
+ *   trigger focused; confirm re-focusing brings it back.
+ * - Chromium reduced-motion: confirm no residual animation is added
+ *   by the component.
+ */
+let tooltipIdCounter = 0;
+const DsTooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get hostEl() { return index.getElement(this); }
+    label;
+    openDelay = 250;
+    closeDelay = 100;
+    placement = "bottom";
+    tooltipId = `ds-tooltip-${++tooltipIdCounter}`;
+    tooltipEl;
+    openTimer;
+    closeTimer;
+    isOpen = false;
+    watchLabel() {
+        if (this.tooltipEl) {
+            this.tooltipEl.textContent = this.label;
+        }
+    }
+    componentDidLoad() {
+        this.wireTrigger();
+        this.hostEl.addEventListener("mouseenter", this.onMouseEnter);
+        this.hostEl.addEventListener("mouseleave", this.onMouseLeave);
+        this.hostEl.addEventListener("focusin", this.onFocusIn);
+        this.hostEl.addEventListener("focusout", this.onFocusOut);
+        this.hostEl.addEventListener("keydown", this.onKeyDown);
+    }
+    disconnectedCallback() {
+        this.clearTimers();
+        this.hostEl.removeEventListener("mouseenter", this.onMouseEnter);
+        this.hostEl.removeEventListener("mouseleave", this.onMouseLeave);
+        this.hostEl.removeEventListener("focusin", this.onFocusIn);
+        this.hostEl.removeEventListener("focusout", this.onFocusOut);
+        this.hostEl.removeEventListener("keydown", this.onKeyDown);
+    }
+    wireTrigger() {
+        // First Element child within the host, ignoring our own tooltip
+        // <span> which we render at the end.
+        const children = Array.from(this.hostEl.children).filter((el) => el !== this.tooltipEl);
+        const trigger = children[0];
+        if (!trigger)
+            return;
+        trigger.setAttribute("aria-describedby", this.tooltipId);
+    }
+    clearTimers() {
+        if (this.openTimer !== undefined) {
+            window.clearTimeout(this.openTimer);
+            this.openTimer = undefined;
+        }
+        if (this.closeTimer !== undefined) {
+            window.clearTimeout(this.closeTimer);
+            this.closeTimer = undefined;
+        }
+    }
+    show(delay = 0) {
+        if (this.closeTimer !== undefined) {
+            window.clearTimeout(this.closeTimer);
+            this.closeTimer = undefined;
+        }
+        if (this.isOpen)
+            return;
+        if (delay === 0) {
+            this.applyOpen(true);
+            return;
+        }
+        if (this.openTimer !== undefined)
+            return;
+        this.openTimer = window.setTimeout(() => {
+            this.openTimer = undefined;
+            this.applyOpen(true);
+        }, delay);
+    }
+    hide(delay = 0) {
+        if (this.openTimer !== undefined) {
+            window.clearTimeout(this.openTimer);
+            this.openTimer = undefined;
+        }
+        if (!this.isOpen)
+            return;
+        if (delay === 0) {
+            this.applyOpen(false);
+            return;
+        }
+        if (this.closeTimer !== undefined)
+            return;
+        this.closeTimer = window.setTimeout(() => {
+            this.closeTimer = undefined;
+            this.applyOpen(false);
+        }, delay);
+    }
+    applyOpen(open) {
+        this.isOpen = open;
+        if (!this.tooltipEl)
+            return;
+        if (open) {
+            this.tooltipEl.removeAttribute("hidden");
+            this.tooltipEl.dataset.open = "true";
+        }
+        else {
+            this.tooltipEl.setAttribute("hidden", "");
+            this.tooltipEl.dataset.open = "false";
+        }
+    }
+    onMouseEnter = () => this.show(this.openDelay);
+    onMouseLeave = () => this.hide(this.closeDelay);
+    onFocusIn = () => this.show(0);
+    onFocusOut = () => this.hide(0);
+    onKeyDown = (event) => {
+        if (event.key === "Escape" && this.isOpen) {
+            this.hide(0);
+        }
+    };
+    render() {
+        return (index.h(index.Host, { key: 'e3822251c9edab36fdffa9178473823f3e9ae525' }, index.h("slot", { key: 'f7c490f42ae09a739d8d91d32c2394dbdef03aa5' }), index.h("span", { key: '8bda1876026129859665f82b1983065df602d092', class: `ds-tooltip ds-tooltip--${this.placement}`, role: "tooltip", id: this.tooltipId, hidden: true, "data-open": "false", ref: (el) => (this.tooltipEl = el) }, this.label)));
+    }
+    static get watchers() { return {
+        "label": [{
+                "watchLabel": 0
+            }]
+    }; }
+};
+DsTooltip.style = dsTooltipCss();
+
+exports.ds_tooltip = DsTooltip;