@scalar/components 0.27.2 → 0.27.4

package/dist/components/ScalarCodeBlock/constants.d.ts

@@ -28,6 +28,7 @@ export declare const LANGUAGE_LABELS: {
     readonly makefile: "Makefile";
     readonly markdown: "Markdown";
     readonly matlab: "MATLAB";
+    readonly mojo: "Mojo";
     readonly nginx: "Nginx";
     readonly objectivec: "Objective-C";
     readonly ocaml: "OCaml";

package/dist/components/ScalarCodeBlock/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCodeBlock/constants.ts"],"names":[],"mappings":"AAEA,wCAAwC;AACxC,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkD4B,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCodeBlock/constants.ts"],"names":[],"mappings":"AAEA,wCAAwC;AACxC,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmD4B,CAAA"}

package/dist/components/ScalarCodeBlock/constants.js

@@ -29,6 +29,7 @@ var LANGUAGE_LABELS = {
 	makefile: "Makefile",
 	markdown: "Markdown",
 	matlab: "MATLAB",
+	mojo: "Mojo",
 	nginx: "Nginx",
 	objectivec: "Objective-C",
 	ocaml: "OCaml",

package/dist/components/ScalarCodeBlock/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":[],"sources":["../../../src/components/ScalarCodeBlock/constants.ts"],"sourcesContent":["import type { StandardLanguageKey } from './types'\n\n/** Labels for the standard languages */\nexport const LANGUAGE_LABELS = {\n  bash: 'Bash',\n  c: 'C',\n  clojure: 'Clojure',\n  cpp: 'C++',\n  csharp: 'C#',\n  css: 'CSS',\n  curl: 'cURL',\n  dart: 'Dart',\n  diff: 'Diff',\n  docker: 'Docker',\n  dockerfile: 'Dockerfile',\n  elixir: 'Elixir',\n  fsharp: 'F#',\n  go: 'Go',\n  graphql: 'GraphQL',\n  haskell: 'Haskell',\n  html: 'HTML',\n  http: 'HTTP',\n  ini: 'INI',\n  java: 'Java',\n  javascript: 'JavaScript',\n  json: 'JSON',\n  kotlin: 'Kotlin',\n  less: 'Less',\n  lua: 'Lua',\n  makefile: 'Makefile',\n  markdown: 'Markdown',\n  matlab: 'MATLAB',\n  nginx: 'Nginx',\n  objectivec: 'Objective-C',\n  ocaml: 'OCaml',\n  perl: 'Perl',\n  php: 'PHP',\n  plaintext: 'Plain Text',\n  powershell: 'PowerShell',\n  properties: 'Properties',\n  python: 'Python',\n  r: 'R',\n  ruby: 'Ruby',\n  rust: 'Rust',\n  scala: 'Scala',\n  scss: 'SCSS',\n  shell: 'Shell',\n  sql: 'SQL',\n  swift: 'Swift',\n  toml: 'TOML',\n  typescript: 'TypeScript',\n  xml: 'XML',\n  yaml: 'YAML',\n} as const satisfies Record<StandardLanguageKey, string>\n"],"mappings":";;AAGA,IAAa,kBAAkB;CAC7B,MAAM;CACN,GAAG;CACH,SAAS;CACT,KAAK;CACL,QAAQ;CACR,KAAK;CACL,MAAM;CACN,MAAM;CACN,MAAM;CACN,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,QAAQ;CACR,IAAI;CACJ,SAAS;CACT,SAAS;CACT,MAAM;CACN,MAAM;CACN,KAAK;CACL,MAAM;CACN,YAAY;CACZ,MAAM;CACN,QAAQ;CACR,MAAM;CACN,KAAK;CACL,UAAU;CACV,UAAU;CACV,QAAQ;CACR,OAAO;CACP,YAAY;CACZ,OAAO;CACP,MAAM;CACN,KAAK;CACL,WAAW;CACX,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,GAAG;CACH,MAAM;CACN,MAAM;CACN,OAAO;CACP,MAAM;CACN,OAAO;CACP,KAAK;CACL,OAAO;CACP,MAAM;CACN,YAAY;CACZ,KAAK;CACL,MAAM;CACP"}
+{"version":3,"file":"constants.js","names":[],"sources":["../../../src/components/ScalarCodeBlock/constants.ts"],"sourcesContent":["import type { StandardLanguageKey } from './types'\n\n/** Labels for the standard languages */\nexport const LANGUAGE_LABELS = {\n  bash: 'Bash',\n  c: 'C',\n  clojure: 'Clojure',\n  cpp: 'C++',\n  csharp: 'C#',\n  css: 'CSS',\n  curl: 'cURL',\n  dart: 'Dart',\n  diff: 'Diff',\n  docker: 'Docker',\n  dockerfile: 'Dockerfile',\n  elixir: 'Elixir',\n  fsharp: 'F#',\n  go: 'Go',\n  graphql: 'GraphQL',\n  haskell: 'Haskell',\n  html: 'HTML',\n  http: 'HTTP',\n  ini: 'INI',\n  java: 'Java',\n  javascript: 'JavaScript',\n  json: 'JSON',\n  kotlin: 'Kotlin',\n  less: 'Less',\n  lua: 'Lua',\n  makefile: 'Makefile',\n  markdown: 'Markdown',\n  matlab: 'MATLAB',\n  mojo: 'Mojo',\n  nginx: 'Nginx',\n  objectivec: 'Objective-C',\n  ocaml: 'OCaml',\n  perl: 'Perl',\n  php: 'PHP',\n  plaintext: 'Plain Text',\n  powershell: 'PowerShell',\n  properties: 'Properties',\n  python: 'Python',\n  r: 'R',\n  ruby: 'Ruby',\n  rust: 'Rust',\n  scala: 'Scala',\n  scss: 'SCSS',\n  shell: 'Shell',\n  sql: 'SQL',\n  swift: 'Swift',\n  toml: 'TOML',\n  typescript: 'TypeScript',\n  xml: 'XML',\n  yaml: 'YAML',\n} as const satisfies Record<StandardLanguageKey, string>\n"],"mappings":";;AAGA,IAAa,kBAAkB;CAC7B,MAAM;CACN,GAAG;CACH,SAAS;CACT,KAAK;CACL,QAAQ;CACR,KAAK;CACL,MAAM;CACN,MAAM;CACN,MAAM;CACN,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,QAAQ;CACR,IAAI;CACJ,SAAS;CACT,SAAS;CACT,MAAM;CACN,MAAM;CACN,KAAK;CACL,MAAM;CACN,YAAY;CACZ,MAAM;CACN,QAAQ;CACR,MAAM;CACN,KAAK;CACL,UAAU;CACV,UAAU;CACV,QAAQ;CACR,MAAM;CACN,OAAO;CACP,YAAY;CACZ,OAAO;CACP,MAAM;CACN,KAAK;CACL,WAAW;CACX,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,GAAG;CACH,MAAM;CACN,MAAM;CACN,OAAO;CACP,MAAM;CACN,OAAO;CACP,KAAK;CACL,OAAO;CACP,MAAM;CACN,YAAY;CACZ,KAAK;CACL,MAAM;CACP"}

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

@@ -16,6 +16,8 @@ export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     loader?: LoadingState;
     label?: string;
+    placeholder?: string;
+    clearLabel?: string;
 } & {
     modelValue?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -23,6 +25,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
 }, string, import("vue").PublicProps, Readonly<{
     loader?: LoadingState;
     label?: string;
+    placeholder?: string;
+    clearLabel?: string;
 } & {
     modelValue?: string;
 }> & Readonly<{

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSearchInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"names":[],"mappings":"AAsFA,OAAO,EAAE,KAAK,YAAY,EAAiB,MAAM,kBAAkB,CAAA;AAGnE;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;aAEP,YAAY;YACb,MAAM;;iBAqBH,MAAM;;;;aAtBR,YAAY;YACb,MAAM;;iBAqBH,MAAM;;;kFA6Hf,CAAC"}
+{"version":3,"file":"ScalarSearchInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"names":[],"mappings":"AAwFA,OAAO,EAAE,KAAK,YAAY,EAAiB,MAAM,kBAAkB,CAAA;AAGnE;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;aAEP,YAAY;YACb,MAAM;kBACA,MAAM;iBACP,MAAM;;iBAqBR,MAAM;;;;aAxBR,YAAY;YACb,MAAM;kBACA,MAAM;iBACP,MAAM;;iBAqBR,MAAM;;;kFA6Hf,CAAC"}

package/dist/components/ScalarSearchInput/ScalarSearchInput.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSearchInput.vue.js","names":[],"sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar search input component\n *\n * Provides an large input field with a loading state and a clear button,\n * intended to be used with the ScalarSearchResults component.\n *\n * If you want a smaller input field for use in a sidebar, use\n * the ScalarSidebarSearchInput component instead.\n *\n * @example\n * <ScalarSearchInput v-model=\"search\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\ndefineProps<{\n  loader?: LoadingState\n  label?: string\n}>()\n\nconst model = defineModel<string>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nfunction handleClear() {\n  model.value = ''\n  // Push focus back to the input\n  if (inputRef.value) {\n    inputRef.value.focus()\n  }\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n</script>\n<template>\n  <label\n    v-bind=\"\n      stylingAttrsCx(\n        'flex items-center text-lg font-medium h-10 pl-3 pr-1.5 py-2 gap-2.25',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n    <input\n      ref=\"inputRef\"\n      v-bind=\"otherAttrs\"\n      v-model=\"model\"\n      :aria-label=\"label ?? 'Enter search query'\"\n      autocapitalize=\"off\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      class=\"flex-1 appearance-none rounded border-none bg-transparent outline-none\"\n      placeholder=\"Search...\"\n      spellcheck=\"false\"\n      type=\"search\" />\n    <ScalarLoading\n      v-if=\"loader && loader.isActive\"\n      class=\"mr-1\"\n      :loader\n      size=\"lg\" />\n    <ScalarIconButton\n      v-else-if=\"model\"\n      class=\"-my-1\"\n      :icon=\"ScalarIconX\"\n      label=\"Clear Search\"\n      size=\"sm\"\n      weight=\"bold\"\n      @click.stop.prevent=\"handleClear\" />\n  </label>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarSearchInput.vue.js","names":[],"sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar search input component\n *\n * Provides an large input field with a loading state and a clear button,\n * intended to be used with the ScalarSearchResults component.\n *\n * If you want a smaller input field for use in a sidebar, use\n * the ScalarSidebarSearchInput component instead.\n *\n * @example\n * <ScalarSearchInput v-model=\"search\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\ndefineProps<{\n  loader?: LoadingState\n  label?: string\n  placeholder?: string\n  clearLabel?: string\n}>()\n\nconst model = defineModel<string>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nfunction handleClear() {\n  model.value = ''\n  // Push focus back to the input\n  if (inputRef.value) {\n    inputRef.value.focus()\n  }\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n</script>\n<template>\n  <label\n    v-bind=\"\n      stylingAttrsCx(\n        'flex items-center text-lg font-medium h-10 pl-3 pr-1.5 py-2 gap-2.25',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n    <input\n      ref=\"inputRef\"\n      v-bind=\"otherAttrs\"\n      v-model=\"model\"\n      :aria-label=\"label ?? 'Enter search query'\"\n      autocapitalize=\"off\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      class=\"flex-1 appearance-none rounded border-none bg-transparent outline-none\"\n      :placeholder=\"placeholder ?? 'Search...'\"\n      spellcheck=\"false\"\n      type=\"search\" />\n    <ScalarLoading\n      v-if=\"loader && loader.isActive\"\n      class=\"mr-1\"\n      :loader\n      size=\"lg\" />\n    <ScalarIconButton\n      v-else-if=\"model\"\n      class=\"-my-1\"\n      :icon=\"ScalarIconX\"\n      :label=\"clearLabel ?? 'Clear Search'\"\n      size=\"sm\"\n      weight=\"bold\"\n      @click.stop.prevent=\"handleClear\" />\n  </label>\n</template>\n"],"mappings":""}

