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

Fix a11y-mouse-events warning, update docs (#765)

Browse source 
* docs: update number of available Carbon icons

* docs: add svelte:head example for loading CDN styles

* chore(deps-dev): upgrade svelte to 3.40.1

* fix(a11y): disable a11y-mouse-events-have-key-events warning #760

* fix(deps): upgrade carbon-icons-svelte to v10.36.0 to avoid a11y warnings #760

* refactor(overflow-menu): remove formatStyle utility

* docs: links in paragraphs should be inline

* docs: add note on using all styles for dynamic theming
This commit is contained in:
Eric 2021-07-26 08:40:05 -07:00 • committed by GitHub
commit 6db4112b40
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
86 changed files with 161 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -11,7 +11,7 @@ Design systems facilitate design and development through reuse, consistency, and
The Carbon Svelte portfolio also includes: The Carbon Svelte portfolio also includes:
- **[Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte)**: 6000+ Carbon icons as Svelte components - **[Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte)**: 7000+ Carbon icons as Svelte components
- **[Carbon Pictograms Svelte](https://github.com/IBM/carbon-pictograms-svelte)**: 700+ Carbon pictograms as Svelte components - **[Carbon Pictograms Svelte](https://github.com/IBM/carbon-pictograms-svelte)**: 700+ Carbon pictograms as Svelte components
- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20+ charts, powered by d3 - **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20+ charts, powered by d3
- **[Carbon Preprocess Svelte](https://github.com/IBM/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon - **[Carbon Preprocess Svelte](https://github.com/IBM/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon

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

@ -158,6 +158,7 @@
.prose > p > .bx--link { .prose > p > .bx--link {
font-size: inherit; font-size: inherit;
text-decoration: underline;
} }
.prose .toc { .prose .toc {

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

@ -29,7 +29,17 @@
g80: "Gray 80", g80: "Gray 80",
g90: "Gray 90", g90: "Gray 90",
g100: "Gray 100", g100: "Gray 100",
all: "All",
}; };
const cssImportAll = `import "carbon-components-svelte/css/all.css";`;
const cssThemeToggle = `<script>
let theme = "${$theme}"; // "white" | "g10" | "g80" | "g90" | "g100"
$: document.documentElement.setAttribute("theme", theme);
<\/script>
`;
$: cssImport = `import "carbon-components-svelte/css/${$theme}.css";`; $: cssImport = `import "carbon-components-svelte/css/${$theme}.css";`;
$: cssCdn = `<!DOCTYPE html> $: cssCdn = `<!DOCTYPE html>
<html> <html>
@ -40,6 +50,12 @@
/> />
</head> </head>
</html>`; </html>`;
$: cssCdnSvelteHead = `<svelte:head>
<link
rel="stylesheet"
href="https://unpkg.com/carbon-components-svelte/css/${$theme}.css"
/>
</svelte:head>`;
</script> </script>
<Content> <Content>
@ -74,11 +90,6 @@
<Row style="margin-bottom: var(--cds-layout-02)"> <Row style="margin-bottom: var(--cds-layout-02)">
<Column> <Column>
<h3>Installation</h3> <h3>Installation</h3>
<p>
Install
<code>carbon-components-svelte</code>
as a development dependency in your project.
</p>
<h4>Using Yarn:</h4> <h4>Using Yarn:</h4>
<Row noGutter> <Row noGutter>
<CodeSnippet code="{installYarn}" /> <CodeSnippet code="{installYarn}" />
@ -89,7 +100,7 @@
</Row> </Row>
</Column> </Column>
</Row> </Row>
<Row style="margin-bottom: var(--cds-layout-05)"> <Row style="margin-bottom: var(--cds-layout-04)">
<Column> <Column>
<h3>Styling</h3> <h3>Styling</h3>
<p> <p>
@ -109,8 +120,8 @@
</Column> </Column>
</Row> </Row>
<Row style="margin-bottom: var(--cds-layout-02)"> <Row>
<Column xlg="{10}" noGutter> <Column max="{10}" xlg="{10}" noGutter>
<Tabs> <Tabs>
<Tab label="CSS StyleSheet" /> <Tab label="CSS StyleSheet" />
<Tab label="CDN" /> <Tab label="CDN" />
@ -144,10 +155,8 @@
unpkg.com unpkg.com
</OutboundLink>. </OutboundLink>.
</p> </p>
<p> <p>This is best suited for rapid prototyping.</p>
This is best suited for rapid prototyping or if your set-up does <h5>HTML</h5>
not use a CSS loader.
</p>
<Row padding noGutter> <Row padding noGutter>
<Column> <Column>
<p> <p>
@ -155,6 +164,14 @@
</p> </p>
</Column> </Column>
</Row> </Row>
<h5>svelte:head</h5>
<Row padding noGutter>
<Column>
<p>
<CodeSnippet type="multi" code="{cssCdnSvelteHead}" />
</p>
</Column>
</Row>
</TabContent> </TabContent>
<TabContent> <TabContent>
<p> <p>
@ -182,7 +199,39 @@
</Column> </Column>
</Row> </Row>
<Row> <Row style="margin-bottom: var(--cds-layout-02)">
<Column>
<h3>Dynamic theming</h3>
<p>Use the "all.css" StyleSheet for dynamic, client-side theming.</p>
<Row padding noGutter>
<Column>
<p>
<CodeSnippet type="single" code="{cssImportAll}" />
</p>
</Column>
</Row>
<p>
Programmatically switch between each of the five Carbon themes by
setting the "theme" attribute on the HTML element.
</p>
<Row padding noGutter>
<Column>
<p>
<CodeSnippet type="multi" code="{cssThemeToggle}" />
</p>
</Column>
</Row>
<p>
You can use the
<Link inline size="lg" href="/components/Theme">
Theme utility component
</Link>
to update the theme at runtime.
</p>
</Column>
</Row>
<Row style="margin-bottom: var(--cds-layout-02)">
<Column> <Column>
<h3>Portfolio</h3> <h3>Portfolio</h3>
<p> <p>
@ -206,7 +255,7 @@
<TileCard <TileCard
borderBottom borderBottom
title="Carbon Icons Svelte" title="Carbon Icons Svelte"
subtitle="6000+ icons" subtitle="7000+ icons"
target="_blank" target="_blank"
href="https://github.com/IBM/carbon-icons-svelte" href="https://github.com/IBM/carbon-icons-svelte"
/> />

4
package.json
View file

@ -23,7 +23,7 @@
"publish-examples": "node scripts/publish-examples" "publish-examples": "node scripts/publish-examples"
}, },
"dependencies": { "dependencies": {
"carbon-icons-svelte": "^10.27.0", "carbon-icons-svelte": "^10.36.0",
"flatpickr": "4.6.9" "flatpickr": "4.6.9"
}, },
"devDependencies": { "devDependencies": {
@ -44,7 +44,7 @@
"rollup-plugin-terser": "^7.0.2", "rollup-plugin-terser": "^7.0.2",
"sass": "^1.32.6", "sass": "^1.32.6",
"sveld": "^0.8.2", "sveld": "^0.8.2",
"svelte": "^3.32.1", "svelte": "^3.40.1",
"svelte-check": "^1.1.32", "svelte-check": "^1.1.32",
"typescript": "^4.1.3" "typescript": "^4.1.3"
}, },

1
src/Accordion/Accordion.svelte
View file

@ -30,6 +30,7 @@
setContext("Accordion", { disableItems }); setContext("Accordion", { disableItems });
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
{#if skeleton} {#if skeleton}
<AccordionSkeleton <AccordionSkeleton
{...$$restProps} {...$$restProps}

1
src/Accordion/AccordionItem.svelte
View file

@ -34,6 +34,7 @@
}); });
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<li <li
class:bx--accordion__item="{true}" class:bx--accordion__item="{true}"
class:bx--accordion__item--active="{open}" class:bx--accordion__item--active="{open}"

