@rotki/ui-library 3.0.0-beta.5 → 3.1.0

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["import type { App } from 'vue';\nimport type { InitThemeOptions } from '@/types/theme';\nimport { createFieldDefaults, type FieldOptions, FieldSymbol } from '@/composables/defaults/field';\nimport { type LogoOptions, LogoSymbol } from '@/composables/defaults/logo';\nimport {\n  createTableDefaults,\n  type TableOptions,\n  TableSymbol,\n} from '@/composables/defaults/table';\nimport { createIconDefaults, IconsSymbol } from '@/composables/icons';\nimport { useRotkiTheme } from '@/composables/theme';\nimport { RUI_I18N_INJECTION_KEY } from '@/composables/use-rui-i18n';\nimport { StepperOrientation, StepperState, type StepperStep } from '@/types/stepper';\nimport '@/style.css';\n\nexport * from '@/components';\n\nexport { activatorHandlers, type ActivatorHandlers } from '@/components/overlays/menu/activator-handlers';\n\nexport * from '@/composables';\n\nexport { type FieldOptions, type LabelPlacement, provideFieldDefaults } from '@/composables/defaults/field';\n\nexport type { LogoOptions, LogoResolver } from '@/composables/defaults/logo';\n\nexport { contextColors, type ContextColorsType } from '@/consts/colors';\n\nexport { translationKeys } from '@/i18n/keys';\n\nexport * from '@/icons';\n\nexport { StepperOrientation, StepperState, type StepperStep };\n\nexport type { VueClassValue } from '@/types/class-value';\n\nexport {\n  type InitThemeOptions,\n  type ThemeConfig,\n  type ThemeContent,\n  type ThemeData,\n  ThemeMode,\n} from '@/types/theme';\n\nexport { createBlockie } from '@/utils/blockie';\n\nexport { cn, tv } from '@/utils/tv';\n\nexport type { VariantProps } from 'tailwind-variants';\n\nexport interface RuiOptions {\n  theme?: InitThemeOptions;\n  defaults?: {\n    table?: Partial<TableOptions>;\n    /** `labelPlacement` for every text field, text area, select and picker; `top` when unset. */\n    field?: Partial<FieldOptions>;\n  };\n  /**\n   * Where `RuiLogo` gets the image for its `logo` prop. Without it every\n   * `RuiLogo` shows the bundled logo, and the library makes no network request.\n   */\n  logo?: LogoOptions;\n}\n\nexport function createRui(options: RuiOptions = {}) {\n  const { theme, defaults: defaultOptions, logo } = options;\n\n  const defaults = Object.freeze({\n    icons: createIconDefaults({\n      registeredIcons: theme?.icons,\n    }),\n    table: createTableDefaults(defaultOptions?.table),\n    field: createFieldDefaults(defaultOptions?.field),\n  });\n\n  const install = (app: App) => {\n    useRotkiTheme().init({ ...theme });\n\n    app.provide(TableSymbol, defaults.table);\n    app.provide(IconsSymbol, defaults.icons);\n    app.provide(FieldSymbol, defaults.field);\n\n    if (logo)\n      app.provide(LogoSymbol, logo);\n  };\n\n  return {\n    defaults,\n    install,\n  };\n}\n\nexport function createRuiI8nPlugin(i18nInstance: any) {\n  if (!i18nInstance || typeof i18nInstance !== 'object') {\n    throw new Error('i18nInstance must be an object');\n  }\n\n  if (!i18nInstance.global || typeof i18nInstance.global !== 'object') {\n    throw new Error('i18nInstance must have a global property');\n  }\n\n  if (!i18nInstance.global.t || typeof i18nInstance.global.t !== 'function') {\n    throw new Error('i18nInstance.global.t must be a function');\n  }\n\n  if (!i18nInstance.global.te || typeof i18nInstance.global.te !== 'function') {\n    throw new Error('i18nInstance.global.te must be a function');\n  }\n\n  return {\n    install: (app: App) => {\n      app.provide(RUI_I18N_INJECTION_KEY, {\n        t: i18nInstance.global.t.bind(i18nInstance.global),\n        te: i18nInstance.global.te.bind(i18nInstance.global),\n      });\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA,SAAgB,UAAU,UAAsB,CAAC,GAAG;CAClD,MAAM,EAAE,OAAO,UAAU,gBAAgB,SAAS;CAElD,MAAM,WAAW,OAAO,OAAO;EAC7B,OAAO,mBAAmB,EACxB,iBAAiB,OAAO,MAC1B,CAAC;EACD,OAAO,oBAAoB,gBAAgB,KAAK;EAChD,OAAO,oBAAoB,gBAAgB,KAAK;CAClD,CAAC;CAED,MAAM,WAAW,QAAa;EAC5B,cAAc,CAAC,CAAC,KAAK,EAAE,GAAG,MAAM,CAAC;EAEjC,IAAI,QAAQ,aAAa,SAAS,KAAK;EACvC,IAAI,QAAQ,aAAa,SAAS,KAAK;EACvC,IAAI,QAAQ,aAAa,SAAS,KAAK;EAEvC,IAAI,MACF,IAAI,QAAQ,YAAY,IAAI;CAChC;CAEA,OAAO;EACL;EACA;CACF;AACF;AAEA,SAAgB,mBAAmB,cAAmB;CACpD,IAAI,CAAC,gBAAgB,OAAO,iBAAiB,UAC3C,MAAM,IAAI,MAAM,gCAAgC;CAGlD,IAAI,CAAC,aAAa,UAAU,OAAO,aAAa,WAAW,UACzD,MAAM,IAAI,MAAM,0CAA0C;CAG5D,IAAI,CAAC,aAAa,OAAO,KAAK,OAAO,aAAa,OAAO,MAAM,YAC7D,MAAM,IAAI,MAAM,0CAA0C;CAG5D,IAAI,CAAC,aAAa,OAAO,MAAM,OAAO,aAAa,OAAO,OAAO,YAC/D,MAAM,IAAI,MAAM,2CAA2C;CAG7D,OAAO,EACL,UAAU,QAAa;EACrB,IAAI,QAAQ,wBAAwB;GAClC,GAAG,aAAa,OAAO,EAAE,KAAK,aAAa,MAAM;GACjD,IAAI,aAAa,OAAO,GAAG,KAAK,aAAa,MAAM;EACrD,CAAC;CACH,EACF;AACF"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["import type { App } from 'vue';\nimport type { InitThemeOptions } from '@/types/theme';\nimport { createFieldDefaults, type FieldOptions, FieldSymbol } from '@/composables/defaults/field';\nimport { type LogoOptions, LogoSymbol } from '@/composables/defaults/logo';\nimport {\n  createTableDefaults,\n  type TableOptions,\n  TableSymbol,\n} from '@/composables/defaults/table';\nimport { createIconDefaults, IconsSymbol } from '@/composables/icons';\nimport { useRotkiTheme } from '@/composables/theme';\nimport { RUI_I18N_INJECTION_KEY } from '@/composables/use-rui-i18n';\nimport { StepperOrientation, StepperState, type StepperStep } from '@/types/stepper';\nimport '@/style.css';\n\nexport * from '@/components';\n\nexport { activatorHandlers, type ActivatorHandlers } from '@/components/overlays/menu/activator-handlers';\n\nexport * from '@/composables';\n\nexport { type FieldOptions, type FieldScopeOptions, type LabelPlacement, provideFieldDefaults } from '@/composables/defaults/field';\n\nexport type { LogoOptions, LogoResolver } from '@/composables/defaults/logo';\n\nexport { contextColors, type ContextColorsType } from '@/consts/colors';\n\nexport { translationKeys } from '@/i18n/keys';\n\nexport * from '@/icons';\n\nexport { StepperOrientation, StepperState, type StepperStep };\n\nexport type { VueClassValue } from '@/types/class-value';\n\nexport {\n  type InitThemeOptions,\n  type ThemeConfig,\n  type ThemeContent,\n  type ThemeData,\n  ThemeMode,\n} from '@/types/theme';\n\nexport { createBlockie } from '@/utils/blockie';\n\nexport type { FormDetails } from '@/utils/form-text-detail';\n\nexport { cn, tv } from '@/utils/tv';\n\nexport type { VariantProps } from 'tailwind-variants';\n\nexport interface RuiOptions {\n  theme?: InitThemeOptions;\n  defaults?: {\n    table?: Partial<TableOptions>;\n    /**\n     * `labelPlacement` for every text field, text area, select and picker (`top` when unset),\n     * and `details` for every form control (`reserve` when unset).\n     */\n    field?: Partial<FieldOptions>;\n  };\n  /**\n   * Where `RuiLogo` gets the image for its `logo` prop. Without it every\n   * `RuiLogo` shows the bundled logo, and the library makes no network request.\n   */\n  logo?: LogoOptions;\n}\n\nexport function createRui(options: RuiOptions = {}) {\n  const { theme, defaults: defaultOptions, logo } = options;\n\n  const defaults = Object.freeze({\n    icons: createIconDefaults({\n      registeredIcons: theme?.icons,\n    }),\n    table: createTableDefaults(defaultOptions?.table),\n    field: createFieldDefaults(defaultOptions?.field),\n  });\n\n  const install = (app: App) => {\n    useRotkiTheme().init({ ...theme });\n\n    app.provide(TableSymbol, defaults.table);\n    app.provide(IconsSymbol, defaults.icons);\n    app.provide(FieldSymbol, defaults.field);\n\n    if (logo)\n      app.provide(LogoSymbol, logo);\n  };\n\n  return {\n    defaults,\n    install,\n  };\n}\n\nexport function createRuiI8nPlugin(i18nInstance: any) {\n  if (!i18nInstance || typeof i18nInstance !== 'object') {\n    throw new Error('i18nInstance must be an object');\n  }\n\n  if (!i18nInstance.global || typeof i18nInstance.global !== 'object') {\n    throw new Error('i18nInstance must have a global property');\n  }\n\n  if (!i18nInstance.global.t || typeof i18nInstance.global.t !== 'function') {\n    throw new Error('i18nInstance.global.t must be a function');\n  }\n\n  if (!i18nInstance.global.te || typeof i18nInstance.global.te !== 'function') {\n    throw new Error('i18nInstance.global.te must be a function');\n  }\n\n  return {\n    install: (app: App) => {\n      app.provide(RUI_I18N_INJECTION_KEY, {\n        t: i18nInstance.global.t.bind(i18nInstance.global),\n        te: i18nInstance.global.te.bind(i18nInstance.global),\n      });\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEA,SAAgB,UAAU,UAAsB,CAAC,GAAG;CAClD,MAAM,EAAE,OAAO,UAAU,gBAAgB,SAAS;CAElD,MAAM,WAAW,OAAO,OAAO;EAC7B,OAAO,mBAAmB,EACxB,iBAAiB,OAAO,MAC1B,CAAC;EACD,OAAO,oBAAoB,gBAAgB,KAAK;EAChD,OAAO,oBAAoB,gBAAgB,KAAK;CAClD,CAAC;CAED,MAAM,WAAW,QAAa;EAC5B,cAAc,CAAC,CAAC,KAAK,EAAE,GAAG,MAAM,CAAC;EAEjC,IAAI,QAAQ,aAAa,SAAS,KAAK;EACvC,IAAI,QAAQ,aAAa,SAAS,KAAK;EACvC,IAAI,QAAQ,aAAa,SAAS,KAAK;EAEvC,IAAI,MACF,IAAI,QAAQ,YAAY,IAAI;CAChC;CAEA,OAAO;EACL;EACA;CACF;AACF;AAEA,SAAgB,mBAAmB,cAAmB;CACpD,IAAI,CAAC,gBAAgB,OAAO,iBAAiB,UAC3C,MAAM,IAAI,MAAM,gCAAgC;CAGlD,IAAI,CAAC,aAAa,UAAU,OAAO,aAAa,WAAW,UACzD,MAAM,IAAI,MAAM,0CAA0C;CAG5D,IAAI,CAAC,aAAa,OAAO,KAAK,OAAO,aAAa,OAAO,MAAM,YAC7D,MAAM,IAAI,MAAM,0CAA0C;CAG5D,IAAI,CAAC,aAAa,OAAO,MAAM,OAAO,aAAa,OAAO,OAAO,YAC/D,MAAM,IAAI,MAAM,2CAA2C;CAG7D,OAAO,EACL,UAAU,QAAa;EACrB,IAAI,QAAQ,wBAAwB;GAClC,GAAG,aAAa,OAAO,EAAE,KAAK,aAAa,MAAM;GACjD,IAAI,aAAa,OAAO,GAAG,KAAK,aAAa,MAAM;EACrD,CAAC;CACH,EACF;AACF"}

package/dist/style.css

@@ -1088,6 +1088,18 @@
     margin-bottom: calc(var(--spacing) * -2);
   }
 
