@rotki/ui-library 3.0.0 → 3.1.0

package/dist/composables/sticky-blocker.js

@@ -0,0 +1,62 @@
+import { get, useTimeoutFn } from "../vendor/@vueuse/shared/dist/index.js";
+import { isDevelopment } from "../utils/development.js";
+import { toValue, watch } from "vue";
+//#region src/composables/sticky-blocker.ts
+/** Long enough for an opening accordion or tab panel to settle before the check reads its overflow. */
+var CHECK_DELAY_MS = 1e3;
+/**
+* The nearest ancestor with `overflow: hidden` on either axis, which a `position: sticky` element
+* sticks to instead of the page. `hidden` never scrolls, so the element can never stick. `auto` and
+* `scroll` are left out: those can be real scrolling areas, like a dialog body. `clip` makes no
+* scroll container, so it never blocks. A box marked `data-clipped` clips only while it animates.
+*
+* @param element - where the walk up the tree starts; its own overflow does not count
+* @returns the blocking ancestor, or undefined when nothing blocks the element
+*/
+function findStickyBlocker(element) {
+	let parent = element.parentElement;
+	while (parent && parent !== document.body && parent !== document.documentElement) {
+		const { overflowX, overflowY } = getComputedStyle(parent);
+		if ((overflowX === "hidden" || overflowY === "hidden") && !parent.hasAttribute("data-clipped")) return parent;
+		parent = parent.parentElement;
+	}
+}
+/**
+* A short, recognizable name for an element in a console message.
+*
+* @param element - the element to name
+* @returns its tag, `data-id` and first classes
+*/
+function describe(element) {
+	const id = element.dataset.id ? `[data-id="${element.dataset.id}"]` : "";
+	const classes = [...element.classList].slice(0, 3).map((name) => `.${name}`).join("");
+	return `<${element.tagName.toLowerCase()}${id}${classes}>`;
+}
+/**
+* In a development build, warns once when an ancestor keeps a sticky element from sticking to the
+* page. Silent in production, where the check does not run.
+*
+* @param element - the `position: sticky` box, checked once it is mounted
+* @param enabled - whether the element is meant to stick
+* @param name - what the element is, for the message
+*/
+function useStickyBlockerWarning(element, enabled, name) {
+	if (!isDevelopment()) return;
+	let warned = false;
+	function check() {
+		const target = get(element);
+		if (warned || !toValue(enabled) || !target) return;
+		const blocker = findStickyBlocker(target);
+		if (!blocker) return;
+		warned = true;
+		console.warn(`[@rotki/ui-library] ${name} cannot stick to the page: the ancestor ${describe(blocker)} has overflow: hidden, so the bar sticks to it instead. Use overflow: clip there (it clips the same without creating a scroll container), or move the element out of it.`, blocker);
+	}
+	const { start } = useTimeoutFn(check, CHECK_DELAY_MS, { immediate: false });
+	watch([element, () => toValue(enabled)], ([target, on]) => {
+		if (target && on) start();
+	}, { immediate: true });
+}
+//#endregion
+export { findStickyBlocker, useStickyBlockerWarning };
+
+//# sourceMappingURL=sticky-blocker.js.map