1
src/Accordion/AccordionSkeleton.svelte
View file

@ -21,6 +21,7 @@
import SkeletonText from "../SkeletonText/SkeletonText.svelte"; import SkeletonText from "../SkeletonText/SkeletonText.svelte";
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<ul <ul
class:bx--skeleton="{true}" class:bx--skeleton="{true}"
class:bx--accordion="{true}" class:bx--accordion="{true}"

1
src/Breadcrumb/Breadcrumb.svelte
View file

@ -10,6 +10,7 @@
import BreadcrumbSkeleton from "./BreadcrumbSkeleton.svelte"; import BreadcrumbSkeleton from "./BreadcrumbSkeleton.svelte";
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
{#if skeleton} {#if skeleton}
<BreadcrumbSkeleton <BreadcrumbSkeleton
noTrailingSlash="{noTrailingSlash}" noTrailingSlash="{noTrailingSlash}"

1
src/Breadcrumb/BreadcrumbItem.svelte
View file

@ -19,6 +19,7 @@
setContext("BreadcrumbItem", {}); setContext("BreadcrumbItem", {});
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<li <li
class:bx--breadcrumb-item="{true}" class:bx--breadcrumb-item="{true}"
class:bx--breadcrumb-item--current="{isCurrentPage && class:bx--breadcrumb-item--current="{isCurrentPage &&

1
src/Breadcrumb/BreadcrumbSkeleton.svelte
View file

@ -6,6 +6,7 @@
export let count = 3; export let count = 3;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--skeleton="{true}" class:bx--skeleton="{true}"
class:bx--breadcrumb="{true}" class:bx--breadcrumb="{true}"

1
src/Button/Button.svelte
View file

@ -131,6 +131,7 @@
}; };
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
{#if skeleton} {#if skeleton}
<ButtonSkeleton <ButtonSkeleton
href="{href}" href="{href}"

1
src/Button/ButtonSkeleton.svelte
View file

@ -18,6 +18,7 @@
export let small = false; export let small = false;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
{#if href} {#if href}
<a <a
href="{href}" href="{href}"

1
src/Checkbox/Checkbox.svelte
View file

@ -47,6 +47,7 @@
$: dispatch("check", checked); $: dispatch("check", checked);
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
{#if skeleton} {#if skeleton}
<CheckboxSkeleton <CheckboxSkeleton
{...$$restProps} {...$$restProps}

1
src/Checkbox/CheckboxSkeleton.svelte
View file

@ -1,3 +1,4 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--form-item="{true}" class:bx--form-item="{true}"
class:bx--checkbox-wrapper="{true}" class:bx--checkbox-wrapper="{true}"

1
src/CodeSnippet/CodeSnippet.svelte
View file

@ -116,6 +116,7 @@
} }
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
{#if skeleton} {#if skeleton}
<CodeSnippetSkeleton <CodeSnippetSkeleton
type="{type}" type="{type}"

1
src/CodeSnippet/CodeSnippetSkeleton.svelte
View file

@ -6,6 +6,7 @@
export let type = "single"; export let type = "single";
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--skeleton="{true}" class:bx--skeleton="{true}"
class:bx--snippet="{true}" class:bx--snippet="{true}"

1
src/ComposedModal/ComposedModal.svelte
View file

@ -97,6 +97,7 @@
}); });
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
bind:this="{ref}" bind:this="{ref}"
role="presentation" role="presentation"