+  .-mb-\[0\.4375rem\] {
+    margin-bottom: -.4375rem;
+  }
+
+  .-mb-\[0\.5625rem\] {
+    margin-bottom: -.5625rem;
+  }
+
+  .-mb-\[0\.6875rem\] {
+    margin-bottom: -.6875rem;
+  }
+
   .mb-0 {
     margin-bottom: 0;
   }
@@ -1153,6 +1165,13 @@
     scrollbar-width: none;
   }
 
+  .line-clamp-2 {
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
   .\!hidden {
     display: none !important;
   }
@@ -1957,6 +1976,10 @@
     gap: calc(var(--spacing) * 6);
   }
 
+  .gap-x-1 {
+    column-gap: var(--spacing);
+  }
+
   .gap-x-1\.5 {
     column-gap: calc(var(--spacing) * 1.5);
   }
@@ -3102,6 +3125,26 @@
     padding-left: calc(var(--spacing) * 3) !important;
   }
 
+  .pl-7\.25 {
+    padding-left: calc(var(--spacing) * 7.25);
+  }
+
+  .pl-8\.25 {
+    padding-left: calc(var(--spacing) * 8.25);
+  }
+
+  .pl-9\.25 {
+    padding-left: calc(var(--spacing) * 9.25);
+  }
+
+  .pl-11\.75 {
+    padding-left: calc(var(--spacing) * 11.75);
+  }
+
+  .pl-13\.25 {
+    padding-left: calc(var(--spacing) * 13.25);
+  }
+
   .text-center {
     text-align: center;
   }
