@chiralkit/design-system 0.1.0-alpha.0

package/dist/types/components/ds-textarea/ds-textarea.d.ts

@@ -0,0 +1,93 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+/**
+ * ## Accessibility
+ *
+ * **Category:** form-field
+ * **APG pattern:** N/A — native element. This wraps a native
+ * `<textarea>`; there is no WAI-ARIA APG pattern for a plain
+ * multi-line text field because the browser already implements it
+ * natively. Reference:
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
+ *
+ * **Keyboard interactions:**
+ * - Tab: moves focus to the native `<textarea>`; Tab inside the
+ *   textarea inserts a tab character only when the browser is
+ *   configured to do so (default behavior: Tab moves focus out).
+ * - Printable characters: insert at the caret position (native).
+ * - Enter: inserts a newline within the value (native), does not
+ *   submit the enclosing form (unlike a single-line input).
+ * - Backspace / Delete: native editing.
+ * - Arrow keys: move the caret within the value (native).
+ * - Escape: no native meaning for a text area.
+ *
+ * **ARIA:**
+ * - Roles used: none explicit — the native `<textarea>` supplies
+ *   the implicit `textbox` role with multiline behavior.
+ * - State attributes: `disabled` (native attribute, not
+ *   `aria-disabled`), `aria-invalid` (from the `invalid` prop),
+ *   `aria-required` (from the `required` prop), `aria-describedby`
+ *   (from the `describedBy` prop, expected to reference a light-DOM
+ *   node id — typically a hint or error message rendered by the
+ *   consumer alongside the field).
+ * - Labeling strategy: `aria-label` set from the `label` prop onto
+ *   the internal `<textarea>`. This is the **canonical, recommended**
+ *   mode. Wrapping the host in a light-DOM `<label>` also produces
+ *   an accessible name in Chromium via flattened-tree resolution —
+ *   same secondary mode documented on `ds-input` and `ds-select`,
+ *   verified in this component's e2e tests. Setting `aria-label`
+ *   directly on the `<ds-textarea>` host does NOT work: shadow-DOM
+ *   attribute forwarding would be required — use the `label` prop.
+ *
+ * **Focus:**
+ * - On mount: nothing auto-focuses.
+ * - On value change: focus remains on the native `<textarea>`.
+ * - Focus indicator: the browser default `:focus-visible` ring is
+ *   kept on purpose — a themed focus ring using `--ds-color-focus`
+ *   is a future decision once the DS ships a shared focus utility.
+ *
+ * **Motion:**
+ * - Animations: none.
+ * - Reduced-motion behavior: N/A — no animation to collapse.
+ *
+ * **Contrast:**
+ * - Text: inherits `color: inherit` / `currentColor`; ratio depends
+ *   on the consumer's theme, not verified in isolation.
+ * - Border: `color-mix(in oklch, currentColor 22%, transparent)`,
+ *   matching `ds-input`.
+ *
+ * **Screen reader announcement:**
+ * - Rendered state: announces the `label` prop text as the
+ *   accessible name, followed by "edit text, multiline" (browser/AT
+ *   wording varies). When `required=true` the announcement includes
+ *   "required"; when `invalid=true` it includes "invalid".
+ * - State change: on value edit, AT typically echoes the typed
+ *   character (native behavior); no `aria-live` added.
+ *
+ * **Consumer contract:**
+ * - `placeholder` is a hint, not a label — always pair with `label`.
+ * - When `invalid=true`, pair with a `describedBy` id that points at
+ *   a visible error message; `aria-invalid` alone gives the AT the
+ *   status but not the reason.
+ * - `rows` sets the initial visible line count. Vertical resize is
+ *   left to the native default (`resize: vertical`) so users can
+ *   grow the field for long entries; the consumer's CSS can pin it
+ *   with `resize: none` when a fixed height matters.
+ */
+export declare class DsTextarea {
+    private textareaEl?;
+    value?: string;
+    name?: string;
+    placeholder?: string;
+    disabled: boolean;
+    required: boolean;
+    invalid: boolean;
+    describedBy?: string;
+    label?: string;
+    rows: number;
+    size: "md" | "lg";
+    dsInput: EventEmitter<string>;
+    watchValue(newValue?: string): void;
+    componentDidLoad(): void;
+    private onInput;
+    render(): any;
+}

package/dist/types/components/ds-tooltip/ds-tooltip.d.ts

@@ -0,0 +1,26 @@
+export declare class DsTooltip {
+    hostEl: HTMLElement;
+    label: string;
+    openDelay: number;
+    closeDelay: number;
+    placement: "top" | "bottom";
+    private tooltipId;
+    private tooltipEl?;
+    private openTimer?;
+    private closeTimer?;
+    private isOpen;
+    watchLabel(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private wireTrigger;
+    private clearTimers;
+    private show;
+    private hide;
+    private applyOpen;
+    private onMouseEnter;
+    private onMouseLeave;
+    private onFocusIn;
+    private onFocusOut;
+    private onKeyDown;
+    render(): any;
+}