1
src/ContentSwitcher/ContentSwitcher.svelte
View file

@ -63,6 +63,7 @@
}); });
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
role="tablist" role="tablist"
class:bx--content-switcher="{true}" class:bx--content-switcher="{true}"

1
src/ContentSwitcher/Switch.svelte
View file

@ -38,6 +38,7 @@
}); });
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<button <button
bind:this="{ref}" bind:this="{ref}"
role="tab" role="tab"

1
src/DataTable/DataTableSkeleton.svelte
View file

@ -41,6 +41,7 @@
); );
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--skeleton="{true}" class:bx--skeleton="{true}"
class:bx--data-table-container="{true}" class:bx--data-table-container="{true}"

1
src/DataTable/TableCell.svelte
View file

@ -1,3 +1,4 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<td {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave> <td {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
<slot /> <slot />
</td> </td>

1
src/DataTable/TableHead.svelte
View file

@ -1,3 +1,4 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<thead {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave> <thead {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
<slot /> <slot />
</thead> </thead>

1
src/DataTable/TableHeader.svelte
View file

@ -27,6 +27,7 @@
$: ariaLabel = translateWithId(); $: ariaLabel = translateWithId();
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
{#if $tableSortable && !disableSorting} {#if $tableSortable && !disableSorting}
<th <th
aria-sort="{active ? $sortHeader.sortDirection : 'none'}" aria-sort="{active ? $sortHeader.sortDirection : 'none'}"

1
src/DataTable/TableRow.svelte
View file

@ -1,3 +1,4 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<tr {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave> <tr {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
<slot /> <slot />
</tr> </tr>

1
src/DatePicker/DatePicker.svelte
View file

@ -200,6 +200,7 @@
}}" }}"
/> />
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--form-item="{true}" class:bx--form-item="{true}"
{...$$restProps} {...$$restProps}

1
src/DatePicker/DatePickerSkeleton.svelte
View file

@ -6,6 +6,7 @@
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--form-item="{true}" class:bx--form-item="{true}"
{...$$restProps} {...$$restProps}

1
src/Dropdown/DropdownSkeleton.svelte
View file

@ -3,6 +3,7 @@
export let inline = false; export let inline = false;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--skeleton="{true}" class:bx--skeleton="{true}"
class:bx--dropdown-v2="{true}" class:bx--dropdown-v2="{true}"

1
src/FileUploader/FileUploader.svelte
View file

@ -76,6 +76,7 @@
}); });
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--form-item="{true}" class:bx--form-item="{true}"
{...$$restProps} {...$$restProps}

1
src/FileUploader/FileUploaderItem.svelte
View file

@ -39,6 +39,7 @@
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<span <span
id="{id}" id="{id}"
class:bx--file__selected-file="{true}" class:bx--file__selected-file="{true}"

1
src/FileUploader/FileUploaderSkeleton.svelte
View file

@ -3,6 +3,7 @@
import { SkeletonText } from "../SkeletonText"; import { SkeletonText } from "../SkeletonText";
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--form-item="{true}" class:bx--form-item="{true}"
{...$$restProps} {...$$restProps}

1
src/Form/Form.svelte
View file

@ -1,3 +1,4 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<form <form
class:bx--form="{true}" class:bx--form="{true}"
{...$$restProps} {...$$restProps}

1
src/FormGroup/FormGroup.svelte
View file

@ -18,6 +18,7 @@
export let legendId = ""; export let legendId = "";
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<fieldset <fieldset
data-invalid="{invalid || undefined}" data-invalid="{invalid || undefined}"
class:bx--fieldset="{true}" class:bx--fieldset="{true}"

1
src/FormItem/FormItem.svelte
View file

@ -1,3 +1,4 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--form-item="{true}" class:bx--form-item="{true}"
{...$$restProps} {...$$restProps}

1
src/FormLabel/FormLabel.svelte
View file

@ -3,6 +3,7 @@
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<label <label
class:bx--label="{true}" class:bx--label="{true}"
for="{id}" for="{id}"

1
src/Icon/IconSkeleton.svelte
View file

@ -8,6 +8,7 @@
export let size = 16; export let size = 16;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--icon--skeleton="{true}" class:bx--icon--skeleton="{true}"
{...$$restProps} {...$$restProps}

1
src/InlineLoading/InlineLoading.svelte
View file

@ -44,6 +44,7 @@
}); });
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--inline-loading="{true}" class:bx--inline-loading="{true}"
aria-live="assertive" aria-live="assertive"

