mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +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:
- **[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 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

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

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

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

@ -29,7 +29,17 @@
g80: "Gray 80",
g90: "Gray 90",
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";`;
$: cssCdn = `<!DOCTYPE html>
<html>
@ -40,6 +50,12 @@
/>
</head>
</html>`;
$: cssCdnSvelteHead = `<svelte:head>
<link
rel="stylesheet"
href="https://unpkg.com/carbon-components-svelte/css/${$theme}.css"
/>
</svelte:head>`;
</script>
<Content>
@ -74,11 +90,6 @@
<Row style="margin-bottom: var(--cds-layout-02)">
<Column>
<h3>Installation</h3>
<p>
Install
<code>carbon-components-svelte</code>
as a development dependency in your project.
</p>
<h4>Using Yarn:</h4>
<Row noGutter>
<CodeSnippet code="{installYarn}" />
@ -89,7 +100,7 @@
</Row>
</Column>
</Row>
<Row style="margin-bottom: var(--cds-layout-05)">
<Row style="margin-bottom: var(--cds-layout-04)">
<Column>
<h3>Styling</h3>
<p>
@ -109,8 +120,8 @@
</Column>
</Row>
<Row style="margin-bottom: var(--cds-layout-02)">
<Column xlg="{10}" noGutter>
<Row>
<Column max="{10}" xlg="{10}" noGutter>
<Tabs>
<Tab label="CSS StyleSheet" />
<Tab label="CDN" />
@ -144,10 +155,8 @@
unpkg.com
</OutboundLink>.
</p>
<p>
This is best suited for rapid prototyping or if your set-up does
not use a CSS loader.
</p>
<p>This is best suited for rapid prototyping.</p>
<h5>HTML</h5>
<Row padding noGutter>
<Column>
<p>
@ -155,6 +164,14 @@
</p>
</Column>
</Row>
<h5>svelte:head</h5>
<Row padding noGutter>
<Column>
<p>
<CodeSnippet type="multi" code="{cssCdnSvelteHead}" />
</p>
</Column>
</Row>
</TabContent>
<TabContent>
<p>
@ -182,7 +199,39 @@
</Column>
</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>
<h3>Portfolio</h3>
<p>
@ -206,7 +255,7 @@
<TileCard
borderBottom
title="Carbon Icons Svelte"
subtitle="6000+ icons"
subtitle="7000+ icons"
target="_blank"
href="https://github.com/IBM/carbon-icons-svelte"
/>

4
package.json
View file

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

1
src/Accordion/Accordion.svelte
View file

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

1
src/Accordion/AccordionItem.svelte
View file

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

1
src/Accordion/AccordionSkeleton.svelte
View file

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

1
src/Breadcrumb/Breadcrumb.svelte
View file

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

1
src/Breadcrumb/BreadcrumbItem.svelte
View file

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

1
src/Breadcrumb/BreadcrumbSkeleton.svelte
View file

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

1
src/Button/Button.svelte
View file

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

1
src/Button/ButtonSkeleton.svelte
View file

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

1
src/Checkbox/Checkbox.svelte
View file

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

1
src/Checkbox/CheckboxSkeleton.svelte
View file

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

1
src/CodeSnippet/CodeSnippet.svelte
View file

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

1
src/CodeSnippet/CodeSnippetSkeleton.svelte
View file

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

1
src/ComposedModal/ComposedModal.svelte
View file

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

1
src/ContentSwitcher/ContentSwitcher.svelte
View file

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

1
src/ContentSwitcher/Switch.svelte
View file

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

1
src/DataTable/DataTableSkeleton.svelte
View file

@ -41,6 +41,7 @@
);
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div
class:bx--skeleton="{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>
<slot />
</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>
<slot />
</thead>

1
src/DataTable/TableHeader.svelte
View file