package/dist/composables/sticky-blocker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticky-blocker.js","names":[],"sources":["../../src/composables/sticky-blocker.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref } from 'vue';\nimport { useTimeoutFn } from '@vueuse/core';\nimport { isDevelopment } from '@/utils/development';\n\n/** Long enough for an opening accordion or tab panel to settle before the check reads its overflow. */\nconst CHECK_DELAY_MS = 1000;\n\n/**\n * The nearest ancestor with `overflow: hidden` on either axis, which a `position: sticky` element\n * sticks to instead of the page. `hidden` never scrolls, so the element can never stick. `auto` and\n * `scroll` are left out: those can be real scrolling areas, like a dialog body. `clip` makes no\n * scroll container, so it never blocks. A box marked `data-clipped` clips only while it animates.\n *\n * @param element - where the walk up the tree starts; its own overflow does not count\n * @returns the blocking ancestor, or undefined when nothing blocks the element\n */\nexport function findStickyBlocker(element: HTMLElement): HTMLElement | undefined {\n  let parent = element.parentElement;\n  while (parent && parent !== document.body && parent !== document.documentElement) {\n    const { overflowX, overflowY } = getComputedStyle(parent);\n    if ((overflowX === 'hidden' || overflowY === 'hidden') && !parent.hasAttribute('data-clipped'))\n      return parent;\n    parent = parent.parentElement;\n  }\n  return undefined;\n}\n\n/**\n * A short, recognizable name for an element in a console message.\n *\n * @param element - the element to name\n * @returns its tag, `data-id` and first classes\n */\nfunction describe(element: HTMLElement): string {\n  const id = element.dataset.id ? `[data-id=\"${element.dataset.id}\"]` : '';\n  const classes = [...element.classList].slice(0, 3).map(name => `.${name}`).join('');\n  return `<${element.tagName.toLowerCase()}${id}${classes}>`;\n}\n\n/**\n * In a development build, warns once when an ancestor keeps a sticky element from sticking to the\n * page. Silent in production, where the check does not run.\n *\n * @param element - the `position: sticky` box, checked once it is mounted\n * @param enabled - whether the element is meant to stick\n * @param name - what the element is, for the message\n */\nexport function useStickyBlockerWarning(\n  element: Readonly<Ref<HTMLElement | null | undefined>>,\n  enabled: MaybeRefOrGetter<boolean>,\n  name: string,\n): void {\n  if (!isDevelopment())\n    return;\n\n  let warned = false;\n\n  function check(): void {\n    const target = get(element);\n    if (warned || !toValue(enabled) || !target)\n      return;\n    const blocker = findStickyBlocker(target);\n    if (!blocker)\n      return;\n    warned = true;\n    console.warn(\n      `[@rotki/ui-library] ${name} cannot stick to the page: the ancestor ${describe(blocker)} has overflow: hidden, `\n      + 'so the bar sticks to it instead. Use overflow: clip there (it clips the same without creating a scroll container), '\n      + 'or move the element out of it.',\n      blocker,\n    );\n  }\n\n  const { start } = useTimeoutFn(check, CHECK_DELAY_MS, { immediate: false });\n\n  watch([element, () => toValue(enabled)], ([target, on]) => {\n    if (target && on)\n      start();\n  }, { immediate: true });\n}\n"],"mappings":";;;;;AAKA,IAAM,iBAAiB;;;;;;;;;;AAWvB,SAAgB,kBAAkB,SAA+C;CAC/E,IAAI,SAAS,QAAQ;CACrB,OAAO,UAAU,WAAW,SAAS,QAAQ,WAAW,SAAS,iBAAiB;EAChF,MAAM,EAAE,WAAW,cAAc,iBAAiB,MAAM;EACxD,KAAK,cAAc,YAAY,cAAc,aAAa,CAAC,OAAO,aAAa,cAAc,GAC3F,OAAO;EACT,SAAS,OAAO;CAClB;AAEF;;;;;;;AAQA,SAAS,SAAS,SAA8B;CAC9C,MAAM,KAAK,QAAQ,QAAQ,KAAK,aAAa,QAAQ,QAAQ,GAAG,MAAM;CACtE,MAAM,UAAU,CAAC,GAAG,QAAQ,SAAS,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAI,SAAQ,IAAI,MAAM,CAAC,CAAC,KAAK,EAAE;CAClF,OAAO,IAAI,QAAQ,QAAQ,YAAY,IAAI,KAAK,QAAQ;AAC1D;;;;;;;;;AAUA,SAAgB,wBACd,SACA,SACA,MACM;CACN,IAAI,CAAC,cAAc,GACjB;CAEF,IAAI,SAAS;CAEb,SAAS,QAAc;EACrB,MAAM,SAAS,IAAI,OAAO;EAC1B,IAAI,UAAU,CAAC,QAAQ,OAAO,KAAK,CAAC,QAClC;EACF,MAAM,UAAU,kBAAkB,MAAM;EACxC,IAAI,CAAC,SACH;EACF,SAAS;EACT,QAAQ,KACN,uBAAuB,KAAK,0CAA0C,SAAS,OAAO,EAAE,2KAGxF,OACF;CACF;CAEA,MAAM,EAAE,UAAU,aAAa,OAAO,gBAAgB,EAAE,WAAW,MAAM,CAAC;CAE1E,MAAM,CAAC,eAAe,QAAQ,OAAO,CAAC,IAAI,CAAC,QAAQ,QAAQ;EACzD,IAAI,UAAU,IACZ,MAAM;CACV,GAAG,EAAE,WAAW,KAAK,CAAC;AACxB"}

package/dist/index.d.ts

@@ -8,7 +8,7 @@ import './style.css';
 export * from './components/index.js';
 export { activatorHandlers, type ActivatorHandlers } from './components/overlays/menu/activator-handlers.js';
 export * from './composables/index.js';
-export { type FieldOptions, type LabelPlacement, provideFieldDefaults } from './composables/defaults/field.js';
+export { type FieldOptions, type FieldScopeOptions, type LabelPlacement, provideFieldDefaults } from './composables/defaults/field.js';
 export type { LogoOptions, LogoResolver } from './composables/defaults/logo.js';
 export { contextColors, type ContextColorsType } from './consts/colors.js';
 export { translationKeys } from './i18n/keys.js';
@@ -17,13 +17,17 @@ export { StepperOrientation, StepperState, type StepperStep };
 export type { VueClassValue } from './types/class-value.js';
 export { type InitThemeOptions, type ThemeConfig, type ThemeContent, type ThemeData, ThemeMode, } from './types/theme.js';
 export { createBlockie } from './utils/blockie.js';
+export type { FormDetails } from './utils/form-text-detail.js';
 export { cn, tv } from './utils/tv.js';
 export type { VariantProps } from 'tailwind-variants';
 export interface RuiOptions {
     theme?: InitThemeOptions;
     defaults?: {
         table?: Partial<TableOptions>;
-        /** `labelPlacement` for every text field, text area, select and picker; `top` when unset. */
+        /**
+         * `labelPlacement` for every text field, text area, select and picker (`top` when unset),
+         * and `details` for every form control (`reserve` when unset).
+         */
         field?: Partial<FieldOptions>;
     };
     /**

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;
   }
@@ -4498,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 {
@@ -4661,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));
   }
@@ -4758,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;
@@ -5162,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));
   }
@@ -5312,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;
   }
@@ -5600,6 +5847,10 @@
     background-color: rgb(var(--rui-primary-main));
   }
 
+  .\[\&\>tr\]\:block > tr {
+    display: block;
+  }
+
   :where(.\[\:where\(\&\)\]\:h-8) {
     height: calc(var(--spacing) * 8);
   }
@@ -5715,6 +5966,30 @@
     color: var(--rui-text-secondary);
   }
 
+  :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));
   }

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"}