1
src/Link/Link.svelte
View file

@ -31,6 +31,7 @@
export let ref = null; export let ref = null;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
{#if disabled} {#if disabled}
<p <p
bind:this="{ref}" bind:this="{ref}"

1
src/ListItem/ListItem.svelte
View file

@ -1,3 +1,4 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<li <li
class:bx--list__item="{true}" class:bx--list__item="{true}"
{...$$restProps} {...$$restProps}

1
src/Modal/Modal.svelte
View file

@ -136,6 +136,7 @@
} }
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
bind:this="{ref}" bind:this="{ref}"
role="presentation" role="presentation"

1
src/Notification/InlineNotification.svelte
View file

@ -56,6 +56,7 @@
}); });
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
{#if open} {#if open}
<div <div
role="{role}" role="{role}"

1
src/Notification/NotificationButton.svelte
View file

@ -23,6 +23,7 @@
import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte"; import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<button <button
type="button" type="button"
aria-label="{iconDescription}" aria-label="{iconDescription}"

1
src/Notification/ToastNotification.svelte
View file

@ -59,6 +59,7 @@
}); });
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
{#if open} {#if open}
<div <div
role="{role}" role="{role}"

1
src/NumberInput/NumberInput.svelte
View file

@ -143,6 +143,7 @@
"Numeric input field with increment and decrement buttons"; "Numeric input field with increment and decrement buttons";
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--form-item="{true}" class:bx--form-item="{true}"
on:click on:click

1
src/NumberInput/NumberInputSkeleton.svelte
View file

@ -3,6 +3,7 @@
export let hideLabel = false; export let hideLabel = false;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--form-item="{true}" class:bx--form-item="{true}"
{...$$restProps} {...$$restProps}

1
src/OrderedList/OrderedList.svelte
View file

@ -9,6 +9,7 @@
export let expressive = false; export let expressive = false;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<ol <ol
class:bx--list--ordered="{!native}" class:bx--list--ordered="{!native}"
class:bx--list--ordered--native="{native}" class:bx--list--ordered--native="{native}"

10
src/OverflowMenu/OverflowMenu.svelte
View file

@ -64,8 +64,6 @@
import OverflowMenuVertical16 from "carbon-icons-svelte/lib/OverflowMenuVertical16/OverflowMenuVertical16.svelte"; import OverflowMenuVertical16 from "carbon-icons-svelte/lib/OverflowMenuVertical16/OverflowMenuVertical16.svelte";
import OverflowMenuHorizontal16 from "carbon-icons-svelte/lib/OverflowMenuHorizontal16/OverflowMenuHorizontal16.svelte"; import OverflowMenuHorizontal16 from "carbon-icons-svelte/lib/OverflowMenuHorizontal16/OverflowMenuHorizontal16.svelte";
import { formatStyle } from "./formatStyle";
const ctxBreadcrumbItem = getContext("BreadcrumbItem"); const ctxBreadcrumbItem = getContext("BreadcrumbItem");
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const items = writable([]); const items = writable([]);
@ -155,10 +153,11 @@
$: if ($items[$currentIndex]) { $: if ($items[$currentIndex]) {
focusedId.set($items[$currentIndex].id); focusedId.set($items[$currentIndex].id);
} }
$: dynamicPseudoWidth = `#${id} .bx--overflow-menu-options.bx--overflow-menu-options:after { $: styles = `<style>
#${id} .bx--overflow-menu-options.bx--overflow-menu-options:after {
width: ${buttonWidth ? buttonWidth + "px" : "2rem"}; width: ${buttonWidth ? buttonWidth + "px" : "2rem"};
}`; }
$: styles = formatStyle(dynamicPseudoWidth); <\/style>`;
</script> </script>
<svelte:head> <svelte:head>
@ -174,6 +173,7 @@
}}" }}"
/> />
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<button <button
bind:this="{buttonRef}" bind:this="{buttonRef}"
type="button" type="button"

