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

Update docs (#965)

Browse source 
* chore(docs): run "npx browserslist@latest --update-db"

* chore(docs): upgrade carbon-icons-svelte to latest

* refactor(docs): re-use styles from css/all.scss

* chore(docs): add pnpm install command

* chore(docs): upgrade prettier, prettier-plugin-svelte

* docs(date-picker): improve "DatePicker in a modal" example

* fix(docs): restore "scripts-markup-styles" svelte sort order

* chore(docs): upgrade mdsvex

* chore(deps-dev): bump prettier, prettier-plugin-svelte, svelte

* refactor(docs): use svelte:fragment where applicable

* fix(docs): include missing "options" in svelteSortOrder prettier config
This commit is contained in:
Eric Liu 2022-01-01 10:58:42 -08:00 • committed by GitHub
commit dce2dda72a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
27 changed files with 119 additions and 190 deletions
Download patch file Download diff file Expand all files Collapse all files

8
docs/package.json
View file

@ -15,14 +15,14 @@
"carbon-components": "10.48.0", "carbon-components": "10.48.0",
"carbon-components-10.47": "npm:carbon-components@10.47", "carbon-components-10.47": "npm:carbon-components@10.47",
"carbon-components-svelte": "../", "carbon-components-svelte": "../",
"carbon-icons-svelte": "^10.38.0", "carbon-icons-svelte": "^10.44.3",
"clipboard-copy": "^4.0.1", "clipboard-copy": "^4.0.1",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"mdsvex": "^0.8.8", "mdsvex": "^0.9.8",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"postcss": "^8.2.4", "postcss": "^8.2.4",
"prettier": "^2.1.2", "prettier": "^2.5.1",
"prettier-plugin-svelte": "^1.4.1", "prettier-plugin-svelte": "^2.5.1",
"prism-svelte": "^0.4.7", "prism-svelte": "^0.4.7",
"prismjs": "^1.21.0", "prismjs": "^1.21.0",
"remark-slug": "^6.0.0", "remark-slug": "^6.0.0",

84
docs/src/App.svelte
View file

@ -4,87 +4,3 @@
</script> </script>
<Router routes="{routes}" /> <Router routes="{routes}" />
<style lang="scss" global>
// This is a recipe for dynamic, client-side theming
// All Carbon themes are included (White, Gray 10, Gray 90, Gray 100)
$feature-flags: (
// Custom CSS properties must be enabled to dynamically switch themes
enable-css-custom-properties: true,
ui-shell: true,
grid-columns-16: true
);
$css--font-face: true;
$css--helpers: true;
$css--body: true;
$css--use-layer: true;
$css--reset: true;
$css--default-type: true;
$css--plex: true;
// Use all Carbon themes
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
@import "carbon-components/scss/globals/scss/component-tokens";
@import "carbon-components/src/components/tag/tag";
@import "carbon-components/src/components/notification/inline-notification";
@import "carbon-components/src/components/notification/toast-notification";
@import "carbon-components-10.47/src/components/popover/popover";
// The default theme is "white" (White)
:root {
@include carbon--theme($carbon--theme--white, true) {
@include emit-component-tokens($tag-colors);
@include emit-component-tokens($notification-colors);
}
}
// Set the <html> theme attribute to "g10" to use the Gray 10 theme
// <html theme="g10">
:root[theme="g10"] {
@include carbon--theme($carbon--theme--g10, true) {
@include emit-component-tokens($tag-colors);
@include emit-component-tokens($notification-colors);
}
}
// Set the <html> theme attribute to "g80" to use the Gray 90 theme
// <html theme="g80">
:root[theme="g80"] {
@include carbon--theme($carbon--theme--g80, true) {
@include emit-component-tokens($tag-colors);
@include emit-component-tokens($notification-colors);
}
}
// Set the <html> theme attribute to "g90" to use the Gray 90 theme
// <html theme="g90">
:root[theme="g90"] {
@include carbon--theme($carbon--theme--g90, true) {
@include emit-component-tokens($tag-colors);
@include emit-component-tokens($notification-colors);
}
}
// Set the <html> theme attribute to "g100" to use the Gray 100 theme
// <html theme="g100">
:root[theme="g100"] {
@include carbon--theme($carbon--theme--g100, true) {
@include emit-component-tokens($tag-colors);
@include emit-component-tokens($notification-colors);
}
}
// Programmatically update the theme in JavaScript:
// document.documentElement.setAttribute("theme", "g90");
@import "carbon-components/scss/globals/scss/_css--reset";
@import "carbon-components/scss/globals/scss/_css--font-face";
@import "carbon-components/scss/globals/scss/_css--helpers";
@import "carbon-components/scss/globals/scss/_css--body";
@import "carbon-components/scss/globals/grid/grid";
// Import all component styles
@import "carbon-components/scss/globals/scss/styles";
</style>

1
docs/src/index.js
View file

@ -1,4 +1,5 @@
import App from "./App.svelte"; import App from "./App.svelte";
import "../../css/all.scss";
const app = new App({ target: document.body }); const app = new App({ target: document.body });

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

@ -48,9 +48,9 @@
expandedByDefault="{true}" expandedByDefault="{true}"
bind:isSideNavOpen bind:isSideNavOpen
> >
<div slot="skip-to-content"> <svelte:fragment slot="skip-to-content">
<SkipToContent /> <SkipToContent />
</div> </svelte:fragment>
<span slot="platform" class="platform-name"> <span slot="platform" class="platform-name">
Carbon Components Svelte Carbon Components Svelte

12
docs/src/pages/components/Accordion.svx
View file

@ -46,25 +46,25 @@ See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a togglea
<Accordion> <Accordion>
<AccordionItem> <AccordionItem>
<div slot="title"> <svelte:fragment slot="title">
<h5>Natural Language Classifier</h5> <h5>Natural Language Classifier</h5>
<div>AI / Machine Learning</div> <div>AI / Machine Learning</div>
</div> </svelte:fragment>
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text. <p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
</p> </p>
</AccordionItem> </AccordionItem>
<AccordionItem> <AccordionItem>
<div slot="title"> <svelte:fragment slot="title">
<h5>Natural Language Understanding</h5> <h5>Natural Language Understanding</h5>
<div>AI / Machine Learning</div> <div>AI / Machine Learning</div>
</div> </svelte:fragment>
<p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p> <p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
</AccordionItem> </AccordionItem>
<AccordionItem> <AccordionItem>
<div slot="title"> <svelte:fragment slot="title">
<h5>Language Translator</h5> <h5>Language Translator</h5>
<div>AI / Machine Learning</div> <div>AI / Machine Learning</div>
</div> </svelte:fragment>
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p> <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
</AccordionItem> </AccordionItem>
</Accordion> </Accordion>

28
docs/src/pages/components/DataTable.svx
View file

@ -131,20 +131,20 @@ The slot name for the table header cells is `"cell-header"`.
}, },
]}" ]}"
> >
<span slot="cell-header" let:header> <svelte:fragment slot="cell-header" let:header>
{#if header.key === 'port'} {#if header.key === 'port'}
{header.value} (network) {header.value} (network)
{:else} {:else}
{header.value} {header.value}
{/if} {/if}
</span> </svelte:fragment>
<span slot="cell" let:row let:cell> <svelte:fragment slot="cell" let:row let:cell>
{#if cell.key === 'rule' && cell.value === 'Round robin'} {#if cell.key === 'rule' && cell.value === 'Round robin'}
<Link icon={Launch16} href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value}</Link> <Link icon={Launch16} href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value}</Link>
{:else} {:else}
{cell.value} {cell.value}
{/if} {/if}
</span> </svelte:fragment>
</DataTable> </DataTable>
### With title, description ### With title, description
@ -1018,11 +1018,11 @@ In the following example, each row in the sortable data table has an overflow me
}, },
]}" ]}"
> >
<div slot="expanded-row" let:row> <svelte:fragment slot="expanded-row" let:row>
<pre> <pre>
{JSON.stringify(row, null, 2)} {JSON.stringify(row, null, 2)}
</pre> </pre>
</div> </svelte:fragment>
</DataTable> </DataTable>
### Non-expandable rows ### Non-expandable rows
@ -1085,11 +1085,11 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
}, },
]}" ]}"
> >
<div slot="expanded-row" let:row> <svelte:fragment slot="expanded-row" let:row>
<pre> <pre>
{JSON.stringify(row, null, 2)} {JSON.stringify(row, null, 2)}
</pre> </pre>
</div> </svelte:fragment>
</DataTable> </DataTable>
### Expandable (short size) ### Expandable (short size)
@ -1146,11 +1146,11 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
}, },
]}" ]}"
> >
<div slot="expanded-row" let:row> <svelte:fragment slot="expanded-row" let:row>
<pre> <pre>
{JSON.stringify(row, null, 2)} {JSON.stringify(row, null, 2)}
</pre> </pre>
</div> </svelte:fragment>
</DataTable> </DataTable>
### Expandable (tall size) ### Expandable (tall size)
@ -1207,11 +1207,11 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
}, },
]}" ]}"
> >
<div slot="expanded-row" let:row> <svelte:fragment slot="expanded-row" let:row>
<pre> <pre>
{JSON.stringify(row, null, 2)} {JSON.stringify(row, null, 2)}
</pre> </pre>
</div> </svelte:fragment>
</DataTable> </DataTable>
### Batch expansion ### Batch expansion
@ -1268,11 +1268,11 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
}, },
]}" ]}"
> >
<div slot="expanded-row" let:row> <svelte:fragment slot="expanded-row" let:row>
<pre> <pre>
{JSON.stringify(row, null, 2)} {JSON.stringify(row, null, 2)}
</pre> </pre>
</div> </svelte:fragment>
</DataTable> </DataTable>
### Skeleton ### Skeleton