@@ -3114,6 +3157,10 @@
     text-align: right;
   }
 
+  .align-baseline {
+    vertical-align: baseline;
+  }
+
   .align-middle {
     vertical-align: middle;
   }
@@ -3249,6 +3296,11 @@
     line-height: calc(var(--spacing) * 7);
   }
 
+  .text-\[0\.6875rem\]\/4 {
+    font-size: .6875rem;
+    line-height: calc(var(--spacing) * 4);
+  }
+
   .text-\[0\.8125rem\]\/5 {
     font-size: .8125rem;
     line-height: calc(var(--spacing) * 5);
@@ -3320,6 +3372,10 @@
     font-size: 1rem;
   }
 
+  .text-\[length\:inherit\] {
+    font-size: inherit;
+  }
+
   .leading-3 {
     --tw-leading: calc(var(--spacing) * 3);
     line-height: calc(var(--spacing) * 3);
@@ -3340,6 +3396,11 @@
     line-height: calc(var(--spacing) * 6);
   }
 
+  .leading-\[inherit\] {
+    --tw-leading: inherit;
+    line-height: inherit;
+  }
+
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -3548,6 +3609,10 @@
     text-decoration-line: underline;
   }
 
+  .underline-offset-2 {
+    text-underline-offset: 2px;
+  }
+
   .opacity-0 {
     opacity: 0;
   }
@@ -4091,6 +4156,10 @@
     --rui-icon-size: 1.375rem !important;
   }
 
+  .\!\[--rui-icon-size\:1em\] {
+    --rui-icon-size: 1em !important;
+  }
+
   .\!\[--rui-icon-size\:100\%\] {
     --rui-icon-size: 100% !important;
   }
@@ -4135,6 +4204,38 @@
     --rui-alert: var(--rui-warning-main);
   }
 