1
src/OverflowMenu/formatStyle.js
View file

@ -1 +0,0 @@
export const formatStyle = (style) => ["<style>", style, "</style>"].join("");

1
src/Pagination/PaginationSkeleton.svelte
View file

@ -2,6 +2,7 @@
import SkeletonText from "../SkeletonText/SkeletonText.svelte"; import SkeletonText from "../SkeletonText/SkeletonText.svelte";
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--pagination="{true}" class:bx--pagination="{true}"
class:bx--skeleton="{true}" class:bx--skeleton="{true}"

1
src/ProgressIndicator/ProgressIndicator.svelte
View file

@ -60,6 +60,7 @@
); );
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<ul <ul
class:bx--progress="{true}" class:bx--progress="{true}"
class:bx--progress--vertical="{vertical}" class:bx--progress--vertical="{vertical}"

1
src/ProgressIndicator/ProgressIndicatorSkeleton.svelte
View file

@ -6,6 +6,7 @@
export let count = 4; export let count = 4;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<ul <ul
class:bx--progress="{true}" class:bx--progress="{true}"
class:bx--progress--vertical="{vertical}" class:bx--progress--vertical="{vertical}"

1
src/ProgressIndicator/ProgressStep.svelte
View file

@ -48,6 +48,7 @@
}); });
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<li <li
aria-disabled="{disabled}" aria-disabled="{disabled}"
id="{id}" id="{id}"

