mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore(deps-dev): upgrade prettier-plugin-svelte (#498)

Browse source
This commit is contained in:
Eric Liu 2021-01-27 15:02:02 -08:00 • committed by GitHub
commit 3d002f3246
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
72 changed files with 944 additions and 733 deletions
Download patch file Download diff file Expand all files Collapse all files

4
docs/src/App.svelte
View file

@ -3,6 +3,8 @@
import { routes } from "../.routify/routes";
</script>
<Router routes="{routes}" />
<style lang="scss" global>
@import "@carbon/themes/scss/themes";
@ -42,5 +44,3 @@
@import "carbon-components/scss/globals/grid/_grid.scss";
@import "carbon-components/scss/globals/scss/styles.scss";
</style>
<Router routes="{routes}" />

66
docs/src/components/ComponentApi.svelte
View file

@ -39,29 +39,6 @@
);
</script>
<style>
.description {
margin-bottom: var(--cds-spacing-04);
}
.cell {
position: relative;
z-index: 9;
min-height: 1.25rem;
margin-bottom: var(--cds-spacing-02);
}
.overflow {
overflow-x: auto;
}
:global(.my-layout-01-03),
:global(.overflow .bx--structured-list) {
margin-top: var(--cds-layout-01);
margin-bottom: var(--cds-layout-04);
}
</style>
<p style="margin-bottom: var(--cds-layout-02)">
Component source code:
<Link inline size="lg" href="{source}" target="_blank">
@ -101,12 +78,12 @@
{/if}
</StructuredListCell>
<StructuredListCell>
{#each prop.type.split(' | ') as type, i (type)}
{#each prop.type.split(" | ") as type, i (type)}
<div
class="cell"
style="z-index: {prop.type.split(' | ').length - i}"
>
{#if type.startsWith('typeof')}
{#if type.startsWith("typeof")}
<TooltipDefinition
direction="top"
align="start"
@ -114,7 +91,7 @@
>
Carbon Svelte icon
</TooltipDefinition>
{:else if type.startsWith('HTML')}
{:else if type.startsWith("HTML")}
<Link
href="{mdn_api}{type}"
target="_blank"
@ -125,7 +102,7 @@
</Link>
{:else if type in typeMap}
<code>{typeMap[type]}</code>
{:else if type.startsWith('(')}
{:else if type.startsWith("(")}
<code>{type}</code>
{:else}
<InlineSnippet code="{type}" />
@ -136,12 +113,12 @@
<StructuredListCell><code>{prop.value}</code></StructuredListCell>
<StructuredListCell>
{#if prop.description}
{#each prop.description.split('\n') as line}
{#each prop.description.split("\n") as line}
<div class="description">
{@html line
.replace(/\</g, '&lt;')
.replace(/\>/g, '&gt;')
.replace(/`(.*?)`/g, '<code>$1</code>')}.
.replace(/\</g, "&lt;")
.replace(/\>/g, "&gt;")
.replace(/`(.*?)`/g, "<code>$1</code>")}.
</div>
{/each}
{:else}
@ -160,7 +137,7 @@
{#if component.slots.length > 0}
<UnorderedList class="my-layout-01-03">
{#each component.slots as slot (slot.name)}
<ListItem>{slot.default ? 'default' : slot.name}</ListItem>
<ListItem>{slot.default ? "default" : slot.name}</ListItem>
{/each}
</UnorderedList>
{:else}
@ -198,9 +175,32 @@
spreads
<code>$$restProps</code>
to the
{#if component.rest_props.type === 'Element'}
{#if component.rest_props.type === "Element"}
<code>{component.rest_props.name}</code>
element.
{:else}<code>{component.rest_props.name}</code> component.{/if}
{:else}This component does not spread <code>restProps</code>{/if}
</div>
<style>
.description {
margin-bottom: var(--cds-spacing-04);
}
.cell {
position: relative;
z-index: 9;
min-height: 1.25rem;
margin-bottom: var(--cds-spacing-02);
}
.overflow {
overflow-x: auto;
}
:global(.my-layout-01-03),
:global(.overflow .bx--structured-list) {
margin-top: var(--cds-layout-01);
margin-bottom: var(--cds-layout-04);
}
</style>

12
docs/src/components/Footer.svelte
View file

@ -2,12 +2,6 @@
import { Content, Grid, Row, Column, Link } from "carbon-components-svelte";
</script>
<style>
footer {
background: var(--cds-ui-01);
}
</style>
<footer class="bx--content">
<Grid>
<Row>
@ -26,3 +20,9 @@
</Row>
</Grid>
</footer>
<style>
footer {
background: var(--cds-ui-01);
}
</style>

12
docs/src/components/InlineSnippet.svelte
View file

@ -5,12 +5,6 @@
import copy from "clipboard-copy";
</script>
<style>
div {
margin-bottom: var(--cds-spacing-04);
}
</style>
<div>
<CodeSnippet
code="{code}"
@ -20,3 +14,9 @@
}}"
/>
</div>
<style>
div {
margin-bottom: var(--cds-spacing-04);
}
</style>

68
docs/src/components/Preview.svelte
View file

@ -13,6 +13,40 @@
$: themedSrcUrl = $url(`${src}?theme=${$theme}`);
</script>
<div class="preview">
{#if framed}
<div class="framed-header">
<div
style="margin-left: var(--cds-spacing-05); color: var(--cds-text-02)"
>
Content loaded in an iframe
</div>
<Button
style="margin-left: auto;"
kind="ghost"
target="_blank"
size="field"
href="{themedSrcUrl}"
icon="{Launch16}"
>
Open in new tab
</Button>
</div>
{/if}
<div class="preview-viewer" class:framed>
{#if framed}
<iframe title="{src.split('/').pop()}" src="{themedSrcUrl}"></iframe>
{:else}
<slot />
{/if}
</div>
<div class="code-override">
<CodeSnippet type="multi" on:click="{() => copy(codeRaw)}">
{@html code}
</CodeSnippet>
</div>
</div>
<style global>
.preview {
margin-bottom: var(--cds-layout-04);
@ -130,37 +164,3 @@
height: 100%;
}
</style>
<div class="preview">
{#if framed}
<div class="framed-header">
<div
style="margin-left: var(--cds-spacing-05); color: var(--cds-text-02)"
>
Content loaded in an iframe
</div>
<Button
style="margin-left: auto;"
kind="ghost"
target="_blank"
size="field"
href="{themedSrcUrl}"
icon="{Launch16}"
>
Open in new tab
</Button>
</div>
{/if}
<div class="preview-viewer" class:framed>
{#if framed}
<iframe title="{src.split('/').pop()}" src="{themedSrcUrl}"></iframe>
{:else}
<slot />
{/if}
</div>
<div class="code-override">
<CodeSnippet type="multi" on:click="{() => copy(codeRaw)}">
{@html code}
</CodeSnippet>
</div>
</div>

54
docs/src/components/TileCard.svelte
View file

@ -12,6 +12,33 @@
$: tileComponent = href ? ClickableTile : Tile;
</script>
<div class="card-wrapper" class:borderRight class:borderBottom>
<AspectRatio>
<svelte:component
this="{tileComponent}"
href="{href}"
{...$$restProps}
style="height: 100%;"
>
<div class="card">
<div>
<h5 class="title">{title}</h5>
{#if subtitle}
<div class="subtitle">{subtitle}</div>
{/if}
</div>
<div class="card-footer">
<svelte:component
this="{LogoGithub32}"
style="fill: var(--cds-icon-01)"
/>
<Launch20 style="fill: var(--cds-icon-01)" />
</div>
</div>
</svelte:component>
</AspectRatio>
</div>
<style>
.card-wrapper {
border-right: 1px solid transparent;
@ -56,30 +83,3 @@
}
}
</style>
<div class="card-wrapper" class:borderRight class:borderBottom>
<AspectRatio>
<svelte:component
this="{tileComponent}"
href="{href}"
{...$$restProps}
style="height: 100%;"
>
<div class="card">
<div>
<h5 class="title">{title}</h5>
{#if subtitle}
<div class="subtitle">{subtitle}</div>
{/if}
</div>
<div class="card-footer">
<svelte:component
this="{LogoGithub32}"
style="fill: var(--cds-icon-01)"
/>
<Launch20 style="fill: var(--cds-icon-01)" />
</div>
</div>
</svelte:component>
</AspectRatio>
</div>

130
docs/src/layouts/ComponentLayout.svelte
View file

@ -48,71 +48,6 @@
}`;
</script>
<style global>
.override-tabs a.bx--tabs__nav-link,
.override-tabs a.bx--tabs__nav-link:focus,
.override-tabs a.bx--tabs__nav-link:active {
width: auto !important;
}
#select-theme {
width: auto;
}
.prose > p > .bx--link {
font-size: inherit;
}
.prose .toc {
margin-bottom: var(--cds-layout-01);
}
.table {
position: sticky;
max-height: calc(100vh - 3rem);
top: 3rem;
padding-top: var(--cds-spacing-05);
padding-bottom: var(--cds-spacing-05);
padding-left: var(--cds-spacing-08);
overflow-y: auto;
}
.bar {
display: flex;
justify-content: space-between;
margin-bottom: var(--cds-layout-02);
border-bottom: 1px solid var(--cds-ui-03);
}
[data-components] {
z-index: 2;
position: relative;
display: flex;
}
[data-components] .bx--grid {
width: 100%;
}
.toc h5 {
margin-bottom: var(--cds-spacing-03);
}
.toc.mobile {
display: none;
}
@media (max-width: 1056px) {
.table {
display: none;
}
.toc.mobile {
display: block;
}
}
</style>
<Content data-components>
<Grid>
<Row>
@ -208,3 +143,68 @@
</div>
</Column>
</Content>
<style global>
.override-tabs a.bx--tabs__nav-link,
.override-tabs a.bx--tabs__nav-link:focus,
.override-tabs a.bx--tabs__nav-link:active {
width: auto !important;
}
#select-theme {
width: auto;
}
.prose > p > .bx--link {
font-size: inherit;
}
.prose .toc {
margin-bottom: var(--cds-layout-01);
}
.table {
position: sticky;
max-height: calc(100vh - 3rem);
top: 3rem;
padding-top: var(--cds-spacing-05);
padding-bottom: var(--cds-spacing-05);
padding-left: var(--cds-spacing-08);
overflow-y: auto;
}
.bar {
display: flex;
justify-content: space-between;
margin-bottom: var(--cds-layout-02);
border-bottom: 1px solid var(--cds-ui-03);
}
[data-components] {
z-index: 2;
position: relative;
display: flex;
}
[data-components] .bx--grid {
width: 100%;
}
.toc h5 {
margin-bottom: var(--cds-spacing-03);
}
.toc.mobile {
display: none;
}
@media (max-width: 1056px) {
.table {
display: none;
}
.toc.mobile {
display: block;
}
}
</style>

80
docs/src/layouts/Recipe.svelte
View file

@ -24,6 +24,46 @@
});
</script>
<Content data-components>
<Grid>
<Row>
<Column>
<h1>{component}</h1>
<div class="bar">
<Select
id="select-theme"
inline
labelText="Theme"
bind:selected="{$theme}"
>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
</div>
</Column>
</Row>
<Row>
<Column class="prose">
<div class="toc mobile">
<h5>Table of Contents</h5>
<slot name="aside" />
</div>
<slot />
</Column>
</Row>
</Grid>
<Column class="table" xlg="{4}" lg="{5}">
<div class="toc">
<h5>Table of Contents</h5>
<slot name="aside" />
</div>
</Column>
</Content>
<style global>
#select-theme {
width: auto;
@ -82,43 +122,3 @@
}
}
</style>
<Content data-components>
<Grid>
<Row>
<Column>
<h1>{component}</h1>
<div class="bar">
<Select
id="select-theme"
inline
labelText="Theme"
bind:selected="{$theme}"
>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
</div>
</Column>
</Row>
<Row>
<Column class="prose">
<div class="toc mobile">
<h5>Table of Contents</h5>
<slot name="aside" />
</div>
<slot />
</Column>
</Row>
</Grid>
<Column class="table" xlg="{4}" lg="{5}">
<div class="toc">
<h5>Table of Contents</h5>
<slot name="aside" />
</div>
</Column>
</Content>

164
docs/src/pages/_layout.svelte
View file

@ -34,6 +34,88 @@
});
</script>
<!-- routify:options bundle=true -->
<svelte:window bind:innerWidth />
<Theme persist>
<Header
aria-label="Navigation"
href="{$url('/')}"
expandedByDefault="{true}"
bind:isSideNavOpen
>
<div slot="skip-to-content">
<SkipToContent />
</div>
<span slot="platform" class="platform-name">
Carbon Components Svelte
<code>v{process.env.VERSION || ""}</code>
</span>
<HeaderUtilities>
<HeaderActionLink
icon="{LogoGithub20}"
href="https://github.com/IBM/carbon-components-svelte"
target="_blank"
/>
<HeaderAction transition="{false}" bind:isOpen>
<HeaderPanelLinks>
<HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider>
<HeaderPanelLink href="https://github.com/IBM/carbon-icons-svelte">
Carbon Icons Svelte
</HeaderPanelLink>
<HeaderPanelLink
href="https://github.com/IBM/carbon-pictograms-svelte"
>
Carbon Pictograms Svelte
</HeaderPanelLink>
<HeaderPanelLink
href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte"
>
Carbon Charts Svelte
</HeaderPanelLink>
<HeaderPanelDivider>Resources</HeaderPanelDivider>
<HeaderPanelLink href="https://www.carbondesignsystem.com/">
Carbon Design System
</HeaderPanelLink>
<HeaderPanelLink href="https://www.ibm.com/design/language/">
IBM Design Language
</HeaderPanelLink>
</HeaderPanelLinks>
</HeaderAction>
</HeaderUtilities>
</Header>
<SideNav bind:isOpen="{isSideNavOpen}">
<SideNavItems>
<SideNavMenu
expanded="{$isActive($url('')) || $isActive($url('/components'))}"
text="Components"
>
{#each components.children as child, i (child.path)}
<SideNavMenuItem
text="{child.title}"
href="{$url(child.path)}"
isSelected="{$isActive($url(child.path))}"
/>
{/each}
</SideNavMenu>
<SideNavMenu expanded="{$isActive($url('/recipes'))}" text="Recipes">
{#each recipes.children as child, i (child.path)}
<SideNavMenuItem
text="{child.title}"
href="{$url(child.path)}"
isSelected="{$isActive($url(child.path))}"
/>
{/each}
</SideNavMenu>
</SideNavItems>
</SideNav>
<slot />
<Footer />
</Theme>
<style global>
.body-short-01 {
font-size: var(--cds-body-short-01-font-size);
@ -160,85 +242,3 @@
max-height: 120rem;
}
</style>
<!-- routify:options bundle=true -->
<svelte:window bind:innerWidth />
<Theme persist>
<Header
aria-label="Navigation"
href="{$url('/')}"
expandedByDefault="{true}"
bind:isSideNavOpen
>
<div slot="skip-to-content">
<SkipToContent />
</div>
<span slot="platform" class="platform-name">
Carbon Components Svelte
<code>v{process.env.VERSION || ''}</code>
</span>
<HeaderUtilities>
<HeaderActionLink
icon="{LogoGithub20}"
href="https://github.com/IBM/carbon-components-svelte"
target="_blank"
/>
<HeaderAction transition="{false}" bind:isOpen>
<HeaderPanelLinks>
<HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider>
<HeaderPanelLink href="https://github.com/IBM/carbon-icons-svelte">
Carbon Icons Svelte
</HeaderPanelLink>
<HeaderPanelLink
href="https://github.com/IBM/carbon-pictograms-svelte"
>
Carbon Pictograms Svelte
</HeaderPanelLink>
<HeaderPanelLink
href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte"
>
Carbon Charts Svelte
</HeaderPanelLink>
<HeaderPanelDivider>Resources</HeaderPanelDivider>
<HeaderPanelLink href="https://www.carbondesignsystem.com/">
Carbon Design System
</HeaderPanelLink>
<HeaderPanelLink href="https://www.ibm.com/design/language/">
IBM Design Language
</HeaderPanelLink>
</HeaderPanelLinks>
</HeaderAction>
</HeaderUtilities>
</Header>
<SideNav bind:isOpen="{isSideNavOpen}">
<SideNavItems>
<SideNavMenu
expanded="{$isActive($url('')) || $isActive($url('/components'))}"
text="Components"
>
{#each components.children as child, i (child.path)}
<SideNavMenuItem
text="{child.title}"
href="{$url(child.path)}"
isSelected="{$isActive($url(child.path))}"
/>
{/each}
</SideNavMenu>
<SideNavMenu expanded="{$isActive($url('/recipes'))}" text="Recipes">
{#each recipes.children as child, i (child.path)}
<SideNavMenuItem
text="{child.title}"
href="{$url(child.path)}"
isSelected="{$isActive($url(child.path))}"
/>
{/each}
</SideNavMenu>
</SideNavItems>
</SideNav>
<slot />
<Footer />
</Theme>

2
docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
View file

@ -29,7 +29,7 @@
open = !open;
}}"
>
{open ? 'Collapse' : 'Expand'}
{open ? "Collapse" : "Expand"}
all
</Button>

18
docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
View file

@ -6,12 +6,6 @@
const code = Array.from({ length: 20 }, (_, i) => i + 1).join("\n");
</script>
<style>
.hidden {
display: none;
}
</style>
<ToggleSmall
style="margin-bottom: var(--cds-spacing-05)"
labelText="Show code snippets"
@ -19,7 +13,8 @@
/>
{#if toggled}
<h5>"Show more" will not render</h5><br />
<h5>"Show more" will not render</h5>
<br />
{/if}
<div class:hidden="{!toggled}">
<CodeSnippet type="multi" code="{code}" />
@ -27,8 +22,15 @@
{#if toggled}
<br /><br />
<h5>"Show more" will render</h5><br />
<h5>"Show more" will render</h5>
<br />
<div class:hidden="{!toggled}">
<CodeSnippet type="multi" code="{code}" />
</div>
{/if}
<style>
.hidden {
display: none;
}
</style>

6
docs/src/pages/framed/ComboBox/FilterableComboBox.svelte
View file

@ -10,6 +10,10 @@
<ComboBox
titleText="Contact"
placeholder="Select contact method"
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
items="{[
{ id: '0', text: 'Slack' },
{ id: '1', text: 'Email' },
{ id: '2', text: 'Fax' },
]}"
shouldFilterItem="{shouldFilterItem}"
/>

12
docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
View file

@ -16,12 +16,6 @@
$: secondary = formatSelected(comboBox2_selectedIndex);
</script>
<style>
div {
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
}
</style>
<ComboBox
bind:selectedIndex="{comboBox1_selectedIndex}"
titleText="Primary contact"
@ -39,3 +33,9 @@
/>
<div>Secondary: {secondary}</div>
<style>
div {
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
}
</style>

12
docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte
View file

@ -4,12 +4,6 @@
let selectedIndex = 1;
</script>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>
<ContentSwitcher bind:selectedIndex>
<Switch text="Latest news" />
<Switch text="Trending" />
@ -27,3 +21,9 @@
</div>
<div>Selected index: {selectedIndex}</div>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>

2
docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte
View file

@ -24,7 +24,7 @@
<DataTable sortable headers="{headers}" rows="{rows}">
<span slot="cell" let:cell>
{#if cell.key === 'overflow'}
{#if cell.key === "overflow"}
<OverflowMenu flipped>
<OverflowMenuItem text="Restart" />
<OverflowMenuItem

12
docs/src/pages/framed/Dropdown/MultipleDropdown.svelte
View file

@ -16,12 +16,6 @@
$: secondary = formatSelected(dropdown2_selectedIndex);
</script>
<style>
div {
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
}
</style>
<Dropdown
titleText="Primary contact"
bind:selectedIndex="{dropdown1_selectedIndex}"
@ -39,3 +33,9 @@
/>
<div>Secondary: {secondary}</div>
<style>
div {
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
}
</style>

2
docs/src/pages/framed/InlineLoading/InlineLoadingUx.svelte
View file

@ -42,7 +42,7 @@
>
Cancel
</Button>
{#if state !== 'dormant'}
{#if state !== "dormant"}
<InlineLoading status="{state}" description="{descriptionMap[state]}" />
{:else}
<Button on:click="{() => (state = 'active')}">Submit</Button>

12
docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte
View file

@ -19,12 +19,6 @@
$: secondary = formatSelected(multiselect2_selectedIds);
</script>
<style>
div {
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
}
</style>
<MultiSelect
titleText="Primary contact"
bind:selectedIds="{multiselect1_selectedIds}"
@ -42,3 +36,9 @@
/>
<div>Secondary: {secondary}</div>
<style>
div {
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
}
</style>

2
docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte
View file

@ -19,7 +19,7 @@
</FormGroup>
<ButtonSet>
{#each ['free', 'standard', 'pro'] as value}
{#each ["free", "standard", "pro"] as value}
<Button
on:click="{() => {
plan = value;

12
docs/src/pages/framed/Search/SearchReactive.svelte
View file

@ -4,12 +4,6 @@
let value = "";
</script>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>
<Search bind:value />
<div>
@ -33,3 +27,9 @@
</div>
<div>Value: {value}</div>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>

14
docs/src/pages/framed/Toggle/ToggleReactive.svelte
View file

@ -4,19 +4,19 @@
let toggled = true;
</script>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>
<Toggle labelText="Push notifications" bind:toggled />
<div>
<Button size="small" on:click="{() => (toggled = !toggled)}">
Toggle
{toggled ? 'off' : 'on'}
{toggled ? "off" : "on"}
</Button>
</div>
<div>Toggled: {toggled}</div>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>

14
docs/src/pages/framed/Tooltip/TooltipReactive.svelte
View file

@ -4,20 +4,20 @@
let open = true;
</script>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>
<Tooltip bind:open triggerText="Resource list" align="start">
<p>Resources are provisioned based on your account's organization.</p>
</Tooltip>
<div style="margin-top: var(--cds-spacing-12);">
<Button size="small" on:click="{() => (open = !open)}">
{open ? 'Close tooltip' : 'Open tooltip'}
{open ? "Close tooltip" : "Open tooltip"}
</Button>
</div>
<div>Open: {open}</div>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>

4
docs/src/pages/framed/_reset.svelte
View file

@ -13,6 +13,8 @@
$: document.documentElement.setAttribute("theme", currentTheme);
</script>
<slot />
<style>
:global(body.framed) {
min-height: 100vh;
@ -20,5 +22,3 @@
padding: var(--cds-spacing-06) var(--cds-spacing-05);
}
</style>
<slot />