feat(keyboard-full): add inputType prop for password masking

docs/superpowers/specs/2026-07-07-keyboard-full-input-type-design.md

@@ -0,0 +1,73 @@
+# Design: Password masking on `obc-keyboard-full`
+
+Date: 2026-07-07
+
+## Problem
+
+A user asked to mask password input on the virtual keyboard. The internal
+`obc-text-input-field` already supports masking (`type="password"` renders a
+masked input plus a show/hide visibility toggle), but `obc-keyboard-full` never
+forwards an input type to it — its embedded field always renders as plain text.
+
+## Goal
+
+Let a consumer of `obc-keyboard-full` set the input type of the embedded
+`obc-text-input-field`, so passwords render masked (and other input modes such
+as email/tel/url become available for free).
+
+## API
+
+Add one property to `obc-keyboard-full`:
+
+```ts
+@property({type: String}) inputType: HTMLInputTypeAttribute =
+  HTMLInputTypeAttribute.Text;
+```
+
+- Named **`inputType`**, not `type`, because `type` is already taken by the
+  visual-variant property (`ObcKeyboardFullType`: `floating` / `flat`). The name
+  mirrors the existing `inputSize` property, which forwards to the input field's
+  `size`.
+- Type is the existing `HTMLInputTypeAttribute` enum re-exported from
+  `text-input-field.ts` (`text` | `password` | `email` | `tel` | `url` |
+  `search` | `date` | `time`), defaulting to `text` (no behavior change for
+  existing consumers).
+
+Usage:
+
+```html
+<obc-keyboard-full inputType="password" parameterName="Password" showTopBar>
+</obc-keyboard-full>
+```
+
+## Implementation
+
+All changes in `src/components/keyboard-full/`:
+
+1. Import `HTMLInputTypeAttribute` from `../text-input-field/text-input-field.js`.
+2. Declare the `inputType` property (default `Text`).
+3. Forward it in the template: `<obc-text-input-field .type=${this.inputType} …>`.
+4. JSDoc: document the property and add a password example to the class comment.
+5. Story: add a `Password` story so autodocs surface it and a snapshot exists.
+6. `npm run analyze` to update `custom-elements.json`. Framework wrappers are
+   regenerated by the normal build pipeline (never hand-edited).
+
+## What is intentionally unchanged
+
+- **Key handling.** Keys still insert plain characters into `this.value`; only
+  the input field's *display* is masked. The `value-change` and `done-click`
+  events keep emitting the real string — the consumer needs the actual password.
+- **Visibility toggle.** The show/hide eye button is rendered by
+  `obc-text-input-field` whenever `type="password"`; no keyboard-side work.
+
+## Testing
+
+- New `Password` story renders masked → visual snapshot baseline (Linux, via the
+  CI-matching Docker image).
+- `npm run analyze`, `npm run typecheck`, lint.
+
+## Scope
+
+One property, one binding, one story, plus docs/manifest. No decomposition
+needed. `obc-keyboard-full` is currently marked `@beta`, so the additive API
+carries low compatibility risk.

packages/openbridge-webcomponents/src/components/keyboard-full/keyboard-full.stories.ts

@@ -1,7 +1,10 @@
 import type {Meta, StoryObj} from '@storybook/web-components-vite';
 import {html} from 'lit';
 import {ObcKeyboardFull, ObcKeyboardFullType} from './keyboard-full.js';
-import {ObcTextInputFieldSize} from '../text-input-field/text-input-field.js';
+import {
+  HTMLInputTypeAttribute,
+  ObcTextInputFieldSize,
+} from '../text-input-field/text-input-field.js';
 import './keyboard-full.js';
 
 const meta: Meta<typeof ObcKeyboardFull> = {
@@ -87,6 +90,15 @@ Ideal for touch-screen interfaces where a custom keyboard is needed for text ent
         defaultValue: {summary: 'large'},
       },
     },