package/dist/components/ScalarSearchInput/ScalarSearchInput.vue.script.js

@@ -4,13 +4,15 @@ import { useBindCx } from "@scalar/use-hooks/useBindCx";
 import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeProps, openBlock, ref, unref, useModel, vModelText, withDirectives, withModifiers } from "vue";
 import { ScalarIconMagnifyingGlass, ScalarIconX } from "@scalar/icons";
 //#region src/components/ScalarSearchInput/ScalarSearchInput.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["aria-label"];
+var _hoisted_1 = ["aria-label", "placeholder"];
 var ScalarSearchInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarSearchInput",
 	props: /* @__PURE__ */ mergeModels({
 		loader: {},
-		label: {}
+		label: {},
+		placeholder: {},
+		clearLabel: {}
 	}, {
 		"modelValue": {},
 		"modelModifiers": {}
@@ -37,7 +39,7 @@ var ScalarSearchInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 					autocomplete: "off",
 					autocorrect: "off",
 					class: "flex-1 appearance-none rounded border-none bg-transparent outline-none",
-					placeholder: "Search...",
+					placeholder: __props.placeholder ?? "Search...",
 					spellcheck: "false",
 					type: "search"
 				}), null, 16, _hoisted_1), [[vModelText, model.value]]),
@@ -50,11 +52,11 @@ var ScalarSearchInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 					key: 1,
 					class: "-my-1",
 					icon: unref(ScalarIconX),