+  .\[--rui-btn-collapsed-icon\:0\.875rem\] {
+    --rui-btn-collapsed-icon: .875rem;
+  }
+
+  .\[--rui-btn-collapsed-icon\:1\.5rem\] {
+    --rui-btn-collapsed-icon: 1.5rem;
+  }
+
+  .\[--rui-btn-collapsed-icon\:1\.25rem\] {
+    --rui-btn-collapsed-icon: 1.25rem;
+  }
+
+  .\[--rui-btn-collapsed-icon\:1\.75rem\] {
+    --rui-btn-collapsed-icon: 1.75rem;
+  }
+
+  .\[--rui-btn-collapsed-p\:0\.5rem\] {
+    --rui-btn-collapsed-p: .5rem;
+  }
+
+  .\[--rui-btn-collapsed-p\:0\.25rem\] {
+    --rui-btn-collapsed-p: .25rem;
+  }
+
+  .\[--rui-btn-collapsed-p\:0\.375rem\] {
+    --rui-btn-collapsed-p: .375rem;
+  }
+
+  .\[--rui-btn-collapsed-p\:0\.1875rem\] {
+    --rui-btn-collapsed-p: .1875rem;
+  }
+
   .\[--rui-icon-size\:0\.75rem\] {
     --rui-icon-size: .75rem;
   }
@@ -4377,6 +4478,10 @@
       }
     }
 
+    .hover\:bg-rui-neutral-100:hover {
+      background-color: rgb(var(--rui-neutral-100));
+    }
+
     .hover\:bg-rui-neutral-200:hover {
       background-color: rgb(var(--rui-neutral-200));
     }
@@ -4385,6 +4490,16 @@
       background-color: rgb(var(--rui-neutral-400));
     }
 
+    .hover\:bg-rui-neutral-950\/\[0\.03\]:hover {
+      background-color: rgb(var(--rui-neutral-950));
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-rui-neutral-950\/\[0\.03\]:hover {
+        background-color: color-mix(in oklab, rgb(var(--rui-neutral-950)) 3%, transparent);
+      }
+    }
+
     .hover\:bg-rui-neutral-950\/\[0\.07\]:hover {
       background-color: rgb(var(--rui-neutral-950));
     }
@@ -4484,6 +4599,10 @@
     .not-disabled\:hover\:state-layer-pressed:not(:disabled):hover {
       background-image: linear-gradient(var(--rui-pressed), var(--rui-pressed));
     }
+
+    .not-disabled\:hover\:underline:not(:disabled):hover {
+      text-decoration-line: underline;
+    }
   }
 
   .focus\:z-1:focus {
@@ -4647,6 +4766,10 @@
     }
   }
 
+  .active\:bg-transparent:active {
+    background-color: #0000;
+  }
+
   .active\:state-layer-pressed:active {
     background-image: linear-gradient(var(--rui-pressed), var(--rui-pressed));
   }
@@ -4708,8 +4831,14 @@
     color: var(--rui-text-disabled) !important;
   }
 
-  .has-\[\+\[data-id\=row-append\]\:hover\]\:bg-rui-hover:has( + [data-id="row-append"]:hover) {
-    background-color: var(--rui-hover);
+  .has-\[\+\[data-id\=row-append\]\:hover\]\:bg-rui-neutral-950\/\[0\.03\]:has( + [data-id="row-append"]:hover) {
+    background-color: rgb(var(--rui-neutral-950));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .has-\[\+\[data-id\=row-append\]\:hover\]\:bg-rui-neutral-950\/\[0\.03\]:has( + [data-id="row-append"]:hover) {
+      background-color: color-mix(in oklab, rgb(var(--rui-neutral-950)) 3%, transparent);
+    }
   }
 
   .data-\[active\]\:bg-rui-surface[data-active] {
@@ -4738,6 +4867,136 @@
     }
   }
 
