@rotki/ui-library 3.0.0 → 3.1.1

package/dist/style.css

@@ -539,6 +539,7 @@
     --rui-surface-muted: var(--rui-light-surface-muted);
     --rui-surface-sunken: var(--rui-light-surface-sunken);
     --rui-link: var(--rui-light-link);
+    --rui-focus: var(--rui-light-primary-main);
     --rui-chart-1: var(--rui-light-chart-1);
     --rui-chart-2: var(--rui-light-chart-2);
     --rui-chart-3: var(--rui-light-chart-3);
@@ -592,6 +593,7 @@
     --rui-surface-muted: var(--rui-light-surface-muted);
     --rui-surface-sunken: var(--rui-light-surface-sunken);
     --rui-link: var(--rui-light-link);
+    --rui-focus: var(--rui-primary-main);
     --rui-chart-1: var(--rui-light-chart-1);
     --rui-chart-2: var(--rui-light-chart-2);
     --rui-chart-3: var(--rui-light-chart-3);
@@ -647,6 +649,7 @@
     --rui-surface-muted: var(--rui-dark-surface-muted);
     --rui-surface-sunken: var(--rui-dark-surface-sunken);
     --rui-link: var(--rui-dark-link);
+    --rui-focus: var(--rui-primary-lighter);
     --rui-chart-1: var(--rui-dark-chart-1);
     --rui-chart-2: var(--rui-dark-chart-2);
     --rui-chart-3: var(--rui-dark-chart-3);
@@ -1088,6 +1091,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 +1168,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 +1979,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 +3128,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 +3160,10 @@
     text-align: right;
   }
 
+  .align-baseline {
+    vertical-align: baseline;
+  }
+
   .align-middle {
     vertical-align: middle;
   }
@@ -3249,6 +3299,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 +3375,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 +3399,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 +3612,10 @@
     text-decoration-line: underline;
   }
 
+  .underline-offset-2 {
+    text-underline-offset: 2px;
+  }
+
   .opacity-0 {
     opacity: 0;
   }
@@ -3556,10 +3624,6 @@
     opacity: .2;
   }
 
-  .opacity-30 {
-    opacity: .3;
-  }
-
   .opacity-50 {
     opacity: .5;
   }
@@ -3568,6 +3632,14 @@
     opacity: .6;
   }
 
+  .opacity-75 {
+    opacity: .75;
+  }
+
+  .opacity-80 {
+    opacity: .8;
+  }
+
   .opacity-100 {
     opacity: 1;
   }
@@ -4091,6 +4163,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 +4211,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;
   }
@@ -4197,8 +4305,8 @@
       color: rgb(var(--rui-neutral-700));
     }
 
-    .group-hover\/sort\:opacity-60:is(:where(.group\/sort):hover *) {
-      opacity: .6;
+    .group-hover\/sort\:opacity-100:is(:where(.group\/sort):hover *) {
+      opacity: 1;
     }
 
     .group-hover\/switch\:bg-rui-neutral-500:is(:where(.group\/switch):hover *) {
@@ -4206,8 +4314,8 @@
     }
   }
 
-  .group-focus-visible\/sort\:opacity-60:is(:where(.group\/sort):focus-visible *) {
-    opacity: .6;
+  .group-focus-visible\/sort\:opacity-100:is(:where(.group\/sort):focus-visible *) {
+    opacity: 1;
   }
 
   .first-letter\:uppercase:first-letter {
@@ -4498,6 +4606,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 {
@@ -4561,7 +4673,7 @@
   }
 
   .focus-visible\:focus-ring:focus-visible {
-    outline: 2px solid rgb(var(--rui-primary-main));
+    outline: 2px solid rgb(var(--rui-focus));
     outline-offset: 2px;
   }
 
@@ -4661,6 +4773,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 +4874,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 +5408,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 +5562,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;
   }
@@ -5484,7 +5738,7 @@
   }
 
   .peer-focus-visible\:\[\&_\[data-id\=slider-thumb\]\]\:focus-ring:is(:where(.peer):focus-visible ~ *) [data-id="slider-thumb"] {
-    outline: 2px solid rgb(var(--rui-primary-main));
+    outline: 2px solid rgb(var(--rui-focus));
     outline-offset: 2px;
   }
 
@@ -5547,7 +5801,7 @@
   }
 
   .peer-focus-visible\:\[\&\>\[data-mark\]\]\:focus-ring:is(:where(.peer):focus-visible ~ *) > [data-mark] {
-    outline: 2px solid rgb(var(--rui-primary-main));
+    outline: 2px solid rgb(var(--rui-focus));
     outline-offset: 2px;
   }
 
@@ -5600,6 +5854,10 @@
     background-color: rgb(var(--rui-primary-main));
   }
 
+  .\[\&\>tr\]\:block > tr {
+    display: block;
+  }
+
   :where(.\[\:where\(\&\)\]\:h-8) {
     height: calc(var(--spacing) * 8);
   }
@@ -5715,6 +5973,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));
   }
@@ -5735,6 +6017,16 @@
     }
   }
 
+  [data-id="row-expanded"] .\[\[data-id\=row-expanded\]_\&\]\:border-rui-neutral-950\/\[0\.16\] {
+    border-color: rgb(var(--rui-neutral-950));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    [data-id="row-expanded"] .\[\[data-id\=row-expanded\]_\&\]\:border-rui-neutral-950\/\[0\.16\] {
+      border-color: color-mix(in oklab, rgb(var(--rui-neutral-950)) 16%, transparent);
+    }
+  }
+
   [data-id="row-expanded"] .\[\[data-id\=row-expanded\]_\&\]\:bg-rui-neutral-950\/\[0\.11\] {
     background-color: rgb(var(--rui-neutral-950));
   }
