feat: add info icon with tooltip to form fields

packages/checkbox-group/checkbox-group.ts

@@ -53,6 +53,14 @@ export class WarpCheckboxGroup extends FormControlMixin(LitElement) {
 	@property({ type: String, reflect: true })
 	label: string | undefined;
 
+	/**
+	 * Suplementary information that should show in a tooltip behind an information icon after the label.
+	 *
+	 * You must provide a label to be able to show an info icon with a tooltip.
+	 */
+	@property({ type: String, reflect: true })
+	tooltip?: string;
+
 	/**
 	 * The name applied to child checkboxes when they do not provide one.
 	 *
@@ -142,6 +150,20 @@ export class WarpCheckboxGroup extends FormControlMixin(LitElement) {
 		.error {
 			color: var(--w-s-color-text-negative);
 		}
+
+		[part="tooltip-target"] {
+			appearance: none;
+			background: transparent;
+			border: none;
+			height: 16px;
+			margin: 0 0 0 4px;
+			padding: 0;
+			vertical-align: text-top;
+		}
+
+		w-tooltip {
+			display: inline-block;
+		}
 	`;
 
 	render() {
@@ -171,6 +193,24 @@ export class WarpCheckboxGroup extends FormControlMixin(LitElement) {
 											</span>
 										`
 									: nothing}
+								${this.tooltip
+									? html`
+											<button
+												id="tooltip-target"
+												part="tooltip-target"
+												aria-describedby="tooltip"
+											>
+												<w-icon name="Info" size="small"></w-icon>
+											</button>
+											<w-tooltip
+												for="tooltip-target"
+												id="tooltip"
+												exportparts="tooltip, arrow, beak, hover-bridge"
+											>
+												${this.tooltip}
+											</w-tooltip>
+										`
+									: nothing}
 							</div>
 						`
 					: nothing}

packages/checkbox-group/input-styles.ts

@@ -0,0 +1,104 @@
+import { css } from "lit";
+
+/**
+ * Shared styles for input components (textfield, textarea, select)
+ * using the internal token pattern with a public styling API.
+ *
+ * Public API tokens (customizable):
+ * - Label: --w-c-input-label-*
+ * - Help text: --w-c-input-help-text-*
+ * - Optional indicator: --w-c-input-optional-*
+ */
+
+export const inputLabelStyles = css`
+	/* Label component tokens with semantic fallbacks */
+	label {
+		/* Internal tokens - not part of public API */
+		--_color: var(--w-c-input-label-color, var(--w-s-color-text));
+		--_font-size: var(--w-c-input-label-font-size, var(--w-font-size-s));
+		--_line-height: var(--w-c-input-label-line-height, var(--w-line-height-s));
+		--_font-weight: var(--w-c-input-label-font-weight, 700);
+		--_padding-bottom: var(--w-c-input-label-padding-bottom, 0.4rem);
+		--_cursor: var(--w-c-input-label-cursor, pointer);
+		--_display: var(--w-c-input-label-display, block);
+
+		/* Apply styles */
+		display: var(--_display);
+		position: relative;
+		font-size: var(--_font-size);
+		line-height: var(--_line-height);
+		font-weight: var(--_font-weight);
+		padding-bottom: var(--_padding-bottom);
+		cursor: var(--_cursor);
+		color: var(--_color);
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+
+	/* Optional text styling */
+	label span {
+		--_padding-left: var(--w-c-input-optional-padding-left, 0.8rem);
+		--_font-weight: var(--w-c-input-optional-font-weight, 400);
+		--_font-size: var(--w-c-input-optional-font-size, var(--w-font-size-s));
+		--_line-height: var(
+			--w-c-input-optional-line-height,
+			var(--w-line-height-s)
+		);
+		--_color: var(--w-c-input-optional-color, var(--w-s-color-text-subtle));
+
+		padding-left: var(--_padding-left);
+		font-weight: var(--_font-weight);
+		font-size: var(--_font-size);
+		line-height: var(--_line-height);
+		color: var(--_color);
+	}
+
+	[part="tooltip-target"] {
+		appearance: none;
+		background: transparent;
+		height: 16px;
+		margin: 0 0 0 4px;
+		padding: 0;
+		vertical-align: text-top;
+	}
+
+	w-tooltip {
+		display: inline-block;
+	}
+`;
+
+export const inputHelpTextStyles = css`
+	/* Help text component tokens with semantic fallbacks */
+	:host {
+		--_help-text-color: var(
+			--w-c-input-help-text-color,
+			var(--w-s-color-text-subtle)
+		);
+		--_help-text-font-size: var(
+			--w-c-input-help-text-font-size,
+			var(--w-font-size-xs)
+		);
+		--_help-text-line-height: var(
+			--w-c-input-help-text-line-height,
+			var(--w-line-height-xs)
+		);
+		--_help-text-margin-top: var(--w-c-input-help-text-margin-top, 0.4rem);
+		--_help-text-display: var(--w-c-input-help-text-display, block);
+	}
+
+	/* Invalid state overrides color */
+	:host([invalid]) {
+		--_help-text-color: var(
+			--w-c-input-help-text-color-invalid,
+			var(--w-s-color-text-negative)
+		);
+	}
+
+	.help-text {
+		font-size: var(--_help-text-font-size);
+		line-height: var(--_help-text-line-height);
+		margin-top: var(--_help-text-margin-top);
+		display: var(--_help-text-display);
+		color: var(--_help-text-color);
+	}
+`;

packages/checkbox/checkbox.stories.ts

@@ -7,6 +7,7 @@ import { prespread } from "../../.storybook/utilities.js";
 
 import "./checkbox.js";
 import "../checkbox-group/checkbox-group.js";
+import "../tooltip/tooltip.js";
 import type { WarpCheckbox } from "./checkbox.js";
 
 const { events, args, argTypes } =
@@ -32,6 +33,32 @@ type Story = StoryObj<typeof args>;
 
 export const Default: Story = {};
 
+export const WithTooltip: Story = {
+	args: {
+		optional: true,
+		required: false,
+		helpText:
+			"Help text is available, but might not be enough, or the added context is not important enough that we use help-text",
+		tooltip: "This tooltip adds supplementary information",
+	},
+	render({ optional, required }) {
+		return html`
+			<w-checkbox-group
+				name="tooltip-demo"
+				label="Needs an explanation"
+				help-text="Help text is available, but might not be enough, or the added context is not important enough that we use help-text"
+				tooltip="This tooltip adds supplementary information"
+				?optional=${optional}
+				?required=${required}
+			>
+				<w-checkbox value="foo">Foo</w-checkbox>
+				<w-checkbox value="bar">Bar</w-checkbox>
+				<w-checkbox value="baz">Baz</w-checkbox>
+			</w-checkbox-group>
+		`;
+	},
+};
+
 export const Invalid: Story = {
 	args: {
 		name: "invalidfoo",

packages/combobox/combobox.stories.ts

@@ -119,6 +119,18 @@ export const Optional: Story = {
 	},
 };
 
+export const WithTooltip: Story = {
+	args: {
+		label: "Select a fruit",
+		placeholder: "Type to search...",
+		optional: true,
+		required: false,
+		helpText:
+			"Help text is available, but might not be enough, or the added context is not important enough that we use help-text",
+		tooltip: "This tooltip adds supplementary information",
+	},
+};
+
 export const DisableStaticFiltering: Story = {
 	render: () => html`
 		<w-combobox

packages/combobox/combobox.ts

@@ -64,6 +64,14 @@ export class WarpCombobox extends FormControlMixin(LitElement) {
 	@property({ type: String, reflect: true, useDefault: true })
 	label?: string = "";
 
+	/**
+	 * Suplementary information that should show in a tooltip behind an information icon after the label.
+	 *
+	 * You must provide a label to be able to show an info icon with a tooltip.
+	 */
+	@property({ type: String, reflect: true })
+	tooltip?: string;
+
 	/**
 	 * Placeholder text displayed when the input is empty.
 	 *
@@ -693,6 +701,7 @@ export class WarpCombobox extends FormControlMixin(LitElement) {
 					.optional=${this.optional}
 					.name=${this.name}
 					.autocomplete="${this.autocomplete || "off"}"
+					.tooltip="${this.tooltip}"
 					role="combobox"
 					aria-autocomplete="list"
 					aria-expanded=${this._isOpen && this._currentOptions.length !== 0}

packages/datepicker/datepicker.stories.ts

@@ -6,6 +6,7 @@ import { html } from "lit";
 import { prespread } from "../../.storybook/utilities.js";
 
 import "../button/button.js";
+import "../tooltip/tooltip.js";
 import type { WarpDatepicker } from "./datepicker.js";
 import "./datepicker.js";
 
@@ -47,6 +48,17 @@ export const Default: Story = {
 	},
 };
 
+export const WithTooltip: Story = {
+	args: {
+		label: "Date",
+		optional: true,
+		required: false,
+		helpText:
+			"Help text is available, but might not be enough, or the added context is not important enough that we use help-text",
+		tooltip: "This tooltip adds supplementary information",
+	},
+};
+
 export const DisableCalendarDates: Story = {
 	args: {
 		label: "Date",