+  @media not all and (min-width: 96rem) {
+    .max-2xl\:sr-only {
+      clip-path: inset(50%);
+      white-space: nowrap;
+      border-width: 0;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      padding: 0;
+      position: absolute;
+      overflow: hidden;
+    }
+
+    .max-2xl\:gap-x-0 {
+      column-gap: 0;
+    }
+
+    .max-2xl\:p-\(--rui-btn-collapsed-p\) {
+      padding: var(--rui-btn-collapsed-p);
+    }
+
+    .max-2xl\:\!\[--rui-icon-size\:var\(--rui-btn-collapsed-icon\)\] {
+      --rui-icon-size: var(--rui-btn-collapsed-icon) !important;
+    }
+  }
+
+  @media not all and (min-width: 80rem) {
+    .max-xl\:sr-only {
+      clip-path: inset(50%);
+      white-space: nowrap;
+      border-width: 0;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      padding: 0;
+      position: absolute;
+      overflow: hidden;
+    }
+
+    .max-xl\:gap-x-0 {
+      column-gap: 0;
+    }
+
+    .max-xl\:p-\(--rui-btn-collapsed-p\) {
+      padding: var(--rui-btn-collapsed-p);
+    }
+
+    .max-xl\:\!\[--rui-icon-size\:var\(--rui-btn-collapsed-icon\)\] {
+      --rui-icon-size: var(--rui-btn-collapsed-icon) !important;
+    }
+  }
+
+  @media not all and (min-width: 64rem) {
+    .max-lg\:sr-only {
+      clip-path: inset(50%);
+      white-space: nowrap;
+      border-width: 0;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      padding: 0;
+      position: absolute;
+      overflow: hidden;
+    }
+
+    .max-lg\:gap-x-0 {
+      column-gap: 0;
+    }
+
+    .max-lg\:p-\(--rui-btn-collapsed-p\) {
+      padding: var(--rui-btn-collapsed-p);
+    }
+
+    .max-lg\:\!\[--rui-icon-size\:var\(--rui-btn-collapsed-icon\)\] {
+      --rui-icon-size: var(--rui-btn-collapsed-icon) !important;
+    }
+  }
+
+  @media not all and (min-width: 48rem) {
+    .max-md\:sr-only {
+      clip-path: inset(50%);
+      white-space: nowrap;
+      border-width: 0;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      padding: 0;
+      position: absolute;
+      overflow: hidden;
+    }
+
+    .max-md\:gap-x-0 {
+      column-gap: 0;
+    }
+
+    .max-md\:p-\(--rui-btn-collapsed-p\) {
+      padding: var(--rui-btn-collapsed-p);
+    }
+
+    .max-md\:\!\[--rui-icon-size\:var\(--rui-btn-collapsed-icon\)\] {
+      --rui-icon-size: var(--rui-btn-collapsed-icon) !important;
+    }
+  }
+
+  @media not all and (min-width: 40rem) {
+    .max-sm\:sr-only {
+      clip-path: inset(50%);
+      white-space: nowrap;
+      border-width: 0;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      padding: 0;
+      position: absolute;
+      overflow: hidden;
+    }
+
+    .max-sm\:gap-x-0 {
+      column-gap: 0;
+    }
+
+    .max-sm\:p-\(--rui-btn-collapsed-p\) {
+      padding: var(--rui-btn-collapsed-p);
+    }
+
+    .max-sm\:\!\[--rui-icon-size\:var\(--rui-btn-collapsed-icon\)\] {
+      --rui-icon-size: var(--rui-btn-collapsed-icon) !important;
+    }
+  }
+
   @media (min-width: 64rem) {
     .lg\:whitespace-normal {
       white-space: normal;
@@ -5142,6 +5401,10 @@
     color: var(--rui-text-disabled);
   }
 
+  .dark\:text-rui-text-secondary:is(.dark *, [data-theme="dark"] *) {
+    color: var(--rui-text-secondary);
+  }
+
   .dark\:text-rui-warning:is(.dark *, [data-theme="dark"] *) {
     color: rgb(var(--rui-warning-main));
   }
@@ -5213,6 +5476,26 @@
       background-color: #0000;
     }
 
+    .dark\:hover\:bg-white\/\[0\.04\]:is(.dark *, [data-theme="dark"] *):hover {
+      background-color: #ffffff0a;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .dark\:hover\:bg-white\/\[0\.04\]:is(.dark *, [data-theme="dark"] *):hover {
+        background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
+      }
+    }
+
+    .dark\:hover\:bg-white\/\[0\.05\]:is(.dark *, [data-theme="dark"] *):hover {
+      background-color: #ffffff0d;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .dark\:hover\:bg-white\/\[0\.05\]:is(.dark *, [data-theme="dark"] *):hover {
+        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+      }
+    }
+
     .dark\:hover\:bg-white\/\[0\.09\]:is(.dark *, [data-theme="dark"] *):hover {
       background-color: #ffffff17;
     }
@@ -5272,6 +5555,10 @@
     }
   }
 
+  .dark\:active\:bg-transparent:is(.dark *, [data-theme="dark"] *):active {
+    background-color: #0000;
+  }
+
   .dark\:disabled\:\!bg-rui-neutral-800:is(.dark *, [data-theme="dark"] *):disabled {
     background-color: rgb(var(--rui-neutral-800)) !important;
   }
@@ -5288,6 +5575,16 @@
     --tw-inset-ring-color: var(--rui-text-disabled);
   }
 
+  .dark\:has-\[\+\[data-id\=row-append\]\:hover\]\:bg-white\/\[0\.04\]:is(.dark *, [data-theme="dark"] *):has( + [data-id="row-append"]:hover) {
+    background-color: #ffffff0a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:has-\[\+\[data-id\=row-append\]\:hover\]\:bg-white\/\[0\.04\]:is(.dark *, [data-theme="dark"] *):has( + [data-id="row-append"]:hover) {
+      background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
+    }
+  }
+
   .dark\:data-\[active\]\:bg-rui-neutral-700:is(.dark *, [data-theme="dark"] *)[data-active] {
     background-color: rgb(var(--rui-neutral-700));
   }
@@ -5550,6 +5847,10 @@
     background-color: rgb(var(--rui-primary-main));
   }
 
+  .\[\&\>tr\]\:block > tr {
+    display: block;
+  }
+
   :where(.\[\:where\(\&\)\]\:h-8) {
     height: calc(var(--spacing) * 8);
   }
@@ -5665,23 +5966,47 @@
     color: var(--rui-text-secondary);
   }
 