6
docs/src/pages/components/DatePicker.svx
View file

@ -71,6 +71,12 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
### DatePicker in a modal ### DatePicker in a modal
Use `flatpickrProps` to set `static: true` for the calendar to be positioned relative to the input element.
This is needed when placing a `DatePicker` inside of a `Modal` component.
Refer to [flatpickr options](https://flatpickr.js.org/options/) for a full list of config options.
<FileSource src="/framed/DatePicker/DatePickerModal" /> <FileSource src="/framed/DatePicker/DatePickerModal" />
### Skeleton ### Skeleton

8
docs/src/pages/components/ImageLoader.svx
View file

@ -16,12 +16,12 @@ This utility component uses the [Image API](https://developer.mozilla.org/en-US/
Use the "loading" and "error" named slots to render an element when the image is loading or has an error. Use the "loading" and "error" named slots to render an element when the image is loading or has an error.
<ImageLoader src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg"> <ImageLoader src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg">
<div slot="loading"> <svelte:fragment slot="loading">
<InlineLoading /> <InlineLoading />
</div> </svelte:fragment>
<div slot="error"> <svelte:fragment slot="error">
An error occurred. An error occurred.
</div> </svelte:fragment>
</ImageLoader> </ImageLoader>
### With aspect ratio ### With aspect ratio

4
docs/src/pages/components/InlineNotification.svx
View file

@ -25,9 +25,9 @@ source: Notification/InlineNotification.svelte
### With actions ### With actions
<InlineNotification kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours."> <InlineNotification kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours.">
<div slot="actions"> <svelte:fragment slot="actions">
<NotificationActionButton>Learn more</NotificationActionButton> <NotificationActionButton>Learn more</NotificationActionButton>
</div> </svelte:fragment>
</InlineNotification> </InlineNotification>
### Notification variants ### Notification variants

12
docs/src/pages/components/Tabs.svx
View file

@ -13,11 +13,11 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"]
<Tab label="Tab label 1" /> <Tab label="Tab label 1" />
<Tab label="Tab label 2" /> <Tab label="Tab label 2" />
<Tab label="Tab label 3" /> <Tab label="Tab label 3" />
<div slot="content"> <svelte:fragment slot="content">
<TabContent>Content 1</TabContent> <TabContent>Content 1</TabContent>
<TabContent>Content 2</TabContent> <TabContent>Content 2</TabContent>
<TabContent>Content 3</TabContent> <TabContent>Content 3</TabContent>
</div> </svelte:fragment>
</Tabs> </Tabs>
### Auto width ### Auto width
@ -30,11 +30,11 @@ Set `autoWidth` to `true` for tabs to have an automatically set width.
<Tab label="Tab label 1" /> <Tab label="Tab label 1" />
<Tab label="Tab label 2" /> <Tab label="Tab label 2" />
<Tab label="Tab label 3" /> <Tab label="Tab label 3" />
<div slot="content"> <svelte:fragment slot="content">
<TabContent>Content 1</TabContent> <TabContent>Content 1</TabContent>
<TabContent>Content 2</TabContent> <TabContent>Content 2</TabContent>
<TabContent>Content 3</TabContent> <TabContent>Content 3</TabContent>
</div> </svelte:fragment>
</Tabs> </Tabs>
### Reactive example ### Reactive example
@ -47,11 +47,11 @@ Set `autoWidth` to `true` for tabs to have an automatically set width.
<Tab label="Tab label 1" /> <Tab label="Tab label 1" />
<Tab label="Tab label 2" /> <Tab label="Tab label 2" />
<Tab label="Tab label 3" /> <Tab label="Tab label 3" />
<div slot="content"> <svelte:fragment slot="content">
<TabContent>Content 1</TabContent> <TabContent>Content 1</TabContent>
<TabContent>Content 2</TabContent> <TabContent>Content 2</TabContent>
<TabContent>Content 3</TabContent> <TabContent>Content 3</TabContent>
</div> </svelte:fragment>
</Tabs> </Tabs>
### Skeleton (default) ### Skeleton (default)

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

@ -23,7 +23,7 @@
</script> </script>
<DataTable sortable headers="{headers}" rows="{rows}"> <DataTable sortable headers="{headers}" rows="{rows}">
<span slot="cell" let:cell> <svelte:fragment slot="cell" let:cell>
{#if cell.key === "overflow"} {#if cell.key === "overflow"}
<OverflowMenu flipped> <OverflowMenu flipped>
<OverflowMenuItem text="Restart" /> <OverflowMenuItem text="Restart" />
@ -34,5 +34,5 @@
<OverflowMenuItem danger text="Stop" /> <OverflowMenuItem danger text="Stop" />
</OverflowMenu> </OverflowMenu>
{:else}{cell.value}{/if} {:else}{cell.value}{/if}
</span> </svelte:fragment>
</DataTable> </DataTable>

4
docs/src/pages/framed/DataTable/DataTableNonExpandableRows.svelte
View file

@ -60,9 +60,9 @@
]}" ]}"
rows="{rows}" rows="{rows}"
> >
<div slot="expanded-row" let:row> <svelte:fragment slot="expanded-row" let:row>
<pre> <pre>
{JSON.stringify(row, null, 2)} {JSON.stringify(row, null, 2)}
</pre> </pre>
</div> </svelte:fragment>
</DataTable> </DataTable>

7
docs/src/pages/framed/DatePicker/DatePickerModal.svelte
View file

@ -2,7 +2,12 @@
import { Modal, DatePicker, DatePickerInput } from "carbon-components-svelte"; import { Modal, DatePicker, DatePickerInput } from "carbon-components-svelte";
</script> </script>
<Modal open modalHeading="DatePicker"> <Modal
open
modalHeading="Meeting date"
primaryButtonText="Confirm"
secondaryButtonText="Cancel"
>
<DatePicker datePickerType="single" flatpickrProps="{{ static: true }}"> <DatePicker datePickerType="single" flatpickrProps="{{ static: true }}">
<DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" /> <DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
</DatePicker> </DatePicker>

4
docs/src/pages/framed/ImageLoader/ProgrammaticImageLoader.svelte
View file

@ -18,9 +18,9 @@
</Button> </Button>
<ImageLoader bind:this="{imageLoader}" bind:error fadeIn src="{src}"> <ImageLoader bind:this="{imageLoader}" bind:error fadeIn src="{src}">
<div slot="error"> <svelte:fragment slot="error">
<Button kind="ghost" on:click="{() => imageLoader.loadImage(src)}"> <Button kind="ghost" on:click="{() => imageLoader.loadImage(src)}">
Error. Try again Error. Try again
</Button> </Button>
</div> </svelte:fragment>
</ImageLoader> </ImageLoader>

4
docs/src/pages/framed/Tabs/TabsReactive.svelte
View file

@ -8,11 +8,11 @@
<Tab label="Tab label 1" /> <Tab label="Tab label 1" />
<Tab label="Tab label 2" /> <Tab label="Tab label 2" />
<Tab label="Tab label 3" /> <Tab label="Tab label 3" />
<div slot="content"> <svelte:fragment slot="content">
<TabContent>Content 1</TabContent> <TabContent>Content 1</TabContent>
<TabContent>Content 2</TabContent> <TabContent>Content 2</TabContent>
<TabContent>Content 3</TabContent> <TabContent>Content 3</TabContent>
</div> </svelte:fragment>
</Tabs> </Tabs>
<div> <div>

5
docs/src/pages/framed/UIShell/Header.svelte
View file

@ -15,10 +15,9 @@
</script> </script>
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen> <Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
<div slot="skip-to-content"> <svelte:fragment slot="skip-to-content">
<SkipToContent /> <SkipToContent />
</div> </svelte:fragment>
<HeaderNav> <HeaderNav>
<HeaderNavItem href="/" text="Link 1" /> <HeaderNavItem href="/" text="Link 1" />
<HeaderNavItem href="/" text="Link 2" /> <HeaderNavItem href="/" text="Link 2" />

5
docs/src/pages/framed/UIShell/HeaderNav.svelte
View file

@ -21,10 +21,9 @@
</script> </script>
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen> <Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
<div slot="skip-to-content"> <svelte:fragment slot="skip-to-content">
<SkipToContent /> <SkipToContent />
</div> </svelte:fragment>
<HeaderNav> <HeaderNav>
<HeaderNavItem href="/" text="Link 1" /> <HeaderNavItem href="/" text="Link 1" />
<HeaderNavItem href="/" text="Link 2" /> <HeaderNavItem href="/" text="Link 2" />

5
docs/src/pages/framed/UIShell/HeaderNavRail.svelte
View file

@ -22,10 +22,9 @@
</script> </script>
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen> <Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
<div slot="skip-to-content"> <svelte:fragment slot="skip-to-content">
<SkipToContent /> <SkipToContent />
</div> </svelte:fragment>
<HeaderNav> <HeaderNav>
<HeaderNavItem href="/" text="Link 1" /> <HeaderNavItem href="/" text="Link 1" />
<HeaderNavItem href="/" text="Link 2" /> <HeaderNavItem href="/" text="Link 2" />

4
docs/src/pages/framed/UIShell/HeaderSearch.svelte
View file

@ -66,9 +66,9 @@
</script> </script>
<Header company="IBM" platformName="Carbon Svelte"> <Header company="IBM" platformName="Carbon Svelte">
<div slot="skip-to-content"> <svelte:fragment slot="skip-to-content">
<SkipToContent /> <SkipToContent />
</div> </svelte:fragment>
<HeaderUtilities> <HeaderUtilities>
<HeaderSearch <HeaderSearch
bind:ref bind:ref

4
docs/src/pages/framed/UIShell/HeaderSwitcher.svelte
View file

@ -41,9 +41,9 @@
</script> </script>
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen> <Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
<div slot="skip-to-content"> <svelte:fragment slot="skip-to-content">
<SkipToContent /> <SkipToContent />
</div> </svelte:fragment>
<HeaderUtilities> <HeaderUtilities>
<HeaderAction bind:isOpen transition="{transitions[selected].value}"> <HeaderAction bind:isOpen transition="{transitions[selected].value}">
<HeaderPanelLinks> <HeaderPanelLinks>

4
docs/src/pages/framed/UIShell/HeaderUtilities.svelte
View file

@ -27,9 +27,9 @@
</script> </script>
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen> <Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
<div slot="skip-to-content"> <svelte:fragment slot="skip-to-content">
<SkipToContent /> <SkipToContent />
</div> </svelte:fragment>
<HeaderUtilities> <HeaderUtilities>
<HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust20}" /> <HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust20}" />
<HeaderAction <HeaderAction

