feat(Table): add caption prop

src/runtime/components/Table.vue

@@ -41,6 +41,7 @@ export interface TableData {
 export interface TableProps<T> {
   data?: T[]
   columns?: TableColumn<T>[]
+  caption?: string
   /**
    * Whether the table should have a sticky header.
    * @defaultValue false
@@ -95,6 +96,7 @@ type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, un
 export type TableSlots<T> = {
   expanded: (props: { row: Row<T> }) => any
   empty: (props?: {}) => any
+  caption: (props?: {}) => any
 } & DynamicHeaderSlots<T> & DynamicCellSlots<T>
 
 </script>
@@ -191,6 +193,12 @@ defineExpose({
 <template>
   <div :class="ui.root({ class: [props.class, props.ui?.root] })">
     <table :class="ui.base({ class: [props.ui?.base] })">
+      <caption v-if="caption" :class="ui.caption({ class: [props.ui?.caption] })">
+        <slot name="caption">
+          {{ caption }}
+        </slot>
+      </caption>
+
       <thead :class="ui.thead({ class: [props.ui?.thead] })">
         <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" :class="ui.tr({ class: [props.ui?.tr] })">
           <th

src/theme/table.ts

@@ -4,6 +4,7 @@ export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'relative overflow-auto',
     base: 'min-w-full overflow-clip',
+    caption: 'sr-only',
     thead: 'relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)]',
     tbody: 'divide-y divide-[var(--ui-border)]',
     tr: 'data-[selected=true]:bg-[var(--ui-bg-elevated)]/50',