-  :where(.\[\:where\(\&\>tr\[data-stripe\]\)\]\:bg-rui-neutral-950\/\[0\.03\] > tr[data-stripe]) {
+  :where(.\[\:where\(\&\>tr\>\*\)\]\:block > tr > *) {
+    display: block;
+  }
+
+  :where(.\[\:where\(\&\>tr\>\*\)\]\:h-9 > tr > *) {
+    height: calc(var(--spacing) * 9);
+  }
+
+  :where(.\[\:where\(\&\>tr\>\*\)\]\:h-11 > tr > *) {
+    height: calc(var(--spacing) * 11);
+  }
+
+  :where(.\[\:where\(\&\>tr\>\*\)\]\:px-4 > tr > *) {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+
+  :where(.\[\:where\(\&\>tr\>\*\)\]\:py-1 > tr > *) {
+    padding-block: var(--spacing);
+  }
+
+  :where(.\[\:where\(\&\>tr\>\*\)\]\:py-2 > tr > *) {
+    padding-block: calc(var(--spacing) * 2);
+  }
+
+  :where(.\[\:where\(\&\>tr\[data-stripe\]\)\]\:bg-rui-neutral-950\/\[0\.015\] > tr[data-stripe]) {
     background-color: rgb(var(--rui-neutral-950));
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    :where(.\[\:where\(\&\>tr\[data-stripe\]\)\]\:bg-rui-neutral-950\/\[0\.03\] > tr[data-stripe]) {
-      background-color: color-mix(in oklab, rgb(var(--rui-neutral-950)) 3%, transparent);
+    :where(.\[\:where\(\&\>tr\[data-stripe\]\)\]\:bg-rui-neutral-950\/\[0\.015\] > tr[data-stripe]) {
+      background-color: color-mix(in oklab, rgb(var(--rui-neutral-950)) 1.5%, transparent);
     }
   }
 
-  :where(.dark\:\[\:where\(\&\>tr\[data-stripe\]\)\]\:bg-white\/\[0\.04\]:is(.dark *, [data-theme="dark"] *) > tr[data-stripe]) {
-    background-color: #ffffff0a;
+  :where(.dark\:\[\:where\(\&\>tr\[data-stripe\]\)\]\:bg-white\/\[0\.02\]:is(.dark *, [data-theme="dark"] *) > tr[data-stripe]) {
+    background-color: #ffffff05;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    :where(.dark\:\[\:where\(\&\>tr\[data-stripe\]\)\]\:bg-white\/\[0\.04\]:is(.dark *, [data-theme="dark"] *) > tr[data-stripe]) {
-      background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
+    :where(.dark\:\[\:where\(\&\>tr\[data-stripe\]\)\]\:bg-white\/\[0\.02\]:is(.dark *, [data-theme="dark"] *) > tr[data-stripe]) {
+      background-color: color-mix(in oklab, var(--color-white) 2%, transparent);
     }
   }
 
@@ -5769,8 +6094,24 @@
     }
   }
 
-  [data-id="row"]:hover + .\[\[data-id\=row\]\:hover\+\&\]\:bg-rui-hover {
-    background-color: var(--rui-hover);
+  [data-id="row"]:hover + .\[\[data-id\=row\]\:hover\+\&\]\:bg-rui-neutral-950\/\[0\.03\] {
+    background-color: rgb(var(--rui-neutral-950));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    [data-id="row"]:hover + .\[\[data-id\=row\]\:hover\+\&\]\:bg-rui-neutral-950\/\[0\.03\] {
+      background-color: color-mix(in oklab, rgb(var(--rui-neutral-950)) 3%, transparent);
+    }
+  }
+
+  [data-id="row"]:hover + .dark\:\[\[data-id\=row\]\:hover\+\&\]\:bg-white\/\[0\.04\]:is(.dark *, [data-theme="dark"] *) {
+    background-color: #ffffff0a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    [data-id="row"]:hover + .dark\:\[\[data-id\=row\]\:hover\+\&\]\:bg-white\/\[0\.04\]:is(.dark *, [data-theme="dark"] *) {
+      background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
+    }
   }
 }
 

package/dist/utils/development.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Whether the app runs a development build, for warnings a production build should not carry.
+ *
+ * @returns false in a production build, and where nothing replaced `process.env.NODE_ENV`
+ */
+export declare function isDevelopment(): boolean;

package/dist/utils/development.js

@@ -0,0 +1,17 @@
+//#region src/utils/development.ts
+/**
+* Whether the app runs a development build, for warnings a production build should not carry.
+*
+* @returns false in a production build, and where nothing replaced `process.env.NODE_ENV`
+*/
+function isDevelopment() {
+	try {
+		return process.env.NODE_ENV !== "production";
+	} catch {
+		return false;
+	}
+}
+//#endregion
+export { isDevelopment };
+
+//# sourceMappingURL=development.js.map

package/dist/utils/development.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"development.js","names":[],"sources":["../../src/utils/development.ts"],"sourcesContent":["/**\n * The consumer's bundler replaces `process.env.NODE_ENV`; the library build leaves it in place on\n * purpose, since `import.meta.env.DEV` would be fixed to false when the library is built. Declared\n * here rather than globally, where it would clash with `@types/node` in the test build.\n */\ndeclare const process: { env: { NODE_ENV?: string } };\n\n/**\n * Whether the app runs a development build, for warnings a production build should not carry.\n *\n * @returns false in a production build, and where nothing replaced `process.env.NODE_ENV`\n */\nexport function isDevelopment(): boolean {\n  try {\n    return process.env.NODE_ENV !== 'production';\n  }\n  catch {\n    return false;\n  }\n}\n"],"mappings":";;;;;;AAYA,SAAgB,gBAAyB;CACvC,IAAI;EACF,OAAA,QAAA,IAAA,aAAgC;CAClC,QACM;EACJ,OAAO;CACT;AACF"}

package/dist/utils/form-text-detail.d.ts

@@ -1,5 +1,20 @@
 import type { ComputedRef, MaybeRefOrGetter } from 'vue';
 export type ValidationState = 'error' | 'success' | undefined;
