@indielayer/ui 2.0.0 → 2.1.0

package/src/components/tab/theme/Tab.base.theme.ts

@@ -1,5 +1,24 @@
 import type { TabTheme } from '../Tab.vue'
 
+const compactSizeClasses = (size: string | undefined, iconOnly: boolean) => {
+  if (iconOnly) {
+    // Explicit h/w so width cannot collapse under flex/`w-full` conflicts.
+    if (size === 'xs') return 'h-6 w-6'
+    if (size === 'sm') return 'h-7 w-7'
+    if (size === 'lg') return 'h-10 w-10'
+    if (size === 'xl') return 'h-11 w-11'
+
+    return 'h-7 w-7'
+  }
+
+  if (size === 'xs') return 'text-xs min-h-6'
+  if (size === 'sm') return 'text-sm min-h-7'
+  if (size === 'lg') return 'text-lg min-h-10'
+  if (size === 'xl') return 'text-xl min-h-11'
+
+  return 'text-sm min-h-7'
+}
+
 const theme: TabTheme = {
   classes: {
     wrapper: ({ props, data }) => {
@@ -8,7 +27,10 @@ const theme: TabTheme = {
       if (data.variant === 'line') c.push('py-2')
       if (data.variant === 'block') c.push('py-1 px-8')
 
-      if (props.size === 'xs') c.push('text-xs')
+      if (data.variant === 'compact') {
+        if (data.showLabel) c.push('px-2.5')
+        c.push(compactSizeClasses(props.size, !data.showLabel))
+      } else if (props.size === 'xs') c.push('text-xs')
       else if (props.size === 'sm') c.push('text-sm')
       else if (props.size === 'lg') c.push('text-lg')
       else if (props.size === 'xl') c.push('text-xl')
@@ -20,7 +42,7 @@ const theme: TabTheme = {
 
     label: 'font-medium',
 
-    icon: 'mr-1.5',
+    icon: ({ data }) => (data.showLabel ? 'mr-1.5' : ''),
 
     tabpanel: 'py-2',
   },

package/src/components/tab/theme/Tab.carbon.theme.ts

@@ -1,16 +1,39 @@
 import type { TabTheme } from '../Tab.vue'
 
+const compactSizeClasses = (size: string | undefined, iconOnly: boolean) => {
+  if (iconOnly) {
+    // Explicit h/w so width cannot collapse under flex/`w-full` conflicts.
+    if (size === 'xs') return 'h-6 w-6'
+    if (size === 'sm') return 'h-7 w-7'
+    if (size === 'lg') return 'h-10 w-10'
+    if (size === 'xl') return 'h-11 w-11'
+
+    return 'h-7 w-7'
+  }
+
+  if (size === 'xs') return 'text-xs min-h-6'
+  if (size === 'sm') return 'text-sm min-h-7'
+  if (size === 'lg') return 'text-lg min-h-10'
+  if (size === 'xl') return 'text-xl min-h-11'
+
+  return 'text-sm min-h-7'
+}
+
 const theme: TabTheme = {
   classes: {
     wrapper: ({ props, data }) => {
-      const c = ['py-2 transition-colors duration-150 ease-in-out whitespace-nowrap text-left']
+      const c = ['transition-colors duration-150 ease-in-out whitespace-nowrap text-left']
 
-      if (data.variant === 'block') c.push('px-4')
-      else c.push('px-4')
+      if (data.variant === 'compact') {
+        if (data.showLabel) c.push('px-2.5')
+        c.push(compactSizeClasses(props.size, !data.showLabel))
+      } else {
+        c.push('py-2 px-4')
 
-      if (props.size === 'lg') c.push('text-lg')
-      else if (props.size === 'xl') c.push('text-xl')
-      else c.push('text-sm')
+        if (props.size === 'lg') c.push('text-lg')
+        else if (props.size === 'xl') c.push('text-xl')
+        else c.push('text-sm')
+      }
 
       return c
     },
@@ -25,7 +48,7 @@ const theme: TabTheme = {
       return c
     },
 
-    icon: 'mr-1.5',
+    icon: ({ data }) => (data.showLabel ? 'mr-1.5' : ''),
 
     tabpanel: 'py-4',
   },

package/src/components/tab/theme/TabGroup.base.theme.ts

@@ -7,9 +7,10 @@ const theme: TabGroupTheme = {
     scroller: ({ props }) => {
       const c = ['']
 
-      if (!props.fullWidth) c.push('!w-fit')
-      if (props.variant === 'block') c.push('rounded-lg')
-      if (props.variant === 'block' && !props.ghost) c.push('bg-secondary-100 dark:bg-secondary-800 p-1')
+      if (!props.fullWidth || props.variant === 'compact') c.push('!w-fit')
+      if (props.variant === 'block' || props.variant === 'compact') c.push('rounded-lg')
+      if (props.variant === 'block' && !props.ghost) c.push('bg-secondary-200/80 dark:bg-secondary-800 p-1')
+      if (props.variant === 'compact' && !props.ghost) c.push('bg-secondary-200/80 dark:bg-secondary-800 p-1')
 
       return c
     },
@@ -19,7 +20,7 @@ const theme: TabGroupTheme = {
 
       if (props.variant === 'line') c.push('border-b border-secondary-200 dark:border-secondary-700')
       if (props.variant === 'line' && !props.grow) c.push('space-x-8')
-      if (props.variant === 'block') c.push('z-[1]')
+      if (props.variant === 'block' || props.variant === 'compact') c.push('z-[1] space-x-1')
       if (props.align === 'center') c.push('justify-center')
       if (props.align === 'right') c.push('justify-end')
 
@@ -31,7 +32,9 @@ const theme: TabGroupTheme = {
 
       if (props.variant === 'line') c.push('h-[2px] -mt-[2px] bg-[color:var(--x-tab-group-text)] dark:bg-[color:var(--x-tab-group-dark-text)]')
 
-      if (props.variant === 'block') c.push('rounded-md h-full top-0 bg-[color:var(--x-tab-group-bg)] dark:bg-[color:var(--x-tab-group-dark-bg)]')
+      if (props.variant === 'block' || props.variant === 'compact') {
+        c.push('rounded-md h-full top-0 bg-[color:var(--x-tab-group-bg)] dark:bg-[color:var(--x-tab-group-dark-bg)]')
+      }
 
       return c
     },
@@ -42,11 +45,11 @@ const theme: TabGroupTheme = {
     const color = colors.getPalette(props.color)
 
     return css.variables({
-      text: color[600],
-      bg: props.ghost ? color[50] : '#fff',
+      text: color[700],
+      bg: props.ghost ? color[100] : '#fff',
       dark: {
-        text: color[400],
-        bg: props.ghost ? color[900] : secondary[700],
+        text: color[300],
+        bg: props.ghost ? secondary[700] : secondary[700],
       },
     })
   },

package/src/components/tab/theme/TabGroup.carbon.theme.ts

@@ -7,9 +7,10 @@ const theme: TabGroupTheme = {
     scroller: ({ props }) => {
       const c = ['']
 
-      if (!props.fullWidth) c.push('!w-fit')
+      if (!props.fullWidth || props.variant === 'compact') c.push('!w-fit')
       if (props.variant === 'block') c.push('')
       if (props.variant === 'block' && !props.ghost) c.push('bg-secondary-200 dark:bg-secondary-800')
+      if (props.variant === 'compact' && !props.ghost) c.push('bg-secondary-200 dark:bg-secondary-800')
 
       return c
     },
@@ -20,6 +21,7 @@ const theme: TabGroupTheme = {
       if (props.variant === 'line') c.push('border-b border-secondary-200 dark:border-secondary-700')
       if (props.variant === 'line' && !props.grow) c.push('')
       if (props.variant === 'block') c.push('z-[1] py-1.5')
+      if (props.variant === 'compact') c.push('z-[1] py-0.5')
       if (props.align === 'center') c.push('justify-center')
       if (props.align === 'right') c.push('justify-end')
 
@@ -31,7 +33,9 @@ const theme: TabGroupTheme = {
 
       if (props.variant === 'line') c.push('h-[2px] -mt-[2px] bg-[color:var(--x-tab-group-text)] dark:bg-[color:var(--x-tab-group-dark-text)]')
 
-      if (props.variant === 'block') c.push('border-t-2 border-solid border-[color:var(--x-tab-group-text)] dark:border-[color:var(--x-tab-group-dark-text)] h-full top-0 bg-secondary-100 dark:bg-secondary-700')
+      if (props.variant === 'block' || props.variant === 'compact') {
+        c.push('border-t-2 border-solid border-[color:var(--x-tab-group-text)] dark:border-[color:var(--x-tab-group-dark-text)] h-full top-0 bg-secondary-100 dark:bg-secondary-700')
+      }
 
       return c
     },

package/src/components/table/Table.vue

@@ -5,57 +5,93 @@ const tableProps = {
   headers: {
     type: Array as PropType<TableHeader[]>,
     default: () => [],
+    description: 'Column definitions (text, value, sortable, align, width, etc.).',
   },
   items: {
     type: Array,
     default: () => [],
+    description: 'Row data array. Cell values resolve from each header `value` path.',
   },
   sort: {
     type: Array as PropType<string[]>,
     default: () => [],
+    description: 'Active sort entries as `column,-1|1` (use with `v-model:sort`).',
+  },
+  sortMultiple: optionalBooleanProp('Allow sorting by multiple columns at once.'),
+  loading: {
+    type: Boolean,
+    description: 'Shows loading rows (skeletons) and a spinner overlay.',
+  },
+  loadingSkeleton: {
+    type: Boolean,
+    description: 'When set, loading rows use skeleton placeholders.',
   },
-  sortMultiple: optionalBooleanProp(),
-  loading: Boolean,
-  loadingSkeleton: Boolean,
   loadingLines: {
     type: [Number, String],
     default: 3,
+    description: 'Number of skeleton rows shown while loading.',
   },
-  error: Boolean,
-  dense: optionalBooleanProp(),
-  fixed: optionalBooleanProp(),
-  striped: optionalBooleanProp(),
-  pointer: optionalBooleanProp(),
+  error: {
+    type: Boolean,
+    description: 'Shows the error slot instead of rows.',
+  },
+  dense: optionalBooleanProp('Compact cell padding.'),
+  fixed: optionalBooleanProp('Fixed table layout for consistent column widths.'),
+  striped: optionalBooleanProp('Alternating row background colors.'),
+  pointer: optionalBooleanProp('Pointer cursor on rows (also set when `toFn` or `hrefFn` is used).'),
   scrollable: {
     type: Boolean,
     default: true,
+    description: 'Enables horizontal overflow scrolling for wide tables.',
   },
   stickyHeader: {
     type: Boolean,
     default: true,
+    description: 'Keeps the header row sticky while scrolling.',
+  },
+  expandable: optionalBooleanProp('Adds an expand control and `expanded-row` slot per row.'),
+  virtualList: optionalBooleanProp('Virtualizes rows for large datasets.'),
+  virtualListOffsetTop: {
+    type: Number,
+    description: 'Top spacer offset (px) when using virtual list.',
+  },
+  virtualListOffsetBottom: {
+    type: Number,
+    description: 'Bottom spacer offset (px) when using virtual list.',
   },
-  expandable: optionalBooleanProp(),
-  virtualList: optionalBooleanProp(),
-  virtualListOffsetTop: Number,
-  virtualListOffsetBottom: Number,
   virtualListItemHeight: {
     type: Number,
     default: 54,
+    description: 'Fixed row height (px) for virtual list measurement.',
   },
   virtualListOverscan: {
     type: Number,
     default: 10,
+    description: 'Extra rows rendered above/below the viewport when virtualized.',
+  },
+  keyProp: {
+    type: String,
+    description: 'Item property used as the stable row key (falls back to index).',
   },
-  keyProp: String,
-  selectable: optionalBooleanProp(),
-  singleSelect: optionalBooleanProp(),
+  selectable: optionalBooleanProp('Enables row selection (`v-model:selected`).'),
+  singleSelect: optionalBooleanProp('Select only one row at a time.'),
   autoClearSelected: {
     type: Boolean,
     default: true,
+    description: 'Clears selection entries that no longer exist in `items`.',
+  },
+  toFn: {
+    type: Function as PropType<(item: unknown) => string | Record<string, unknown> | undefined>,
+    description: 'Returns a Vue Router location to make each cell a link.',
+  },
+  hrefFn: {
+    type: Function as PropType<(item: unknown) => string>,
+    description: 'Returns an href to make each cell an anchor.',
+  },
+  hrefTarget: {
+    type: String as PropType<'_blank' | '_self' | '_parent' | '_top'>,
+    description: 'Target for links created by `hrefFn`.',
   },
-  toFn: Function as PropType<(item: unknown) => string | Record<string, unknown> | undefined>,
-  hrefFn: Function as PropType<(item: unknown) => string>,
-  hrefTarget: String as PropType<'_blank' | '_self' | '_parent' | '_top'>,
 }
 
 export type TableHeader = {
@@ -75,7 +111,28 @@ export type TableProps = ExtractPublicPropTypes<typeof tableProps>
 type InternalClasses = 'wrapper' | 'table' | 'loadingWrapper'
 export interface TableTheme extends ThemeComponent<TableProps, InternalClasses> {}
 
-export default { name: 'XTable' }
+export default {
+  name: 'XTable',
+  docs: {
+    slots: {
+      title: 'Optional title above the table.',
+      actions: 'Optional actions above the table.',
+      'header-[column]': 'Header cell content for a column (`header-{value}`).',
+      'item-[column]': 'Cell content for a column (`item-{value}`).',
+      'loading-[column]': 'Loading cell content for a column (`loading-{value}`).',
+      'footer-[column]': 'Footer cell content for a column (`footer-{value}`).',
+      footer: 'Custom footer (`tfoot`); overrides per-column footer slots when provided.',
+      empty: 'Content when there are no items.',
+      error: 'Content when `error` is true.',
+      'expanded-row': 'Expanded content for a row when `expandable` is set.',
+    },
+    emits: {
+      'update:sort': 'Emitted when sort changes (`v-model:sort`).',
+      'update:selected': 'Emitted when selection changes (`v-model:selected`).',
+      'click-row': 'Emitted when a row is clicked; payload is `(item, index)`.',
+    },
+  },
+}
 </script>
 
 <script setup lang="ts" generic="T">

package/src/components/table/TableCell.vue

@@ -9,18 +9,32 @@ const tableCellProps = {
   textAlign: {
     type: String as PropType<TableCellTextAlign>,
     validator: (value: string) => validators.textAlign.includes(value as any),
+    description: 'Horizontal text alignment.',
+  },
+  truncate: optionalBooleanProp('Truncates overflowing cell content with an ellipsis.'),
+  dense: optionalBooleanProp('Compact cell padding.'),
+  width: {
+    type: [String, Number],
+    description: 'Fixed cell width (number is treated as px).',
   },
-  truncate: optionalBooleanProp(),
-  dense: optionalBooleanProp(),
-  width: [String, Number],
   verticalAlign: {
     type: String as PropType<TableCellVerticalAlign>,
     default: 'middle',
     validator: (value: string) => validators.verticalAlign.includes(value as any),
+    description: 'Vertical alignment of cell content.',
+  },
+  to: {
+    type: [String, Object],
+    description: 'Vue Router location; wraps cell content in a router-link.',
+  },
+  href: {
+    type: String,
+    description: 'Anchor href; wraps cell content in a link.',
+  },
+  target: {
+    type: String as PropType<'_blank' | '_self' | '_parent' | '_top'>,
+    description: 'Link target when `href` or `to` is set.',
   },
-  to: [String, Object],
-  href: String,
-  target: String as PropType<'_blank' | '_self' | '_parent' | '_top'>,
 }
 
 export type TableCellTextAlign = typeof validators.textAlign[number]
@@ -33,6 +47,11 @@ export interface TableCellTheme extends ThemeComponent<TableCellProps, InternalC
 export default {
   name: 'XTableCell',
   validators,
+  docs: {
+    slots: {
+      default: 'Cell content.',
+    },
+  },
 }
 </script>
 

package/src/components/table/TableHead.vue

@@ -2,7 +2,7 @@
 import { optionalBooleanProp } from '../../common/props'
 
 const tableHeadProps = {
-  stickyHeader: optionalBooleanProp(),
+  stickyHeader: optionalBooleanProp('Keeps the header row sticky while the table scrolls.'),
 }
 
 export type TableHeadProps = ExtractPublicPropTypes<typeof tableHeadProps>
@@ -10,7 +10,14 @@ export type TableHeadProps = ExtractPublicPropTypes<typeof tableHeadProps>
 type InternalClasses = 'thead' | 'row'
 export interface TableHeadTheme extends ThemeComponent<TableHeadProps, InternalClasses> {}
 
-export default { name: 'XTableHead' }
+export default {
+  name: 'XTableHead',
+  docs: {
+    slots: {
+      default: 'Header cells (`x-table-header` children).',
+    },
+  },
+}
 </script>
 
 <script setup lang="ts">

package/src/components/table/TableHeader.vue

@@ -10,14 +10,19 @@ const tableHeaderProps = {
   sort: {
     type: Number as PropType<TableHeaderSort>,
     validator: (value: number) => validators.sort.includes(value as any),
+    description: 'Current sort direction: `1` ascending, `-1` descending, or unset.',
   },
-  sortable: optionalBooleanProp(),
+  sortable: optionalBooleanProp('Shows the sort icon and enables sort interaction.'),
   textAlign: {
     type: String as PropType<TableHeaderAlign>,
     default: 'left',
     validator: (value: string) => validators.textAlign.includes(value as any),
+    description: 'Horizontal alignment of the header label.',
+  },
+  tooltip: {
+    type: String,
+    description: 'Optional tooltip shown next to the header label.',
   },
-  tooltip: String,
 }
 
 export type TableHeaderSort = typeof validators.sort[number]
@@ -27,7 +32,15 @@ export type TableHeaderProps = ExtractPublicPropTypes<typeof tableHeaderProps>
 type InternalClasses = 'th' | 'sortIcon' | 'header'
 export interface TableHeaderTheme extends ThemeComponent<TableHeaderProps, InternalClasses> {}
 
-export default { name: 'XTableHeader', validators }
+export default {
+  name: 'XTableHeader',
+  validators,
+  docs: {
+    slots: {
+      default: 'Header label content.',
+    },
+  },
+}
 </script>
 
 <script setup lang="ts">

package/src/components/table/TableRow.vue

@@ -6,14 +6,18 @@ const validators = {
 }
 
 const tableRowProps = {
-  pointer: optionalBooleanProp(),
-  striped: optionalBooleanProp(),
-  selected: Boolean,
-  singleSelect: optionalBooleanProp(),
+  pointer: optionalBooleanProp('Pointer cursor on the row.'),
+  striped: optionalBooleanProp('Applies striped row styling.'),
+  selected: {
+    type: Boolean,
+    description: 'Marks the row as selected.',
+  },
+  singleSelect: optionalBooleanProp('Single-select styling for the selected row.'),
   verticalAlign: {
     type: String as PropType<'baseline' | 'bottom' | 'middle' | 'text-bottom' | 'text-top' | 'top'>,
     default: 'top',
     validator: (value: string) => validators.verticalAlign.includes(value),
+    description: 'Vertical alignment for cells in the row.',
   },
 }
 
@@ -22,7 +26,15 @@ export type TableRowProps = ExtractPublicPropTypes<typeof tableRowProps>
 type InternalClasses = 'row'
 export interface TableRowTheme extends ThemeComponent<TableRowProps, InternalClasses> {}
 
-export default { name: 'XTableRow', validators }
+export default {
+  name: 'XTableRow',
+  validators,
+  docs: {
+    slots: {
+      default: 'Row cells (`x-table-cell` children).',
+    },
+  },
+}
 </script>
 
 <script setup lang="ts">

package/src/components/tag/Tag.vue

@@ -7,13 +7,20 @@ const tagProps = {
   tag: {
     type: String,
     default: 'span',
+    description: 'Root element tag. Becomes an anchor or router-link when `href` or `to` is set.',
+  },
+  rounded: optionalBooleanProp('Fully rounded corners (pill shape).'),
+  removable: optionalBooleanProp('Shows a remove control that emits `remove`.'),
+  outlined: optionalBooleanProp('Outline style with a transparent fill.'),
+  filled: optionalBooleanProp('Filled style using the theme color.'),
+  disabled: {
+    type: Boolean,
+    description: 'Disables the remove control and applies disabled styling.',
+  },
+  to: {
+    type: [String, Object],
+    description: 'Vue Router location; renders as a link when set.',
   },
-  rounded: optionalBooleanProp(),
-  removable: optionalBooleanProp(),
-  outlined: optionalBooleanProp(),
-  filled: optionalBooleanProp(),
-  disabled: Boolean,
-  to: [String, Object],
 }
 
 export type TagProps = ExtractPublicPropTypes<typeof tagProps>
@@ -26,6 +33,15 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {
+    slots: {
+      default: 'Tag label and content.',
+      prefix: 'Content shown before the label.',
+    },
+    emits: {
+      remove: 'Emitted when the remove icon is clicked.',
+    },
+  },
 }
 </script>
 

package/src/components/textarea/Textarea.vue

@@ -8,22 +8,39 @@ const textareaProps = {
   dir: {
     type: String,
     default: 'ltr',
+    description: 'Text direction for the textarea (`ltr` or `rtl`).',
   },
   rows: {
     type: [Number, String],
     default: 2,
+    description: 'Visible number of text lines.',
   },
-  max: [Number, String],
-  maxlength: [Number, String],
-  min: [Number, String],
-  minlength: [Number, String],
-  placeholder: String,
-  adjustToText: optionalBooleanProp(),
-  preventEnter: optionalBooleanProp(),
-  block: optionalBooleanProp(),
-  resizable: optionalBooleanProp(),
-  showCounter: optionalBooleanProp(),
-  clearable: optionalBooleanProp(),
+  max: {
+    type: [Number, String],
+    description: 'Native `max` attribute when applicable.',
+  },
+  maxlength: {
+    type: [Number, String],
+    description: 'Maximum character length for the value.',
+  },
+  min: {
+    type: [Number, String],
+    description: 'Native `min` attribute when applicable.',
+  },
+  minlength: {
+    type: [Number, String],
+    description: 'Minimum character length for the value.',
+  },
+  placeholder: {
+    type: String,
+    description: 'Placeholder text shown when the value is empty.',
+  },
+  adjustToText: optionalBooleanProp('Auto-grows the height to fit the content.'),
+  preventEnter: optionalBooleanProp('Prevents the Enter key from inserting a newline.'),
+  block: optionalBooleanProp('Stretches to the full width of the parent.'),
+  resizable: optionalBooleanProp('Allows the user to resize the textarea.'),
+  showCounter: optionalBooleanProp('Shows a character counter in the footer.'),
+  clearable: optionalBooleanProp('Shows a clear button when the value is not empty.'),
 }
 
 export type TextareaProps = ExtractPublicPropTypes<typeof textareaProps>
@@ -38,6 +55,18 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {
+    slots: {
+      prefix: 'Content before the textarea (left adornment).',
+      suffix: 'Content after the textarea (right adornment).',
+    },
+    emits: {
+      ...useInputtable.emitDocs(),
+    },
+    methods: {
+      ...useInputtable.methodDocs(),
+    },
+  },
 }
 </script>
 

package/src/components/themeProvider/ThemeProvider.vue

@@ -1,18 +1,33 @@
 <script lang="ts">
-export default { name: 'XThemeProvider' }
+import type { PropType } from 'vue'
+import type { UITheme } from '../../theme'
+
+const themeProviderProps = {
+  theme: {
+    type: Object as PropType<UITheme>,
+    description: 'Theme object provided to descendant components.',
+  },
+}
+
+export default {
+  name: 'XThemeProvider',
+  docs: {
+    slots: {
+      default: 'Content that receives the provided theme.',
+    },
+  },
+}
 </script>
 
 <script setup lang="ts">
-import { watchEffect, ref, inject, provide, type PropType, unref } from 'vue'
+import { watchEffect, ref, inject, provide, unref } from 'vue'
 import { injectThemeKey } from '../../composables/keys'
-import { injectThemeStyles, type UITheme } from '../../theme'
+import { injectThemeStyles } from '../../theme'
 
-const props = defineProps({
-  theme: Object as PropType<UITheme>,
-})
+const props = defineProps(themeProviderProps)
 
 const initialTheme = inject(injectThemeKey, {})
-const theme = ref<UITheme>(props.theme || unref(initialTheme) || {})
+const theme = ref(props.theme || unref(initialTheme) || {})
 
 provide(injectThemeKey, theme)
 

package/src/components/toggle/Toggle.vue

@@ -6,7 +6,7 @@ const toggleProps = {
   ...useColors.props('primary'),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  glow: optionalBooleanProp(),
+  glow: optionalBooleanProp('Soft colored glow when the toggle is on.'),
 }
 
 export type ToggleProps = ExtractPublicPropTypes<typeof toggleProps>
@@ -19,6 +19,14 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {
+    emits: {
+      ...useInputtable.emitDocs(false),
+    },
+    methods: {
+      ...useInputtable.methodDocs(),
+    },
+  },
 }
 </script>