1
src/RadioButton/RadioButtonSkeleton.svelte
View file

@ -1,3 +1,4 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--radio-button-wrapper="{true}" class:bx--radio-button-wrapper="{true}"
{...$$restProps} {...$$restProps}

1
src/RadioButtonGroup/RadioButtonGroup.svelte
View file

@ -66,6 +66,7 @@
}); });
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
id="{id}" id="{id}"
class:bx--form-item="{true}" class:bx--form-item="{true}"

1
src/Search/SearchSkeleton.svelte
View file

@ -12,6 +12,7 @@
export let size = "xl"; export let size = "xl";
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--skeleton="{true}" class:bx--skeleton="{true}"
class:bx--search--sm="{size === 'sm' || small}" class:bx--search--sm="{size === 'sm' || small}"

1
src/Select/SelectSkeleton.svelte
View file

@ -3,6 +3,7 @@
export let hideLabel = false; export let hideLabel = false;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--form-item="{true}" class:bx--form-item="{true}"
{...$$restProps} {...$$restProps}

1
src/SkeletonPlaceholder/SkeletonPlaceholder.svelte
View file

@ -1,3 +1,4 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--skeleton__placeholder="{true}" class:bx--skeleton__placeholder="{true}"
{...$$restProps} {...$$restProps}

1
src/SkeletonText/SkeletonText.svelte
View file