-					label: "Clear Search",
+					label: __props.clearLabel ?? "Clear Search",
 					size: "sm",
 					weight: "bold",
 					onClick: withModifiers(handleClear, ["stop", "prevent"])
-				}, null, 8, ["icon"])) : createCommentVNode("", true)
+				}, null, 8, ["icon", "label"])) : createCommentVNode("", true)
 			], 16);
 		};
 	}

package/dist/components/ScalarSearchInput/ScalarSearchInput.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSearchInput.vue.script.js","names":[],"sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar search input component\n *\n * Provides an large input field with a loading state and a clear button,\n * intended to be used with the ScalarSearchResults component.\n *\n * If you want a smaller input field for use in a sidebar, use\n * the ScalarSidebarSearchInput component instead.\n *\n * @example\n * <ScalarSearchInput v-model=\"search\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\ndefineProps<{\n  loader?: LoadingState\n  label?: string\n}>()\n\nconst model = defineModel<string>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nfunction handleClear() {\n  model.value = ''\n  // Push focus back to the input\n  if (inputRef.value) {\n    inputRef.value.focus()\n  }\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n</script>\n<template>\n  <label\n    v-bind=\"\n      stylingAttrsCx(\n        'flex items-center text-lg font-medium h-10 pl-3 pr-1.5 py-2 gap-2.25',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n    <input\n      ref=\"inputRef\"\n      v-bind=\"otherAttrs\"\n      v-model=\"model\"\n      :aria-label=\"label ?? 'Enter search query'\"\n      autocapitalize=\"off\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      class=\"flex-1 appearance-none rounded border-none bg-transparent outline-none\"\n      placeholder=\"Search...\"\n      spellcheck=\"false\"\n      type=\"search\" />\n    <ScalarLoading\n      v-if=\"loader && loader.isActive\"\n      class=\"mr-1\"\n      :loader\n      size=\"lg\" />\n    <ScalarIconButton\n      v-else-if=\"model\"\n      class=\"-my-1\"\n      :icon=\"ScalarIconX\"\n      label=\"Clear Search\"\n      size=\"sm\"\n      weight=\"bold\"\n      @click.stop.prevent=\"handleClear\" />\n  </label>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EA4BA,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAElC,MAAM,WAAW,IAA6B,KAAI;EAElD,SAAS,cAAc;AACrB,SAAM,QAAQ;AAEd,OAAI,SAAS,MACX,UAAS,MAAM,OAAM;;EAKzB,MAAM,EAAE,gBAAgB,eAAe,WAAU;;uBAG/C,mBAgCQ,SAAA,eAAA,mBA/BS,MAAA,eAAc,CAAA,uEAAA,CAAA,CAAA,EAAA;IAK7B,YAAkE,MAAA,0BAAA,EAAA,EAAvC,OAAM,gCAA8B,CAAA;mBAC/D,mBAWkB,SAXlB,WAWkB;cAVZ;KAAJ,KAAI;OACI,MAAA,WAAU,EAAA;wEACJ,QAAA;KACb,cAAY,QAAA,SAAK;KAClB,gBAAe;KACf,cAAa;KACb,aAAY;KACZ,OAAM;KACN,aAAY;KACZ,YAAW;KACX,MAAK;6CARI,MAAA,MAAK,CAAA,CAAA;IAUR,QAAA,UAAU,QAAA,OAAO,YAAA,WAAA,EADzB,YAIc,MAAA,sBAAA,EAAA;;KAFZ,OAAM;KACL,QAAA,QAAA;KACD,MAAK;+BAEM,MAAA,SAAA,WAAA,EADb,YAOsC,MAAA,yBAAA,EAAA;;KALpC,OAAM;KACL,MAAM,MAAA,YAAW;KAClB,OAAM;KACN,MAAK;KACL,QAAO;KACN,SAAK,cAAe,aAAW,CAAA,QAAA,UAAA,CAAA"}
+{"version":3,"file":"ScalarSearchInput.vue.script.js","names":[],"sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar search input component\n *\n * Provides an large input field with a loading state and a clear button,\n * intended to be used with the ScalarSearchResults component.\n *\n * If you want a smaller input field for use in a sidebar, use\n * the ScalarSidebarSearchInput component instead.\n *\n * @example\n * <ScalarSearchInput v-model=\"search\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\ndefineProps<{\n  loader?: LoadingState\n  label?: string\n  placeholder?: string\n  clearLabel?: string\n}>()\n\nconst model = defineModel<string>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nfunction handleClear() {\n  model.value = ''\n  // Push focus back to the input\n  if (inputRef.value) {\n    inputRef.value.focus()\n  }\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n</script>\n<template>\n  <label\n    v-bind=\"\n      stylingAttrsCx(\n        'flex items-center text-lg font-medium h-10 pl-3 pr-1.5 py-2 gap-2.25',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n    <input\n      ref=\"inputRef\"\n      v-bind=\"otherAttrs\"\n      v-model=\"model\"\n      :aria-label=\"label ?? 'Enter search query'\"\n      autocapitalize=\"off\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      class=\"flex-1 appearance-none rounded border-none bg-transparent outline-none\"\n      :placeholder=\"placeholder ?? 'Search...'\"\n      spellcheck=\"false\"\n      type=\"search\" />\n    <ScalarLoading\n      v-if=\"loader && loader.isActive\"\n      class=\"mr-1\"\n      :loader\n      size=\"lg\" />\n    <ScalarIconButton\n      v-else-if=\"model\"\n      class=\"-my-1\"\n      :icon=\"ScalarIconX\"\n      :label=\"clearLabel ?? 'Clear Search'\"\n      size=\"sm\"\n      weight=\"bold\"\n      @click.stop.prevent=\"handleClear\" />\n  </label>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EA8BA,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAElC,MAAM,WAAW,IAA6B,KAAI;EAElD,SAAS,cAAc;AACrB,SAAM,QAAQ;AAEd,OAAI,SAAS,MACX,UAAS,MAAM,OAAM;;EAKzB,MAAM,EAAE,gBAAgB,eAAe,WAAU;;uBAG/C,mBAgCQ,SAAA,eAAA,mBA/BS,MAAA,eAAc,CAAA,uEAAA,CAAA,CAAA,EAAA;IAK7B,YAAkE,MAAA,0BAAA,EAAA,EAAvC,OAAM,gCAA8B,CAAA;mBAC/D,mBAWkB,SAXlB,WAWkB;cAVZ;KAAJ,KAAI;OACI,MAAA,WAAU,EAAA;wEACJ,QAAA;KACb,cAAY,QAAA,SAAK;KAClB,gBAAe;KACf,cAAa;KACb,aAAY;KACZ,OAAM;KACL,aAAa,QAAA,eAAW;KACzB,YAAW;KACX,MAAK;6CARI,MAAA,MAAK,CAAA,CAAA;IAUR,QAAA,UAAU,QAAA,OAAO,YAAA,WAAA,EADzB,YAIc,MAAA,sBAAA,EAAA;;KAFZ,OAAM;KACL,QAAA,QAAA;KACD,MAAK;+BAEM,MAAA,SAAA,WAAA,EADb,YAOsC,MAAA,yBAAA,EAAA;;KALpC,OAAM;KACL,MAAM,MAAA,YAAW;KACjB,OAAO,QAAA,cAAU;KAClB,MAAK;KACL,QAAO;KACN,SAAK,cAAe,aAAW,CAAA,QAAA,UAAA,CAAA"}