+/**
+ * How a control handles the line under it for its hint, error or success message.
+ *
+ * - `reserve`: the line is always there, so a message never moves what is below (the default).
+ * - `auto`: no space while there is nothing to show; the line appears with a hint, error or
+ *   success message and pushes what is below down.
+ * - `hidden`: no line and no message text. An error still marks the control invalid.
+ */
+export type FormDetails = 'reserve' | 'auto' | 'hidden';
+/**
+ * The details mode a control uses: `hidden` while the deprecated `hideDetails` is set,
+ * otherwise its `details` prop, then the nearest `RuiFieldDefaults` scope, then the app
+ * default, then `reserve`.
+ */
+export declare function useFormDetails(details: MaybeRefOrGetter<FormDetails | undefined>, hideDetails: MaybeRefOrGetter<boolean>): ComputedRef<FormDetails>;
 export interface FormTextDetailReturn {
     formattedErrorMessages: ComputedRef<string[]>;
     formattedSuccessMessages: ComputedRef<string[]>;

package/dist/utils/form-text-detail.js

@@ -1,6 +1,16 @@
+import { useInheritedDetails } from "../composables/defaults/field.js";
 import { get } from "../vendor/@vueuse/shared/dist/index.js";
 import { computed, toValue } from "vue";
 //#region src/utils/form-text-detail.ts
+/**
+* The details mode a control uses: `hidden` while the deprecated `hideDetails` is set,
+* otherwise its `details` prop, then the nearest `RuiFieldDefaults` scope, then the app
+* default, then `reserve`.
+*/
+function useFormDetails(details, hideDetails) {
+	const inherited = useInheritedDetails();
+	return computed(() => toValue(hideDetails) ? "hidden" : toValue(details) ?? inherited() ?? "reserve");
+}
 function useFormTextDetail(errorMessages, successMessages) {
 	const formattedErrorMessages = computed(() => {
 		let errorMessagesVal = toValue(errorMessages);
@@ -27,6 +37,6 @@ function useFormTextDetail(errorMessages, successMessages) {
 	};
 }
 //#endregion
-export { useFormTextDetail };
+export { useFormDetails, useFormTextDetail };
 
 //# sourceMappingURL=form-text-detail.js.map

package/dist/utils/form-text-detail.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-text-detail.js","names":[],"sources":["../../src/utils/form-text-detail.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter } from 'vue';\n\nexport type ValidationState = 'error' | 'success' | undefined;\n\nexport interface FormTextDetailReturn {\n  formattedErrorMessages: ComputedRef<string[]>;\n  formattedSuccessMessages: ComputedRef<string[]>;\n  hasError: ComputedRef<boolean>;\n  hasMessages: ComputedRef<boolean>;\n  hasSuccess: ComputedRef<boolean>;\n  validation: ComputedRef<ValidationState>;\n}\n\nexport function useFormTextDetail(\n  errorMessages: MaybeRefOrGetter<string | string[]>,\n  successMessages: MaybeRefOrGetter<string | string[]>,\n): FormTextDetailReturn {\n  const formattedErrorMessages = computed<string[]>(() => {\n    let errorMessagesVal = toValue(errorMessages);\n    if (typeof errorMessagesVal === 'string')\n      errorMessagesVal = [errorMessagesVal];\n\n    return errorMessagesVal.filter(item => !!item);\n  });\n\n  const formattedSuccessMessages = computed<string[]>(() => {\n    let successMessagesVal = toValue(successMessages);\n    if (typeof successMessagesVal === 'string')\n      successMessagesVal = [successMessagesVal];\n\n    return successMessagesVal.filter(item => !!item);\n  });\n\n  const hasError = computed<boolean>(() => get(formattedErrorMessages).length > 0);\n  const hasSuccess = computed<boolean>(() => get(formattedSuccessMessages).length > 0);\n  const hasMessages = computed<boolean>(() => get(hasError) || get(hasSuccess));\n\n  const validation = computed<ValidationState>(() => {\n    if (get(hasError))\n      return 'error';\n    if (get(hasSuccess))\n      return 'success';\n    return undefined;\n  });\n\n  return {\n    formattedErrorMessages,\n    formattedSuccessMessages,\n    hasError,\n    hasMessages,\n    hasSuccess,\n    validation,\n  };\n}\n"],"mappings":";;;AAaA,SAAgB,kBACd,eACA,iBACsB;CACtB,MAAM,yBAAyB,eAAyB;EACtD,IAAI,mBAAmB,QAAQ,aAAa;EAC5C,IAAI,OAAO,qBAAqB,UAC9B,mBAAmB,CAAC,gBAAgB;EAEtC,OAAO,iBAAiB,QAAO,SAAQ,CAAC,CAAC,IAAI;CAC/C,CAAC;CAED,MAAM,2BAA2B,eAAyB;EACxD,IAAI,qBAAqB,QAAQ,eAAe;EAChD,IAAI,OAAO,uBAAuB,UAChC,qBAAqB,CAAC,kBAAkB;EAE1C,OAAO,mBAAmB,QAAO,SAAQ,CAAC,CAAC,IAAI;CACjD,CAAC;CAED,MAAM,WAAW,eAAwB,IAAI,sBAAsB,CAAC,CAAC,SAAS,CAAC;CAC/E,MAAM,aAAa,eAAwB,IAAI,wBAAwB,CAAC,CAAC,SAAS,CAAC;CAWnF,OAAO;EACL;EACA;EACA;EACA,aAdkB,eAAwB,IAAI,QAAQ,KAAK,IAAI,UAAU,CAczE;EACA;EACA,YAdiB,eAAgC;GACjD,IAAI,IAAI,QAAQ,GACd,OAAO;GACT,IAAI,IAAI,UAAU,GAChB,OAAO;EAEX,CAQE;CACF;AACF"}
+{"version":3,"file":"form-text-detail.js","names":[],"sources":["../../src/utils/form-text-detail.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter } from 'vue';\nimport { useInheritedDetails } from '@/composables/defaults/field';\n\nexport type ValidationState = 'error' | 'success' | undefined;\n\n/**\n * How a control handles the line under it for its hint, error or success message.\n *\n * - `reserve`: the line is always there, so a message never moves what is below (the default).\n * - `auto`: no space while there is nothing to show; the line appears with a hint, error or\n *   success message and pushes what is below down.\n * - `hidden`: no line and no message text. An error still marks the control invalid.\n */\nexport type FormDetails = 'reserve' | 'auto' | 'hidden';\n\n/**\n * The details mode a control uses: `hidden` while the deprecated `hideDetails` is set,\n * otherwise its `details` prop, then the nearest `RuiFieldDefaults` scope, then the app\n * default, then `reserve`.\n */\nexport function useFormDetails(\n  details: MaybeRefOrGetter<FormDetails | undefined>,\n  hideDetails: MaybeRefOrGetter<boolean>,\n): ComputedRef<FormDetails> {\n  const inherited = useInheritedDetails();\n  return computed<FormDetails>(() => (toValue(hideDetails) ? 'hidden' : toValue(details) ?? inherited() ?? 'reserve'));\n}\n\nexport interface FormTextDetailReturn {\n  formattedErrorMessages: ComputedRef<string[]>;\n  formattedSuccessMessages: ComputedRef<string[]>;\n  hasError: ComputedRef<boolean>;\n  hasMessages: ComputedRef<boolean>;\n  hasSuccess: ComputedRef<boolean>;\n  validation: ComputedRef<ValidationState>;\n}\n\nexport function useFormTextDetail(\n  errorMessages: MaybeRefOrGetter<string | string[]>,\n  successMessages: MaybeRefOrGetter<string | string[]>,\n): FormTextDetailReturn {\n  const formattedErrorMessages = computed<string[]>(() => {\n    let errorMessagesVal = toValue(errorMessages);\n    if (typeof errorMessagesVal === 'string')\n      errorMessagesVal = [errorMessagesVal];\n\n    return errorMessagesVal.filter(item => !!item);\n  });\n\n  const formattedSuccessMessages = computed<string[]>(() => {\n    let successMessagesVal = toValue(successMessages);\n    if (typeof successMessagesVal === 'string')\n      successMessagesVal = [successMessagesVal];\n\n    return successMessagesVal.filter(item => !!item);\n  });\n\n  const hasError = computed<boolean>(() => get(formattedErrorMessages).length > 0);\n  const hasSuccess = computed<boolean>(() => get(formattedSuccessMessages).length > 0);\n  const hasMessages = computed<boolean>(() => get(hasError) || get(hasSuccess));\n\n  const validation = computed<ValidationState>(() => {\n    if (get(hasError))\n      return 'error';\n    if (get(hasSuccess))\n      return 'success';\n    return undefined;\n  });\n\n  return {\n    formattedErrorMessages,\n    formattedSuccessMessages,\n    hasError,\n    hasMessages,\n    hasSuccess,\n    validation,\n  };\n}\n"],"mappings":";;;;;;;;;AAoBA,SAAgB,eACd,SACA,aAC0B;CAC1B,MAAM,YAAY,oBAAoB;CACtC,OAAO,eAA6B,QAAQ,WAAW,IAAI,WAAW,QAAQ,OAAO,KAAK,UAAU,KAAK,SAAU;AACrH;AAWA,SAAgB,kBACd,eACA,iBACsB;CACtB,MAAM,yBAAyB,eAAyB;EACtD,IAAI,mBAAmB,QAAQ,aAAa;EAC5C,IAAI,OAAO,qBAAqB,UAC9B,mBAAmB,CAAC,gBAAgB;EAEtC,OAAO,iBAAiB,QAAO,SAAQ,CAAC,CAAC,IAAI;CAC/C,CAAC;CAED,MAAM,2BAA2B,eAAyB;EACxD,IAAI,qBAAqB,QAAQ,eAAe;EAChD,IAAI,OAAO,uBAAuB,UAChC,qBAAqB,CAAC,kBAAkB;EAE1C,OAAO,mBAAmB,QAAO,SAAQ,CAAC,CAAC,IAAI;CACjD,CAAC;CAED,MAAM,WAAW,eAAwB,IAAI,sBAAsB,CAAC,CAAC,SAAS,CAAC;CAC/E,MAAM,aAAa,eAAwB,IAAI,wBAAwB,CAAC,CAAC,SAAS,CAAC;CAWnF,OAAO;EACL;EACA;EACA;EACA,aAdkB,eAAwB,IAAI,QAAQ,KAAK,IAAI,UAAU,CAczE;EACA;EACA,YAdiB,eAAgC;GACjD,IAAI,IAAI,QAAQ,GACd,OAAO;GACT,IAAI,IAAI,UAAU,GAChB,OAAO;EAEX,CAQE;CACF;AACF"}