@morscherlab/mld-sdk 0.7.2 → 0.7.3

package/dist/styles.css

@@ -59,14 +59,19 @@
 
   /* Semantic colors */
   --mld-success: #10B981;
+  --mld-success-hover: #059669;
   --mld-success-bg: rgba(16, 185, 129, 0.1);
   --mld-error: #EF4444;
+  --mld-error-hover: #DC2626;
   --mld-error-bg: rgba(239, 68, 68, 0.1);
   --mld-warning: #F59E0B;
   --mld-warning-bg: rgba(245, 158, 11, 0.1);
   --mld-info: #3B82F6;
   --mld-info-bg: rgba(59, 130, 246, 0.1);
 
+  /* Shared component tokens */
+  --mld-disabled-opacity: 0.6;
+
   /* Legacy aliases (for backwards compatibility) */
   --mld-bg-primary: var(--bg-primary);
   --mld-bg-secondary: var(--bg-secondary);
@@ -556,10 +561,10 @@ code, pre {
   background-color: var(--mld-success);
 }
 .hover\:bg-mld-success-hover:hover {
-  background-color: #059669;
+  background-color: var(--mld-success-hover);
 }
 .hover\:bg-mld-danger-hover:hover {
-  background-color: #DC2626;
+  background-color: var(--mld-error-hover);
 }
 .bg-mld-primary\/10 {
   background-color: rgba(99, 102, 241, 0.1);
@@ -1563,11 +1568,11 @@ html.dark .focus\:ring-offset-2:focus {
   border: none;
   box-sizing: border-box;
 }
-.mld-button:focus {
+.mld-button:focus-visible {
   outline: none;
   box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color-primary);
 }
-html.dark .mld-button:focus {
+html.dark .mld-button:focus-visible {
   box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--color-primary);
 }
 .mld-button--disabled {
@@ -1605,14 +1610,14 @@ html.dark .mld-button:focus {
   color: white;
 }
 .mld-button--danger:hover:not(.mld-button--disabled) {
-  background-color: #DC2626;
+  background-color: var(--mld-error-hover);
 }
 .mld-button--success {
   background-color: var(--mld-success);
   color: white;
 }
 .mld-button--success:hover:not(.mld-button--disabled) {
-  background-color: #059669;
+  background-color: var(--mld-success-hover);
 }
 .mld-button--ghost {
   background-color: transparent;
@@ -3318,7 +3323,7 @@ html.dark .mld-checkbox__native:focus-visible + .mld-checkbox__box {
   padding: 0 !important;
 }
 .mld-modal__close {
-  padding: 0.25rem;
+  padding: 0.5rem;
   border-radius: var(--mld-radius-sm);
   color: var(--text-muted);
   background: none;
@@ -4187,7 +4192,7 @@ html.dark .mld-radio-option__native:focus-visible + .mld-radio-option__circle {
   box-shadow: 0 0 0 2px var(--mld-error);
 }
 .mld-select__control--disabled {
-  opacity: 0.5;
+  opacity: var(--mld-disabled-opacity);
   cursor: not-allowed;
   background-color: var(--bg-tertiary);
 }
@@ -4326,7 +4331,7 @@ html.dark .mld-radio-option__native:focus-visible + .mld-radio-option__circle {
   gap: 12px;
 }
 .mld-slider--disabled {
-  opacity: 0.5;
+  opacity: var(--mld-disabled-opacity);
   cursor: not-allowed;
 }
 .mld-slider__container {
@@ -4341,16 +4346,13 @@ html.dark .mld-radio-option__native:focus-visible + .mld-radio-option__circle {
   left: 0;
   right: 0;
   border-radius: 9999px;
-  background-color: #E2E8F0;
-}
-html.dark .mld-slider__track {
-  background-color: #334155;
+  background-color: var(--bg-tertiary);
 }
 .mld-slider__fill {
   position: absolute;
   left: 0;
   border-radius: 9999px;
-  background-color: #3B82F6;
+  background-color: var(--color-primary);
 }
 .mld-slider__input {
   position: absolute;
@@ -4371,7 +4373,7 @@ html.dark .mld-slider__track {
   transform: translateX(-50%) translateY(-50%);
   border-radius: 9999px;
   background-color: white;
-  border: 2px solid #3B82F6;
+  border: 2px solid var(--color-primary);
   box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
   pointer-events: none;
   transition: transform 150ms ease;
@@ -4589,6 +4591,9 @@ html.dark .mld-slider__track {
 .mld-textarea::placeholder {
   color: var(--text-muted);
 }
+.mld-textarea:hover:not(:focus):not(.mld-textarea--disabled):not(.mld-textarea--error) {
+  border-color: var(--text-muted);
+}
 .mld-textarea:focus {
   outline: none;
   border-color: transparent;
@@ -4601,7 +4606,7 @@ html.dark .mld-slider__track {
   box-shadow: 0 0 0 2px var(--mld-error);
 }
 .mld-textarea--disabled {
-  opacity: 0.5;
+  opacity: var(--mld-disabled-opacity);
   cursor: not-allowed;
   background-color: var(--bg-tertiary);
 }
@@ -12048,6 +12053,135 @@ html.dark .mld-settings-modal__option-btn--active {
   padding-top: 1rem;
   border-top: 1px solid var(--color-border, #e5e7eb);
 }
+.mld-data-viewer {
+  border: 1px solid var(--mld-color-border, #e0e0e0);
+  border-radius: var(--mld-radius-md, 8px);
+  overflow: hidden;
+}
+.mld-data-viewer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--mld-color-border, #e0e0e0);
+  background: var(--mld-color-surface-1, #fafafa);
+  gap: 8px;
+}
+.mld-data-viewer__controls { display: flex; gap: 8px; }
+.mld-data-viewer__actions { display: flex; gap: 4px; align-items: center; }
+.mld-data-viewer__content {
+  padding: 12px;
+  max-height: 600px;
+  overflow-y: auto;
+}
+.mld-data-viewer__loading,
+.mld-data-viewer__empty {
+  text-align: center;
+  padding: 32px;
+  color: var(--mld-color-text-muted, #999);
+}
+/* Summary view */
+.mld-summary {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+/* Metadata pills row */
+.mld-summary__metadata {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.mld-summary__pill {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 6px;
+  overflow: hidden;
+  font-size: 0.8125rem;
+  line-height: 1;
+  border: 1px solid var(--mld-color-border, #e0e0e0);
+}
+.mld-summary__pill--sm {
+  font-size: 0.75rem;
+}
+.mld-summary__pill-key {
+  padding: 4px 8px;
+  background: var(--mld-color-surface-1, #f5f5f5);
+  color: var(--mld-color-text-muted, #666);
+  text-transform: capitalize;
+  font-weight: 500;
+}
+.mld-summary__pill-value {
+  padding: 4px 8px;
+  color: var(--mld-color-text, #1a1a1a);
+}
+/* Section */
+.mld-summary__section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.mld-summary__section-label {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: var(--mld-color-text, #1a1a1a);
+}
+.mld-summary__section-count {
+  font-size: 0.75rem;
+  color: var(--mld-color-text-muted, #999);
+  margin-left: 8px;
+}
+.mld-summary__table-header {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+/* Group cards */
+.mld-summary__group-card {
+  border: 1px solid var(--mld-color-border, #e0e0e0);
+  border-radius: var(--mld-radius-md, 8px);
+  overflow: hidden;
+}
+.mld-summary__group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  background: var(--mld-color-surface-1, #fafafa);
+  border-bottom: 1px solid var(--mld-color-border, #e0e0e0);
+}
+.mld-summary__group-label {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: var(--mld-color-text, #1a1a1a);
+}
+.mld-summary__group-count {
+  font-size: 0.75rem;
+  color: var(--mld-color-text-muted, #999);
+  background: var(--mld-color-surface-2, #eee);
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+.mld-summary__group-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--mld-color-border, #e0e0e0);
+}
+.mld-exp-code {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--mld-font-mono, ui-monospace, monospace);
+  font-weight: 600;
+  background: var(--mld-color-surface-2, #f0f0f0);
+  color: var(--mld-color-text-secondary, #666);
+  border-radius: var(--mld-radius-sm, 4px);
+  letter-spacing: 0.02em;
+}
+.mld-exp-code--sm { padding: 1px 6px; font-size: 11px; }
+.mld-exp-code--md { padding: 2px 8px; font-size: 12px; }
+.mld-exp-code--lg { padding: 3px 10px; font-size: 14px; }
 /* BaseButton Component Styles */
 .mld-button {
   display: inline-flex;
@@ -12063,11 +12197,11 @@ html.dark .mld-settings-modal__option-btn--active {
   border: none;
   box-sizing: border-box;
 }
-.mld-button:focus {
+.mld-button:focus-visible {
   outline: none;
   box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color-primary);
 }
-html.dark .mld-button:focus {
+html.dark .mld-button:focus-visible {
   box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--color-primary);
 }
 .mld-button--disabled {
@@ -12106,14 +12240,14 @@ html.dark .mld-button:focus {
   color: white;
 }
 .mld-button--danger:hover:not(.mld-button--disabled) {
-  background-color: #DC2626;
+  background-color: var(--mld-error-hover);
 }
 .mld-button--success {
   background-color: var(--mld-success);
   color: white;
 }
 .mld-button--success:hover:not(.mld-button--disabled) {
-  background-color: #059669;
+  background-color: var(--mld-success-hover);
 }
 .mld-button--ghost {
   background-color: transparent;
@@ -12214,6 +12348,9 @@ to {
 .mld-textarea::placeholder {
   color: var(--text-muted);
 }
+.mld-textarea:hover:not(:focus):not(.mld-textarea--disabled):not(.mld-textarea--error) {
+  border-color: var(--text-muted);
+}
 .mld-textarea:focus {
   outline: none;
   border-color: transparent;
@@ -12226,7 +12363,7 @@ to {
   box-shadow: 0 0 0 2px var(--mld-error);
 }
 .mld-textarea--disabled {
-  opacity: 0.5;
+  opacity: var(--mld-disabled-opacity);
   cursor: not-allowed;
   background-color: var(--bg-tertiary);
 }
@@ -12283,7 +12420,7 @@ to {
   box-shadow: 0 0 0 2px var(--mld-error);
 }
 .mld-select__control--disabled {
-  opacity: 0.5;
+  opacity: var(--mld-disabled-opacity);
   cursor: not-allowed;
   background-color: var(--bg-tertiary);
 }
@@ -12640,7 +12777,7 @@ html.dark .mld-radio-option__native:focus-visible + .mld-radio-option__circle {
   gap: 12px;
 }
 .mld-slider--disabled {
-  opacity: 0.5;
+  opacity: var(--mld-disabled-opacity);
   cursor: not-allowed;
 }
 .mld-slider__container {
@@ -12655,16 +12792,13 @@ html.dark .mld-radio-option__native:focus-visible + .mld-radio-option__circle {
   left: 0;
   right: 0;
   border-radius: 9999px;
-  background-color: #E2E8F0;
-}
-html.dark .mld-slider__track {
-  background-color: #334155;
+  background-color: var(--bg-tertiary);
 }
 .mld-slider__fill {
   position: absolute;
   left: 0;
   border-radius: 9999px;
-  background-color: #3B82F6;
+  background-color: var(--color-primary);
 }
 .mld-slider__input {
   position: absolute;
@@ -12685,7 +12819,7 @@ html.dark .mld-slider__track {
   transform: translateX(-50%) translateY(-50%);
   border-radius: 9999px;
   background-color: white;
-  border: 2px solid #3B82F6;
+  border: 2px solid var(--color-primary);
   box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
   pointer-events: none;
   transition: transform 150ms ease;
@@ -12946,7 +13080,7 @@ html.dark .mld-slider__track {
   padding: 0 !important;
 }
 .mld-modal__close {
-  padding: 0.25rem;
+  padding: 0.5rem;
   border-radius: var(--mld-radius-sm);
   color: var(--text-muted);
   background: none;
@@ -22891,6 +23025,140 @@ to { transform: rotate(360deg);
   padding-top: 1rem;
   border-top: 1px solid var(--color-border, #e5e7eb);
 }
+.mld-data-viewer {
+  border: 1px solid var(--mld-color-border, #e0e0e0);
+  border-radius: var(--mld-radius-md, 8px);
+  overflow: hidden;
+}
+.mld-data-viewer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--mld-color-border, #e0e0e0);
+  background: var(--mld-color-surface-1, #fafafa);
+  gap: 8px;
+}
+.mld-data-viewer__controls { display: flex; gap: 8px;
+}
+.mld-data-viewer__actions { display: flex; gap: 4px; align-items: center;
+}
+.mld-data-viewer__content {
+  padding: 12px;
+  max-height: 600px;
+  overflow-y: auto;
+}
+.mld-data-viewer__loading,
+.mld-data-viewer__empty {
+  text-align: center;
+  padding: 32px;
+  color: var(--mld-color-text-muted, #999);
+}
+/* Summary view */
+.mld-summary {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+/* Metadata pills row */
+.mld-summary__metadata {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.mld-summary__pill {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 6px;
+  overflow: hidden;
+  font-size: 0.8125rem;
+  line-height: 1;
+  border: 1px solid var(--mld-color-border, #e0e0e0);
+}
+.mld-summary__pill--sm {
+  font-size: 0.75rem;
+}
+.mld-summary__pill-key {
+  padding: 4px 8px;
+  background: var(--mld-color-surface-1, #f5f5f5);
+  color: var(--mld-color-text-muted, #666);
+  text-transform: capitalize;
+  font-weight: 500;
+}
+.mld-summary__pill-value {
+  padding: 4px 8px;
+  color: var(--mld-color-text, #1a1a1a);
+}
+/* Section */
+.mld-summary__section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.mld-summary__section-label {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: var(--mld-color-text, #1a1a1a);
+}
+.mld-summary__section-count {
+  font-size: 0.75rem;
+  color: var(--mld-color-text-muted, #999);
+  margin-left: 8px;
+}
+.mld-summary__table-header {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+/* Group cards */
+.mld-summary__group-card {
+  border: 1px solid var(--mld-color-border, #e0e0e0);
+  border-radius: var(--mld-radius-md, 8px);
+  overflow: hidden;
+}
+.mld-summary__group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  background: var(--mld-color-surface-1, #fafafa);
+  border-bottom: 1px solid var(--mld-color-border, #e0e0e0);
+}
+.mld-summary__group-label {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: var(--mld-color-text, #1a1a1a);
+}
+.mld-summary__group-count {
+  font-size: 0.75rem;
+  color: var(--mld-color-text-muted, #999);
+  background: var(--mld-color-surface-2, #eee);
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+.mld-summary__group-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--mld-color-border, #e0e0e0);
+}
+.mld-exp-code {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--mld-font-mono, ui-monospace, monospace);
+  font-weight: 600;
+  background: var(--mld-color-surface-2, #f0f0f0);
+  color: var(--mld-color-text-secondary, #666);
+  border-radius: var(--mld-radius-sm, 4px);
+  letter-spacing: 0.02em;
+}
+.mld-exp-code--sm { padding: 1px 6px; font-size: 11px;
+}
+.mld-exp-code--md { padding: 2px 8px; font-size: 12px;
+}
+.mld-exp-code--lg { padding: 3px 10px; font-size: 14px;
+}
 /* TimeRangeInput Component Styles */
 .mld-time-range {
   display: flex;

package/dist/types/components.d.ts

@@ -410,6 +410,29 @@ export interface ScheduleEventUpdateContext {
     newStart: Date;
     newEnd: Date;
 }
+export interface SummarySectionItem {
+    label: string;
+    metadata?: Record<string, unknown>;
+    item_count: number;
+    item_key: string;
+    columns: string[];
+    rows: Record<string, unknown>[];
+}
+export interface SummarySection {
+    key: string;
+    label: string;
+    type: 'table' | 'group';
+    /** Group sections: list of group items with embedded tables */
+    items?: SummarySectionItem[];
+    /** Table sections: flat table columns and rows */
+    columns?: string[];
+    rows?: Record<string, unknown>[];
+    row_count?: number;
+}
+export interface SummaryData {
+    metadata: Record<string, unknown>;
+    sections: SummarySection[];
+}
 export type ResourceStatus = 'available' | 'in-use' | 'maintenance' | 'offline';
 export interface ResourceSpec {
     label: string;

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export type { ContainerDirection, ButtonVariant, ButtonSize, InputType, ModalSize, AlertType, Toast, TabItem, SelectOption, RadioOption, FormFieldProps, SidebarToolSection, CollapsibleState, TopBarVariant, TopBarPage, TopBarTab, TopBarTabOption, TopBarSettingsConfig, WellPlateFormat, WellState, WellPlateSelectionMode, WellPlateSize, WellShape, Well, HeatmapColorScale, HeatmapConfig, SlotPosition, WellExtendedData, WellEditData, WellEditField, WellLegendItem, PlateCondition, ColumnCondition, RowCondition, Rack, SampleType, PlateMap, PlateMapEditorState, ProtocolStepType, ProtocolStepStatus, ProtocolStep, SampleGroup, GroupItem, FileUploaderMode, SegmentedOption, SegmentedControlVariant, SegmentedControlSize, MultiSelectOption, MultiSelectSize, PillVariant, PillSize, CalendarSelectionMode, CalendarMarker, CalendarDayContext, SortDirection, SortState, DataFrameColumn, PaginationState, SpinnerSize, SpinnerVariant, DividerSpacing, StatusType, ProgressVariant, ProgressSize, AvatarSize, EmptyStateColor, EmptyStateSize, BreadcrumbItem, TooltipPosition, ConfirmVariant, SettingsTab, NumberNotation, UnitOption, WizardStep, WizardStepState, AuditEntryType, AuditEntry, BatchItemStatus, BatchItem, BatchSummary, TimePickerFormat, TimeRange, ScheduleView, ScheduleEventStatus, ScheduleEvent, ScheduleBlockedSlot, ScheduleSlotContext, ScheduleEventCreateContext, ScheduleEventUpdateContext, ResourceStatus, ResourceSpec, MoleculeData, StorageCondition, ReagentColumn, Reagent, TreeNodeType, BadgeVariant, TreeNode, } from './components';
+export type { ContainerDirection, ButtonVariant, ButtonSize, InputType, ModalSize, AlertType, Toast, TabItem, SelectOption, RadioOption, FormFieldProps, SidebarToolSection, CollapsibleState, TopBarVariant, TopBarPage, TopBarTab, TopBarTabOption, TopBarSettingsConfig, WellPlateFormat, WellState, WellPlateSelectionMode, WellPlateSize, WellShape, Well, HeatmapColorScale, HeatmapConfig, SlotPosition, WellExtendedData, WellEditData, WellEditField, WellLegendItem, PlateCondition, ColumnCondition, RowCondition, Rack, SampleType, PlateMap, PlateMapEditorState, ProtocolStepType, ProtocolStepStatus, ProtocolStep, SampleGroup, GroupItem, FileUploaderMode, SegmentedOption, SegmentedControlVariant, SegmentedControlSize, MultiSelectOption, MultiSelectSize, PillVariant, PillSize, CalendarSelectionMode, CalendarMarker, CalendarDayContext, SortDirection, SortState, DataFrameColumn, PaginationState, SpinnerSize, SpinnerVariant, DividerSpacing, StatusType, ProgressVariant, ProgressSize, AvatarSize, EmptyStateColor, EmptyStateSize, BreadcrumbItem, TooltipPosition, ConfirmVariant, SettingsTab, NumberNotation, UnitOption, WizardStep, WizardStepState, AuditEntryType, AuditEntry, BatchItemStatus, BatchItem, BatchSummary, TimePickerFormat, TimeRange, ScheduleView, ScheduleEventStatus, ScheduleEvent, ScheduleBlockedSlot, ScheduleSlotContext, ScheduleEventCreateContext, ScheduleEventUpdateContext, SummarySectionItem, SummarySection, SummaryData, ResourceStatus, ResourceSpec, MoleculeData, StorageCondition, ReagentColumn, Reagent, TreeNodeType, BadgeVariant, TreeNode, } from './components';
 export type { FormFieldType, FieldCondition, FieldValidation, FormFieldSchema, FormSectionSchema, FormStepSchema, FormSchema, FieldEnhancement, FormEnhancements, UseFormBuilderReturn, } from './form-builder';
 export type { AuthConfig, UserInfo, LoginResponse, TokenVerifyResponse, RegisterRequest, UpdateProfileRequest, CredentialInfo, } from './auth';
 export type { PluginInfo, PluginNavItem, PluginSettings, PluginSettingField, PlatformContext, PlatformContextOptions, PlatformEventType, PlatformEvent, ThemeMode, ColorPalette, TableDensity, } from './platform';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mld-sdk",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "MLD Platform SDK - Vue 3 components, composables, and types for plugin development",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/BaseInput.vue

@@ -14,6 +14,7 @@ interface Props {
   min?: number
   max?: number
   step?: number
+  ariaDescribedby?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -52,6 +53,8 @@ function handleInput(event: Event) {
     :min="min"
     :max="max"
     :step="step"
+    :aria-invalid="error || undefined"
+    :aria-describedby="ariaDescribedby || undefined"
     :class="[
       'mld-input',
       `mld-input--${size}`,

package/src/components/BaseModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watch, onMounted, onUnmounted } from 'vue'
+import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
 import type { ModalSize } from '../types'
 
 interface Props {
@@ -23,6 +23,49 @@ const emit = defineEmits<{
   close: []
 }>()
 
+const containerRef = ref<HTMLElement | null>(null)
+let previouslyFocused: HTMLElement | null = null
+
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(', ')
+
+function getFocusableElements(): HTMLElement[] {
+  if (!containerRef.value) return []
+  return Array.from(containerRef.value.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && props.closeOnEscape && props.modelValue) {
+    close()
+    return
+  }
+
+  if (event.key !== 'Tab' || !containerRef.value) return
+
+  const focusable = getFocusableElements()
+  if (focusable.length === 0) {
+    event.preventDefault()
+    return
+  }
+
+  const first = focusable[0]
+  const last = focusable[focusable.length - 1]
+
+  if (event.shiftKey && document.activeElement === first) {
+    event.preventDefault()
+    last.focus()
+  } else if (!event.shiftKey && document.activeElement === last) {
+    event.preventDefault()
+    first.focus()
+  }
+}
+
 function close() {
   if (props.closable) {
     emit('update:modelValue', false)
@@ -36,26 +79,30 @@ function handleOverlayClick(event: MouseEvent) {
   }
 }
 
-function handleEscape(event: KeyboardEvent) {
-  if (props.closeOnEscape && event.key === 'Escape' && props.modelValue) {
-    close()
-  }
-}
-
-watch(() => props.modelValue, (isOpen) => {
+watch(() => props.modelValue, async (isOpen) => {
   if (isOpen) {
+    previouslyFocused = document.activeElement as HTMLElement | null
     document.body.style.overflow = 'hidden'
+    await nextTick()
+    const focusable = getFocusableElements()
+    if (focusable.length > 0) {
+      focusable[0].focus()
+    } else {
+      containerRef.value?.focus()
+    }
   } else {
     document.body.style.overflow = ''
+    previouslyFocused?.focus()
+    previouslyFocused = null
   }
 })
 
 onMounted(() => {
-  document.addEventListener('keydown', handleEscape)
+  document.addEventListener('keydown', handleKeydown)
 })
 
 onUnmounted(() => {
-  document.removeEventListener('keydown', handleEscape)
+  document.removeEventListener('keydown', handleKeydown)
   document.body.style.overflow = ''
 })
 </script>
@@ -73,12 +120,14 @@ onUnmounted(() => {
 
         <!-- Modal -->
         <div
+          ref="containerRef"
           :class="[
             'mld-modal__container',
             `mld-modal__container--${size}`,
           ]"
           role="dialog"
           aria-modal="true"
+          tabindex="-1"
         >
           <!-- Header -->
           <div v-if="title || closable" class="mld-modal__header">

package/src/components/BaseSelect.vue

@@ -8,6 +8,7 @@ interface Props {
   disabled?: boolean
   error?: boolean
   size?: 'sm' | 'md' | 'lg'
+  ariaDescribedby?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -34,6 +35,8 @@ function handleChange(event: Event) {
     <select
       :value="modelValue"
       :disabled="disabled"
+      :aria-invalid="error || undefined"
+      :aria-describedby="ariaDescribedby || undefined"
       :class="[
         'mld-select__control',
         `mld-select__control--${size}`,