diff --git a/docs/.vitepress/components/Prop.vue b/docs/.vitepress/components/Prop.vue
index c5ef75718..bd6791386 100644
--- a/docs/.vitepress/components/Prop.vue
+++ b/docs/.vitepress/components/Prop.vue
@@ -19,6 +19,7 @@ p + .code-prop {
 }
 .code-prop {
   margin-top: 10px;
+  font-weight: inherit !important;
   
   .shiki {
     margin: 0;
diff --git a/docs/.vitepress/theme/style.scss b/docs/.vitepress/theme/style.scss
index 80498f043..08bf56031 100644
--- a/docs/.vitepress/theme/style.scss
+++ b/docs/.vitepress/theme/style.scss
@@ -76,9 +76,9 @@
 }
 
 // Since we force all code backgrounds to dark,
-// we need to set an explicit base text color
+// we need to set an explicit base text color in light mode
 // so that unhighlighted code blocks are readable. #356
-.vp-doc div[class*="language-"] code {
+html:not(.dark) .vp-doc div[class*="language-"] code {
   color: var(--vp-c-bg)
 }
 
diff --git a/docs/stacks/vue/coalesce-vue-vuetify/components/c-loader-status.md b/docs/stacks/vue/coalesce-vue-vuetify/components/c-loader-status.md
index a07a818ed..a74598762 100644
--- a/docs/stacks/vue/coalesce-vue-vuetify/components/c-loader-status.md
+++ b/docs/stacks/vue/coalesce-vue-vuetify/components/c-loader-status.md
@@ -12,9 +12,6 @@ It is highly recommended that all [API Callers](/stacks/vue/layers/api-clients.m
 
 Progress is indicated with a [Vuetify](https://vuetifyjs.com/) [v-progress-linear](https://vuetifyjs.com/en/components/progress-linear) component, and errors are displayed in a [v-alert](https://vuetifyjs.com/en/components/alerts/). [Transitions](https://vuetifyjs.com/en/styles/transitions/) are applied to smoothly fade between the different states the the caller can be in.
 
-::: tip Note
-This component uses the legacy term "loader" to refer to [API Callers](/stacks/vue/layers/api-clients.md#api-callers). A new ``c-caller-status`` component may be coming in the future with a few usability improvements - if that happens, `c-loader-status` will be preserved for backwards compatibility.
-:::
 
 ## Examples
 
@@ -37,16 +34,15 @@ Wrap contents of a details/edit page:
 
 Use ``c-loader-status`` to render a progress bar and any error messages, but don't use it to control content:
 ``` vue-html
-<c-loader-status :loaders="{'': [list.$load]}" />
+<c-loader-status :loaders="list.$load" />
 ```
 
 
 Wrap a save/submit button:
 ``` vue-html
-<c-loader-status
-    :loaders="{ 'no-loading-content': [person.$save] }"
->
+<c-loader-status :loaders="[person.$save, person.$delete]" no-loading-content>
     <button> Save </button>
+    <button> Delete </button>
 </c-loader-status>
 ```
 
@@ -54,10 +50,10 @@ Hides the table before the first load has completed, or if loading the list enco
 
 ``` vue-html
 <c-loader-status
-    :loaders="{
-        'no-secondary-progress no-initial-content no-error-content': [list.$load]
-    }"
-    #default
+    :loaders="list.$load"
+    no-initial-content 
+    no-error-content
+    no-secondary-progress 
 >
     <table>
         <tr v-for="item in list.$items"> ... </tr>
@@ -67,19 +63,43 @@ Hides the table before the first load has completed, or if loading the list enco
 
 ## Props
 
-<Prop def="loaders: { [flags: string]: ApiCaller | ApiCaller[] }" lang="ts" />
+<Prop def="loaders: 
+  // Flags per component:
+  | ApiCaller 
+  | ApiCaller[]
+  // Flags per caller:
+  | { [flags: string]: ApiCaller | ApiCaller[] } " lang="ts" />
 
-A dictionary object with entries mapping zero or more flags to one or more [API Callers](/stacks/vue/layers/api-clients.md#api-callers). Multiple entries of flags/caller pairs may be specified in the dictionary to give different behavior to different API callers.
-    
-The available flags are as follows. All flags default to `true`, and may be prefixed with ``no-`` to set the flag to ``false`` instead of ``true``. Multiple flags may be specified at once by delimiting them with spaces.
+<div>
+
+This prop has multiple options that support simple or complex usage scenarios:
+
+#### Flags Per Component
+A single instance, or array of [API Callers](/stacks/vue/layers/api-clients.md#api-callers), whose status will be represented by the component. The [flags](#flags) for these objects will be determined from the component-level [flag props](#flags-props).
+
+``` vue-html
+<c-loader-status
+  :loaders="[product.$load, person.$load]"
+  no-initial-content
+  no-error-content
+/>
+```
+
+#### Flags Per Caller
+A more advanced usage allows passing different flags for different callers. Provide a dictionary object with entries mapping zero or more [flags](#flags) to one or more [API Callers](/stacks/vue/layers/api-clients.md#api-callers). Multiple entries of flags/caller pairs may be specified in the dictionary to give different behavior to different API callers. These flags are layered on top of the base [flag props](#flags-props). 
+
+``` vue-html
+<c-loader-status
+  :loaders="{ 
+    'no-initial-content no-error-content': [person.$load],
+    'no-loading-content': [person.$save, person.$delete],
+  }"
+/>
+```
+
+</div>
+<br>
 
-| <div style="width:160px">Flag</div> | Description |
-| - | - |
-| `loading-content` | Controls whether the default slot is rendered while any API caller is loading (i.e. when  `caller.isLoading === true`). |
-| `error-content` | Controls whether the default slot is rendered while any API Caller is in an error state (i.e. when  `caller.wasSuccessful === false`). |
-| `initial-content` | Controls whether the default slot is rendered while any API Caller has yet to receive a response for the first time (i.e. when `caller.wasSuccessful === null`). |
-| `initial-progress` | Controls whether the progress indicator is shown when an API Caller is loading for the very first time (i.e. when  `caller.wasSuccessful === null`). |
-| `secondary-progress` | Controls whether the progress indicator is shown when an API Caller is loading any time after its first invocation (i.e. when  `caller.wasSuccessful !== null`). |
 
 <Prop def="progressPlaceholder: boolean = true" lang="ts" />
 
@@ -89,6 +109,29 @@ Specify if space should be reserved for the progress indicator. If set to false,
 
 Specifies the height in pixels of the [v-progress-linear](https://vuetifyjs.com/en/components/progress-linear) used to indicate progress.
 
+<Prop def="
+no-loading-content?: boolean;
+no-error-content?: boolean;
+no-initial-content?: boolean;
+no-progress?: boolean;
+no-initial-progress?: boolean;
+no-secondary-progress?: boolean;" lang="ts" id="flags-props" />
+
+Component level [flags](#flags) options that control behavior when the simple form of `loaders` (single instance or array) is used, as well as provide baseline defaults that can be overridden by the advanced form of `loaders` (object map) .
+
+## Flags
+
+The available flags are as follows, all of which default to `true`. In the object literal syntax for `loaders`, the `no-` prefix may be omitted to set the flag to `true`.
+
+| <div style="width:160px">Flag</div> | Description |
+| - | - |
+| `no-loading-content` | Controls whether the default slot is rendered while any API caller is loading (i.e. when  `caller.isLoading === true`). |
+| `no-error-content` | Controls whether the default slot is rendered while any API Caller is in an error state (i.e. when  `caller.wasSuccessful === false`). |
+| `no-initial-content` | Controls whether the default slot is rendered while any API Caller has yet to receive a response for the first time (i.e. when `caller.wasSuccessful === null`). |
+| `no-progress` | Master toggle for whether the progress indicator is shown in any scenario. |
+| `no-initial-progress` | Controls whether the progress indicator is shown when an API Caller is loading for the very first time (i.e. when  `caller.wasSuccessful === null`). |
+| `no-secondary-progress` | Controls whether the progress indicator is shown when an API Caller is loading any time after its first invocation (i.e. when  `caller.wasSuccessful !== null`). |
+
 ## Slots
 
 ``default`` - Accepts the content whose visibility is controlled by the state of the supplied [API Callers](/stacks/vue/layers/api-clients.md#api-callers). It will be shown or hidden according to the flags defined for each caller.
diff --git a/docs/stacks/vue/coalesce-vue-vuetify/components/c-table.md b/docs/stacks/vue/coalesce-vue-vuetify/components/c-table.md
index eb7286673..e00fbbce3 100644
--- a/docs/stacks/vue/coalesce-vue-vuetify/components/c-table.md
+++ b/docs/stacks/vue/coalesce-vue-vuetify/components/c-table.md
@@ -2,7 +2,7 @@
 
 <!-- MARKER:summary -->
     
-A table component for displaying the contents of a [ListViewModel](/stacks/vue/layers/viewmodels.md). Also supports modifying the list's [sort parameters](/modeling/model-components/data-sources.md#standard-parameters\) by clicking on column headers. Pairs well with a [c-list-pagination](/stacks/vue/coalesce-vue-vuetify/components/c-list-pagination.md).
+A table component for displaying the contents of a [ListViewModel](/stacks/vue/layers/viewmodels.md). Also supports modifying the list's [sort parameters](/modeling/model-components/data-sources.md#standard-parameters) by clicking on column headers. Pairs well with a [c-list-pagination](/stacks/vue/coalesce-vue-vuetify/components/c-list-pagination.md).
 
 <!-- MARKER:summary-end -->
 
diff --git a/src/coalesce-vue-vuetify2/src/components/display/c-loader-status.vue b/src/coalesce-vue-vuetify2/src/components/display/c-loader-status.vue
index 6924fb117..1660e4123 100644
--- a/src/coalesce-vue-vuetify2/src/components/display/c-loader-status.vue
+++ b/src/coalesce-vue-vuetify2/src/components/display/c-loader-status.vue
@@ -54,20 +54,39 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
-import { ItemApiState, ListApiState } from "coalesce-vue";
+import { ApiState, ItemApiState, ListApiState } from "coalesce-vue";
 
 type AnyLoader = ItemApiState<any, any> | ListApiState<any, any>;
 type AnyLoaderMaybe = AnyLoader | null | undefined;
 
+type YesFlags = keyof Flags;
+type NoFlags = `no-${YesFlags}`;
+
+type FlagsString =
+  | NoFlags
+  | YesFlags
+  | ""
+  | `${NoFlags} ${string}`
+  | `${YesFlags} ${string}`;
+
+type Camelize<S extends string> = S extends `${infer F}-${infer R}`
+  ? `${F}${Capitalize<Camelize<R>>}`
+  : S;
+
 class Flags {
-  progress: boolean | null = null;
-  initialProgress = true;
-  secondaryProgress = true;
-  loadingContent = true;
-  errorContent = true;
-  initialContent = true;
+  progress = true;
+  "initial-progress" = true;
+  "secondary-progress" = true;
+  "loading-content" = true;
+  "error-content" = true;
+  "initial-content" = true;
 }
 
+const camelizeRE = /-(\w)/g;
+const camelize = (str: string): string => {
+  return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ""));
+};
+
 /*
   TODO: This component could use a bit of a rewrite (again).
   Leave the existing component as it is for backwards compat - 
@@ -78,15 +97,20 @@ class Flags {
       - This is a new syntax in addition to the current flags dictionary syntax, which needs to be preserved to support advanced use cases.
 */
 
+type LoadersProp =
+  | {
+      [flags in FlagsString]?: AnyLoaderMaybe | AnyLoaderMaybe[];
+    }
+  | AnyLoaderMaybe
+  | AnyLoaderMaybe[];
+
 export default defineComponent({
   name: "c-loader-status",
 
   props: {
     loaders: {
       required: true,
-      type: Object as PropType<{
-        [flags: string]: AnyLoaderMaybe | AnyLoaderMaybe[];
-      }>,
+      type: Object as PropType<LoadersProp>,
     },
 
     /**
@@ -95,32 +119,67 @@ export default defineComponent({
      */
     progressPlaceholder: { required: false, type: Boolean, default: true },
     height: { required: false, type: [Number, String], default: 10 },
+
+    noProgress: { required: false, type: Boolean, default: null },
+    noInitialProgress: { required: false, type: Boolean, default: null },
+    noSecondaryProgress: { required: false, type: Boolean, default: null },
+    noLoadingContent: { required: false, type: Boolean, default: null },
+    noErrorContent: { required: false, type: Boolean, default: null },
+    noInitialContent: { required: false, type: Boolean, default: null },
   },
 
   computed: {
+    baselineFlags() {
+      const flags = new Flags();
+      for (const key in flags) {
+        const noFlag = camelize(("no-" + key) as NoFlags) as Camelize<NoFlags>;
+
+        const flagValue = this[noFlag];
+        if (flagValue != null) flags[key as YesFlags] = !flagValue;
+      }
+
+      return Object.freeze(flags);
+    },
+
     loaderFlags() {
       var ret = [];
-      for (const flagsStr in this.loaders) {
-        const flagsArr = flagsStr.split(" ");
-        const flags: any = new Flags();
-        for (const flagName in flags) {
-          const kebabFlag = flagName.replace(
-            /([A-Z])/g,
-            (m) => "-" + m.toLowerCase()
-          );
-
-          if (flagsArr.includes(kebabFlag)) {
-            flags[flagName] = true;
-          } else if (flagsArr.includes("no-" + kebabFlag)) {
-            flags[flagName] = false;
-          }
+
+      let loaders: LoadersProp = this.loaders;
+      if (Array.isArray(loaders)) {
+        loaders = { "": loaders };
+      } else if (loaders == null) {
+        // An attempt to pass a single loader that was nullish.
+        loaders = { "": [] };
+      } else if (loaders instanceof ApiState) {
+        loaders = { "": [loaders] };
+      }
+
+      for (const flagsStr in loaders) {
+        let loadersForFlags = loaders[flagsStr as keyof typeof loaders];
+        if (!Array.isArray(loadersForFlags)) {
+          loadersForFlags = [loadersForFlags];
         }
 
-        let loaders = this.loaders[flagsStr];
-        if (!Array.isArray(loaders)) {
-          loaders = [loaders];
+        let flags: Flags = this.baselineFlags;
+
+        // Parse flags out of the object key for usages of the form:
+        // <CLS :loaders="{"no-loading-content secondary-progress": [vm.$load]}" />
+        if (flagsStr != "") {
+          const flagsArr = flagsStr.split(" ");
+          flags = { ...flags };
+
+          if (flagsArr.length) {
+            for (const flagName in flags) {
+              if (flagsArr.includes(flagName)) {
+                flags[flagName as YesFlags] = true;
+              } else if (flagsArr.includes("no-" + flagName)) {
+                flags[flagName as YesFlags] = false;
+              }
+            }
+          }
         }
-        for (const loader of loaders) {
+
+        for (const loader of loadersForFlags) {
           if (loader) {
             ret.push([loader, flags as Flags] as const);
           }
@@ -147,10 +206,12 @@ export default defineComponent({
 
         const isLoading = loader.isLoading;
         return (
-          (flags.initialProgress &&
+          (flags["initial-progress"] &&
             isLoading &&
             loader.wasSuccessful == null) ||
-          (flags.secondaryProgress && isLoading && loader.wasSuccessful != null)
+          (flags["secondary-progress"] &&
+            isLoading &&
+            loader.wasSuccessful != null)
         );
       });
     },
@@ -161,25 +222,25 @@ export default defineComponent({
         this.loaderFlags.some(
           (f) =>
             f[1].progress !== false &&
-            f[1].secondaryProgress &&
-            f[1].loadingContent
+            f[1]["secondary-progress"] &&
+            f[1]["loading-content"]
         )
       );
     },
 
     showContent() {
       return this.loaderFlags.every(([loader, flags]) => {
-        if (!flags.loadingContent && loader.isLoading) {
+        if (!flags["loading-content"] && loader.isLoading) {
           // loader is loading, and loading content is off.
           return false;
         }
-        if (!flags.errorContent && loader.wasSuccessful === false) {
+        if (!flags["error-content"] && loader.wasSuccessful === false) {
           // loader has an error, and error content is off
           return false;
         }
         if (
           // initial content is off, and either:
-          !flags.initialContent &&
+          !flags["initial-content"] &&
           // loader has not yet loaded
           (loader.wasSuccessful == null ||
             // or loader has loaded, but it errored and there's no current result
diff --git a/src/coalesce-vue-vuetify3/src/components/display/c-loader-status.spec.tsx b/src/coalesce-vue-vuetify3/src/components/display/c-loader-status.spec.tsx
new file mode 100644
index 000000000..bb7d84a9c
--- /dev/null
+++ b/src/coalesce-vue-vuetify3/src/components/display/c-loader-status.spec.tsx
@@ -0,0 +1,82 @@
+import { mountApp } from "@test/util";
+import CLS from "./c-loader-status.vue";
+import { ComplexModelViewModel } from "@test/viewmodels.g";
+
+describe("CLoaderStatus", () => {
+  const vm = new ComplexModelViewModel();
+  const manyParams = vm.methodWithManyParams;
+
+  test("types", () => {
+    () => (
+      <CLS loaders={{ "": [vm.$load, vm.$save, vm.methodWithManyParams] }} />
+    );
+
+    () => (
+      <CLS
+        loaders={{
+          "no-loading-content secondary-progress": [vm.$load],
+          // Without a "no" flag first (this was broken for a while):
+          "initial-content no-secondary-progress": [vm.$save],
+        }}
+        noInitialContent
+      />
+    );
+
+    () => <CLS loaders={vm.$load} no-initial-content secondary-progress />;
+
+    // @ts-expect-error invalid prop type
+    () => <CLS loaders={1} />;
+    // @ts-expect-error invalid prop type
+    () => <CLS loaders={new Date()} />;
+
+    // @ts-expect-error invalid flags type
+    () => <CLS loaders={{ manyParams }} />;
+    // @ts-expect-error invalid flags type
+    () => <CLS loaders={{ foo: vm.$load }} />;
+    // @ts-expect-error invalid flags type
+    () => <CLS loaders={{ [" "]: vm.$load }} />;
+  });
+
+  test("flag precedence", () => {
+    const wrapper = mountApp(() => (
+      <CLS
+        loaders={{ "no-secondary-progress initial-content": [vm.$load] }}
+        no-initial-content
+        no-secondary-progress={false}
+        no-error-content
+        no-initial-progress={false}
+      />
+    )).findComponent(CLS);
+
+    const flags = wrapper.vm.loaderFlags[0][1];
+
+    // Component-level `true` overwritten by the flags string, which is the most specific specifier:
+    expect(flags["secondary-progress"]).toBe(false);
+
+    // Component-level `false` overwritten by the flags string, which is the most specific specifier:
+    expect(flags["initial-content"]).toBe(true);
+
+    // Component-level `false` is the only specifier:
+    expect(flags["error-content"]).toBe(false);
+
+    // Explicit `false` provided to a `no` flag, which inverts it to `true`.
+    expect(flags["initial-progress"]).toBe(true);
+  });
+
+  test("simple multi-loader", () => {
+    const wrapper = mountApp(() => (
+      <CLS loaders={[vm.$load, vm.$save]} no-initial-content />
+    )).findComponent(CLS);
+
+    expect(wrapper.vm.loaderFlags[0][1]["initial-content"]).toBe(false);
+    expect(wrapper.vm.loaderFlags[1][1]["initial-content"]).toBe(false);
+  });
+
+  test("simple single loader", () => {
+    const wrapper = mountApp(() => (
+      <CLS loaders={vm.$load} no-initial-content />
+    )).findComponent(CLS);
+
+    expect(wrapper.vm.loaderFlags[0][1]["initial-content"]).toBe(false);
+  });
+});
diff --git a/src/coalesce-vue-vuetify3/src/components/display/c-loader-status.vue b/src/coalesce-vue-vuetify3/src/components/display/c-loader-status.vue
index 5a43943cf..31c3931ed 100644
--- a/src/coalesce-vue-vuetify3/src/components/display/c-loader-status.vue
+++ b/src/coalesce-vue-vuetify3/src/components/display/c-loader-status.vue
@@ -70,12 +70,6 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
-import { ItemApiState, ListApiState } from "coalesce-vue";
-
-type AnyLoader = ItemApiState<any, any> | ListApiState<any, any>;
-type AnyLoaderMaybe = AnyLoader | null | undefined;
-
 class Flags {
   progress = true;
   "initial-progress" = true;
@@ -84,149 +78,205 @@ class Flags {
   "error-content" = true;
   "initial-content" = true;
 }
+</script>
+
+<script lang="ts" setup>
+import { computed, camelize } from "vue";
+import { ApiState, ItemApiState, ListApiState } from "coalesce-vue";
+
+type AnyLoader = ItemApiState<any, any> | ListApiState<any, any>;
+type AnyLoaderMaybe = AnyLoader | null | undefined;
+
+// Since the component props are the most general level of flags
+// and all flags default to true, include only the props that will
+// affect the default, which are the no versions.
+type CamelFlags =
+  | "noProgress"
+  | "noInitialProgress"
+  | "noSecondaryProgress"
+  | "noLoadingContent"
+  | "noErrorContent"
+  | "noInitialContent";
+
+type YesFlags = keyof Flags;
+type NoFlags = `no-${YesFlags}`;
 
-/*
-  TODO: This component could use a bit of a rewrite (again).
-  Leave the existing component as it is for backwards compat -
-  instead, make a new one with the following changes:
-    - New name: c-caller-status
-    - Rename prop loaders => callers
-    - Allow defining flags as props on the components, preferably directly as flags like <c-caller-status :callers="[list.$load]" no-initial-progress />.
-      - This is a new syntax in addition to the current flags dictionary syntax, which needs to be preserved to support advanced use cases.
-*/
-
-// type Flag = `no-${keyof Flags}`;
-// type KeysOf<T, Key extends keyof T = keyof T> = Key extends string
-//   ? `${KebabCase<`no-${Key}`>} ${KeysOf<Omit<T, Key>>}` | KebabCase<`no-${Key}`>
-//   : never;
-// type FlagsString = KeysOf<Flags> | "";
-
-// The above types are way over the top, since the yield every possible permutation of flags.
-// Instead, type this as only individual flags, and then allow whatever else after each individual flag.
-// This presents nice intellisense.
-type Flag = `no-${keyof Flags}`;
-type FlagsString = Flag | "" | `${Flag} ${string}`;
-
-export default defineComponent({
+type FlagsString =
+  | NoFlags
+  | YesFlags
+  | ""
+  | `${NoFlags} ${string}`
+  | `${YesFlags} ${string}`;
+
+type Camelize<S extends string> = S extends `${infer F}-${infer R}`
+  ? `${F}${Capitalize<Camelize<R>>}`
+  : S;
+
+defineOptions({
   name: "c-loader-status",
+});
 
-  props: {
-    loaders: {
-      required: true,
-      type: Object as PropType<{
-        [flags in FlagsString]?: AnyLoaderMaybe | AnyLoaderMaybe[];
-      }>,
-    },
-
-    /**
-     * If the loader is loading when it already has a result,
-     * keep the default slot visible.
-     */
-    progressPlaceholder: { required: false, type: Boolean, default: true },
-    height: { required: false, type: [Number, String], default: 10 },
-    color: { required: false, type: String, default: "primary" },
-  },
-
-  computed: {
-    loaderFlags() {
-      var ret = [];
-      for (const flagsStr in this.loaders) {
-        const flagsArr = flagsStr.split(" ");
-        const flags: any = new Flags();
-        for (const flagName in flags) {
-          const kebabFlag = flagName.replace(
-            /([A-Z])/g,
-            (m) => "-" + m.toLowerCase()
-          );
-
-          if (flagsArr.includes(kebabFlag)) {
-            flags[flagName] = true;
-          } else if (flagsArr.includes("no-" + kebabFlag)) {
-            flags[flagName] = false;
+const props = withDefaults(
+  defineProps<
+    {
+      loaders:
+        | {
+            [flags in FlagsString]?: AnyLoaderMaybe | AnyLoaderMaybe[];
           }
-        }
+        | AnyLoaderMaybe
+        | AnyLoaderMaybe[];
 
-        let loaders = (
-          this.loaders as Record<string, AnyLoaderMaybe | AnyLoaderMaybe[]>
-        )[flagsStr];
-        if (!Array.isArray(loaders)) {
-          loaders = [loaders];
-        }
-        for (const loader of loaders) {
-          if (loader) {
-            ret.push([loader, flags as Flags] as const);
+      /**
+       * Whether space is reserved for the progress bar even when the progress visible is not active. Default true.
+       */
+      progressPlaceholder?: boolean;
+
+      /** The height of the progress bar */
+      height?: 10;
+      /** The color of the progress bar */
+      color?: string;
+    } & { [K in CamelFlags]?: boolean }
+  >(),
+  {
+    progressPlaceholder: true,
+    height: 10,
+    color: "primary",
+    // Prevent our flags from defaulting to `false`. We need them to default to `undefined`
+    // so we can detect if they were specified at all.
+    ...Object.fromEntries(
+      Object.entries(new Flags()).flatMap((f) => [
+        // [camelize(f[0]), undefined],
+        [camelize("no-" + f[0]), undefined],
+      ])
+    ),
+  }
+);
+
+const baselineFlags = computed(() => {
+  const flags = new Flags();
+  for (const key in flags) {
+    const noFlag = camelize(("no-" + key) as NoFlags) as Camelize<NoFlags>;
+
+    const flagValue = props[noFlag];
+    if (flagValue != null) flags[key as YesFlags] = !flagValue;
+  }
+
+  return Object.freeze(flags);
+});
+
+const loaderFlags = computed(() => {
+  var ret = [];
+
+  let loaders = props.loaders;
+  if (Array.isArray(loaders)) {
+    loaders = { "": loaders };
+  } else if (loaders == null) {
+    // An attempt to pass a single loader that was nullish.
+    loaders = { "": [] };
+  } else if (loaders instanceof ApiState) {
+    loaders = { "": [loaders] };
+  }
+
+  for (const flagsStr in loaders) {
+    let loadersForFlags = loaders[flagsStr as keyof typeof loaders];
+    if (!Array.isArray(loadersForFlags)) {
+      loadersForFlags = [loadersForFlags];
+    }
+
+    let flags: Flags = baselineFlags.value;
+
+    // Parse flags out of the object key for usages of the form:
+    // <CLS :loaders="{"no-loading-content secondary-progress": [vm.$load]}" />
+    if (flagsStr != "") {
+      const flagsArr = flagsStr.split(" ");
+      flags = { ...flags };
+
+      if (flagsArr.length) {
+        for (const flagName in flags) {
+          if (flagsArr.includes(flagName)) {
+            flags[flagName as YesFlags] = true;
+          } else if (flagsArr.includes("no-" + flagName)) {
+            flags[flagName as YesFlags] = false;
           }
         }
       }
+    }
+
+    for (const loader of loadersForFlags) {
+      if (loader) {
+        ret.push([loader, flags as Flags] as const);
+      }
+    }
+  }
 
-      return ret;
-    },
-
-    anyFailed() {
-      return this.loaderFlags.some((f) => f[0].wasSuccessful === false);
-    },
-
-    errorMessages() {
-      return this.loaderFlags
-        .filter((f) => f[0].wasSuccessful === false)
-        .map((f) => f[0].message);
-    },
-
-    showLoading() {
-      return this.loaderFlags.some((f) => {
-        const [loader, flags] = f;
-        if (!flags.progress) return false;
-
-        const isLoading = loader.isLoading;
-        return (
-          (flags["initial-progress"] &&
-            isLoading &&
-            loader.wasSuccessful == null) ||
-          (flags["secondary-progress"] &&
-            isLoading &&
-            loader.wasSuccessful != null)
-        );
-      });
-    },
-
-    usePlaceholder() {
-      return (
-        this.progressPlaceholder &&
-        this.loaderFlags.some(
-          (f) =>
-            f[1].progress &&
-            f[1]["secondary-progress"] &&
-            f[1]["loading-content"]
-        )
-      );
-    },
-
-    showContent() {
-      return this.loaderFlags.every(([loader, flags]) => {
-        if (!flags["loading-content"] && loader.isLoading) {
-          // loader is loading, and loading content is off.
-          return false;
-        }
-        if (!flags["error-content"] && loader.wasSuccessful === false) {
-          // loader has an error, and error content is off
-          return false;
-        }
-        if (
-          // initial content is off, and either:
-          !flags["initial-content"] &&
-          // loader has not yet loaded
-          (loader.wasSuccessful == null ||
-            // or loader has loaded, but it errored and there's no current result
-            // (implying it has never successfully loaded).
-            (loader.wasSuccessful === false && !loader.hasResult))
-        ) {
-          return false;
-        }
-        return true;
-      });
-    },
-  },
+  return ret;
 });
+
+const errorMessages = computed(() => {
+  return loaderFlags.value
+    .filter((f) => f[0].wasSuccessful === false)
+    .map((f) => f[0].message);
+});
+
+const showLoading = computed(() => {
+  return loaderFlags.value.some((f) => {
+    const [loader, flags] = f;
+    if (!flags.progress) return false;
+
+    const isLoading = loader.isLoading;
+    return (
+      (flags["initial-progress"] &&
+        isLoading &&
+        loader.wasSuccessful == null) ||
+      (flags["secondary-progress"] && isLoading && loader.wasSuccessful != null)
+    );
+  });
+});
+
+const usePlaceholder = computed(() => {
+  return (
+    props.progressPlaceholder &&
+    loaderFlags.value.some(
+      (f) =>
+        // Obviously don't need a progress placeholder if progress is off:
+        f[1].progress &&
+        // If secondary progress is off, the progress bar will never be shown
+        // once any content has been obtained, so there's no need to keep a placeholder.
+        f[1]["secondary-progress"] &&
+        // If loading content was off then the progressbar will just take the place of the content,
+        // so a placeholder is only needed if loading-content is on.
+        f[1]["loading-content"]
+    )
+  );
+});
+
+const showContent = computed(() => {
+  return loaderFlags.value.every(([loader, flags]) => {
+    if (!flags["loading-content"] && loader.isLoading) {
+      // loader is loading, and loading content is off.
+      return false;
+    }
+    if (!flags["error-content"] && loader.wasSuccessful === false) {
+      // loader has an error, and error content is off
+      return false;
+    }
+    if (
+      // initial content is off, and either:
+      !flags["initial-content"] &&
+      // loader has not yet loaded
+      (loader.wasSuccessful == null ||
+        // or loader has loaded, but it errored and there's no current result
+        // (implying it has never successfully loaded).
+        (loader.wasSuccessful === false && !loader.hasResult))
+    ) {
+      return false;
+    }
+    return true;
+  });
+});
+
+// For testing:
+defineExpose({ loaderFlags });
 </script>
 
 <style lang="scss">