+    inputType: {
+      control: 'select',
+      options: Object.values(HTMLInputTypeAttribute),
+      description:
+        'Input type forwarded to the field. Use `password` to mask the value.',
+      table: {
+        defaultValue: {summary: 'text'},
+      },
+    },
   },
   args: {
     type: ObcKeyboardFullType.Floating,
@@ -96,6 +108,7 @@ Ideal for touch-screen interfaces where a custom keyboard is needed for text ent
     placeholder: 'Placeholder',
     showNumberRow: false,
     inputSize: ObcTextInputFieldSize.Large,
+    inputType: HTMLInputTypeAttribute.Text,
   },
 } satisfies Meta<ObcKeyboardFull>;
 
@@ -111,6 +124,7 @@ const renderKeyboard = (args: ObcKeyboardFull) => html`
     .placeholder=${args.placeholder}
     .showNumberRow=${args.showNumberRow}
     .inputSize=${args.inputSize}
+    .inputType=${args.inputType}
     @value-change=${(e: CustomEvent) =>
       console.log('value-change:', e.detail.value)}
     @done-click=${(e: CustomEvent) =>
@@ -168,6 +182,26 @@ export const WithNumberRow: Story = {
   },
 };
 
+export const Password: Story = {
+  args: {
+    type: ObcKeyboardFullType.Floating,
+    parameterName: 'Password',
+    placeholder: 'Enter password...',
+    value: 'secret123',
+    showNumberRow: true,
+    inputType: HTMLInputTypeAttribute.Password,
+  },
+  render: renderKeyboard,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Sets `inputType="password"` to mask the entered value. A show/hide toggle appears inside the input field, and the `value-change`/`done-click` events still emit the real (unmasked) string.',
+      },
+    },
+  },
+};
+
 export const WithoutTopBar: Story = {
   args: {
     type: ObcKeyboardFullType.Floating,

packages/openbridge-webcomponents/src/components/keyboard-full/keyboard-full.ts

@@ -11,6 +11,7 @@ import '../../icons/icon-arrow-left-google.js';
 import '../../icons/icon-shift-lock.js';
 import '../text-input-field/text-input-field.js';
 import {
+  HTMLInputTypeAttribute,
   ObcTextInputField,
   ObcTextInputFieldSize,
 } from '../text-input-field/text-input-field.js';
@@ -143,10 +144,16 @@ export enum ObcKeyboardFullMode {
  * </obc-keyboard-full>
  * ```
  *
- * **Flat keyboard with number row for password input:**
+ * **Masked password entry:**
+ *
+ * Set `inputType="password"` to mask the entered value in the input field. A
+ * show/hide toggle appears inside the field so users can reveal what they typed.
+ * The `value-change` and `done-click` events still carry the real (unmasked)
+ * string.
  * ```html
  * <obc-keyboard-full
  *   type="flat"
+ *   inputType="password"
  *   parameterName="Password"
  *   placeholder="Enter password"
  *   showNumberRow
@@ -190,6 +197,13 @@ export class ObcKeyboardFull extends LitElement {
   @property({type: String}) inputSize: ObcTextInputFieldSize =
     ObcTextInputFieldSize.Large;
 
+  /**
+   * Input type forwarded to the embedded input field. Set to `password` to mask
+   * the entered value (a show/hide toggle is then shown inside the field).
+   */
+  @property({type: String}) inputType: HTMLInputTypeAttribute =
+    HTMLInputTypeAttribute.Text;
+
   @state() private mode: ObcKeyboardFullMode = ObcKeyboardFullMode.ABC;
   @state() private capsLock = false;
 
@@ -691,6 +705,7 @@ export class ObcKeyboardFull extends LitElement {
               .value=${this.value}
               .placeholder=${this.placeholder}
               .size=${this.inputSize}
+              .type=${this.inputType}
               @input=${this.onInputFieldValueChanged}
             >
             </obc-text-input-field>