<!-- Source: https://scoped.svelte.page/examples/class-value-alias -->

# ClassValue Alias

> A prop alias example where scoped:internalClass sends parent-scoped classes to a class-like child prop.

**Source:** [https://scoped.svelte.page/examples/class-value-alias](https://scoped.svelte.page/examples/class-value-alias)

**Markdown mirror:** [https://scoped.svelte.page/examples/class-value-alias.md](https://scoped.svelte.page/examples/class-value-alias.md)

---

This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.

## FIG-001: ClassValue alias.

The child still owns its prop contract. The parent says which prop carries scoped classes by using `scoped:internalClass`, so the compiler does not have to know the child type graph.

**Metadata:** tag: `ALIAS` | syntax: `scoped:internalClass` | value: `ClassValue` | status: `passing`

### Source

#### ClassValueAlias.svelte

Source file: [src/lib/examples/scoped-props/demos/ClassValueAlias.svelte](https://github.com/humanspeak/svelte-scoped-props/blob/main/docs/src/lib/examples/scoped-props/demos/ClassValueAlias.svelte)

```svelte
<script lang="ts">
    import type { ClassValue } from '@humanspeak/svelte-scoped-props/runtime'
    import InternalClassCard from './components/InternalClassCard.svelte'

    let internalClass: ClassValue = ['parent-owned', { dimmed: true }]
</script>

<article class="scoped-proof passed dk-demo-shell">
    <div class="render-grid">
        <div class="render-example">
            <span class="example-label">Native element</span>
            <div class={['demo-card', internalClass]}>This div receives the same ClassValue.</div>
        </div>
        <div class="render-example">
            <span class="example-label">Internal class prop</span>
            <InternalClassCard scoped:internalClass={internalClass} />
        </div>
    </div>

    <div class="comparison-grid">
        <div class="comparison-head">
            <span class="example-label">Source</span>
            <span class="example-label">Current result</span>
        </div>

        <div class="comparison-row">
            <div class="comparison-cell comparison-source">
                <span>Native element</span>
                <code>internalClass = ['parent-owned', &#123; dimmed: true &#125;]</code>
                <code>&lt;div class=&#123;['demo-card', internalClass]&#125;&gt;</code>
            </div>
            <div class="comparison-cell comparison-result">
                <span>Native element</span>
                <code>demo-card parent-owned dimmed svelte-parent</code>
                <strong>pink and faded</strong>
            </div>
        </div>

        <div class="comparison-row">
            <div class="comparison-cell comparison-source">
                <span>Alias prop contract</span>
                <code
                    >&lt;InternalClassCard scoped:internalClass=&#123;internalClass&#125; /&gt;</code
                >
                <code>&lt;div class=&#123;['internal-card', internalClass]&#125;&gt;</code>
            </div>
            <div class="comparison-cell comparison-result">
                <span>ClassValue prop</span>
                <code>internal-card parent-owned dimmed svelte-parent svelte-child</code>
                <strong>has parent hash</strong>
            </div>
        </div>
    </div>
</article>

<style>
    .parent-owned {
        border-color: var(--proof-parent-border, purple);
        color: var(--proof-parent-ink, purple);
        background: var(--proof-parent-bg, pink);
    }

    .dimmed {
        opacity: 0.35;
    }
</style>
```

#### InternalClassCard.svelte

Source file: [src/lib/examples/scoped-props/demos/components/InternalClassCard.svelte](https://github.com/humanspeak/svelte-scoped-props/blob/main/docs/src/lib/examples/scoped-props/demos/components/InternalClassCard.svelte)

```svelte
<script lang="ts">
    import type { ClassValue } from '@humanspeak/svelte-scoped-props/runtime'
    import { describeClass } from './classValue'

    type Props = {
        internalClass?: ClassValue
        'scoped:internalClass'?: ClassValue
    }

    let { internalClass }: Props = $props()
    let classText = $derived(describeClass(internalClass))
</script>

<div class={['internal-card', internalClass]}>
    Internal node receives <code>internalClass="{classText}"</code>.
</div>

<style>
    .internal-card {
        min-height: 116px;
        display: grid;
        place-items: center;
        padding: 18px;
        border: 2px dashed var(--proof-card-border, gray);
        border-radius: 6px;
        color: var(--proof-card-ink, black);
        text-align: center;
        background: var(--proof-card-bg, white);
    }

    code {
        padding: 2px 5px;
        border-radius: 4px;
        overflow-wrap: anywhere;
        background: var(--proof-code-bg, #eef2f7);
        color: var(--proof-code-ink, #111111);
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 0.95em;
    }
</style>
```