5
docs/src/pages/framed/UIShell/PersistedHamburgerMenu.svelte
View file

@ -25,10 +25,9 @@
platformName="Carbon Svelte" platformName="Carbon Svelte"
bind:isSideNavOpen bind:isSideNavOpen
> >
<div slot="skip-to-content"> <svelte:fragment slot="skip-to-content">
<SkipToContent /> <SkipToContent />
</div> </svelte:fragment>
<HeaderNav> <HeaderNav>
<HeaderNavItem href="/" text="Link 1" /> <HeaderNavItem href="/" text="Link 1" />
<HeaderNavItem href="/" text="Link 2" /> <HeaderNavItem href="/" text="Link 2" />

9
docs/src/pages/index.svelte
View file

@ -23,6 +23,7 @@
const installYarn = "yarn add -D carbon-components-svelte"; const installYarn = "yarn add -D carbon-components-svelte";
const installNpm = "npm i -D carbon-components-svelte"; const installNpm = "npm i -D carbon-components-svelte";
const installPnpm = "pnpm i -D carbon-components-svelte";
const themes = { const themes = {
white: "White", white: "White",
g10: "Gray 10", g10: "Gray 10",
@ -98,6 +99,10 @@
<Row noGutter> <Row noGutter>
<CodeSnippet code="{installNpm}" /> <CodeSnippet code="{installNpm}" />
</Row> </Row>
<h4>Using pnpm:</h4>
<Row noGutter>
<CodeSnippet code="{installPnpm}" />
</Row>
</Column> </Column>
</Row> </Row>
<Row style="margin-bottom: var(--cds-layout-04)"> <Row style="margin-bottom: var(--cds-layout-04)">
@ -126,7 +131,7 @@
<Tab label="CSS StyleSheet" /> <Tab label="CSS StyleSheet" />
<Tab label="CDN" /> <Tab label="CDN" />
<Tab label="SCSS" /> <Tab label="SCSS" />
<div slot="content"> <svelte:fragment slot="content">
<TabContent> <TabContent>
<p> <p>
This library ships with six pre-compiled CSS StyleSheets built This library ships with six pre-compiled CSS StyleSheets built
@ -194,7 +199,7 @@
for documentation. for documentation.
</p> </p>
</TabContent> </TabContent>
</div> </svelte:fragment>
</Tabs> </Tabs>
</Column> </Column>
</Row> </Row>

3
docs/svelte.config.js
View file

@ -67,8 +67,7 @@ function plugin() {
const scriptBlock = createImports(node.value); const scriptBlock = createImports(node.value);
const formattedCode = format(scriptBlock + node.value, { const formattedCode = format(scriptBlock + node.value, {
parser: "svelte", parser: "svelte",
svelteBracketNewLine: true, svelteSortOrder: "scripts-markup-styles-options",
svelteSortOrder: "scripts-markup-styles",
}); });
const highlightedCode = Prism.highlight( const highlightedCode = Prism.highlight(
formattedCode, formattedCode,

41
docs/yarn.lock
View file

@ -452,9 +452,9 @@ cacheable-request@^7.0.1:
responselike "^2.0.0" responselike "^2.0.0"
caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178: caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
version "1.0.30001180" version "1.0.30001294"
resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001180.tgz#67abcd6d1edf48fa5e7d1e84091d1d65ab76e33b" resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001294.tgz"
integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw== integrity sha512-LiMlrs1nSKZ8qkNhpUf5KD0Al1KCBE3zaT7OLOwEkagXMEDij98SiOovn9wxVGQpklk9vVC/pUSqgYmkmKOS8g==
"carbon-components-10.47@npm:carbon-components@10.47": "carbon-components-10.47@npm:carbon-components@10.47":
version "10.47.1" version "10.47.1"
@ -467,7 +467,7 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
warning "^3.0.0" warning "^3.0.0"
carbon-components-svelte@../: carbon-components-svelte@../:
version "0.50.4" version "0.51.0"
dependencies: dependencies:
flatpickr "4.6.9" flatpickr "4.6.9"
@ -481,10 +481,10 @@ carbon-components@10.48.0:
lodash.debounce "^4.0.8" lodash.debounce "^4.0.8"
warning "^3.0.0" warning "^3.0.0"
carbon-icons-svelte@^10.38.0: carbon-icons-svelte@^10.44.3:
version "10.38.0" version "10.44.3"
resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.38.0.tgz#daf74e4a2a826ad994c950a67307b8392d80ca3a" resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.44.3.tgz#cc437d5d10512777a8d476c742ff2885fc5dfcf0"
integrity sha512-uEckbbNHFtDzKz+QRx6GxvZcezXXqfDOiaE7mupkiRPkBbALrA9CPJZbI5Q2XW5mpn8lgN3IlTm2u1iJEAlVJw== integrity sha512-vLBy3T5Dnv68vjTJEtwL7DKHX4VqXHeJ6DwPtiO9zTwoMOU3eLx/exzR6KTISuUMqfEPmrOy4dOwZc5sPWuxLA==
caseless@~0.12.0: caseless@~0.12.0:
version "0.12.0" version "0.12.0"
@ -1647,12 +1647,13 @@ mdast-util-to-string@^1.0.0:
resolved "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz#27055500103f51637bd07d01da01eb1967a43527" resolved "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz#27055500103f51637bd07d01da01eb1967a43527"
integrity sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A== integrity sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==
mdsvex@^0.8.8: mdsvex@^0.9.8:
version "0.8.8" version "0.9.8"
resolved "https://registry.npmjs.org/mdsvex/-/mdsvex-0.8.8.tgz#1d7d7a9fd681a7d0f9418a24a0c282ff9f2e828d" resolved "https://registry.yarnpkg.com/mdsvex/-/mdsvex-0.9.8.tgz#f430988b86c4d9080381de2fbe54326c046487bc"
integrity sha512-T496FO26UdKs6R7oD8GkuMgFyd37M4QZmePm4mOvT5judvF5fxes7xfICIiTSKz3If1iieXVmI6XEhNI0qqi5A== integrity sha512-5QvThjRKoKkGH00qdHxLZ5ROd80RgGiJvM2B9opeFreaiGFTLoKKFUgEBCslLrwM24cVGJLmIM3rR83OFDf3tQ==
dependencies: dependencies:
"@types/unist" "^2.0.3" "@types/unist" "^2.0.3"
prism-svelte "^0.4.7"
prismjs "^1.17.1" prismjs "^1.17.1"
vfile-message "^2.0.4" vfile-message "^2.0.4"
@ -1942,15 +1943,15 @@ prelude-ls@~1.1.2:
resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ= integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
prettier-plugin-svelte@^1.4.1: prettier-plugin-svelte@^2.5.1:
version "1.4.1" version "2.5.1"
resolved "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-1.4.1.tgz#2f0f7a149190f476dc9b4ba9da8d482bd196f1e2" resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-2.5.1.tgz#6c2f5e7fbe2aa208b340b75edc4fdfda33fb254c"
integrity sha512-6y0m37Xw01GRf/WIHau+Kp3uXj2JB1agtEmNVKb9opMy34A6OMOYhfneVpNIlrghQSw/jIV+t3e5Ngt4up2CMA== integrity sha512-IhZUcqr7Bg4LY15d87t9lDr7EyC0IPehkzH5ya5igG8zYwf3UYaYDFnVW2mckREaZyLREcH9YOouesmt4f5Ozg==
prettier@^2.1.2: prettier@^2.5.1:
version "2.1.2" version "2.5.1"
resolved "https://registry.npmjs.org/prettier/-/prettier-2.1.2.tgz#3050700dae2e4c8b67c4c3f666cdb8af405e1ce5" resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
integrity sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg== integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
prism-svelte@^0.4.7: prism-svelte@^0.4.7:
version "0.4.7" version "0.4.7"

6
package.json
View file

@ -35,14 +35,14 @@
"lint-staged": "^10.5.3", "lint-staged": "^10.5.3",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"postcss": "^8.2.4", "postcss": "^8.2.4",
"prettier": "^2.2.1", "prettier": "^2.5.1",
"prettier-plugin-svelte": "^2.1.5", "prettier-plugin-svelte": "^2.5.1",
"rollup": "^2.38.4", "rollup": "^2.38.4",
"rollup-plugin-svelte": "^7.1.0", "rollup-plugin-svelte": "^7.1.0",
"rollup-plugin-terser": "^7.0.2", "rollup-plugin-terser": "^7.0.2",
"sass": "^1.42.1", "sass": "^1.42.1",
"sveld": "^0.10.2", "sveld": "^0.10.2",
"svelte": "^3.40.1", "svelte": "^3.44.3",
"svelte-check": "^1.1.32", "svelte-check": "^1.1.32",
"typescript": "^4.1.3" "typescript": "^4.1.3"
}, },

28
yarn.lock
View file

@ -1801,21 +1801,21 @@ postcss@^8.2.4:
nanoid "^3.1.20" nanoid "^3.1.20"
source-map "^0.6.1" source-map "^0.6.1"
prettier-plugin-svelte@^2.1.5: prettier-plugin-svelte@^2.5.1:
version "2.1.5" version "2.5.1"
resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-2.1.5.tgz#cb1df2bffafa0562f05e02c6e9373806ef51ebb1" resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-2.5.1.tgz#6c2f5e7fbe2aa208b340b75edc4fdfda33fb254c"
integrity sha512-7ySuC/n0Rk8v6GrzoruojfLYde6ncjeFCAA65Dm+fXrK2Mgc3FlvzXMPpm//P3LgfEoc3zMEG/xog1YeoNhdSQ== integrity sha512-IhZUcqr7Bg4LY15d87t9lDr7EyC0IPehkzH5ya5igG8zYwf3UYaYDFnVW2mckREaZyLREcH9YOouesmt4f5Ozg==
prettier@^2.2.1:
version "2.2.1"
resolved "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
prettier@^2.3.2: prettier@^2.3.2:
version "2.4.1" version "2.4.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.1.tgz#671e11c89c14a4cfc876ce564106c4a6726c9f5c" resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.1.tgz#671e11c89c14a4cfc876ce564106c4a6726c9f5c"
integrity sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA== integrity sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==
prettier@^2.5.1:
version "2.5.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
process-nextick-args@~2.0.0: process-nextick-args@~2.0.0:
version "2.0.1" version "2.0.1"
resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@ -2345,16 +2345,16 @@ svelte-preprocess@^4.8.0:
sorcery "^0.10.0" sorcery "^0.10.0"
strip-indent "^3.0.0" strip-indent "^3.0.0"
svelte@^3.40.1:
version "3.40.1"
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.40.1.tgz#0c1fa443c812f042ce5ccd8d3bec1654a612c259"
integrity sha512-IreCwsCD5yoKlXCDXCyHZ0mh1wNwm3/5QD+nVNBzSWug5dUiWcah/8QWnDcC3IYbJbn0ZRT04b8y4ITMtr1bNQ==
svelte@^3.42.4: svelte@^3.42.4:
version "3.43.2" version "3.43.2"
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.43.2.tgz#217fc6059f52afa281f39200b6253ac1b83812b4" resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.43.2.tgz#217fc6059f52afa281f39200b6253ac1b83812b4"
integrity sha512-Lj+TJfSeod8UGnoG2opysdlCy4MCck/hHQsZwtNPXdYTwLTz+WC37QwewPhZtd+h3dpfps4h9QzFxWGVI4tzQw== integrity sha512-Lj+TJfSeod8UGnoG2opysdlCy4MCck/hHQsZwtNPXdYTwLTz+WC37QwewPhZtd+h3dpfps4h9QzFxWGVI4tzQw==
svelte@^3.44.3:
version "3.44.3"
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.44.3.tgz#795b1ced6ed3da44969099e5061b850c93c95e9a"
integrity sha512-aGgrNCip5PQFNfq9e9tmm7EYxWLVHoFsEsmKrtOeRD8dmoGDdyTQ+21xd7qgFd8MNdKGSYvg7F9dr+Tc0yDymg==
terser@^5.0.0: terser@^5.0.0:
version "5.3.0" version "5.3.0"
resolved "https://registry.npmjs.org/terser/-/terser-5.3.0.tgz#c481f4afecdcc182d5e2bdd2ff2dc61555161e81" resolved "https://registry.npmjs.org/terser/-/terser-5.3.0.tgz#c481f4afecdcc182d5e2bdd2ff2dc61555161e81"