@repobit/dex-system-design 0.25.11 → 0.26.0

package/src/components/input/custom-form.stories.js

@@ -5,7 +5,7 @@ import '../dropdown/dropdown.js';
 import './input-clipboard.js';
 import './input.js';
 export default {
-  title     : 'Components/Form Inputs',
+  title     : 'Atoms/Input',
   component : 'bd-custom-input',
   tags      : ['autodocs'],
   parameters: {
@@ -17,7 +17,7 @@ export default {
 It includes:
 - A text / email / password / number / tel **Input** field with validation states
 - A **Dropdown** select with configurable options and sizing
-- An **InputClipboard** field with one-click copy/paste functionality
+- An **InputClipboard** field with a one-click paste button
 
 ### States
 | State | Description |
@@ -29,14 +29,144 @@ It includes:
 | \`disabled\` | Non-interactive, visually muted |
 
 ### Sizes (\`kind\`)
-| Value | Use case |
+| Value | Height | Use case |
+|---|---|---|
+| \`sm\` | 33.5px | Compact forms, sidebars, modals |
+| \`md\` | 44px | Default forms |
+| \`lg\` | 54.5px | Hero / marketing sign-up areas |
+
+**All four controls of the same size are exactly the same height** — the input,
+the select, the clipboard field and \`bd-button\`, at 33.5, 44 and 54.5px. Each
+derives it from the same three tokens: the vertical \`--spacing-*\`, the
+\`--typography-fontSize-*\` step and \`--typography-lineHeight-tight\`. They are
+not four numbers kept in step by hand, so a change to the type scale moves them
+together. That matters because these controls almost always share a row.
+
+\`line-height\` and \`box-sizing\` are part of that contract, not cosmetics. Both
+of the other two fields got this wrong in a different way, and both were
+visible:
+
+- the **select** carried \`lineHeight-normal\` (1.5) against a fixed height,
+  leaving the line box 3 to 6px taller than the content box, so it clipped the
+  descenders of its own option text;
+- the **clipboard field** declared no \`box-sizing\`, so its fixed height was the
+  content box and the padding and border were added on top of it — it stood
+  around 60% taller than everything beside it.
+
+All three now set \`box-sizing: border-box\`, so the 1px border sits inside the
+height rather than adding to it.
+
+These size rules are currently **duplicated in three stylesheets** — one per
+component. That duplication is why the two fixes above had to be made three
+times, and it should be collapsed into one shared stylesheet.
+
+### Reading the value
+\`bd-custom-input\` carries a \`value\` property and fires two events, both
+bubbling and composed so they cross the shadow boundary:
+
+| Event | Fires | \`detail\` |
+|---|---|---|
+| \`bd-input\` | every keystroke | \`{ value, name }\` |
+| \`bd-change\` | on commit (blur or Enter) | \`{ value, name }\` |
+
+\`\`\`js
+input.addEventListener('bd-input', e => console.log(e.detail.value));
+console.log(input.value);
+\`\`\`
+
+Do **not** read \`e.target.value\` from a native \`input\` event. That event does
+escape the shadow root, but it retargets to the host, so \`e.target\` is the
+\`<bd-custom-input>\` element — use \`bd-input\` or the \`value\` property.
+
+The element is **not** form-associated: the \`<input>\` lives in a shadow root,
+so a \`<form>\` containing it yields no \`FormData\` entry. \`name\` is carried on
+the events for your own use.
+
+### Validation is announced, not just coloured
+\`invalid\` sets \`aria-invalid="true"\`, and when \`tooltip\` is present the input
+points at it with \`aria-describedby\` — so a screen reader announces both that
+the field is wrong and why. Put the reason in \`tooltip\`; it doubles as the
+help text and the error message.
+
+The required asterisk is \`aria-hidden\`, because the native \`required\`
+attribute is what actually conveys it.
+
+### The mobile keyboard
+\`type\` alone changes the keyboard on iOS and Android — \`email\` adds @ and a
+dot, \`tel\` gives the phone keypad, \`url\` adds a slash, \`number\` and
+\`search\` each get their own. For everything finer there are three more props:
+
+| Prop | What it does on mobile |
 |---|---|
-| \`sm\` | Compact forms, sidebars, modals |
-| \`md\` | Default forms |
-| \`lg\` | Hero / marketing sign-up areas |
+| \`inputmode\` | Picks the keyboard without changing the field's semantics. \`numeric\`, \`decimal\`, \`tel\`, \`email\`, \`url\`, \`search\`. |
+| \`autocomplete\` | Drives autofill, and it is the single biggest saving on a phone. \`email\`, \`tel\`, \`one-time-code\`, \`current-password\`, \`postal-code\`. |
+| \`enterkeyhint\` | Labels the Enter key. \`next\`, \`done\`, \`go\`, \`search\`, \`send\`. |
+
+\`\`\`html
+<bd-custom-input type="email" autocomplete="email" enterkeyhint="next" label="Email"></bd-custom-input>
+<bd-custom-input type="tel" autocomplete="tel" label="Phone"></bd-custom-input>
+<bd-custom-input type="text" inputmode="numeric" autocomplete="one-time-code" enterkeyhint="done" label="Code"></bd-custom-input>
+\`\`\`
+
+**Prefer \`inputmode="numeric"\` on a text field over \`type="number"\`** for
+things that are digit strings rather than quantities — codes, PINs, card and
+postal codes. \`type="number"\` adds spinners, changes on a scroll wheel, and
+drops leading zeros.
+
+**\`kind="sm"\` is a problem on iOS.** Its font-size is 14px, and Safari zooms
+the page in whenever a focused input is under 16px — and does not zoom back
+out. \`md\` (16px) and \`lg\` (18px) are unaffected. Use \`md\` on anything a
+phone will see, or raise \`sm\` to 16px.
 
 ### Input Types
-Supports all native HTML input types: \`text\`, \`email\`, \`password\`, \`number\`, \`tel\`.
+Supports the native HTML input types: \`text\`, \`email\`, \`password\`,
+\`number\`, \`tel\`, \`url\`, \`search\`.
+
+### The three controls are not interchangeable
+They share a look and a height, not an API. The controls below are shared, and
+everything else is not:
+
+| | \`bd-custom-input\` | \`bd-custom-dropdown\` | \`bd-custom-input-clipboard\` |
+|---|---|---|---|
+| \`label\`, \`kind\`, \`required\`, \`invalid\`, \`validated\`, \`disabled\`, \`tooltip\` | yes | yes | yes |
+| \`value\` | yes | **no** | yes |
+| \`type\`, \`placeholder\`, \`focused\` | yes | **no** | yes |
+| \`name\`, \`inputmode\`, \`autocomplete\`, \`enterkeyhint\` | yes | **no** | **no** |
+| \`options\` | **no** | yes | **no** |
+| emits | \`bd-input\`, \`bd-change\` | **nothing** | \`input\` |
+
+Storybook shows one shared control panel for all three, so a knob that does
+nothing on the story you are looking at is expected — check this table.
+
+Two of those rows are gaps rather than design:
+
+- **The select emits no event and has no \`value\`.** Choosing an option changes
+  nothing observable from outside the component, so it cannot currently be read
+  without reaching into its shadow root. It needs the same \`value\` +
+  \`bd-input\`/\`bd-change\` treatment the input has.
+- **The clipboard field's event is not the input's.** It fires \`input\` — the
+  native event's own name — with the string as \`detail\` rather than
+  \`{ value, name }\`, and it is neither \`bubbles\` nor \`composed\`, so it reaches
+  a listener on the element itself and nothing further up. Renaming it to
+  \`bd-input\` would align the three, and is a breaking change.
+
+### The clipboard field pastes, it does not copy
+The button reads the system clipboard with \`navigator.clipboard.readText()\` and
+writes the result **into** the field. It is a paste affordance — the direction
+is inbound, which is the opposite of what a clipboard icon usually suggests. Its
+placeholder default (\`'Paste something...'\`) and its \`aria-label\` both say so.
+
+Two consequences worth designing around:
+
+- **It needs permission and a user gesture.** \`readText()\` is gated on the
+  browser's clipboard-read permission; Safari prompts every time, and a page
+  that is not focused rejects outright.
+- **Failure is silent.** A rejected read is written to \`console.error\` and
+  nothing changes on screen, so a user who is denied sees a button that does
+  nothing. There is no success indicator either.
+
+The paste button is 24×24px, which meets WCAG 2.5.8 (AA, 24px) exactly and
+misses 2.5.5 (AAA, 44px) at every size.
         `
       }
     }
@@ -48,7 +178,7 @@ Supports all native HTML input types: \`text\`, \`email\`, \`password\`, \`numbe
       description: 'Visible label rendered above the field',
       table      : {
         type        : { summary: 'string' },
-        defaultValue: { summary: 'Nume complet' },
+        defaultValue: { summary: "'Default Label' ('Select an option' on the select)" },
         category    : 'Input'
       }
     },
@@ -67,17 +197,17 @@ Supports all native HTML input types: \`text\`, \`email\`, \`password\`, \`numbe
       description: 'Placeholder text shown when the field is empty',
       table      : {
         type        : { summary: 'string' },
-        defaultValue: { summary: 'Introdu numele tău' },
+        defaultValue: { summary: "'Enter something...' ('Paste something...' on the clipboard field)" },
         category    : 'Input'
       }
     },
-    kind: {
+    size: {
       control    : { type: 'select' },
       options    : ['sm', 'md', 'lg'],
       description: 'Size variant — controls height, font-size, and padding',
       table      : {
         type        : { summary: "'sm' | 'md' | 'lg'" },
-        defaultValue: { summary: 'sm' },
+        defaultValue: { summary: 'md' },
         category    : 'Layout'
       }
     },
@@ -155,12 +285,34 @@ options: ['Small', 'Medium', 'Large']
     // ── InputClipboard props ─────────────────────────────────────────────────
     value: {
       control    : 'text',
-      description: 'Pre-filled value for the clipboard input',
+      description: 'The field contents. On `bd-custom-input` it is also updated as the user types — read it here or from the `bd-input` event detail.',
       table      : {
         type        : { summary: 'string' },
-        defaultValue: { summary: '' },
-        category    : 'InputClipboard'
+        defaultValue: { summary: "''" },
+        category    : 'Data'
       }
+    },
+    name: {
+      control    : 'text',
+      description: 'Carried on the `bd-input` and `bd-change` event detail. NOT submitted with a form — the input sits in a shadow root.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: "''" }, category: 'Data' }
+    },
+    inputmode: {
+      control    : { type: 'select' },
+      options    : ['', 'none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url'],
+      description: 'Picks the mobile keyboard without changing what the field means. Prefer `numeric` on a text field over `type="number"` for digit strings such as codes and postal codes.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: "''" }, category: 'Mobile' }
+    },
+    autocomplete: {
+      control    : 'text',
+      description: 'Native autocomplete token — `email`, `tel`, `one-time-code`, `current-password`, `postal-code`. Drives autofill, the single biggest saving on a phone.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: "''" }, category: 'Mobile' }
+    },
+    enterkeyhint: {
+      control    : { type: 'select' },
+      options    : ['', 'enter', 'done', 'go', 'next', 'previous', 'search', 'send'],
+      description: 'Labels the Enter key on a mobile keyboard.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: "''" }, category: 'Mobile' }
     }
   }
 };
@@ -171,7 +323,7 @@ const defaultInputArgs = {
   label      : 'Nume complet',
   type       : 'text',
   placeholder: 'Introdu numele tău',
-  kind       : 'sm',
+  size       : 'sm',
   required   : false,
   focused    : false,
   invalid    : false,
@@ -182,14 +334,14 @@ const defaultInputArgs = {
 
 const defaultDropdownArgs = {
   label  : 'Select size',
-  kind   : 'md',
+  size   : 'md',
   options: ['Small', 'Medium', 'Large'],
   tooltip: 'Choose an option'
 };
 
 const defaultClipboardArgs = {
   label      : 'Token',
-  kind       : 'sm',
+  size       : 'sm',
   placeholder: 'Paste token here',
   value      : '',
   disabled   : false,
@@ -203,7 +355,7 @@ const renderInput = (args) => html`
     label="${args.label}"
     type="${args.type}"
     placeholder="${args.placeholder}"
-    kind="${args.kind}"
+    size="${args.kind}"
     ?required="${args.required}"
     ?focused="${args.focused}"
     ?invalid="${args.invalid}"
@@ -216,7 +368,7 @@ const renderInput = (args) => html`
 const renderDropdown = (args) => html`
   <bd-custom-dropdown
     label="${args.label}"
-    kind="${args.kind}"
+    size="${args.kind}"
     options='${JSON.stringify(args.options)}'
     tooltip="${args.tooltip}"
   ></bd-custom-dropdown>
@@ -225,7 +377,7 @@ const renderDropdown = (args) => html`
 const renderClipboard = (args) => html`
   <bd-custom-input-clipboard
     label="${args.label}"
-    kind="${args.kind}"
+    size="${args.kind}"
     placeholder="${args.placeholder}"
     value="${args.value}"
     ?disabled="${args.disabled}"
@@ -327,9 +479,9 @@ export const InputSizes = {
   name  : 'Input — All Sizes',
   render: () => html`
     <div style="display: grid; gap: 1.5rem; max-width: 420px; margin: 2rem auto;">
-      <bd-custom-input label="Small (sm)" placeholder="sm variant" kind="sm"></bd-custom-input>
-      <bd-custom-input label="Medium (md)" placeholder="md variant" kind="md"></bd-custom-input>
-      <bd-custom-input label="Large (lg)" placeholder="lg variant" kind="lg"></bd-custom-input>
+      <bd-custom-input label="Small (sm)" placeholder="sm variant" size="sm"></bd-custom-input>
+      <bd-custom-input label="Medium (md)" placeholder="md variant" size="md"></bd-custom-input>
+      <bd-custom-input label="Large (lg)" placeholder="lg variant" size="lg"></bd-custom-input>
     </div>
   `,
   parameters: {
@@ -349,11 +501,11 @@ export const InputTypes = {
   name  : 'Input — All Types',
   render: () => html`
     <div style="display: grid; gap: 1.5rem; max-width: 420px; margin: 2rem auto;">
-      <bd-custom-input label="Text"     type="text"     placeholder="Plain text"        kind="sm"></bd-custom-input>
-      <bd-custom-input label="Email"    type="email"    placeholder="you@example.com"   kind="sm"></bd-custom-input>
-      <bd-custom-input label="Password" type="password" placeholder="••••••••"          kind="sm"></bd-custom-input>
-      <bd-custom-input label="Number"   type="number"   placeholder="0"                 kind="sm"></bd-custom-input>
-      <bd-custom-input label="Tel"      type="tel"      placeholder="+40 700 000 000"   kind="sm"></bd-custom-input>
+      <bd-custom-input label="Text"     type="text"     placeholder="Plain text"        size="sm"></bd-custom-input>
+      <bd-custom-input label="Email"    type="email"    placeholder="you@example.com"   size="sm"></bd-custom-input>
+      <bd-custom-input label="Password" type="password" placeholder="••••••••"          size="sm"></bd-custom-input>
+      <bd-custom-input label="Number"   type="number"   placeholder="0"                 size="sm"></bd-custom-input>
+      <bd-custom-input label="Tel"      type="tel"      placeholder="+40 700 000 000"   size="sm"></bd-custom-input>
     </div>
   `,
   parameters: {
@@ -393,7 +545,7 @@ export const DropdownLongList = {
   args: {
     ...defaultDropdownArgs,
     label  : 'Select country',
-    kind   : 'sm',
+    size   : 'sm',
     options: ['Romania', 'Germany', 'Canada', 'Japan', 'Brazil', 'France', 'Spain', 'Italy', 'United States', 'United Kingdom', 'Australia', 'Netherlands'],
     tooltip: 'Choose your country'
   },
@@ -415,9 +567,9 @@ export const DropdownSizes = {
   name  : 'Dropdown — All Sizes',
   render: () => html`
     <div style="display: grid; gap: 1.5rem; max-width: 420px; margin: 2rem auto;">
-      <bd-custom-dropdown label="Small (sm)" kind="sm" options='["Option A","Option B","Option C"]'></bd-custom-dropdown>
-      <bd-custom-dropdown label="Medium (md)" kind="md" options='["Option A","Option B","Option C"]'></bd-custom-dropdown>
-      <bd-custom-dropdown label="Large (lg)" kind="lg" options='["Option A","Option B","Option C"]'></bd-custom-dropdown>
+      <bd-custom-dropdown label="Small (sm)" size="sm" options='["Option A","Option B","Option C"]'></bd-custom-dropdown>
+      <bd-custom-dropdown label="Medium (md)" size="md" options='["Option A","Option B","Option C"]'></bd-custom-dropdown>
+      <bd-custom-dropdown label="Large (lg)" size="lg" options='["Option A","Option B","Option C"]'></bd-custom-dropdown>
     </div>
   `,
   parameters: {
@@ -443,7 +595,7 @@ export const ClipboardDefault = {
     docs: {
       description: {
         story:
-          'Base clipboard input with an empty value. Clicking the copy icon while the field is empty should be a no-op or show a subtle "nothing to copy" signal.'
+          'Base clipboard field, empty. The button pastes rather than copies: it reads the system clipboard and writes the result into the field, so clicking it while the field is empty is the normal path, not a no-op.'
       }
     }
   }
@@ -465,7 +617,7 @@ export const ClipboardWithValue = {
     docs: {
       description: {
         story:
-          'The `value` prop pre-populates the field with an API token. Clicking the clipboard icon copies the value to the OS clipboard and should toggle a brief success indicator.'
+          'The `value` prop pre-populates the field. Note the direction: clicking the button does not copy this token out, it overwrites it with whatever the system clipboard holds. There is no success indicator.'
       }
     }
   }
@@ -488,7 +640,7 @@ export const ClipboardDisabled = {
     docs: {
       description: {
         story:
-          'Both the text field and the copy button are non-interactive when `disabled` is set. The copy icon should also appear muted to communicate its unavailability.'
+          'Both the text field and the paste button are non-interactive when `disabled` is set, and the button mutes to `--color-neutral-400` to show it.'
       }
     }
   }
@@ -501,16 +653,16 @@ export const ClipboardSizes = {
   name  : 'InputClipboard — All Sizes',
   render: () => html`
     <div style="display: grid; gap: 1.5rem; max-width: 420px; margin: 2rem auto;">
-      <bd-custom-input-clipboard label="Small (sm)" kind="sm" value="token-sm-example-value"></bd-custom-input-clipboard>
-      <bd-custom-input-clipboard label="Medium (md)" kind="md" value="token-md-example-value"></bd-custom-input-clipboard>
-      <bd-custom-input-clipboard label="Large (lg)" kind="lg" value="token-lg-example-value"></bd-custom-input-clipboard>
+      <bd-custom-input-clipboard label="Small (sm)" size="sm" value="token-sm-example-value"></bd-custom-input-clipboard>
+      <bd-custom-input-clipboard label="Medium (md)" size="md" value="token-md-example-value"></bd-custom-input-clipboard>
+      <bd-custom-input-clipboard label="Large (lg)" size="lg" value="token-lg-example-value"></bd-custom-input-clipboard>
     </div>
   `,
   parameters: {
     docs: {
       description: {
         story:
-          'Size comparison for all three `kind` values of InputClipboard. Ensures the clipboard icon scales proportionally alongside the field height.'
+          'Size comparison for all three `kind` values. The field height follows `kind` (33.5 / 44 / 54.5px, the same as the input, the select and the button); the paste icon does not scale with it, staying 20px at every size.'
       }
     }
   }
@@ -530,7 +682,7 @@ export const InputsShowcase = {
       <bd-custom-input
         label="Nume complet"
         placeholder="Introdu numele tău"
-        kind="sm"
+        size="sm"
         required
         tooltip="Choose a unique username">
       </bd-custom-input>
@@ -539,7 +691,7 @@ export const InputsShowcase = {
         label="Adresă de email"
         type="email"
         placeholder="you@example.com"
-        kind="md"
+        size="sm"
         focused
         tooltip="Click to see focus state">
       </bd-custom-input>
@@ -547,7 +699,7 @@ export const InputsShowcase = {
       <bd-custom-input
         label="Email"
         type="email"
-        kind="sm"
+        size="sm"
         placeholder="Enter your email"
         required
         invalid
@@ -556,7 +708,7 @@ export const InputsShowcase = {
 
       <bd-custom-input
         label="Email"
-        kind="sm"
+        size="sm"
         placeholder="Enter email"
         tooltip="Looks good!"
         validated>
@@ -566,7 +718,7 @@ export const InputsShowcase = {
         label="Disabled Input"
         placeholder="Can't type here"
         tooltip="This field is disabled"
-        kind="sm"
+        size="sm"
         disabled>
       </bd-custom-input>
     </div>
@@ -592,14 +744,14 @@ export const DropdownsShowcase = {
 
       <bd-custom-dropdown
         label="Select size"
-        kind="md"
+        size="md"
         options='["Small", "Medium", "Large"]'
         tooltip="Choose an option">
       </bd-custom-dropdown>
 
       <bd-custom-dropdown
         label="Select country"
-        kind="sm"
+        size="sm"
         options='["Romania", "Germany", "Canada", "Japan", "Brazil"]'
         tooltip="Choose an option">
       </bd-custom-dropdown>
@@ -626,13 +778,13 @@ export const InputClipboardShowcase = {
 
       <bd-custom-input-clipboard
         label="Token"
-        kind="sm"
+        size="sm"
         placeholder="Paste token here">
       </bd-custom-input-clipboard>
 
       <bd-custom-input-clipboard
         label="API Token"
-        kind="md"
+        size="md"
         value="sk-bd-live-4f8a2c1e9b3d7f6a0e5c8b2d4f1a9e7c"
         tooltip="Click the icon to copy">
       </bd-custom-input-clipboard>
@@ -661,7 +813,7 @@ export const FormExample = {
         <bd-custom-input
           label="Full Name"
           placeholder="John Doe"
-          kind="md"
+          size="md"
           required>
         </bd-custom-input>
 
@@ -669,7 +821,7 @@ export const FormExample = {
           label="Email Address"
           type="email"
           placeholder="john@example.com"
-          kind="md"
+          size="md"
           required>
         </bd-custom-input>
 
@@ -677,27 +829,27 @@ export const FormExample = {
           label="Password"
           type="password"
           placeholder="Min. 8 characters"
-          kind="md"
+          size="md"
           required
           tooltip="Must contain uppercase, lowercase, number and symbol">
         </bd-custom-input>
 
         <bd-custom-dropdown
           label="Country"
-          kind="md"
+          size="md"
           options='["Select a country", "United States", "Canada", "United Kingdom", "Germany", "France", "Romania"]'>
         </bd-custom-dropdown>
 
         <bd-custom-input-clipboard
           label="API Token"
-          kind="md"
+          size="md"
           placeholder="Click to paste your token"
           tooltip="Copy your API token from your account settings">
         </bd-custom-input-clipboard>
 
         <div style="display: flex; gap: 1rem; margin-top: 1rem;">
-          <bd-button size="md" kind="primary" strong>Submit</bd-button>
-          <bd-button size="md" kind="outline">Cancel</bd-button>
+          <bd-button size="md" variant="primary">Submit</bd-button>
+          <bd-button size="md" variant="ghost">Cancel</bd-button>
         </div>
       </div>
     </div>
@@ -722,7 +874,7 @@ export const MobileForm = {
       <bd-custom-input
         label="Full Name"
         placeholder="John Doe"
-        kind="sm"
+        size="sm"
         required>
       </bd-custom-input>
 
@@ -731,7 +883,7 @@ export const MobileForm = {
           label="Email Address"
           type="email"
           placeholder="john@example.com"
-          kind="sm"
+          size="sm"
           required>
         </bd-custom-input>
       </div>
@@ -739,7 +891,7 @@ export const MobileForm = {
       <div style="margin-top: 1rem;">
         <bd-custom-dropdown
           label="Country"
-          kind="sm"
+          size="sm"
           options='["Select a country", "United States", "Canada", "Romania"]'>
         </bd-custom-dropdown>
       </div>
@@ -747,7 +899,7 @@ export const MobileForm = {
       <div style="margin-top: 1rem;">
         <bd-custom-input-clipboard
           label="API Token"
-          kind="sm"
+          size="sm"
           placeholder="Paste your token">
         </bd-custom-input-clipboard>
       </div>
@@ -774,21 +926,21 @@ export const CustomContent = {
       <bd-custom-input
         label="Company Registration Number"
         placeholder="e.g. J40/12345/2024"
-        kind="md"
+        size="md"
         tooltip="As it appears on your trade registry certificate"
         required>
       </bd-custom-input>
 
       <bd-custom-dropdown
         label="Subscription Plan"
-        kind="md"
+        size="md"
         options='["Starter – Free", "Professional – €9 / mo", "Enterprise – Contact us"]'
         tooltip="You can upgrade or downgrade at any time">
       </bd-custom-dropdown>
 
       <bd-custom-input-clipboard
         label="Webhook Secret"
-        kind="md"
+        size="md"
         value="whsec_live_8d2f4b6a0c3e5f7d9b1a4c6e8f2d0b4a"
         tooltip="Used to verify incoming webhook payloads">
       </bd-custom-input-clipboard>