@ -26,6 +26,7 @@
} }
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
{#if paragraph} {#if paragraph}
<div {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave> <div {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
{#each rows as { width }} {#each rows as { width }}

1
src/Slider/Slider.svelte
View file

@ -124,6 +124,7 @@
on:touchcancel="{stopHolding}" on:touchcancel="{stopHolding}"
/> />
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--form-item="{true}" class:bx--form-item="{true}"
{...$$restProps} {...$$restProps}

1
src/Slider/SliderSkeleton.svelte
View file

@ -3,6 +3,7 @@
export let hideLabel = false; export let hideLabel = false;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--form-item="{true}" class:bx--form-item="{true}"
{...$$restProps} {...$$restProps}

1
src/StructuredList/StructuredList.svelte
View file

@ -37,6 +37,7 @@
$: dispatch("change", $selectedValue); $: dispatch("change", $selectedValue);
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
role="table" role="table"
class:bx--structured-list="{true}" class:bx--structured-list="{true}"

1
src/StructuredList/StructuredListBody.svelte
View file

@ -1,3 +1,4 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
role="rowgroup" role="rowgroup"
class:bx--structured-list-tbody="{true}" class:bx--structured-list-tbody="{true}"

1
src/StructuredList/StructuredListCell.svelte
View file

@ -6,6 +6,7 @@
export let noWrap = false; export let noWrap = false;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
role="{head ? 'columnheader' : 'cell'}" role="{head ? 'columnheader' : 'cell'}"
class:bx--structured-list-th="{head}" class:bx--structured-list-th="{head}"

1
src/StructuredList/StructuredListHead.svelte
View file

@ -1,3 +1,4 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
role="rowgroup" role="rowgroup"
class:bx--structured-list-thead="{true}" class:bx--structured-list-thead="{true}"

1
src/StructuredList/StructuredListRow.svelte
View file

@ -9,6 +9,7 @@
export let tabindex = "0"; export let tabindex = "0";
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
{#if label} {#if label}
<!-- svelte-ignore a11y-label-has-associated-control --> <!-- svelte-ignore a11y-label-has-associated-control -->
<label <label

1
src/StructuredList/StructuredListSkeleton.svelte
View file

@ -6,6 +6,7 @@
export let border = false; export let border = false;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--skeleton="{true}" class:bx--skeleton="{true}"
class:bx--structured-list="{true}" class:bx--structured-list="{true}"

1
src/Tabs/Tab.svelte
View file

@ -43,6 +43,7 @@
}); });
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<li <li
tabindex="-1" tabindex="-1"
role="presentation" role="presentation"

1
src/Tabs/TabsSkeleton.svelte
View file

@ -9,6 +9,7 @@
export let type = "default"; export let type = "default";
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--tabs="{true}" class:bx--tabs="{true}"
class:bx--skeleton="{true}" class:bx--skeleton="{true}"

1
src/Tag/Tag.svelte
View file

@ -41,6 +41,7 @@
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
{#if skeleton} {#if skeleton}
<TagSkeleton <TagSkeleton
size="{size}" size="{size}"

1
src/Tag/TagSkeleton.svelte
View file

@ -3,6 +3,7 @@
export let size = "default"; export let size = "default";
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<span <span
class:bx--tag="{true}" class:bx--tag="{true}"
class:bx--tag--sm="{size === 'sm'}" class:bx--tag--sm="{size === 'sm'}"

1
src/TextArea/TextArea.svelte
View file

@ -49,6 +49,7 @@
$: errorId = `error-${id}`; $: errorId = `error-${id}`;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
on:click on:click
on:mouseover on:mouseover

1
src/TextArea/TextAreaSkeleton.svelte
View file

@ -3,6 +3,7 @@
export let hideLabel = false; export let hideLabel = false;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--form-item="{true}" class:bx--form-item="{true}"
{...$$restProps} {...$$restProps}

1
src/TextInput/PasswordInput.svelte
View file

@ -93,6 +93,7 @@
$: warnId = `warn-${id}`; $: warnId = `warn-${id}`;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--form-item="{true}" class:bx--form-item="{true}"
class:bx--text-input-wrapper="{true}" class:bx--text-input-wrapper="{true}"

1
src/TextInput/TextInput.svelte
View file

@ -77,6 +77,7 @@
$: warnId = `warn-${id}`; $: warnId = `warn-${id}`;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--form-item="{true}" class:bx--form-item="{true}"
class:bx--text-input-wrapper="{true}" class:bx--text-input-wrapper="{true}"

1
src/TextInput/TextInputSkeleton.svelte
View file

@ -3,6 +3,7 @@
export let hideLabel = false; export let hideLabel = false;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--form-item="{true}" class:bx--form-item="{true}"
{...$$restProps} {...$$restProps}

1
src/Tile/ExpandableTile.svelte
View file

@ -51,6 +51,7 @@
}); });
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<button <button
bind:this="{ref}" bind:this="{ref}"
type="button" type="button"

1
src/Tile/RadioTile.svelte
View file

@ -56,6 +56,7 @@
} }
}}" }}"
/> />
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<label <label
for="{id}" for="{id}"
class:bx--tile="{true}" class:bx--tile="{true}"

1
src/Tile/SelectableTile.svelte
View file

@ -52,6 +52,7 @@
title="{title}" title="{title}"
disabled="{disabled}" disabled="{disabled}"
/> />
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<label <label
for="{id}" for="{id}"
tabindex="{disabled ? undefined : tabindex}" tabindex="{disabled ? undefined : tabindex}"

1
src/Tile/Tile.svelte
View file

@ -3,6 +3,7 @@
export let light = false; export let light = false;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--tile="{true}" class:bx--tile="{true}"
class:bx--tile--light="{light}" class:bx--tile--light="{light}"