@@ -5755,6 +6047,10 @@
     }
   }
 
+  [data-id="row-expanded"] .\[\[data-id\=row-expanded\]_\&\]\:bg-clip-padding {
+    background-clip: padding-box;
+  }
+
   @media (hover: hover) {
     [data-id="row-expanded"] .\[\[data-id\=row-expanded\]_\&\]\:hover\:bg-rui-neutral-950\/\[0\.11\]:hover {
       background-color: rgb(var(--rui-neutral-950));
@@ -5767,23 +6063,33 @@
     }
   }
 
-  [data-id="row-expanded"] .dark\:\[\[data-id\=row-expanded\]_\&\]\:bg-white\/\[0\.14\]:is(.dark *, [data-theme="dark"] *) {
-    background-color: #ffffff24;
+  [data-id="row-expanded"] .dark\:\[\[data-id\=row-expanded\]_\&\]\:border-white\/\[0\.12\]:is(.dark *, [data-theme="dark"] *) {
+    border-color: #ffffff1f;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    [data-id="row-expanded"] .dark\:\[\[data-id\=row-expanded\]_\&\]\:bg-white\/\[0\.14\]:is(.dark *, [data-theme="dark"] *) {
-      background-color: color-mix(in oklab, var(--color-white) 14.0%, transparent);
+    [data-id="row-expanded"] .dark\:\[\[data-id\=row-expanded\]_\&\]\:border-white\/\[0\.12\]:is(.dark *, [data-theme="dark"] *) {
+      border-color: color-mix(in oklab, var(--color-white) 12%, transparent);
     }
   }
 
-  [data-id="row-expanded"] .dark\:\[\[data-id\=row-expanded\]_\&\]\:bg-white\/\[0\.16\]:is(.dark *, [data-theme="dark"] *) {
-    background-color: #ffffff29;
+  [data-id="row-expanded"] .dark\:\[\[data-id\=row-expanded\]_\&\]\:bg-white\/\[0\.13\]:is(.dark *, [data-theme="dark"] *) {
+    background-color: #ffffff21;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    [data-id="row-expanded"] .dark\:\[\[data-id\=row-expanded\]_\&\]\:bg-white\/\[0\.16\]:is(.dark *, [data-theme="dark"] *) {
-      background-color: color-mix(in oklab, var(--color-white) 16%, transparent);
+    [data-id="row-expanded"] .dark\:\[\[data-id\=row-expanded\]_\&\]\:bg-white\/\[0\.13\]:is(.dark *, [data-theme="dark"] *) {
+      background-color: color-mix(in oklab, var(--color-white) 13%, transparent);
+    }
+  }
+
+  [data-id="row-expanded"] .dark\:\[\[data-id\=row-expanded\]_\&\]\:bg-white\/\[0\.14\]:is(.dark *, [data-theme="dark"] *) {
+    background-color: #ffffff24;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    [data-id="row-expanded"] .dark\:\[\[data-id\=row-expanded\]_\&\]\:bg-white\/\[0\.14\]:is(.dark *, [data-theme="dark"] *) {
+      background-color: color-mix(in oklab, var(--color-white) 14.0%, transparent);
     }
   }
 

package/dist/styles/colors.css

@@ -187,6 +187,8 @@
   --rui-surface-muted: var(--rui-light-surface-muted);
   --rui-surface-sunken: var(--rui-light-surface-sunken);
   --rui-link: var(--rui-light-link);
+  /* The focus ring: primary in light, its lighter tone in dark, where `main` falls to 3:1 on raised surfaces. */
+  --rui-focus: var(--rui-light-primary-main);
   --rui-chart-1: var(--rui-light-chart-1);
   --rui-chart-2: var(--rui-light-chart-2);
   --rui-chart-3: var(--rui-light-chart-3);
@@ -242,6 +244,7 @@ html.light {
   --rui-surface-muted: var(--rui-light-surface-muted);
   --rui-surface-sunken: var(--rui-light-surface-sunken);
   --rui-link: var(--rui-light-link);
+  --rui-focus: var(--rui-primary-main);
   --rui-chart-1: var(--rui-light-chart-1);
   --rui-chart-2: var(--rui-light-chart-2);
   --rui-chart-3: var(--rui-light-chart-3);
@@ -298,6 +301,7 @@ html.dark {
   --rui-surface-muted: var(--rui-dark-surface-muted);
   --rui-surface-sunken: var(--rui-dark-surface-sunken);
   --rui-link: var(--rui-dark-link);
+  --rui-focus: var(--rui-primary-lighter);
   --rui-chart-1: var(--rui-dark-chart-1);
   --rui-chart-2: var(--rui-dark-chart-2);
   --rui-chart-3: var(--rui-dark-chart-3);

package/dist/theme/theme.css

@@ -327,7 +327,7 @@
 }
 
 @utility focus-ring {
-  outline: 2px solid rgb(var(--rui-primary-main));
+  outline: 2px solid rgb(var(--rui-focus));
   outline-offset: 2px;
 }
 

package/dist/theme.css

@@ -327,7 +327,7 @@
 }
 
 @utility focus-ring {
-  outline: 2px solid rgb(var(--rui-primary-main));
+  outline: 2px solid rgb(var(--rui-focus));
   outline-offset: 2px;
 }
 

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