@ -27,6 +27,7 @@
$: ariaLabel = translateWithId();
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
{#if $tableSortable && !disableSorting}
<th
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>
<slot />
</tr>

1
src/DatePicker/DatePicker.svelte
View file

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

1
src/DatePicker/DatePickerSkeleton.svelte
View file

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

1
src/Dropdown/DropdownSkeleton.svelte
View file

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

1
src/FileUploader/FileUploader.svelte
View file

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

1
src/FileUploader/FileUploaderItem.svelte
View file

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

1
src/FileUploader/FileUploaderSkeleton.svelte
View file

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

1
src/Form/Form.svelte
View file

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

1
src/FormGroup/FormGroup.svelte
View file

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

1
src/FormItem/FormItem.svelte
View file

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

1
src/FormLabel/FormLabel.svelte
View file

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

1
src/Icon/IconSkeleton.svelte
View file

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

1
src/InlineLoading/InlineLoading.svelte
View file

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

1
src/Link/Link.svelte
View file

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

1
src/ListItem/ListItem.svelte
View file

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

1
src/Modal/Modal.svelte
View file

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

1
src/Notification/InlineNotification.svelte
View file

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

1
src/Notification/NotificationButton.svelte
View file

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

1
src/Notification/ToastNotification.svelte
View file

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

1
src/NumberInput/NumberInput.svelte
View file

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

1
src/NumberInput/NumberInputSkeleton.svelte
View file

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

1
src/OrderedList/OrderedList.svelte
View file

@ -9,6 +9,7 @@
export let expressive = false;
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<ol
class:bx--list--ordered="{!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 OverflowMenuHorizontal16 from "carbon-icons-svelte/lib/OverflowMenuHorizontal16/OverflowMenuHorizontal16.svelte";
import { formatStyle } from "./formatStyle";
const ctxBreadcrumbItem = getContext("BreadcrumbItem");
const dispatch = createEventDispatcher();
const items = writable([]);
@ -155,10 +153,11 @@
$: if ($items[$currentIndex]) {
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"};
}`;
$: styles = formatStyle(dynamicPseudoWidth);
}
<\/style>`;
</script>
<svelte:head>
@ -174,6 +173,7 @@
}}"
/>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<button
bind:this="{buttonRef}"
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";
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div
class:bx--pagination="{true}"
class:bx--skeleton="{true}"

1
src/ProgressIndicator/ProgressIndicator.svelte
View file

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

1
src/ProgressIndicator/ProgressIndicatorSkeleton.svelte
View file

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

1
src/ProgressIndicator/ProgressStep.svelte
View file

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

1
src/RadioButton/RadioButtonSkeleton.svelte
View file

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

1
src/RadioButtonGroup/RadioButtonGroup.svelte
View file

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

1
src/Search/SearchSkeleton.svelte
View file

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

1
src/Select/SelectSkeleton.svelte
View file

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

1
src/SkeletonPlaceholder/SkeletonPlaceholder.svelte
View file

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

1
src/SkeletonText/SkeletonText.svelte
View file

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

1
src/Slider/Slider.svelte
View file

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

1
src/Slider/SliderSkeleton.svelte
View file

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

1
src/StructuredList/StructuredList.svelte
View file

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

1
src/StructuredList/StructuredListCell.svelte
View file

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

1
src/StructuredList/StructuredListRow.svelte
View file

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

1
src/StructuredList/StructuredListSkeleton.svelte
View file

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

1
src/Tabs/Tab.svelte
View file

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

1
src/Tabs/TabsSkeleton.svelte
View file

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

1
src/Tag/Tag.svelte
View file

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

1
src/Tag/TagSkeleton.svelte
View file

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

1
src/TextArea/TextArea.svelte
View file

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

1
src/TextArea/TextAreaSkeleton.svelte
View file

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

1
src/TextInput/PasswordInput.svelte
View file

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

1
src/TextInput/TextInput.svelte
View file

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

1
src/TextInput/TextInputSkeleton.svelte
View file

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

1
src/Tile/ExpandableTile.svelte
View file

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

1
src/Tile/RadioTile.svelte
View file

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

1
src/Tile/SelectableTile.svelte
View file

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

1
src/Tile/Tile.svelte
View file

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

1
src/TimePicker/TimePicker.svelte
View file

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

1
src/TimePicker/TimePickerSelect.svelte
View file

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

1
src/Toggle/Toggle.svelte
View file

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

1
src/Toggle/ToggleSkeleton.svelte
View file

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

1
src/ToggleSmall/ToggleSmall.svelte
View file

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

1
src/ToggleSmall/ToggleSmallSkeleton.svelte
View file

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

1
src/UnorderedList/UnorderedList.svelte
View file

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

15
yarn.lock
View file

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