How to set disabled slot prop of the RadioGroupOption component?

[vhscom]

I'm currently working on re-implementing the free Tailwind UI components but am unable to set the disabled slot prop of the RadioGroupOption component. As a result, I cannot to prevent users from selecting/activating unavailable items in the radio group. I've tried a number of different approaches but none of them have achieved the expected result. Below I provide more details and a way to reproduce the issue.

Functional React and Vue implementations for the Tailwind UI component I'm trying to produce:
https://tailwindui.com/components/ecommerce/components/product-quickviews

Screenshot showing my Svelte component with out of stock state selected unexpectedly:

As you can see from the screenshot above, size XXXL should not be selectable. Therefore the component is in an invalid state and would allow customers to purchase sizes that were currently out of stock (not good).

Here's the code causing the issue I've copied here directly from my test repository:

<RadioGroup value={selectedSize} on:change={setSelectedSize} class="mt-4">
  <RadioGroupLabel class="sr-only">Choose a size</RadioGroupLabel>
  <div class="grid grid-cols-4 gap-4">
    {#each product.sizes as size (size.name)}
      <!-- FIXME: Disabled slot prop not set as expected -->
      {@const outOfStock = size.inStock}
      <RadioGroupOption
        let:disabled={outOfStock}
        let:active
        let:checked
        value={size}
        class={({ active }) => {
          return classes(
            size.inStock
              ? 'bg-white shadow-sm text-gray-900 cursor-pointer'
              : 'bg-gray-50 text-gray-200 cursor-not-allowed',
            active ? 'ring-2 ring-indigo-500' : '',
            'group relative border rounded-md py-3 px-4 flex items-center justify-center text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1'
          );
        }}
      >
        <RadioGroupLabel as="p">{size.name}</RadioGroupLabel>
        {#if size.inStock}
          <div
            class={classes(
              active ? 'border' : 'border-2',
              checked ? 'border-indigo-500' : 'border-transparent',
              'absolute -inset-px rounded-md pointer-events-none'
            )}
            aria-hidden="true"
          />
        {:else}
          <div
            aria-hidden="true"
            class="absolute -inset-px rounded-md border-2 border-gray-200 pointer-events-none"
          >
            <svg
              class="absolute inset-0 w-full h-full text-gray-200 stroke-2"
              viewBox="0 0 100 100"
              preserveAspectRatio="none"
              stroke="currentColor"
            >
              <line
                x1={0}
                y1={100}
                x2={100}
                y2={0}
                vector-effect="non-scaling-stroke"
              />
            </svg>
          </div>
        {/if}
      </RadioGroupOption>
    {/each}
  </div>
</RadioGroup>

Note the FIXME in the code pointing to the area of difficulty. The outOfStock identifier is set at runtime as can be seen using the Svelte @debug statement however the outOfStock identifier is not in scope within the context of the RadioGroupOption as shown here in VSCode with IntelliSense enabled:

Note the muted appearance of the outOfStock identifier, indicating the value assigned in the each loop is not passed down into the RadioGroupOption disabled slot prop assignment.

I tried not using an identifier and set the disabled slot prop directly like let:disabled={!sizes.inStock} however Svelte throws a redbox due to a compiler error when attempting to do that.

I tried a few other things to get it working but will omit them here for the sake of brevity. As it stands either I'm doing something wrong (quite possible) or I've identified a bug in the design of svelte-headlessui (otherwise flawless so far).

To reproduce the issue:

• Clone and checkout: https://codeberg.org/vhs/svelte-tailwindui-freebies/src/commit/0dab17d375
• Run pnpm i && pnpm dev -- --open
• Click the box on the screen titled Show WithColorAndSizeSelector

I'd be greatful to anyone who can pull down the repo and run the code to reproduce the error before responding as I've spent some time trying to fix this and I understand it's a bit complicated to grok unless you're poking around at the code.

Thank you. 🙏

[rgossiaux]

You don't set slot props in Svelte. They're for information that the component is providing back to you, not information you provide to the component.

Like I said on the issue:

You want to just use the normal disabled prop, the same as the Tailwind code: disabled={!size.inStock}.

No let: involved.

[vhscom]

🤣 I can't beleive I didn't see that (twice because you mentioned it before enabling discussions)! It was staring me in the face the whole time. What's the purpose of let:disabled then? Is that for internal use in the component? If that wasn't there I doubt I'd've gotten tripped up. Thanks so much!

[rgossiaux]

I think the main purpose is for styling--if you pass a function to class it will be evaluated with the slot props as an argument, so having disabled as a slot prop lets you apply conditional classes to the RadioGroupOption itself via class={({ disabled }) => disabled ? "disabled-class" : undefined} or similar.

[vhscom]

[rgossiaux]

Thanks for the report--I think the missing intellisense on those Transition components is due to #43 and should be fixed once I address that issue.