1
src/TimePicker/TimePicker.svelte
View file

@ -57,6 +57,7 @@
export let ref = null; export let ref = null;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--form-item="{true}" class:bx--form-item="{true}"
on:click on:click

1
src/TimePicker/TimePickerSelect.svelte
View file

@ -44,6 +44,7 @@
$: value = $selectedValue; $: value = $selectedValue;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--select="{true}" class:bx--select="{true}"
class:bx--time-picker__select="{true}" class:bx--time-picker__select="{true}"

1
src/Toggle/Toggle.svelte
View file

@ -40,6 +40,7 @@
$: dispatch("toggle", { toggled }); $: dispatch("toggle", { toggled });
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--form-item="{true}" class:bx--form-item="{true}"
{...$$restProps} {...$$restProps}

1
src/Toggle/ToggleSkeleton.svelte
View file

@ -12,6 +12,7 @@
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--form-item="{true}" class:bx--form-item="{true}"
{...$$restProps} {...$$restProps}

1
src/ToggleSmall/ToggleSmall.svelte
View file

@ -30,6 +30,7 @@
export let name = undefined; export let name = undefined;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--form-item="{true}" class:bx--form-item="{true}"
{...$$restProps} {...$$restProps}

1
src/ToggleSmall/ToggleSmallSkeleton.svelte
View file

@ -12,6 +12,7 @@
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--form-item="{true}" class:bx--form-item="{true}"
{...$$restProps} {...$$restProps}

1
src/UnorderedList/UnorderedList.svelte
View file

@ -6,6 +6,7 @@
export let expressive = false; export let expressive = false;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<ul <ul
class:bx--list--unordered="{true}" class:bx--list--unordered="{true}"
class:bx--list--nested="{nested}" class:bx--list--nested="{nested}"

15
yarn.lock
View file

@ -463,10 +463,10 @@ carbon-components@10.40.0:
lodash.debounce "^4.0.8" lodash.debounce "^4.0.8"
warning "^3.0.0" warning "^3.0.0"
carbon-icons-svelte@^10.27.0: carbon-icons-svelte@^10.36.0:
version "10.27.0" version "10.36.0"
resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.27.0.tgz#918e806d09e0e9cf61cf756ff0f9be49125ff9ea" resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.36.0.tgz#3f269f2c52520d14fcd42161a633afbb7c68b4bf"
integrity sha512-e3l95wurOuEYMQxaDT2oYH322yRKgvTq5TDkzvylMGlCkA8erJH5lSwCM59VNFgPtptH4fIW9FlbQtpfp4iQ7Q== integrity sha512-YlrHtjdRqMFiptNVpQ4M+gMvpYDoKQydBY5A82thAXIHk9JrbrVLzq6RgJugTijHT8yzMS1zXaw6YYhqL8Qzqw==
chalk@^2.0.0, chalk@^2.4.1: chalk@^2.0.0, chalk@^2.4.1:
version "2.4.2" version "2.4.2"
@ -2434,11 +2434,16 @@ svelte-preprocess@^4.7.3:
detect-indent "^6.0.0" detect-indent "^6.0.0"
strip-indent "^3.0.0" strip-indent "^3.0.0"
svelte@^3.31.2, svelte@^3.32.1: svelte@^3.31.2:
version "3.32.1" version "3.32.1"
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.32.1.tgz#c4b6e35517d0ed77e652cc8964ef660afa2f70f3" resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.32.1.tgz#c4b6e35517d0ed77e652cc8964ef660afa2f70f3"
integrity sha512-j1KmD2ZOU0RGq1/STDXjwfh0/eJ/Deh2NXyuz1bpR9eOcz9yImn4CGxXdbSAN7cMTm9a7IyPUIbuBCzu/pXK0g== integrity sha512-j1KmD2ZOU0RGq1/STDXjwfh0/eJ/Deh2NXyuz1bpR9eOcz9yImn4CGxXdbSAN7cMTm9a7IyPUIbuBCzu/pXK0g==
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==
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"