package/dist/components/ScalarSidebar/ScalarSidebarSearchButton.vue.d.ts

@@ -11,7 +11,11 @@
  */
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    shortcutLabel?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    shortcutLabel?: string;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 } & {
     shortcut?: (props: {}) => any;

package/dist/components/ScalarSidebar/ScalarSidebarSearchButton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarSearchButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchButton.vue"],"names":[],"mappings":"AAoDA;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cAyEJ,CAAC,KAAK,IAAgB,KAAK,GAAG;;eAC7B,CAAC,KAAK,IAAgB,KAAK,GAAG;EAQzC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarSidebarSearchButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchButton.vue"],"names":[],"mappings":"AAwDA;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;oBAEA,MAAM;;oBAAN,MAAM;;cAkFV,CAAC,KAAK,IAAgB,KAAK,GAAG;;eAC7B,CAAC,KAAK,IAAgB,KAAK,GAAG;EASzC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/ScalarSidebar/ScalarSidebarSearchButton.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarSearchButton.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Button component\n *\n * A styled button that serves as a search trigger in the sidebar.\n * Displays a magnifying glass icon and an optional keyboard shortcut.\n *\n * @example\n * <ScalarSidebarSearchButton>\n *   <template #shortcut>⌘K</template>\n * </ScalarSidebarSearchButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <button\n    role=\"search\"\n    type=\"button\"\n    v-bind=\"\n      cx(\n        'flex items-center rounded border text-base h-8 gap-1 pl-2 pr-1',\n        'bg-sidebar-b-search border-sidebar-border-search text-sidebar-c-search',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"size-4\" />\n    <span class=\"flex-1 text-left leading-none\">\n      <slot>Search...</slot>\n    </span>\n    <span\n      v-if=\"$slots.shortcut\"\n      class=\"uppercase text-sidebar-c-2 leading-none py-1 px-1.25 rounded text-xs font-medium border\">\n      <span class=\"sr-only\">Keyboard Shortcut:</span>\n      <kbd>\n        <slot name=\"shortcut\" />\n      </kbd>\n    </span>\n  </button>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarSidebarSearchButton.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Button component\n *\n * A styled button that serves as a search trigger in the sidebar.\n * Displays a magnifying glass icon and an optional keyboard shortcut.\n *\n * @example\n * <ScalarSidebarSearchButton>\n *   <template #shortcut>⌘K</template>\n * </ScalarSidebarSearchButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nconst { shortcutLabel = 'Keyboard Shortcut:' } = defineProps<{\n  shortcutLabel?: string\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <button\n    role=\"search\"\n    type=\"button\"\n    v-bind=\"\n      cx(\n        'flex items-center rounded border text-base h-8 gap-1 pl-2 pr-1',\n        'bg-sidebar-b-search border-sidebar-border-search text-sidebar-c-search',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"size-4\" />\n    <span class=\"flex-1 text-start leading-none\">\n      <slot>Search...</slot>\n    </span>\n    <span\n      v-if=\"$slots.shortcut\"\n      class=\"uppercase text-sidebar-c-2 leading-none py-1 px-1.25 rounded text-xs font-medium border\">\n      <span class=\"sr-only\">{{ shortcutLabel }}</span>\n      <kbd dir=\"ltr\">\n        <slot name=\"shortcut\" />\n      </kbd>\n    </span>\n  </button>\n</template>\n"],"mappings":""}

package/dist/components/ScalarSidebar/ScalarSidebarSearchButton.vue.script.js

@@ -1,15 +1,18 @@
 import { useBindCx } from "@scalar/use-hooks/useBindCx";
-import { createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, openBlock, renderSlot, unref } from "vue";
+import { createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, openBlock, renderSlot, toDisplayString, unref } from "vue";
 import { ScalarIconMagnifyingGlass } from "@scalar/icons";
 //#region src/components/ScalarSidebar/ScalarSidebarSearchButton.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "flex-1 text-left leading-none" };
+var _hoisted_1 = { class: "flex-1 text-start leading-none" };
 var _hoisted_2 = {
 	key: 0,
 	class: "uppercase text-sidebar-c-2 leading-none py-1 px-1.25 rounded text-xs font-medium border"
 };
+var _hoisted_3 = { class: "sr-only" };
+var _hoisted_4 = { dir: "ltr" };
 var ScalarSidebarSearchButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarSidebarSearchButton",
+	props: { shortcutLabel: { default: "Keyboard Shortcut:" } },
 	setup(__props) {
 		const { cx } = useBindCx();
 		return (_ctx, _cache) => {
@@ -19,7 +22,7 @@ var ScalarSidebarSearchButton_vue_vue_type_script_setup_true_lang_default = /* @
 			}, unref(cx)("flex items-center rounded border text-base h-8 gap-1 pl-2 pr-1", "bg-sidebar-b-search border-sidebar-border-search text-sidebar-c-search")), [
 				createVNode(unref(ScalarIconMagnifyingGlass), { class: "size-4" }),
 				createElementVNode("span", _hoisted_1, [renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createTextVNode("Search...", -1))])]),
-				_ctx.$slots.shortcut ? (openBlock(), createElementBlock("span", _hoisted_2, [_cache[1] || (_cache[1] = createElementVNode("span", { class: "sr-only" }, "Keyboard Shortcut:", -1)), createElementVNode("kbd", null, [renderSlot(_ctx.$slots, "shortcut")])])) : createCommentVNode("", true)
+				_ctx.$slots.shortcut ? (openBlock(), createElementBlock("span", _hoisted_2, [createElementVNode("span", _hoisted_3, toDisplayString(__props.shortcutLabel), 1), createElementVNode("kbd", _hoisted_4, [renderSlot(_ctx.$slots, "shortcut")])])) : createCommentVNode("", true)
 			], 16);
 		};
 	}

package/dist/components/ScalarSidebar/ScalarSidebarSearchButton.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarSearchButton.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Button component\n *\n * A styled button that serves as a search trigger in the sidebar.\n * Displays a magnifying glass icon and an optional keyboard shortcut.\n *\n * @example\n * <ScalarSidebarSearchButton>\n *   <template #shortcut>⌘K</template>\n * </ScalarSidebarSearchButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <button\n    role=\"search\"\n    type=\"button\"\n    v-bind=\"\n      cx(\n        'flex items-center rounded border text-base h-8 gap-1 pl-2 pr-1',\n        'bg-sidebar-b-search border-sidebar-border-search text-sidebar-c-search',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"size-4\" />\n    <span class=\"flex-1 text-left leading-none\">\n      <slot>Search...</slot>\n    </span>\n    <span\n      v-if=\"$slots.shortcut\"\n      class=\"uppercase text-sidebar-c-2 leading-none py-1 px-1.25 rounded text-xs font-medium border\">\n      <span class=\"sr-only\">Keyboard Shortcut:</span>\n      <kbd>\n        <slot name=\"shortcut\" />\n      </kbd>\n    </span>\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAmBA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAqBS,UArBT,WAqBS;IApBP,MAAK;IACL,MAAK;MACU,MAAA,GAAE,CAAA,kEAAA,yEAAA,CAAA,EAAA;IAMjB,YAA4C,MAAA,0BAAA,EAAA,EAAjB,OAAM,UAAQ,CAAA;IACzC,mBAEO,QAFP,YAEO,CADL,WAAsB,KAAA,QAAA,WAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAAhB,aAAS,GAAA,EAAA,CAAA,CAAA,CAAA;IAGTA,KAAAA,OAAO,YAAA,WAAA,EADf,mBAOO,QAPP,YAOO,CAAA,OAAA,OAAA,OAAA,KAJL,mBAA+C,QAAA,EAAzC,OAAM,WAAS,EAAC,sBAAkB,GAAA,GACxC,mBAEM,OAAA,MAAA,CADJ,WAAwB,KAAA,QAAA,WAAA,CAAA,CAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA"}
+{"version":3,"file":"ScalarSidebarSearchButton.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Button component\n *\n * A styled button that serves as a search trigger in the sidebar.\n * Displays a magnifying glass icon and an optional keyboard shortcut.\n *\n * @example\n * <ScalarSidebarSearchButton>\n *   <template #shortcut>⌘K</template>\n * </ScalarSidebarSearchButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nconst { shortcutLabel = 'Keyboard Shortcut:' } = defineProps<{\n  shortcutLabel?: string\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <button\n    role=\"search\"\n    type=\"button\"\n    v-bind=\"\n      cx(\n        'flex items-center rounded border text-base h-8 gap-1 pl-2 pr-1',\n        'bg-sidebar-b-search border-sidebar-border-search text-sidebar-c-search',\n      )\n    \">\n    <ScalarIconMagnifyingGlass class=\"size-4\" />\n    <span class=\"flex-1 text-start leading-none\">\n      <slot>Search...</slot>\n    </span>\n    <span\n      v-if=\"$slots.shortcut\"\n      class=\"uppercase text-sidebar-c-2 leading-none py-1 px-1.25 rounded text-xs font-medium border\">\n      <span class=\"sr-only\">{{ shortcutLabel }}</span>\n      <kbd dir=\"ltr\">\n        <slot name=\"shortcut\" />\n      </kbd>\n    </span>\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAuBA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAqBS,UArBT,WAqBS;IApBP,MAAK;IACL,MAAK;MACU,MAAA,GAAE,CAAA,kEAAA,yEAAA,CAAA,EAAA;IAMjB,YAA4C,MAAA,0BAAA,EAAA,EAAjB,OAAM,UAAQ,CAAA;IACzC,mBAEO,QAFP,YAEO,CADL,WAAsB,KAAA,QAAA,WAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAAhB,aAAS,GAAA,EAAA,CAAA,CAAA,CAAA;IAGTA,KAAAA,OAAO,YAAA,WAAA,EADf,mBAOO,QAPP,YAOO,CAJL,mBAAgD,QAAhD,YAAgD,gBAAvB,QAAA,cAAa,EAAA,EAAA,EACtC,mBAEM,OAFN,YAEM,CADJ,WAAwB,KAAA,QAAA,WAAA,CAAA,CAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTextArea.vue.js","names":[],"sources":["../../../src/components/ScalarTextArea/ScalarTextArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Area component\n *\n * A wrapper around the HTML textarea element with a focusable container.\n *\n * @example\n *   <ScalarTextArea v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useTextareaAutosize } from '@vueuse/core'\nimport { onMounted } from 'vue'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\nconst model = defineModel<string>({ default: '' })\n\nconst { textarea } = useTextareaAutosize({\n  input: model,\n  styleProp: 'minHeight',\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => {\n  // Force autofocus if the textarea has the autofocus attribute\n  if ('autofocus' in otherAttrs.value) textarea.value?.focus()\n})\n</script>\n<template>\n  <ScalarFormInput\n    is=\"div\"\n    v-bind=\"\n      stylingAttrsCx(\n        'custom-scroll flex items-start text-c-1 min-h-0 shrink cursor-text leading-snug',\n      )\n    \"\n    @click=\"textarea?.focus()\">\n    <textarea\n      ref=\"textarea\"\n      v-model=\"model\"\n      v-bind=\"otherAttrs\"\n      class=\"w-full resize-none border-none bg-transparent text-sm focus-within:outline-none\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarTextArea.vue.js","names":[],"sources":["../../../src/components/ScalarTextArea/ScalarTextArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Area component\n *\n * A wrapper around the HTML textarea element with a focusable container.\n *\n * @example\n *   <ScalarTextArea v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useTextareaAutosize } from '@vueuse/core'\nimport { onMounted } from 'vue'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\nconst model = defineModel<string>({ default: '' })\n\nconst { textarea } = useTextareaAutosize({\n  input: model,\n  styleProp: 'minHeight',\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => {\n  // Force autofocus if the textarea has the autofocus attribute\n  if ('autofocus' in otherAttrs.value) textarea.value?.focus()\n})\n</script>\n<template>\n  <ScalarFormInput\n    is=\"div\"\n    v-bind=\"\n      stylingAttrsCx(\n        'custom-scroll flex items-start text-c-1 min-h-0 shrink cursor-text leading-snug focus-within:bg-b-1',\n      )\n    \"\n    @click=\"textarea?.focus()\">\n    <textarea\n      ref=\"textarea\"\n      v-model=\"model\"\n      v-bind=\"otherAttrs\"\n      class=\"w-full resize-none border-none bg-transparent placeholder:font-[inherit] focus-within:outline-none\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":""}

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

@@ -21,12 +21,12 @@ var ScalarTextArea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			if ("autofocus" in otherAttrs.value) textarea.value?.focus();
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(ScalarFormInput_default), mergeProps({ is: "div" }, unref(stylingAttrsCx)("custom-scroll flex items-start text-c-1 min-h-0 shrink cursor-text leading-snug"), { onClick: _cache[1] || (_cache[1] = ($event) => unref(textarea)?.focus()) }), {
+			return openBlock(), createBlock(unref(ScalarFormInput_default), mergeProps({ is: "div" }, unref(stylingAttrsCx)("custom-scroll flex items-start text-c-1 min-h-0 shrink cursor-text leading-snug focus-within:bg-b-1"), { onClick: _cache[1] || (_cache[1] = ($event) => unref(textarea)?.focus()) }), {
 				default: withCtx(() => [withDirectives(createElementVNode("textarea", mergeProps({
 					ref_key: "textarea",
 					ref: textarea,
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event)
-				}, unref(otherAttrs), { class: "w-full resize-none border-none bg-transparent text-sm focus-within:outline-none" }), null, 16), [[vModelText, model.value]])]),
+				}, unref(otherAttrs), { class: "w-full resize-none border-none bg-transparent placeholder:font-[inherit] focus-within:outline-none" }), null, 16), [[vModelText, model.value]])]),
 				_: 1
 			}, 16);
 		};

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTextArea.vue.script.js","names":[],"sources":["../../../src/components/ScalarTextArea/ScalarTextArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Area component\n *\n * A wrapper around the HTML textarea element with a focusable container.\n *\n * @example\n *   <ScalarTextArea v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useTextareaAutosize } from '@vueuse/core'\nimport { onMounted } from 'vue'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\nconst model = defineModel<string>({ default: '' })\n\nconst { textarea } = useTextareaAutosize({\n  input: model,\n  styleProp: 'minHeight',\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => {\n  // Force autofocus if the textarea has the autofocus attribute\n  if ('autofocus' in otherAttrs.value) textarea.value?.focus()\n})\n</script>\n<template>\n  <ScalarFormInput\n    is=\"div\"\n    v-bind=\"\n      stylingAttrsCx(\n        'custom-scroll flex items-start text-c-1 min-h-0 shrink cursor-text leading-snug',\n      )\n    \"\n    @click=\"textarea?.focus()\">\n    <textarea\n      ref=\"textarea\"\n      v-model=\"model\"\n      v-bind=\"otherAttrs\"\n      class=\"w-full resize-none border-none bg-transparent text-sm focus-within:outline-none\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAkBA,MAAM,QAAQ,SAAmB,SAAA,aAAgB;EAEjD,MAAM,EAAE,aAAa,oBAAoB;GACvC,OAAO;GACP,WAAW;GACZ,CAAA;EAGD,MAAM,EAAE,gBAAgB,eAAe,WAAU;AAEjD,kBAAgB;AAEd,OAAI,eAAe,WAAW,MAAO,UAAS,OAAO,OAAM;IAC5D;;uBAGC,YAakB,MAAA,wBAAA,EAblB,WAakB,EAZhB,IAAG,OAAK,EACO,MAAA,eAAc,CAAA,kFAAA,EAAA,EAK5B,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,SAAQ,EAAE,OAAK,GAAA,CAAA,EAAA;2BAKqE,CAAA,eAJ5F,mBAI4F,YAJ5F,WAI4F;cAHtF;KAAJ,KAAI;wEACU,QAAA;OACN,MAAA,WAAU,EAAA,EAClB,OAAM,mFAAiF,CAAA,EAAA,MAAA,GAAA,EAAA,CAAA,CAAA,YAF9E,MAAA,MAAK,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarTextArea.vue.script.js","names":[],"sources":["../../../src/components/ScalarTextArea/ScalarTextArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Area component\n *\n * A wrapper around the HTML textarea element with a focusable container.\n *\n * @example\n *   <ScalarTextArea v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useTextareaAutosize } from '@vueuse/core'\nimport { onMounted } from 'vue'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\nconst model = defineModel<string>({ default: '' })\n\nconst { textarea } = useTextareaAutosize({\n  input: model,\n  styleProp: 'minHeight',\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => {\n  // Force autofocus if the textarea has the autofocus attribute\n  if ('autofocus' in otherAttrs.value) textarea.value?.focus()\n})\n</script>\n<template>\n  <ScalarFormInput\n    is=\"div\"\n    v-bind=\"\n      stylingAttrsCx(\n        'custom-scroll flex items-start text-c-1 min-h-0 shrink cursor-text leading-snug focus-within:bg-b-1',\n      )\n    \"\n    @click=\"textarea?.focus()\">\n    <textarea\n      ref=\"textarea\"\n      v-model=\"model\"\n      v-bind=\"otherAttrs\"\n      class=\"w-full resize-none border-none bg-transparent placeholder:font-[inherit] focus-within:outline-none\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAkBA,MAAM,QAAQ,SAAmB,SAAA,aAAgB;EAEjD,MAAM,EAAE,aAAa,oBAAoB;GACvC,OAAO;GACP,WAAW;GACZ,CAAA;EAGD,MAAM,EAAE,gBAAgB,eAAe,WAAU;AAEjD,kBAAgB;AAEd,OAAI,eAAe,WAAW,MAAO,UAAS,OAAO,OAAM;IAC5D;;uBAGC,YAakB,MAAA,wBAAA,EAblB,WAakB,EAZhB,IAAG,OAAK,EACO,MAAA,eAAc,CAAA,sGAAA,EAAA,EAK5B,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,SAAQ,EAAE,OAAK,GAAA,CAAA,EAAA;2BAKwF,CAAA,eAJ/G,mBAI+G,YAJ/G,WAI+G;cAHzG;KAAJ,KAAI;wEACU,QAAA;OACN,MAAA,WAAU,EAAA,EAClB,OAAM,sGAAoG,CAAA,EAAA,MAAA,GAAA,EAAA,CAAA,CAAA,YAFjG,MAAA,MAAK,CAAA,CAAA,CAAA,CAAA"}

package/dist/style.css

@@ -440,7 +440,16 @@
   border-width: 1px;
 }
 
-:where(.scalar-app) input::placeholder {
+:where(.scalar-app) input, :where(.scalar-app) select, :where(.scalar-app) textarea {
+  text-align: start;
+}
+
+:where(.scalar-app) input::placeholder, :where(.scalar-app) text-area::placeholder {
+  color: var(--scalar-color-3);
+  font-family: var(--scalar-font);
+}
+
+:where(.scalar-app) ::-webkit-input-placeholder {
   color: var(--scalar-color-3);
   font-family: var(--scalar-font);
 }
@@ -2179,6 +2188,10 @@
   text-align: left;
 }
 
+.scalar-app .text-start {
+  text-align: start;
+}
+
 .scalar-app .font-code {
   font-family: var(--scalar-font-code);
 }

package/package.json

@@ -10,7 +10,7 @@
     "url": "git+https://github.com/scalar/scalar.git",
     "directory": "packages/components"
   },
-  "version": "0.27.2",
+  "version": "0.27.4",
   "engines": {
     "node": ">=22"
   },
@@ -221,11 +221,11 @@
     "radix-vue": "^1.9.17",
     "vue": "^3.5.30",
     "vue-component-type-helpers": "^3.2.6",
-    "@scalar/code-highlight": "0.3.6",
-    "@scalar/helpers": "0.8.2",
-    "@scalar/use-hooks": "0.4.7",
+    "@scalar/code-highlight": "0.4.0",
+    "@scalar/helpers": "0.9.0",
     "@scalar/icons": "0.7.3",
-    "@scalar/themes": "0.16.0"
+    "@scalar/use-hooks": "0.4.7",
+    "@scalar/themes": "0.16.2"
   },
   "devDependencies": {
     "@playwright/test": "1.59.1",