@dsh-workbench/shared 0.2.11 → 0.2.13

package/dist/components/ChoiceGroup.css

@@ -3,10 +3,13 @@
   display: flex;
   flex-direction: column;
   gap: var(--wb-len-2);
+  background: transparent;
+}
+
+.wb-choiceMenu[data-variant='boxed'] {
   padding: var(--wb-len-4);
   border: 0.5px solid var(--dsw-alias-border-l3);
   border-radius: var(--dsw-radius-md);
-  background: transparent;
 }
 
 .wb-choiceOption {
@@ -14,8 +17,8 @@
   display: flex;
   align-items: center;
   gap: var(--wb-len-6);
-  min-height: var(--wb-len-30);
-  padding: var(--wb-len-6) var(--wb-len-8);
+  min-height: var(--wb-len-28);
+  padding: var(--wb-len-4) var(--wb-len-8);
   border-radius: var(--dsw-radius-md);
   cursor: pointer;
   font-size: var(--dsw-font-xs-13-font-size);
@@ -87,12 +90,59 @@
 
 .wb-choiceLabel {
   flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.wb-choiceLabelText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wb-choiceLabel:has(.wb-choiceDescription) .wb-choiceLabelText {
+  overflow: visible;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.wb-choiceDescription {
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
+  color: var(--dsw-alias-label-tertiary);
+  overflow-wrap: anywhere;
+}
+
+.wb-choiceLoading {
+  display: flex;
+  align-items: center;
+  gap: var(--wb-len-6);
+  min-height: var(--wb-len-28);
+  padding: var(--wb-len-4) var(--wb-len-8);
+  font-size: var(--dsw-font-xs-13-font-size);
+  line-height: var(--wb-line-20);
+  color: var(--dsw-alias-label-secondary);
+}
+
+.wb-choiceLoadingText {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.wb-choiceEmpty {
+  display: flex;
+  align-items: center;
+  min-height: var(--wb-len-28);
+  padding: var(--wb-len-4) var(--wb-len-8);
+  font-size: var(--dsw-font-xs-13-font-size);
+  line-height: var(--wb-line-20);
+  color: var(--dsw-alias-label-tertiary);
+}
+
 .wb-radio {
   appearance: none;
   -webkit-appearance: none;

package/dist/components/ChoiceGroup.d.ts

@@ -3,12 +3,17 @@ import './ChoiceGroup.css';
 export interface ChoiceGroupOption {
     readonly value: string;
     readonly label: ReactNode;
+    readonly description?: ReactNode | undefined;
 }
 interface ChoiceGroupCommon {
     readonly label: string;
     readonly name: string;
     readonly options: readonly ChoiceGroupOption[];
     readonly disabled?: boolean | undefined;
+    readonly variant?: 'boxed' | 'ghost' | undefined;
+    readonly loading?: boolean | undefined;
+    readonly loadingText?: ReactNode | undefined;
+    readonly emptyText?: ReactNode | undefined;
 }
 export interface ChoiceGroupSingleProps extends ChoiceGroupCommon {
     readonly multi?: false | undefined;

package/dist/components/ChoiceGroup.js

@@ -1,15 +1,21 @@
 import { Fragment, h } from '../lib/react.js';
 import { IconCheckOutlineRegular } from '@deepseek-ai/dsh-client-ui-primitives';
+import { Spinner } from './Spinner.js';
 import './ChoiceGroup.css';
 function ChoiceMenu(input) {
-    return (h("div", { className: "wb-choiceMenu", role: input.multi ? 'group' : 'radiogroup', "aria-label": input.label }, input.options.map((option) => {
+    const body = input.loading ? (h("span", { className: "wb-choiceLoading", role: "status" },
+        h(Spinner, { size: 14 }),
+        h("span", { className: "wb-choiceLoadingText" }, input.loadingText ?? '…'))) : input.options.length === 0 ? (input.emptyText === undefined ? null : (h("span", { className: "wb-choiceEmpty" }, input.emptyText))) : (input.options.map((option) => {
         const row = input.rowOf(option.value);
         return (h(Fragment, { key: option.value },
             h("label", { className: `wb-choiceOption${row.checked ? ' wb-choiceOptionOn' : ''}` },
                 h("input", { className: input.multi ? 'wb-checkbox' : 'wb-radio', type: input.multi ? 'checkbox' : 'radio', name: input.name, checked: row.checked, disabled: input.disabled, onChange: row.onSelect }),
                 input.multi ? (h("span", { className: "wb-checkboxBox", "aria-hidden": "true" }, row.checked ? h(IconCheckOutlineRegular, { size: 12 }) : null)) : null,
-                h("span", { className: "wb-choiceLabel" }, option.label))));
-    })));
+                h("span", { className: "wb-choiceLabel" },
+                    h("span", { className: "wb-choiceLabelText" }, option.label),
+                    option.description === undefined ? null : (h("span", { className: "wb-choiceDescription" }, option.description))))));
+    }));
+    return (h("div", { className: "wb-choiceMenu", "data-variant": input.variant, role: input.multi ? 'group' : 'radiogroup', "aria-label": input.label, "aria-busy": input.loading ? true : undefined }, body));
 }
 export function ChoiceGroup(props) {
     const common = {
@@ -17,11 +23,15 @@ export function ChoiceGroup(props) {
         name: props.name,
         options: props.options,
         disabled: props.disabled === true,
+        variant: props.variant ?? 'boxed',
+        loading: props.loading === true,
+        loadingText: props.loadingText,
+        emptyText: props.emptyText,
     };
     if (props.multi === true) {
         const values = props.values;
         const onChange = props.onChange;
-        return (h(ChoiceMenu, { label: common.label, name: common.name, options: common.options, disabled: common.disabled, multi: true, rowOf: (value) => ({
+        return (h(ChoiceMenu, { label: common.label, name: common.name, options: common.options, disabled: common.disabled, multi: true, variant: common.variant, loading: common.loading, loadingText: common.loadingText, emptyText: common.emptyText, rowOf: (value) => ({
                 checked: values.includes(value),
                 onSelect: () => {
                     onChange(values.includes(value)
@@ -32,7 +42,7 @@ export function ChoiceGroup(props) {
     }
     const value = props.value;
     const onChange = props.onChange;
-    return (h(ChoiceMenu, { label: common.label, name: common.name, options: common.options, disabled: common.disabled, multi: false, rowOf: (option) => ({
+    return (h(ChoiceMenu, { label: common.label, name: common.name, options: common.options, disabled: common.disabled, multi: false, variant: common.variant, loading: common.loading, loadingText: common.loadingText, emptyText: common.emptyText, rowOf: (option) => ({
             checked: option === value,
             onSelect: () => {
                 onChange(option);

package/dist/components/FormRows.css

@@ -0,0 +1,53 @@
+.wb-formRows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wb-len-12);
+}
+
+.wb-formRow {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  align-items: center;
+  gap: var(--wb-len-8);
+}
+
+.wb-formRow[data-layout='stacked'] {
+  grid-template-columns: minmax(0, 1fr);
+  align-items: stretch;
+  gap: var(--wb-len-6);
+}
+
+.wb-formLabel {
+  min-width: 0;
+  font-size: var(--dsw-font-xs-13-font-size);
+  color: var(--dsw-alias-label-secondary);
+  overflow-wrap: anywhere;
+}
+
+.wb-formControl {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.wb-formHint {
+  grid-column: 2;
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.wb-formProblem {
+  grid-column: 2;
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.wb-formRow:has(.wb-formProblem) .wb-formLabel {
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.wb-formRow:has(:disabled) .wb-formLabel {
+  opacity: 0.4;
+}

package/dist/components/FormRows.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from '../lib/react.js';
+import './FormRows.css';
+export interface FormRowsProps {
+    readonly children?: ReactNode | undefined;
+}
+export declare function FormRows({ children }: FormRowsProps): JSX.Element;
+export interface FormRowProps {
+    readonly label: ReactNode;
+    readonly hint?: ReactNode | undefined;
+    readonly problem?: ReactNode | undefined;
+    readonly layout?: 'inline' | 'stacked' | undefined;
+    readonly children?: ReactNode | undefined;
+}
+export declare function FormRow({ label, hint, problem, layout, children }: FormRowProps): JSX.Element;

package/dist/components/FormRows.js

@@ -0,0 +1,11 @@
+import { h } from '../lib/react.js';
+import './FormRows.css';
+export function FormRows({ children }) {
+    return h("div", { className: "wb-formRows" }, children);
+}
+export function FormRow({ label, hint, problem, layout = 'inline', children }) {
+    return (h("label", { className: "wb-formRow", "data-layout": layout, "data-wb-problem": problem === undefined ? undefined : '' },
+        h("span", { className: "wb-formLabel" }, label),
+        h("span", { className: "wb-formControl" }, children),
+        problem === undefined ? (hint === undefined ? null : (h("span", { className: "wb-formHint" }, hint))) : (h("span", { className: "wb-formProblem" }, problem))));
+}

package/dist/components/MockStrip.css

@@ -42,4 +42,8 @@
   border-color: transparent;
   background: var(--dsw-alias-brand-primary);
   color: var(--dsw-alias-label-primary-foreground);
-}
+}
+
+.wb-panelBody.wb-panelMany .wb-mockStrip {
+  display: none;
+}

package/dist/components/SelectField.css

@@ -4,8 +4,8 @@
   align-items: center;
   gap: var(--wb-len-8);
   width: 100%;
-  min-height: var(--wb-len-32);
-  padding: var(--wb-len-6) var(--wb-len-12);
+  min-height: var(--wb-len-28);
+  padding: var(--wb-len-4) var(--wb-len-10);
   border: 0.5px solid var(--dsw-alias-border-l4);
   border-radius: var(--dsw-radius-md);
   background: var(--dsw-alias-bg-layer-3);
@@ -21,6 +21,14 @@
   box-shadow: inset 0 0 0 0.5px var(--dsw-alias-state-business-primary);
 }
 
+.wb-selectTrigger[aria-invalid='true'] {
+  border-color: var(--dsw-alias-state-error-primary);
+}
+
+.wb-selectTrigger[aria-invalid='true']:focus-visible {
+  box-shadow: inset 0 0 0 0.5px var(--dsw-alias-state-error-primary);
+}
+
 .wb-selectTrigger:disabled {
   cursor: not-allowed;
   opacity: 0.4;
@@ -100,8 +108,8 @@
   align-items: center;
   gap: var(--wb-len-8);
   width: 100%;
-  min-height: var(--wb-len-32);
-  padding: var(--wb-len-6) var(--wb-len-12);
+  min-height: var(--wb-len-28);
+  padding: var(--wb-len-4) var(--wb-len-10);
   border: 0.5px solid var(--dsw-alias-border-l4);
   border-radius: var(--dsw-radius-md);
   background: var(--dsw-alias-bg-layer-3);

package/dist/components/SelectField.d.ts

@@ -34,6 +34,7 @@ export interface SelectFieldProps {
     readonly open?: boolean | undefined;
     readonly onOpenChange?: ((open: boolean) => void) | undefined;
     readonly disabled?: boolean | undefined;
+    readonly invalid?: boolean | undefined;
     readonly loading?: boolean | undefined;
     readonly loadingText?: string | undefined;
     readonly fallback?: SelectFieldFallback | undefined;

package/dist/components/SelectField.js

@@ -1,7 +1,8 @@
 import { h, useEffect, useMemo, useRef, useState } from '../lib/react.js';
-import { IconChevronDownOutlineRegular, IconSearchOutlineRegular, Menu, StateDot, TextShimmer, } from '@deepseek-ai/dsh-client-ui-primitives';
+import { IconChevronDownOutlineRegular, IconSearchOutlineRegular, Menu, TextShimmer, } from '@deepseek-ai/dsh-client-ui-primitives';
 import { Field } from './Field.js';
 import { TextField } from './TextField.js';
+import { Spinner } from './Spinner.js';
 import './SelectField.css';
 const FOOTER_ID = '__wb-select-footer__';
 const EMPTY_ID = '__wb-select-empty__';
@@ -17,18 +18,18 @@ function itemOf(option) {
     };
 }
 function triggerNode(args) {
-    return (h("button", { type: "button", id: args.id, className: args.className, disabled: args.disabled, "aria-haspopup": "listbox", "aria-expanded": args.open, "aria-label": args.ariaLabel, title: args.title, onClick: args.onOpen },
+    return (h("button", { type: "button", id: args.id, className: args.className, disabled: args.disabled, "aria-haspopup": "listbox", "aria-expanded": args.open, "aria-invalid": args.invalid || undefined, "aria-label": args.ariaLabel, title: args.title, onClick: args.onOpen },
         args.icon === undefined ? null : h("span", { className: "wb-selectIcon" }, args.icon),
         h("span", { className: "wb-selectValue" }, args.value),
         h("span", { className: "wb-selectChevron" },
             h(IconChevronDownOutlineRegular, { size: 14 }))));
 }
 function loadingNode(args) {
-    return (h("button", { type: "button", id: args.id, className: `${args.className} wb-selectLoading`, disabled: true, "aria-busy": "true", "aria-label": args.ariaLabel, title: args.loadingText },
+    return (h("button", { type: "button", id: args.id, className: `${args.className} wb-selectLoading`, disabled: true, "aria-busy": "true", "aria-invalid": args.invalid || undefined, "aria-label": args.ariaLabel, title: args.loadingText },
         h("span", { className: "wb-selectValue" },
             h(TextShimmer, { active: true }, args.loadingText ?? '…')),
         h("span", { className: "wb-selectChevron" },
-            h(StateDot, { state: "ongoing", size: 14 }))));
+            h(Spinner, { size: 14 }))));
 }
 function searchNode(args) {
     return (h("span", { ref: args.boxRef, className: args.className },
@@ -154,21 +155,22 @@ function useSelectState(props) {
     };
 }
 export function SelectField(props) {
-    const { value, options, onChange, label, hint, icon, renderValue, placeholder, search = true, searchLabel, searchPlaceholder, footer, onFooter, disabled = false, loading = false, loadingText, fallback, selection = 'fill', variant = 'boxed', ariaLabel, title, id, name, className, menuClassName, } = props;
+    const { value, options, onChange, label, hint, icon, renderValue, placeholder, search = true, searchLabel, searchPlaceholder, footer, onFooter, disabled = false, invalid = false, loading = false, loadingText, fallback, selection = 'fill', variant = 'boxed', ariaLabel, title, id, name, className, menuClassName, } = props;
     const state = useSelectState(props);
     const current = options.find((option) => option.value === value);
     const variantClass = variant === 'ghost' ? 'wb-selectGhost' : undefined;
     const triggerClass = mergeClass('wb-selectTrigger', variantClass);
     if (loading) {
-        return framed(label, hint, className, loadingNode({ id, className: triggerClass, ariaLabel, loadingText }));
+        return framed(label, hint, className, loadingNode({ id, className: triggerClass, invalid, ariaLabel, loadingText }));
     }
     if (fallback !== undefined && options.length === 0) {
-        return framed(label, hint, className, h(TextField, { id: id, name: name, className: "wb-selectFallback", "aria-label": ariaLabel, value: fallback.value, onChange: (event) => fallback.onChange(event.currentTarget.value) }));
+        return framed(label, hint, className, h(TextField, { id: id, name: name, className: "wb-selectFallback", invalid: invalid, "aria-label": ariaLabel, value: fallback.value, onChange: (event) => fallback.onChange(event.currentTarget.value) }));
     }
     const trigger = triggerNode({
         id,
         className: triggerClass,
         disabled,
+        invalid,
         open: state.open,
         ariaLabel,
         title,

package/dist/components/Spinner.css

@@ -0,0 +1,6 @@
+
+.wb-spinner {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+}

package/dist/components/Spinner.d.ts

@@ -0,0 +1,6 @@
+import './Spinner.css';
+export interface SpinnerProps {
+    readonly size?: number;
+    readonly label?: string | undefined;
+}
+export declare function Spinner({ size, label }: SpinnerProps): JSX.Element;

package/dist/components/Spinner.js

@@ -0,0 +1,7 @@
+import { StateDot } from '@deepseek-ai/dsh-client-ui-primitives';
+import { h } from '../lib/react.js';
+import './Spinner.css';
+export function Spinner({ size = 14, label }) {
+    return (h("span", { className: "wb-spinner", ...(label === undefined ? { 'aria-hidden': true } : { role: 'status', 'aria-label': label }) },
+        h(StateDot, { state: "ongoing", size: size })));
+}

package/dist/components/TextField.css

@@ -27,6 +27,6 @@
 }
 
 :where(.wb-textField) {
-  min-height: var(--wb-len-32);
-  padding: var(--wb-len-6) var(--wb-len-12);
+  min-height: var(--wb-len-28);
+  padding: var(--wb-len-4) var(--wb-len-10);
 }

package/dist/host.d.ts

@@ -8,17 +8,17 @@ export * from './lib/text.js';
 export * from './lib/ui.js';
 export * from './lib/panel-state.js';
 export * from './api/blocker-table.js';
+export * from './host/browser-find.js';
+export * from './host/browser-read.js';
 export * from './host/cli-error.js';
 export * from './host/data-root.js';
-export * from './host/browser-read.js';
-export * from './host/browser-find.js';
 export * from './host/facts.js';
 export * from './host/git.js';
 export * from './host/http.js';
 export * from './host/long-task.js';
 export * from './host/opencli-runtime.js';
-export * from './host/opencli.js';
 export * from './host/opencli-window.js';
+export * from './host/opencli.js';
 export * from './host/plugin-ledger.js';
 export * from './host/plugin-source.js';
 export * from './host/provision.js';

package/dist/host.js

@@ -8,17 +8,17 @@ export * from './lib/text.js';
 export * from './lib/ui.js';
 export * from './lib/panel-state.js';
 export * from './api/blocker-table.js';
+export * from './host/browser-find.js';
+export * from './host/browser-read.js';
 export * from './host/cli-error.js';
 export * from './host/data-root.js';
-export * from './host/browser-read.js';
-export * from './host/browser-find.js';
 export * from './host/facts.js';
 export * from './host/git.js';
 export * from './host/http.js';
 export * from './host/long-task.js';
 export * from './host/opencli-runtime.js';
-export * from './host/opencli.js';
 export * from './host/opencli-window.js';
+export * from './host/opencli.js';
 export * from './host/plugin-ledger.js';
 export * from './host/plugin-source.js';
 export * from './host/provision.js';

package/dist/index.d.ts

@@ -7,8 +7,8 @@ export * from './api/facts.js';
 export * from './api/host-write.js';
 export * from './api/long-task.js';
 export * from './api/unit-board.js';
-export * from './api/unit.js';
 export * from './api/unit-declaration.js';
+export * from './api/unit.js';
 export * from './api/workbench-client.js';
 export * from './api/workbench-contract.js';
 export * from './components/Activity.js';
@@ -19,19 +19,20 @@ export * from './components/CardAnchor.js';
 export * from './components/CardBoundary.js';
 export * from './components/CardHead.js';
 export * from './components/ChoiceGroup.js';
+export * from './components/Field.js';
+export * from './components/FormRows.js';
+export * from './components/Link.js';
 export * from './components/LongTaskRow.js';
-export * from './components/MockStrip.js';
 export * from './components/Note.js';
 export * from './components/ResourceStates.js';
 export * from './components/Rows.js';
 export * from './components/SaveBar.js';
-export * from './components/SettingsSection.js';
 export * from './components/SelectField.js';
+export * from './components/SettingsSection.js';
+export * from './components/Spinner.js';
 export * from './components/Stack.js';
 export * from './components/StateBlock.js';
 export * from './components/TextField.js';
-export * from './components/Field.js';
-export * from './components/Link.js';
 export * from './components/board-module.js';
 export * from './components/icons.js';
 export * from './config/constants.js';
@@ -42,6 +43,7 @@ export * from './i18n/merge.js';
 export * from './i18n/zh.js';
 export * from './lib/blocker-action.js';
 export * from './lib/busy.js';
+export * from './lib/form-problem.js';
 export * from './lib/panel-state.js';
 export * from './lib/react.js';
 export * from './lib/text.js';

package/dist/index.js

@@ -7,8 +7,8 @@ export * from './api/facts.js';
 export * from './api/host-write.js';
 export * from './api/long-task.js';
 export * from './api/unit-board.js';
-export * from './api/unit.js';
 export * from './api/unit-declaration.js';
+export * from './api/unit.js';
 export * from './api/workbench-client.js';
 export * from './api/workbench-contract.js';
 export * from './components/Activity.js';
@@ -19,19 +19,20 @@ export * from './components/CardAnchor.js';
 export * from './components/CardBoundary.js';
 export * from './components/CardHead.js';
 export * from './components/ChoiceGroup.js';
+export * from './components/Field.js';
+export * from './components/FormRows.js';
+export * from './components/Link.js';
 export * from './components/LongTaskRow.js';
-export * from './components/MockStrip.js';
 export * from './components/Note.js';
 export * from './components/ResourceStates.js';
 export * from './components/Rows.js';
 export * from './components/SaveBar.js';
-export * from './components/SettingsSection.js';
 export * from './components/SelectField.js';
+export * from './components/SettingsSection.js';
+export * from './components/Spinner.js';
 export * from './components/Stack.js';
 export * from './components/StateBlock.js';
 export * from './components/TextField.js';
-export * from './components/Field.js';
-export * from './components/Link.js';
 export * from './components/board-module.js';
 export * from './components/icons.js';
 export * from './config/constants.js';
@@ -42,6 +43,7 @@ export * from './i18n/merge.js';
 export * from './i18n/zh.js';
 export * from './lib/blocker-action.js';
 export * from './lib/busy.js';
+export * from './lib/form-problem.js';
 export * from './lib/panel-state.js';
 export * from './lib/react.js';
 export * from './lib/text.js';

package/dist/lib/form-problem.d.ts

@@ -0,0 +1,2 @@
+export declare function firstProblemOf(root: ParentNode): Element | null;
+export declare function revealFirstProblem(root: ParentNode): boolean;

package/dist/lib/form-problem.js

@@ -0,0 +1,20 @@
+const PROBLEM_SELECTOR = '[data-wb-problem]';
+const FOCUSABLE_SELECTOR = [
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'button:not([disabled])',
+    'a[href]',
+    '[tabindex]:not([tabindex="-1"])',
+].join(', ');
+export function firstProblemOf(root) {
+    return root.querySelector(PROBLEM_SELECTOR);
+}
+export function revealFirstProblem(root) {
+    const problem = firstProblemOf(root);
+    if (problem === null)
+        return false;
+    problem.scrollIntoView?.({ block: 'nearest' });
+    problem.querySelector(FOCUSABLE_SELECTOR)?.focus?.();
+    return true;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dsh-workbench/shared",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "description": "工作台与模块共享的纯代码与契约类型：类型、纯逻辑、哑组件、平台解析。宿主侧的东西从 /host 进（不影响浏览器产物）。",
   "license": "MIT",
   "type": "module",
@@ -43,6 +43,7 @@
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "coverage": "vitest run --coverage",
+    "barrels": "node scripts/barrels.mjs",
     "selfcheck": "node scripts/check-state.mjs",
     "arch:report": "arch-guard --report-only",
     "arch": "arch-guard"

package/src/components/ChoiceGroup.css

@@ -3,10 +3,13 @@
   display: flex;
   flex-direction: column;
   gap: var(--wb-len-2);
+  background: transparent;
+}
+
+.wb-choiceMenu[data-variant='boxed'] {
   padding: var(--wb-len-4);
   border: 0.5px solid var(--dsw-alias-border-l3);
   border-radius: var(--dsw-radius-md);
-  background: transparent;
 }
 
 .wb-choiceOption {
@@ -14,8 +17,8 @@
   display: flex;
   align-items: center;
   gap: var(--wb-len-6);
-  min-height: var(--wb-len-30);
-  padding: var(--wb-len-6) var(--wb-len-8);
+  min-height: var(--wb-len-28);
+  padding: var(--wb-len-4) var(--wb-len-8);
   border-radius: var(--dsw-radius-md);
   cursor: pointer;
   font-size: var(--dsw-font-xs-13-font-size);
@@ -87,12 +90,59 @@
 
 .wb-choiceLabel {
   flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.wb-choiceLabelText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wb-choiceLabel:has(.wb-choiceDescription) .wb-choiceLabelText {
+  overflow: visible;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.wb-choiceDescription {
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
+  color: var(--dsw-alias-label-tertiary);
+  overflow-wrap: anywhere;
+}
+
+.wb-choiceLoading {
+  display: flex;
+  align-items: center;
+  gap: var(--wb-len-6);
+  min-height: var(--wb-len-28);
+  padding: var(--wb-len-4) var(--wb-len-8);
+  font-size: var(--dsw-font-xs-13-font-size);
+  line-height: var(--wb-line-20);
+  color: var(--dsw-alias-label-secondary);
+}
+
+.wb-choiceLoadingText {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.wb-choiceEmpty {
+  display: flex;
+  align-items: center;
+  min-height: var(--wb-len-28);
+  padding: var(--wb-len-4) var(--wb-len-8);
+  font-size: var(--dsw-font-xs-13-font-size);
+  line-height: var(--wb-line-20);
+  color: var(--dsw-alias-label-tertiary);
+}
+
 .wb-radio {
   appearance: none;
   -webkit-appearance: none;