@scalar/components 0.14.37 → 0.14.40

package/dist/components/ScalarMarkdown/samples/index.d.ts

@@ -1,32 +1,62 @@
-export declare const samples: readonly [{
+export declare const samples: [{
     readonly label: "Document";
+    readonly key: "document";
     readonly value: "\n# One morning, when Gregor Samsa woke from troubled dreams.\nOne morning, when Gregor Samsa woke from troubled dreams, he found himself *transformed* in his bed into a horrible  [vermin](http://en.wikipedia.org/wiki/Vermin \"Wikipedia Vermin\"). He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover **strong** it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, link waved about helplessly as he looked. <cite>“What's happened to me?”</cite> he thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls.\n\n## The bedding was hardly able to cover it.\n\nIt showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer a solid fur muff into which her entire forearm disappeared..\n\n### Things we know about Gregor's sleeping habits.\n\n- He always slept on his right side.\n- He has to get up early (to start another dreadful day).\n- He has a drawer and a alarm clock next to his bed.\n- His mother calls him when he gets up to late.\n\nFirst he wanted to stand up quietly and undisturbed, get dressed, above all have breakfast, and only then consider further action, for (he noticed this clearly) by thinking things over in bed he would not reach a reasonable conclusion. He remembered that he had already often felt a light pain or other in bed, perhaps the result of an awkward lying position, which later turned out to be purely imaginary when he stood up, and he was eager to see how his present fantasies would gradually dissipate. That the change in his voice was nothing other than the onset of a real chill, an occupational illness of commercial travelers, of that he had not the slightest doubt.\n";
 }, {
     readonly label: "Alerts";
+    readonly key: "alerts";
     readonly value: "\n> [!NOTE]  \n> Highlights information that users should take into account, even when skimming.\n\n> [!TIP]\n> Optional information to help a user be more successful.\n\n> [!IMPORTANT]  \n> Crucial information necessary for users to succeed.\n\n> [!WARNING]  \n> Critical content demanding immediate user attention due to potential risks.\n\n> [!CAUTION]\n> Negative potential consequences of an action.\n";
 }, {
     readonly label: "Blockquotes";
+    readonly key: "blockquotes";
     readonly value: "\nNormal Blockquote\n\n> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,\n> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.\n> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.\n>\n> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse\n> id sem consectetuer libero luctus adipiscing.\n\n---\n\nBlockquote with hard wraps and no additional `>`\n\n> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,\nconsectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.\nVestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.\n>\n> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse\nid sem consectetuer libero luctus adipiscing.\n\n---\n\nBlockquote with nested blockquote\n\n> This is the first level of quoting.\n>\n> > This is nested blockquote.\n>\n> Back to the first level.\n\n---\n\nBlockquote with nested markdown content\n\n> ## This is a header.\n>\n> 1.  This is the first list item.\n> 2.  This is the second list item.\n>\n> Here's some example code:\n>\n>     return shell_exec(\"echo $input | $markdown_script\");\n";
 }, {
     readonly label: "Codeblocks";
+    readonly key: "codeblocks";
     readonly value: "\nCodeblock via indent\n\n    tell application \"Foo\"\n        beep\n    end tell\n\n---\n\nCodeblock via backticks\n\n```javascript\nconst message = 'this is a code block'\n\nconsole.log(message)\n```\n\n---\n\nCodeblock with HTML\n\n```html\n<div class=\"footer\">&copy; 2004 Foo Corporation</div>\n```\n\n---\n\nCodeblock with markdown\n\n\n```md\n# Title\n\nI should not be **bold**.\n```\n";
 }, {
     readonly label: "Headers";
+    readonly key: "headers";
     readonly value: "\nATX Headers (Prefixed with `#`'s')\n\n# This is a first level header\n\n## This is a second level header\n\n### This is a third level header\n\n#### This is a fourth level header\n\n##### This is a fifth level header\n\n###### This is a sixth level header\n\n---\n\nATX Headers (Prefixed and suffixed with `#`'s')\n\n# This is a first level header #\n\n## This is a second level header ##\n\n### This is a third level header ###\n\n#### This is a fourth level header ####\n\n##### This is a fifth level header #####\n\n###### This is a sixth level header ######\n\n---\n\nSetext Headers\n\nThis is a first level heading\n=============================\n\nThis is a second level heading\n------------------------------\n";
 }, {
     readonly label: "HTML";
+    readonly key: "html";
     readonly value: "\nSummary / Details\n\n<details>\n  <summary>Using Details Tags</summary>\n  <p>HTML Example</p>\n</details>\n\n---\n\nDescription List\n\n<dl>\n  <dt>Beast of Bodmin</dt>\n  <dd>A large feline inhabiting Bodmin Moor.</dd>\n  <dt>Morgawr</dt>\n  <dd>A sea serpent.</dd>\n  <dt>Owlman</dt>\n  <dd>A giant owl-like creature.</dd>\n</dl>\n";
 }, {
     readonly label: "Inline";
+    readonly key: "inline";
     readonly value: "\nParagraph with inline elements\n\nThis is a demo paragraph with **bold text**, _italic text_, a [link](https://example.com), and some `inline code` to show various Markdown inline elements.\n\n---\n\nLink\n\nThis is [an example](http://example.com/) inline link.\n\nThis [link](http://example.com/ \"Title\") has a title attribute.\n\n---\n\nEmphasis\n\n_single asterisks_\n\n_single underscores_\n\n**double asterisks**\n\n**double underscores**\n\n---\n\nInline Code\n\nUse the `printf()` function.\n\n---\n\nEmoji\n\n:sparkles:\n";
 }, {
-    readonly label: "Lists";
-    readonly value: "\nUnordered list\n\n- Red\n- Green\n- Blue\n\n---\n\nUnordered list with mixed symbols\n\n- Red\n+ Green\n* Blue\n\n---\n\nOrdered list\n\n1.  Bird\n1.  McHale\n1.  Parish\n\n---\n\nOrdered list with mixed numbers\n\n1.  Bird\n3.  McHale\n2.  Parish\n\n---\n\nEscaped ordered list\n\n1994. Was a good year\n\n---\nList with blockquote\n\n*   A list item with a blockquote:\n\n    > This is a blockquote\n    > inside a list item.\n\n---\n\nList with codeblock\n\n*   A list item with a code block:\n\n        <code goes here>\n\n---\n\nNested unordered lists \n\n* A\n  * A1\n  * A2\n* B\n* C\n\n---\n\nNested mixed lists \n\n* Item\n* Item\n  1. One\n  1. Two\n    * Item\n    * Item\n  1. Three\n  1. Four\n\n---\n\nTask list\n\n- [x] Write the press release\n- [ ] Update the website\n- [ ] Contact the media\n";
+    readonly label: "Unordered Lists";
+    readonly key: "lists-unordered";
+    readonly value: "\nUnordered list\n\n- Red\n- Green\n- Blue\n\n---\n\nUnordered list with mixed symbols\n\n- Red\n+ Green\n* Blue\n\n---\n\nNested unordered lists \n\n- Level 1\n- Level 1\n  - Level 2\n  - Level 2\n    - Level 3\n    - Level 3\n      - Level 4\n      - Level 4\n        - Level 5\n        - Level 5\n          - Level 6\n          - Level 6\n            - Level 7\n            - Level 7\n              - Level 8\n              - Level 8\n  - Level 2\n  - Level 2\n\n---\n\nList with inline elements\n\n- This is a [link](https://scalar.com) and a bunch more content forcing the line to wrap to the next line. This is some **bold text** and some *italic text* and some more text to make sure it wraps.\n- This is some `inline code` and a math formula: (E = mc^2)\n";
+}, {
+    readonly label: "Ordered Lists";
+    readonly key: "lists-ordered";
+    readonly value: "\nOrdered list\n\n1.  Bird\n1.  McHale\n1.  Parish\n\n---\n\nOrdered list with mixed numbers\n\n1.  Bird\n3.  McHale\n2.  Parish\n\n---\n\nNested ordered lists \n\n1. Level 1\n1. Level 1\n  1. Level 2\n  1. Level 2\n    1. Level 3\n    1. Level 3\n      1. Level 4\n      1. Level 4\n        1. Level 5\n        1. Level 5\n          1. Level 6\n          1. Level 6\n            1. Level 7\n            1. Level 7\n              1. Level 8\n              1. Level 8\n  1. Level 2\n  1. Level 2\n\n---\n\nList with inline elements\n\n1.  This is a [link](https://scalar.com) and a bunch more content forcing the line to wrap to the next line. This is some **bold text** and some *italic text* and some more text to make sure it wraps.\n2.  This is some `inline code` and a math formula: (E = mc^2)\n";
+}, {
+    readonly label: "Task Lists";
+    readonly key: "lists-task";
+    readonly value: "\nTask list\n\n- [x] Write the press release\n- [ ] Update the website\n- [ ] Contact the media\n\n---\n\nTask list with nested lists\n\n- [x] Write the press release\n  - [x] Draft the content\n  - [x] Review with the team\n- [ ] Update the website\n  - Unordered sublist item\n  - Another sublist item\n- [ ] Update the website\n  1. Ordered sublist item\n  2. Another sublist item\n- [ ] Contact the media\n\n---\n\nTask Lists with inline elements\n\n- [x] This is a [link](https://scalar.com) and a bunch more content forcing the line to wrap to the next line. This is some **bold text** and some *italic text* and some more text to make sure it wraps.\n- [ ] This is some `inline code` and a math formula: (E = mc^2)\n";
+}, {
+    readonly label: "Mixed Lists";
+    readonly key: "lists-mixed";
+    readonly value: "\nNested mixed lists \n\n* ul level 1\n* ul level 1\n  1. ol level 2\n  1. ol level 2\n    * ul level 3\n    * ul level 3\n  1. ol level 2\n  1. ol level 2\n\n---\n\nWith task lists\n\n- Unordered item\n- [x] Completed task\n- [ ] Incomplete task\n  1. Ordered item\n  2. Ordered item\n    - [x] Completed sub-task\n    - [ ] Incomplete sub-Task\n";
+}, {
+    readonly label: "List Interactions";
+    readonly key: "lists-interactions";
+    readonly value: "\n\nList with blockquote\n\n*   A list item with a blockquote:\n\n    > This is a blockquote\n    > inside a list item.\n\n---\n\nList with codeblock\n\n*   A list item with a code block:\n\n        <code goes here>\n";
+}, {
+    readonly label: "List Edge Cases";
+    readonly key: "lists-edge-cases";
+    readonly value: "\nEscaped ordered list\n\n1994. Was a good year (this should not be a list item)\n";
 }, {
     readonly label: "Paragraphs";
+    readonly key: "paragraphs";
     readonly value: "\nA paragraph is simply one or more consecutive lines of text, separated\nby one or more blank lines. (A blank line is any line that looks like a\nblank line -- a line containing nothing but spaces or tabs is considered\nblank.) Normal paragraphs should not be indented with spaces or tabs.\n\n---\n\nLine with a soft break\n...following line.\n\nLine with a hard break  \n...following line.\n\n--- \n\nLine with several blank lines after...\n\n\n\n...following paragraph.\n";
 }, {
     readonly label: "Tables";
-    readonly value: "\nBasic Table\n\n| Syntax      | Description |\n| ----------- | ----------- |\n| Header      | Title       |\n| Paragraph   | Text        |\n\n\n---\n\nTable with alignment\n\n| Syntax      | Description | Test Text     |\n| :---        |    :----:   |          ---: |\n| Header      | Title       | Here's this   |\n| Paragraph   | Text        | And more      |\n";
+    readonly key: "tables";
+    readonly value: "\nBasic Table\n\n| Syntax                                            | Description |\n| ------------------------------------------------- | ----------- |\n| Header                                            | Title       |\n| Paragraph                                         | Text        |\n| Superlongtextinasinglecolumnshouldwrapatsomepoint | Text        |\n\n\n---\n\nTable with alignment\n\n| Syntax      | Description | Test Text     |\n| :---        |    :----:   |          ---: |\n| Header      | Title       | Here's this   |\n| Paragraph   | Text        | And more      |\n";
 }];
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ScalarMarkdown/samples/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ScalarMarkdown/samples/index.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBV,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ScalarMarkdown/samples/index.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BgD,CAAA"}

package/dist/components/ScalarMarkdown/samples/lists-edge.d.ts

@@ -0,0 +1,4 @@
+/** List edge cases */
+declare const _default: "\nEscaped ordered list\n\n1994. Was a good year (this should not be a list item)\n";
+export default _default;
+//# sourceMappingURL=lists-edge.d.ts.map

package/dist/components/ScalarMarkdown/samples/lists-edge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lists-edge.d.ts","sourceRoot":"","sources":["../../../../src/components/ScalarMarkdown/samples/lists-edge.ts"],"names":[],"mappings":"AAAA,sBAAsB;;AACtB,wBAIC"}

package/dist/components/ScalarMarkdown/samples/lists-interactions.d.ts

@@ -0,0 +1,3 @@
+declare const _default: "\n\nList with blockquote\n\n*   A list item with a blockquote:\n\n    > This is a blockquote\n    > inside a list item.\n\n---\n\nList with codeblock\n\n*   A list item with a code block:\n\n        <code goes here>\n";
+export default _default;
+//# sourceMappingURL=lists-interactions.d.ts.map

package/dist/components/ScalarMarkdown/samples/lists-interactions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lists-interactions.d.ts","sourceRoot":"","sources":["../../../../src/components/ScalarMarkdown/samples/lists-interactions.ts"],"names":[],"mappings":";AAAA,wBAgBC"}

package/dist/components/ScalarMarkdown/samples/lists-mixed.d.ts

@@ -0,0 +1,3 @@
+declare const _default: "\nNested mixed lists \n\n* ul level 1\n* ul level 1\n  1. ol level 2\n  1. ol level 2\n    * ul level 3\n    * ul level 3\n  1. ol level 2\n  1. ol level 2\n\n---\n\nWith task lists\n\n- Unordered item\n- [x] Completed task\n- [ ] Incomplete task\n  1. Ordered item\n  2. Ordered item\n    - [x] Completed sub-task\n    - [ ] Incomplete sub-Task\n";
+export default _default;
+//# sourceMappingURL=lists-mixed.d.ts.map

package/dist/components/ScalarMarkdown/samples/lists-mixed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lists-mixed.d.ts","sourceRoot":"","sources":["../../../../src/components/ScalarMarkdown/samples/lists-mixed.ts"],"names":[],"mappings":";AAAA,wBAuBC"}

package/dist/components/ScalarMarkdown/samples/lists-ordered.d.ts

@@ -0,0 +1,3 @@
+declare const _default: "\nOrdered list\n\n1.  Bird\n1.  McHale\n1.  Parish\n\n---\n\nOrdered list with mixed numbers\n\n1.  Bird\n3.  McHale\n2.  Parish\n\n---\n\nNested ordered lists \n\n1. Level 1\n1. Level 1\n  1. Level 2\n  1. Level 2\n    1. Level 3\n    1. Level 3\n      1. Level 4\n      1. Level 4\n        1. Level 5\n        1. Level 5\n          1. Level 6\n          1. Level 6\n            1. Level 7\n            1. Level 7\n              1. Level 8\n              1. Level 8\n  1. Level 2\n  1. Level 2\n\n---\n\nList with inline elements\n\n1.  This is a [link](https://scalar.com) and a bunch more content forcing the line to wrap to the next line. This is some **bold text** and some *italic text* and some more text to make sure it wraps.\n2.  This is some `inline code` and a math formula: (E = mc^2)\n";
+export default _default;
+//# sourceMappingURL=lists-ordered.d.ts.map

package/dist/components/ScalarMarkdown/samples/lists-ordered.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lists-ordered.d.ts","sourceRoot":"","sources":["../../../../src/components/ScalarMarkdown/samples/lists-ordered.ts"],"names":[],"mappings":";AAAA,wBA4CC"}

package/dist/components/ScalarMarkdown/samples/lists-tasks.d.ts

@@ -0,0 +1,3 @@
+declare const _default: "\nTask list\n\n- [x] Write the press release\n- [ ] Update the website\n- [ ] Contact the media\n\n---\n\nTask list with nested lists\n\n- [x] Write the press release\n  - [x] Draft the content\n  - [x] Review with the team\n- [ ] Update the website\n  - Unordered sublist item\n  - Another sublist item\n- [ ] Update the website\n  1. Ordered sublist item\n  2. Another sublist item\n- [ ] Contact the media\n\n---\n\nTask Lists with inline elements\n\n- [x] This is a [link](https://scalar.com) and a bunch more content forcing the line to wrap to the next line. This is some **bold text** and some *italic text* and some more text to make sure it wraps.\n- [ ] This is some `inline code` and a math formula: (E = mc^2)\n";
+export default _default;
+//# sourceMappingURL=lists-tasks.d.ts.map

package/dist/components/ScalarMarkdown/samples/lists-tasks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lists-tasks.d.ts","sourceRoot":"","sources":["../../../../src/components/ScalarMarkdown/samples/lists-tasks.ts"],"names":[],"mappings":";AAAA,wBA4BC"}

package/dist/components/ScalarMarkdown/samples/lists-unordered.d.ts

@@ -0,0 +1,3 @@
+declare const _default: "\nUnordered list\n\n- Red\n- Green\n- Blue\n\n---\n\nUnordered list with mixed symbols\n\n- Red\n+ Green\n* Blue\n\n---\n\nNested unordered lists \n\n- Level 1\n- Level 1\n  - Level 2\n  - Level 2\n    - Level 3\n    - Level 3\n      - Level 4\n      - Level 4\n        - Level 5\n        - Level 5\n          - Level 6\n          - Level 6\n            - Level 7\n            - Level 7\n              - Level 8\n              - Level 8\n  - Level 2\n  - Level 2\n\n---\n\nList with inline elements\n\n- This is a [link](https://scalar.com) and a bunch more content forcing the line to wrap to the next line. This is some **bold text** and some *italic text* and some more text to make sure it wraps.\n- This is some `inline code` and a math formula: (E = mc^2)\n";
+export default _default;
+//# sourceMappingURL=lists-unordered.d.ts.map

package/dist/components/ScalarMarkdown/samples/lists-unordered.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lists-unordered.d.ts","sourceRoot":"","sources":["../../../../src/components/ScalarMarkdown/samples/lists-unordered.ts"],"names":[],"mappings":";AAAA,wBA4CC"}

package/dist/components/ScalarMarkdown/samples/tables.d.ts

@@ -1,3 +1,3 @@
-declare const _default: "\nBasic Table\n\n| Syntax      | Description |\n| ----------- | ----------- |\n| Header      | Title       |\n| Paragraph   | Text        |\n\n\n---\n\nTable with alignment\n\n| Syntax      | Description | Test Text     |\n| :---        |    :----:   |          ---: |\n| Header      | Title       | Here's this   |\n| Paragraph   | Text        | And more      |\n";
+declare const _default: "\nBasic Table\n\n| Syntax                                            | Description |\n| ------------------------------------------------- | ----------- |\n| Header                                            | Title       |\n| Paragraph                                         | Text        |\n| Superlongtextinasinglecolumnshouldwrapatsomepoint | Text        |\n\n\n---\n\nTable with alignment\n\n| Syntax      | Description | Test Text     |\n| :---        |    :----:   |          ---: |\n| Header      | Title       | Here's this   |\n| Paragraph   | Text        | And more      |\n";
 export default _default;
 //# sourceMappingURL=tables.d.ts.map

package/dist/components/ScalarMarkdown/samples/tables.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tables.d.ts","sourceRoot":"","sources":["../../../../src/components/ScalarMarkdown/samples/tables.ts"],"names":[],"mappings":";AAAA,wBAiBC"}
+{"version":3,"file":"tables.d.ts","sourceRoot":"","sources":["../../../../src/components/ScalarMarkdown/samples/tables.ts"],"names":[],"mappings":";AAAA,wBAkBC"}

package/dist/components/ScalarTextArea/ScalarTextArea.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarTextArea.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextArea/ScalarTextArea.vue"],"names":[],"mappings":"AAsDA;;;;;;;GAOG;;iBAuBU,MAAM;;;;iBAAN,MAAM;;;;AAtBnB,wBA0FC"}
+{"version":3,"file":"ScalarTextArea.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextArea/ScalarTextArea.vue"],"names":[],"mappings":"AAuDA;;;;;;;GAOG;;iBAuBU,MAAM;;;;iBAAN,MAAM;;;;AAtBnB,wBAwGC"}

package/dist/components/ScalarTextArea/ScalarTextArea.vue.js

@@ -1,8 +1,9 @@
-import { defineComponent as a, useModel as m, onMounted as d, createElementBlock as f, openBlock as c, mergeProps as l, unref as n, withDirectives as p, createElementVNode as x, vModelText as v } from "vue";
-import { useBindCx as b } from "@scalar/use-hooks/useBindCx";
-import { useTextareaAutosize as _ } from "@vueuse/core";
-const g = {}, A = /* @__PURE__ */ a({
-  ...g,
+import { defineComponent as u, useModel as m, onMounted as f, createBlock as d, openBlock as c, unref as t, mergeProps as l, withCtx as p, withDirectives as x, createElementVNode as _, vModelText as v } from "vue";
+import { useBindCx as h } from "@scalar/use-hooks/useBindCx";
+import { useTextareaAutosize as k } from "@vueuse/core";
+import C from "../ScalarForm/ScalarFormInput.vue.js";
+const V = {}, T = /* @__PURE__ */ u({
+  ...V,
   inheritAttrs: !1,
   __name: "ScalarTextArea",
   props: {
@@ -10,32 +11,30 @@ const g = {}, A = /* @__PURE__ */ a({
     modelModifiers: {}
   },
   emits: ["update:modelValue"],
-  setup(u) {
-    const t = m(u, "modelValue"), { textarea: o } = _({
+  setup(a) {
+    const o = m(a, "modelValue"), { textarea: r } = k({
       // @ts-expect-error - unexpected type mismatch
-      input: t,
+      input: o,
       styleProp: "minHeight"
-    }), { classCx: i, otherAttrs: r } = b();
-    return d(() => {
-      "autofocus" in r.value && o.value?.focus();
-    }), (h, e) => (c(), f("div", l(
-      n(i)(
-        "bg-b-1.5 custom-scroll flex min-h-0 shrink cursor-text items-center gap-0.75 rounded-md border px-3 py-2.5 outline-offset-[-1px] focus-within:bg-b-1 has-[input:focus-visible]:outline"
-      ),
-      {
-        onClick: e[1] || (e[1] = (s) => n(o)?.focus())
-      }
-    ), [
-      p(x("textarea", l({
-        ref_key: "textarea",
-        ref: o,
-        "onUpdate:modelValue": e[0] || (e[0] = (s) => t.value = s)
-      }, n(r), { class: "w-full resize-none border-none bg-transparent text-sm focus-within:outline-none" }), null, 16), [
-        [v, t.value]
-      ])
-    ], 16));
+    }), { classCx: i, otherAttrs: n } = h();
+    return f(() => {
+      "autofocus" in n.value && r.value?.focus();
+    }), (w, e) => (c(), d(t(C), l({ is: "div" }, t(i)("custom-scroll flex text-c-1 min-h-0 shrink cursor-text"), {
+      onClick: e[1] || (e[1] = (s) => t(r)?.focus())
+    }), {
+      default: p(() => [
+        x(_("textarea", l({
+          ref_key: "textarea",
+          ref: r,
+          "onUpdate:modelValue": e[0] || (e[0] = (s) => o.value = s)
+        }, t(n), { class: "w-full resize-none border-none bg-transparent text-sm focus-within:outline-none" }), null, 16), [
+          [v, o.value]
+        ])
+      ]),
+      _: 1
+    }, 16));
   }
 });
 export {
-  A as default
+  T as default
 };

package/dist/components/ScalarTextInput/ScalarTextInput.vue.d.ts

@@ -7,10 +7,14 @@
  *   <ScalarTextInput v-model="model" />
  */
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    readonly?: boolean;
+} & {
     modelValue?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<{
+    readonly?: boolean;
+} & {
     modelValue?: string;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;

package/dist/components/ScalarTextInput/ScalarTextInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarTextInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextInput/ScalarTextInput.vue"],"names":[],"mappings":"AAuEA;;;;;;;GAOG;;iBAmBU,MAAM;;;;iBAAN,MAAM;;;;aA0FN,CAAC,KAAK,IAAgB,KAAK,GAAG;;aAC9B,CAAC,KAAK,IAAgB,KAAK,GAAG;;aAC9B,CAAC,KAAK,IAAgB,KAAK,GAAG;;YAC/B,CAAC,KAAK,IAAgB,KAAK,GAAG;;AA/G1C,wBAkJC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarTextInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTextInput/ScalarTextInput.vue"],"names":[],"mappings":"AAwFA;;;;;;;GAOG;;eAGU,OAAO;;iBA6BP,MAAM;;;;eA7BN,OAAO;;iBA6BP,MAAM;;;;aA2GN,CAAC,KAAK,IAAiB,KAAK,GAAG;;aAC/B,CAAC,KAAK,IAAiB,KAAK,GAAG;;aAC/B,CAAC,KAAK,IAAiB,KAAK,GAAG;;YAChC,CAAC,KAAK,IAAiB,KAAK,GAAG;;AA7I3C,wBAkLC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarTextInput/ScalarTextInput.vue.js

@@ -1,64 +1,73 @@
-import { defineComponent as x, useModel as h, ref as v, onMounted as $, createElementBlock as t, openBlock as s, mergeProps as d, unref as f, createElementVNode as a, renderSlot as n, createCommentVNode as l, withDirectives as b, vModelDynamic as w, toDisplayString as _ } from "vue";
-import { useBindCx as k } from "@scalar/use-hooks/useBindCx";
-const y = { class: "flex flex-1 relative" }, g = {
+import { defineComponent as y, mergeModels as v, useModel as x, ref as _, onMounted as $, createBlock as k, openBlock as t, unref as r, mergeProps as c, withCtx as w, createElementVNode as i, renderSlot as o, createElementBlock as n, createCommentVNode as l, withDirectives as C, vModelDynamic as V, toDisplayString as b } from "vue";
+import { useBindCx as g } from "@scalar/use-hooks/useBindCx";
+import B from "../ScalarForm/ScalarFormInput.vue.js";
+const M = { class: "flex flex-1 relative" }, D = {
   key: 0,
   class: "select-none whitespace-nowrap text-sm text-transparent"
-}, V = {
+}, S = ["readonly", "aria-readonly"], A = {
   key: 1,
   class: "absolute inset-0 select-none overflow-hidden whitespace-nowrap text-sm"
-}, C = {
+}, E = {
   key: 0,
   class: "text-c-2"
-}, M = { class: "text-transparent" }, B = {
+}, N = { class: "text-transparent" }, z = {
   key: 1,
   class: "text-c-2"
-}, D = {}, E = /* @__PURE__ */ x({
-  ...D,
+}, I = {}, j = /* @__PURE__ */ y({
+  ...I,
   inheritAttrs: !1,
   __name: "ScalarTextInput",
-  props: {
+  props: /* @__PURE__ */ v({
+    readonly: { type: Boolean }
+  }, {
     modelValue: {},
     modelModifiers: {}
-  },
+  }),
   emits: ["update:modelValue"],
-  setup(c) {
-    const r = h(c, "modelValue"), i = v(), { classCx: m, otherAttrs: u } = k();
-    return $(() => {
-      "autofocus" in u.value && i.value?.focus();
-    }), (e, o) => (s(), t("div", d(
-      f(m)(
-        "bg-b-1.5 flex cursor-text items-center gap-0.75 rounded-md border px-3 py-2.5 outline-offset-[-1px] focus-within:bg-b-1 has-[input:focus-visible]:outline"
-      ),
-      {
-        onClick: o[1] || (o[1] = (p) => i.value?.focus())
-      }
-    ), [
-      a("div", y, [
-        e.$slots.prefix ? (s(), t("span", g, [
-          n(e.$slots, "prefix")
-        ])) : l("", !0),
-        b(a("input", d({
-          ref_key: "input",
-          ref: i,
-          "onUpdate:modelValue": o[0] || (o[0] = (p) => r.value = p),
-          class: "z-1 min-w-0 flex-1 border-none bg-transparent text-sm placeholder:font-[inherit] focus-within:outline-none"
-        }, f(u)), null, 16), [
-          [w, r.value]
-        ]),
-        e.$slots.prefix || e.$slots.suffix ? (s(), t("div", V, [
-          e.$slots.prefix ? (s(), t("span", C, [
-            n(e.$slots, "prefix")
+  setup(d) {
+    const a = x(d, "modelValue"), s = _(), { classCx: p, otherAttrs: u } = g();
+    $(() => {
+      "autofocus" in u.value && s.value?.focus();
+    });
+    function m() {
+      d.readonly ? s.value?.select() : s.value?.focus();
+    }
+    return (e, f) => (t(), k(r(B), c(
+      { is: "div" },
+      r(p)("cursor-text text-c-1", e.readonly ? "" : "focus-within:bg-b-1"),
+      { onClick: m }
+    ), {
+      default: w(() => [
+        i("div", M, [
+          e.$slots.prefix ? (t(), n("span", D, [
+            o(e.$slots, "prefix")
           ])) : l("", !0),
-          a("span", M, _(r.value || e.$attrs.placeholder), 1),
-          e.$slots.suffix ? (s(), t("span", B, [
-            n(e.$slots, "suffix")
+          C(i("input", c({
+            ref_key: "input",
+            ref: s,
+            "onUpdate:modelValue": f[0] || (f[0] = (h) => a.value = h),
+            readonly: e.readonly,
+            "aria-readonly": e.readonly || void 0,
+            class: "z-1 min-w-0 flex-1 border-none bg-transparent text-sm placeholder:font-[inherit] focus-within:outline-none"
+          }, r(u)), null, 16, S), [
+            [V, a.value]
+          ]),
+          e.$slots.prefix || e.$slots.suffix ? (t(), n("div", A, [
+            e.$slots.prefix ? (t(), n("span", E, [
+              o(e.$slots, "prefix")
+            ])) : l("", !0),
+            i("span", N, b(a.value || e.$attrs.placeholder), 1),
+            e.$slots.suffix ? (t(), n("span", z, [
+              o(e.$slots, "suffix")
+            ])) : l("", !0)
           ])) : l("", !0)
-        ])) : l("", !0)
+        ]),
+        o(e.$slots, "aside")
       ]),
-      n(e.$slots, "aside")
-    ], 16));
+      _: 3
+    }, 16));
   }
 });
 export {
-  E as default
+  j as default
 };

package/dist/components/ScalarToggle/ScalarToggle.vue.d.ts

@@ -1,11 +1,13 @@
 type __VLS_Props = {
-    modelValue?: boolean;
     disabled?: boolean;
     label?: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/ScalarToggle/ScalarToggle.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarToggle.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarToggle/ScalarToggle.vue"],"names":[],"mappings":"AAkDA,KAAK,WAAW,GAAG;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;;;;;;AAuFF,wBAOG"}
+{"version":3,"file":"ScalarToggle.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarToggle/ScalarToggle.vue"],"names":[],"mappings":"AA+CA,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AAyBF,KAAK,iBAAiB,GAAG,WAAW,GAAG;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;;;;;;AAmEF,wBAOG"}

package/dist/components/ScalarToggle/ScalarToggle.vue.js

@@ -1,43 +1,45 @@
-import { defineComponent as u, createElementBlock as t, openBlock as l, normalizeClass as o, unref as n, createElementVNode as m, createCommentVNode as p, toDisplayString as b } from "vue";
-import { cva as f, cx as h } from "@scalar/use-hooks/useBindCx";
-const V = ["aria-checked", "aria-disabled"], g = {
+import { defineComponent as c, mergeModels as u, useModel as m, createElementBlock as t, openBlock as o, normalizeClass as n, unref as r, createElementVNode as b, createCommentVNode as p, toDisplayString as f } from "vue";
+import { cva as h, cx as v } from "@scalar/use-hooks/useBindCx";
+const g = ["aria-checked", "aria-disabled"], k = {
   key: 0,
   class: "sr-only"
-}, w = /* @__PURE__ */ u({
+}, x = /* @__PURE__ */ c({
   __name: "ScalarToggle",
-  props: {
-    modelValue: { type: Boolean },
+  props: /* @__PURE__ */ u({
     disabled: { type: Boolean },
     label: {}
-  },
+  }, {
+    modelValue: { type: Boolean, default: !1 },
+    modelModifiers: {}
+  }),
   emits: ["update:modelValue"],
-  setup(r, { emit: s }) {
-    const a = r, d = s;
-    function i() {
-      a.disabled || d("update:modelValue", !a.modelValue);
+  setup(l) {
+    const s = l, e = m(l, "modelValue");
+    function d() {
+      s.disabled || (e.value = !e.value);
     }
-    const c = f({
+    const i = h({
       base: "relative h-3.5 min-w-6 w-6 cursor-pointer rounded-full bg-b-3 transition-colors duration-300",
       variants: {
         checked: { true: "bg-c-accent" },
         disabled: { true: "cursor-not-allowed opacity-40" }
       }
     });
-    return (e, k) => (l(), t("button", {
-      "aria-checked": e.modelValue,
-      "aria-disabled": e.disabled,
-      class: o(n(h)(n(c)({ checked: e.modelValue, disabled: e.disabled }))),
+    return (a, y) => (o(), t("button", {
+      "aria-checked": e.value,
+      "aria-disabled": a.disabled,
+      class: n(r(v)(r(i)({ checked: e.value, disabled: a.disabled }))),
       role: "switch",
       type: "button",
-      onClick: i
+      onClick: d
     }, [
-      m("div", {
-        class: o(["absolute left-px top-px flex h-3 w-3 items-center justify-center rounded-full bg-b-1 text-c-accent transition-transform duration-300", { "translate-x-2.5": e.modelValue }])
+      b("div", {
+        class: n(["absolute left-px top-px flex h-3 w-3 items-center justify-center rounded-full bg-b-1 text-c-accent transition-transform duration-300", { "translate-x-2.5": e.value }])
       }, null, 2),
-      e.label ? (l(), t("span", g, b(e.label), 1)) : p("", !0)
-    ], 10, V));
+      a.label ? (o(), t("span", k, f(a.label), 1)) : p("", !0)
+    ], 10, g));
   }
 });
 export {
-  w as default
+  x as default
 };

package/dist/components/ScalarToggle/ScalarToggleGroup.vue.d.ts

@@ -0,0 +1,21 @@
+import type { ScalarCheckboxOption } from '../ScalarCheckboxInput';
+/**
+ * Scalar Toggle Group component
+ *
+ * A group of toggle inputs allowing for multiple selections.
+ */
+declare const _default: import("vue").DefineComponent<{
+    options?: ScalarCheckboxOption[];
+} & {
+    modelValue?: ScalarCheckboxOption[];
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: ScalarCheckboxOption[]) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    options?: ScalarCheckboxOption[];
+} & {
+    modelValue?: ScalarCheckboxOption[];
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: ScalarCheckboxOption[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=ScalarToggleGroup.vue.d.ts.map

package/dist/components/ScalarToggle/ScalarToggleGroup.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarToggleGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarToggle/ScalarToggleGroup.vue"],"names":[],"mappings":"AAqCA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAKlE;;;;GAIG;;cAGS,oBAAoB,EAAE;;iBAYrB,oBAAoB,EAAE;;;;cAZvB,oBAAoB,EAAE;;iBAYrB,oBAAoB,EAAE;;;;AAdnC,wBA8FC"}

package/dist/components/ScalarToggle/ScalarToggleGroup.vue.js

@@ -0,0 +1,35 @@
+import { defineComponent as n, mergeModels as s, useModel as f, createBlock as o, openBlock as t, unref as c, withCtx as u, createElementBlock as _, Fragment as i, renderList as p, createTextVNode as V, toDisplayString as v } from "vue";
+import g from "./ScalarToggleInput.vue.js";
+import k from "../ScalarForm/ScalarFormInputGroup.vue.js";
+const x = {}, C = /* @__PURE__ */ n({
+  ...x,
+  __name: "ScalarToggleGroup",
+  props: /* @__PURE__ */ s({
+    options: { default: () => [] }
+  }, {
+    modelValue: { default: [] },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(r) {
+    const l = f(r, "modelValue");
+    return (m, B) => (t(), o(c(k), null, {
+      default: u(() => [
+        (t(!0), _(i, null, p(m.options, (e) => (t(), o(g, {
+          modelValue: l.value?.some(({ value: a }) => a === e.value),
+          "onUpdate:modelValue": (a) => l.value = a ? [...l.value, e] : l.value.filter(({ value: d }) => d !== e.value),
+          key: e.value
+        }, {
+          default: u(() => [
+            V(v(e.label), 1)
+          ]),
+          _: 2
+        }, 1032, ["modelValue", "onUpdate:modelValue"]))), 128))
+      ]),
+      _: 1
+    }));
+  }
+});
+export {
+  C as default
+};

package/dist/components/ScalarToggle/ScalarToggleGroup.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ScalarToggleGroup.vue.js";
+export {
+  f as default
+};

package/dist/components/ScalarToggle/ScalarToggleInput.vue.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Scalar Toggle Input component
+ *
+ * A create a toggle input component for use in forms.
+ *
+ * @example
+ *  <ScalarToggleInput v-model="model" type="checkbox">
+ *    Label
+ *  </ScalarToggleInput>
+ */
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    modelValue?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    modelValue?: boolean;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=ScalarToggleInput.vue.d.ts.map

package/dist/components/ScalarToggle/ScalarToggleInput.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarToggleInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarToggle/ScalarToggleInput.vue"],"names":[],"mappings":"AA6CA;;;;;;;;;GASG;;iBAYU,OAAO;;;;iBAAP,OAAO;;;;cAsDN,CAAC,KAAK,IAAgB,KAAK,GAAG;;AAjE5C,wBAoGC;AAOD,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarToggle/ScalarToggleInput.vue.js

@@ -0,0 +1,36 @@
+import { defineComponent as u, useModel as d, createBlock as i, openBlock as c, unref as t, mergeProps as l, withCtx as f, createElementVNode as p, createVNode as _, renderSlot as V } from "vue";
+import { useBindCx as x } from "@scalar/use-hooks/useBindCx";
+import g from "./ScalarToggle.vue.js";
+import h from "../ScalarForm/ScalarFormInput.vue.js";
+const v = { class: "flex-1 text-left min-w-0 truncate" }, B = {}, w = /* @__PURE__ */ u({
+  ...B,
+  inheritAttrs: !1,
+  __name: "ScalarToggleInput",
+  props: {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(r) {
+    const e = d(r, "modelValue"), { classCx: a, otherAttrs: s } = x();
+    return (n, o) => (c(), i(t(h), l(
+      { is: "label" },
+      t(a)("cursor-pointer gap-2 hover:bg-b-2", { "text-c-1": e.value })
+    ), {
+      default: f(() => [
+        p("div", v, [
+          V(n.$slots, "default")
+        ]),
+        _(g, l({
+          modelValue: e.value,
+          "onUpdate:modelValue": o[0] || (o[0] = (m) => e.value = m),
+          class: "shrink-0"
+        }, t(s)), null, 16, ["modelValue"])
+      ]),
+      _: 3
+    }, 16));
+  }
+});
+export {
+  w as default
+};

package/dist/components/ScalarToggle/ScalarToggleInput.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ScalarToggleInput.vue.js";
+export {
+  f as default
+};