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

refactor(components): convert const to reactive where appropriate

Browse source 
- Inline class assignments to avoid script-level clutter
- Ignore a11y-missing-attribute instead of redundant href
This commit is contained in:
Eric Liu 2019-12-24 09:41:12 -08:00
commit c446fc74f4
94 changed files with 469 additions and 598 deletions
Download patch file Download diff file Expand all files Collapse all files

2
docs/iframe.html
View file

@ -70,4 +70,4 @@
}</script><style>#root[hidden], }</script><style>#root[hidden],
#docs-root[hidden] { #docs-root[hidden] {
display: none !important; display: none !important;
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.9ba103da9a704f605f83.bundle.js"></script><script src="vendors~main.9ba103da9a704f605f83.bundle.js"></script><script src="main.9ba103da9a704f605f83.bundle.js"></script></body></html> }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.34594522ea7877f23b9b.bundle.js"></script><script src="vendors~main.34594522ea7877f23b9b.bundle.js"></script><script src="main.34594522ea7877f23b9b.bundle.js"></script></body></html>

2
docs/main.34594522ea7877f23b9b.bundle.js Normal file
View file

File diff suppressed because one or more lines are too long

1
docs/main.34594522ea7877f23b9b.bundle.js.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"main.34594522ea7877f23b9b.bundle.js","sources":["webpack:///main.34594522ea7877f23b9b.bundle.js"],"mappings":"AAAA","sourceRoot":""}

2
docs/main.9ba103da9a704f605f83.bundle.js
View file

File diff suppressed because one or more lines are too long

1
docs/main.9ba103da9a704f605f83.bundle.js.map
View file

@ -1 +0,0 @@
{"version":3,"file":"main.9ba103da9a704f605f83.bundle.js","sources":["webpack:///main.9ba103da9a704f605f83.bundle.js"],"mappings":"AAAA","sourceRoot":""}

2
docs/runtime~main.9ba103da9a704f605f83.bundle.js → docs/runtime~main.34594522ea7877f23b9b.bundle.js
View file

@ -1,2 +1,2 @@
!function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={1:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="";var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]); !function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={1:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="";var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]);
//# sourceMappingURL=runtime~main.9ba103da9a704f605f83.bundle.js.map //# sourceMappingURL=runtime~main.34594522ea7877f23b9b.bundle.js.map

2
docs/runtime~main.9ba103da9a704f605f83.bundle.js.map → docs/runtime~main.34594522ea7877f23b9b.bundle.js.map
View file

@ -1 +1 @@
{"version":3,"file":"runtime~main.9ba103da9a704f605f83.bundle.js","sources":["webpack:///runtime~main.ce61f8335d8fdea2cda4.bundle.js"],"mappings":"AAAA","sourceRoot":""} {"version":3,"file":"runtime~main.34594522ea7877f23b9b.bundle.js","sources":["webpack:///runtime~main.ce61f8335d8fdea2cda4.bundle.js"],"mappings":"AAAA","sourceRoot":""}

2
docs/vendors~main.9ba103da9a704f605f83.bundle.js → docs/vendors~main.34594522ea7877f23b9b.bundle.js
View file

@ -78,4 +78,4 @@ function isObjectObject(o){return!0===
* Released under the MIT License. * Released under the MIT License.
*/ */
function isObject(val){return null!=val&&"object"==typeof val&&!1===Array.isArray(val)}(o)&&"[object Object]"===Object.prototype.toString.call(o)}function isPlainObject(o){var ctor,prot;return!1!==isObjectObject(o)&&("function"==typeof(ctor=o.constructor)&&(!1!==isObjectObject(prot=ctor.prototype)&&!1!==prot.hasOwnProperty("isPrototypeOf")))}__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"default",(function(){return isPlainObject}))}]]); function isObject(val){return null!=val&&"object"==typeof val&&!1===Array.isArray(val)}(o)&&"[object Object]"===Object.prototype.toString.call(o)}function isPlainObject(o){var ctor,prot;return!1!==isObjectObject(o)&&("function"==typeof(ctor=o.constructor)&&(!1!==isObjectObject(prot=ctor.prototype)&&!1!==prot.hasOwnProperty("isPrototypeOf")))}__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"default",(function(){return isPlainObject}))}]]);
//# sourceMappingURL=vendors~main.9ba103da9a704f605f83.bundle.js.map //# sourceMappingURL=vendors~main.34594522ea7877f23b9b.bundle.js.map

2
docs/vendors~main.9ba103da9a704f605f83.bundle.js.map → docs/vendors~main.34594522ea7877f23b9b.bundle.js.map
View file

@ -1 +1 @@
{"version":3,"file":"vendors~main.9ba103da9a704f605f83.bundle.js","sources":["webpack:///vendors~main.9ba103da9a704f605f83.bundle.js"],"mappings":"AAAA;;;;;AAyqeA;;;;;AAi9JA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAufA;;;;;;;AAfA","sourceRoot":""} {"version":3,"file":"vendors~main.34594522ea7877f23b9b.bundle.js","sources":["webpack:///vendors~main.9ba103da9a704f605f83.bundle.js"],"mappings":"AAAA;;;;;AAyqeA;;;;;AAi9JA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAufA;;;;;;;AAfA","sourceRoot":""}

13
src/components/Accordion/Accordion.Skeleton.svelte
View file

@ -8,12 +8,15 @@
import ChevronRight16 from 'carbon-icons-svelte/lib/ChevronRight16'; import ChevronRight16 from 'carbon-icons-svelte/lib/ChevronRight16';
import { cx, fillArray } from '../../lib'; import { cx, fillArray } from '../../lib';
import SkeletonText from '../SkeletonText'; import SkeletonText from '../SkeletonText';
const _class = cx('--accordion', '--skeleton', className);
const items = fillArray(open ? count - 1 : count);
</script> </script>
<ul on:click on:mouseover on:mouseenter on:mouseleave {style} class={_class}> <ul
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--accordion', '--skeleton', className)}
{style}>
{#if open} {#if open}
<li class={cx('--accordion__item', '--accordion__item--active')}> <li class={cx('--accordion__item', '--accordion__item--active')}>
<span class={cx('--accordion__heading')}> <span class={cx('--accordion__heading')}>
@ -27,7 +30,7 @@
</div> </div>
</li> </li>
{/if} {/if}
{#each items as item, i (item)} {#each fillArray(open ? count - 1 : count) as item, i (item)}
<li class={cx('--accordion__item')}> <li class={cx('--accordion__item')}>
<span class={cx('--accordion__heading')}> <span class={cx('--accordion__heading')}>
<ChevronRight16 class={cx('--accordion__arrow')} /> <ChevronRight16 class={cx('--accordion__arrow')} />

4
src/components/Accordion/Accordion.svelte
View file

@ -4,10 +4,8 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--accordion', className);
</script> </script>
<ul on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <ul on:click on:mouseover on:mouseenter on:mouseleave class={cx('--accordion', className)} {style}>
<slot /> <slot />
</ul> </ul>

13
src/components/Accordion/AccordionItem.svelte
View file

@ -10,17 +10,10 @@
import { cx } from '../../lib'; import { cx } from '../../lib';
let animation = undefined; let animation = undefined;
$: _class = cx(
'--accordion__item',
open && '--accordion__item--active',
animation && `--accordion__item--${animation}`,
className
);
</script> </script>
<li <li
class={_class} class={cx('--accordion__item', open && '--accordion__item--active', animation && `--accordion__item--${animation}`, className)}
on:animationend on:animationend
on:animationend={() => { on:animationend={() => {
animation = undefined; animation = undefined;
@ -40,8 +33,8 @@
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
on:keydown on:keydown
on:keydown={event => { on:keydown={({ key }) => {
if (open && event.key === 'Escape') { if (open && key === 'Escape') {
open = false; open = false;
} }
}}> }}>

10
src/components/Breadcrumb/Breadcrumb.Skeleton.svelte
View file

@ -4,11 +4,15 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--breadcrumb', '--skeleton', className);
</script> </script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <div
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--breadcrumb', '--skeleton', className)}
{style}>
{#each [0, 1, 2] as item, i (item)} {#each [0, 1, 2] as item, i (item)}
<div class={cx('--breadcrumb-item')}> <div class={cx('--breadcrumb-item')}>
<span class={cx('--link')}>&nbsp;</span> <span class={cx('--link')}>&nbsp;</span>

7
src/components/Breadcrumb/Breadcrumb.svelte
View file

@ -5,9 +5,6 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const ariaLabel = $$props['aria-label'] || 'Breadcrumb';
const _class = cx('--breadcrumb', noTrailingSlash && '--breadcrumb--no-trailing-slash');
</script> </script>
<nav <nav
@ -15,10 +12,10 @@
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
aria-label={ariaLabel} aria-label={$$props['aria-label'] || 'Breadcrumb'}
class={className} class={className}
{style}> {style}>
<ol class={_class}> <ol class={cx('--breadcrumb', noTrailingSlash && '--breadcrumb--no-trailing-slash')}>
<slot /> <slot />
</ol> </ol>
</nav> </nav>

25
src/components/Breadcrumb/BreadcrumbItem.svelte
View file

@ -8,22 +8,21 @@
import { cx } from '../../lib'; import { cx } from '../../lib';
import Link from '../Link'; import Link from '../Link';
const ariaCurrent = $$props['aria-current']; $: ariaCurrent = $$props['aria-current'];
const _class = cx(
'--breadcrumb-item',
isCurrentPage && ariaCurrent !== 'page' && '--breadcrumb-item--current',
className
);
</script> </script>
{#if href} <li
<li on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--breadcrumb-item', isCurrentPage && ariaCurrent !== 'page' && '--breadcrumb-item--current', className)}
{style}>
{#if href}
<Link {href} aria-current={ariaCurrent}> <Link {href} aria-current={ariaCurrent}>
<slot /> <slot />
</Link> </Link>
</li> {:else}
{:else}
<li on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
<slot props={{ 'aria-current': ariaCurrent, class: cx('--link') }} /> <slot props={{ 'aria-current': ariaCurrent, class: cx('--link') }} />
</li> {/if}
{/if} </li>

18
src/components/Button/Button.Skeleton.svelte
View file

@ -11,9 +11,23 @@
</script> </script>
{#if href} {#if href}
<a role="button" on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style} {href}> <a
role="button"
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--skeleton', '--btn', small && '--btn--sm', className)}
{style}
{href}>
{''} {''}
</a> </a>
{:else} {:else}
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style} /> <div
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--skeleton', '--btn', small && '--btn--sm', className)}
{style} />
{/if} {/if}

3
src/components/Button/Button.Story.svelte
View file

@ -66,7 +66,8 @@
</Button> </Button>
&nbsp; &nbsp;
<Button {...regularProps} as let:props> <Button {...regularProps} as let:props>
<a href="#link" {...props}>Custom component</a> <!-- svelte-ignore a11y-missing-attribute -->
<a {...props}>Custom component</a>
</Button> </Button>
{/if} {/if}
</div> </div>

28
src/components/CodeSnippet/CodeSnippet.Skeleton.svelte
View file

@ -5,28 +5,22 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx(
'--snippet',
'--skeleton',
type === 'single' && '--snippet--single',
type === 'multi' && '--snippet--multi',
className
);
</script> </script>
{#if type === 'single'} <div
<div on:click on:mouseover on:mouseenter on:mouseleave {style} class={_class}> on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--snippet', '--skeleton', type === 'single' && '--snippet--single', type === 'multi' && '--snippet--multi', className)}
{style}>
<div class={cx('--snippet-container')}> <div class={cx('--snippet-container')}>
{#if type === 'single'}
<span /> <span />
</div> {:else if type === 'multi'}
</div>
{:else if type === 'multi'}
<div on:click on:mouseover on:mouseenter on:mouseleave {style} class={_class}>
<div class={cx('--snippet-container')}>
<span /> <span />
<span /> <span />
<span /> <span />
{/if}
</div> </div>
</div> </div>
{/if}

18
src/components/CodeSnippet/CodeSnippet.svelte
View file

@ -26,14 +26,6 @@
$: if (codeRef) { $: if (codeRef) {
showMoreLess = type === 'multi' && codeRef.getBoundingClientRect().height > 255; showMoreLess = type === 'multi' && codeRef.getBoundingClientRect().height > 255;
} }
$: _class = cx(
'--snippet',
type && `--snippet--${type}`,
type === 'inline' && '--btn--copy',
expanded && '--snippet--expand',
light && '--snippet--light',
className
);
</script> </script>
{#if type === 'inline'} {#if type === 'inline'}
@ -44,7 +36,7 @@
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
class={_class} class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)}
{feedback} {feedback}
{feedbackTimeout} {feedbackTimeout}
{style}> {style}>
@ -53,7 +45,13 @@
</code> </code>
</Copy> </Copy>
{:else} {:else}
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <div
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)}
{style}>
<div <div
role="textbox" role="textbox"
tabindex="0" tabindex="0"

4
src/components/ComposedModal/ModalBody.svelte
View file

@ -6,14 +6,12 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--modal-content', hasForm && '--modal-content--with-form', className);
</script> </script>
<div <div
tabindex={hasScrollingContent ? '0' : undefined} tabindex={hasScrollingContent ? '0' : undefined}
role={hasScrollingContent ? 'region' : undefined} role={hasScrollingContent ? 'region' : undefined}
class={_class} class={cx('--modal-content', hasForm && '--modal-content--with-form', className)}
{style}> {style}>
<slot /> <slot />
</div> </div>

6
src/components/ComposedModal/ModalFooter.svelte
View file

@ -9,16 +9,14 @@
export let danger = false; export let danger = false;
export let style = undefined; export let style = undefined;
import { createEventDispatcher, getContext } from 'svelte'; import { getContext } from 'svelte';
import { cx } from '../../lib'; import { cx } from '../../lib';
import Button from '../Button'; import Button from '../Button';
const dispatch = createEventDispatcher();
const { closeModal, submit } = getContext('ComposedModal'); const { closeModal, submit } = getContext('ComposedModal');
const _footerClass = cx('--modal-footer', className);
</script> </script>
<div class={_footerClass} {style}> <div class={cx('--modal-footer', className)} {style}>
{#if secondaryButtonText} {#if secondaryButtonText}
<Button kind="secondary" class={secondaryClass} on:click={closeModal}> <Button kind="secondary" class={secondaryClass} on:click={closeModal}>
{secondaryButtonText} {secondaryButtonText}

18
src/components/ComposedModal/ModalHeader.svelte
View file

@ -10,34 +10,28 @@
export let iconDescription = 'Close'; export let iconDescription = 'Close';
export let style = undefined; export let style = undefined;
import Close20 from 'carbon-icons-svelte/lib/Close20';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import Close20 from 'carbon-icons-svelte/lib/Close20';
import { cx } from '../../lib'; import { cx } from '../../lib';
const { closeModal } = getContext('ComposedModal'); const { closeModal } = getContext('ComposedModal');
const _class = cx('--modal-header', className);
const _labelClass = cx('--modal-header__label', '--type-delta', labelClass);
const _titleClass = cx('--modal-header__heading', '--type-beta', titleClass);
const _closeClass = cx('--modal-close', closeClass);
const _closeIconClass = cx('--modal-close__icon', closeIconClass);
</script> </script>
<div class={_class} {style}> <div class={cx('--modal-header', className)} {style}>
{#if label} {#if label}
<p class={_labelClass}>{label}</p> <p class={cx('--modal-header__label', '--type-delta', labelClass)}>{label}</p>
{/if} {/if}
{#if title} {#if title}
<p class={_titleClass}>{title}</p> <p class={cx('--modal-header__heading', '--type-beta', titleClass)}>{title}</p>
{/if} {/if}
<slot /> <slot />
<button <button
type="button" type="button"
title={iconDescription} title={iconDescription}
aria-label={iconDescription} aria-label={iconDescription}
class={_closeClass} class={cx('--modal-close', closeClass)}
on:click on:click
on:click={closeModal}> on:click={closeModal}>
<Close20 class={_closeIconClass} /> <Close20 class={cx('--modal-close__icon', closeIconClass)} />
</button> </button>
</div> </div>

10
src/components/ContentSwitcher/ContentSwitcher.svelte
View file

@ -9,7 +9,6 @@
import { cx } from '../../lib'; import { cx } from '../../lib';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const _class = cx('--content-switcher', className);
let currentId = writable(null); let currentId = writable(null);
let currentIndex = selectedIndex; let currentIndex = selectedIndex;
let switches = []; let switches = [];
@ -49,6 +48,13 @@
} }
</script> </script>
<div role="tablist" on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <div
role="tablist"
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--content-switcher', className)}
{style}>
<slot /> <slot />
</div> </div>

5
src/components/ContentSwitcher/Switch.svelte
View file

@ -3,8 +3,8 @@
export { className as class }; export { className as class };
export let selected = false; export let selected = false;
export let text = 'Provide text'; export let text = 'Provide text';
export let style = undefined;
export let disabled = false; export let disabled = false;
export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
@ -20,7 +20,6 @@
$: if (selected && buttonRef) { $: if (selected && buttonRef) {
buttonRef.focus(); buttonRef.focus();
} }
$: _class = cx('--content-switcher-btn', selected && '--content-switcher--selected', className);
</script> </script>
<button <button
@ -28,7 +27,7 @@
role="tab" role="tab"
tabindex={selected ? '0' : '-1'} tabindex={selected ? '0' : '-1'}
aria-selected={selected} aria-selected={selected}
class={_class} class={cx('--content-switcher-btn', selected && '--content-switcher--selected', className)}
on:click on:click
on:click|preventDefault={() => { on:click|preventDefault={() => {
update(id); update(id);

10
src/components/Copy/Copy.svelte
View file

@ -9,7 +9,6 @@
import { cx } from '../../lib'; import { cx } from '../../lib';
let timeoutId = undefined; let timeoutId = undefined;
let showFeedback = false;
onDestroy(() => { onDestroy(() => {
if (timeoutId !== undefined) { if (timeoutId !== undefined) {
@ -18,7 +17,7 @@
} }
}); });
$: _class = cx('--btn--copy__feedback', showFeedback && '--btn--copy__feedback--displayed'); $: showFeedback = timeoutId !== undefined;
</script> </script>
<button <button
@ -26,9 +25,8 @@
class={className} class={className}
on:click on:click
on:click={() => { on:click={() => {
showFeedback = true;
timeoutId = window.setTimeout(() => { timeoutId = window.setTimeout(() => {
showFeedback = false; showFeedback = undefined;
}, feedbackTimeout); }, feedbackTimeout);
}} }}
on:mouseover on:mouseover
@ -36,5 +34,7 @@
on:mouseleave on:mouseleave
{style}> {style}>
<slot /> <slot />
<div class={_class} data-feedback={feedback} /> <div
class={cx('--btn--copy__feedback', showFeedback && '--btn--copy__feedback--displayed')}
data-feedback={feedback} />
</button> </button>

10
src/components/CopyButton/CopyButton.svelte
View file

@ -19,14 +19,6 @@
timeoutId = undefined; timeoutId = undefined;
} }
}); });
$: _class = cx(
'--copy-btn',
animation && '--copy-btn--animating',
animation && `--copy-btn--${animation}`,
animation === 'fade-in' && '--btn--copy__feedback--displayed',
className
);
</script> </script>
<button <button
@ -34,7 +26,7 @@
tabindex="0" tabindex="0"
aria-label={iconDescription} aria-label={iconDescription}
title={iconDescription} title={iconDescription}
class={_class} class={cx('--copy-btn', animation && '--copy-btn--animating', animation && `--copy-btn--${animation}`, animation === 'fade-in' && '--btn--copy__feedback--displayed', className)}
on:click on:click
on:click={() => { on:click={() => {
animation = 'fade-in'; animation = 'fade-in';

36
src/components/DataTableSkeleton/DataTableSkeleton.svelte
View file

@ -3,47 +3,41 @@
export { className as class }; export { className as class };
export let zebra = false; export let zebra = false;
export let compact = false; export let compact = false;
export let rowCount = 5;
export let columnCount = 5;
export let headers = []; export let headers = [];
export let rows = 5;
export let columns = 5;
export let style = undefined; export let style = undefined;
import { cx, fillArray } from '../../lib'; import { cx, fillArray } from '../../lib';
const rows = fillArray(rowCount - 1); $: cols = fillArray(headers.length > 0 ? headers.length : columns);
const columns = fillArray(columnCount);
const _headers =
headers[0] === Object(headers[0]) && !Array.isArray(headers[0])
? headers.map(({ header }) => header)
: headers;
const _class = cx(
'--skeleton',
'--data-table',
zebra && '--data-table--zebra',
compact && '--data-table--compact',
className
);
</script> </script>
<table on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <table
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--skeleton', '--data-table', zebra && '--data-table--zebra', compact && '--data-table--compact', className)}
{style}>
<thead> <thead>
<tr> <tr>
{#each columns as column, i (column)} {#each cols as col, i (col)}
<th>{_headers[column]}</th> <th>{headers[col] || ''}</th>
{/each} {/each}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
{#each columns as column, i (column)} {#each cols as col, i (col)}
<td> <td>
<span /> <span />
</td> </td>
{/each} {/each}
</tr> </tr>
{#each rows as row, i (row)} {#each fillArray(rows - 1) as row, i (row)}
<tr> <tr>
{#each columns as column, j (column)} {#each cols as col, j (col)}
<td /> <td />
{/each} {/each}
</tr> </tr>

4
src/components/FileUploader/FileUploader.Skeleton.svelte
View file

@ -6,11 +6,9 @@
import SkeletonText from '../SkeletonText'; import SkeletonText from '../SkeletonText';
import { ButtonSkeleton } from '../Button'; import { ButtonSkeleton } from '../Button';
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--form-item', className);
</script> </script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
<SkeletonText heading width="100px" /> <SkeletonText heading width="100px" />
<SkeletonText width="225px" class={cx('--label-description')} /> <SkeletonText width="225px" class={cx('--label-description')} />
<ButtonSkeleton /> <ButtonSkeleton />

2
src/components/FileUploader/FileUploader.Story.svelte
View file

@ -48,7 +48,7 @@
<Button <Button
kind="secondary" kind="secondary"
size="small" size="small"
style={'margin-top: 1rem'} style="margin-top: 1rem"
{disabled} {disabled}
on:click={() => { on:click={() => {
files = []; files = [];

4
src/components/FileUploader/FileUploader.svelte
View file

@ -19,9 +19,7 @@
import FileUploaderButton from './FileUploaderButton.svelte'; import FileUploaderButton from './FileUploaderButton.svelte';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const _class = cx('--form-item', className);
// let files = [];
let prevFiles = []; let prevFiles = [];
$: { $: {
@ -38,7 +36,7 @@
} }
</script> </script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
<strong class={cx('--file--label')}>{labelTitle}</strong> <strong class={cx('--file--label')}>{labelTitle}</strong>
<p class={cx('--label-description')}>{labelDescription}</p> <p class={cx('--label-description')}>{labelDescription}</p>
<FileUploaderButton <FileUploaderButton

6
src/components/FileUploader/FileUploaderButton.svelte
View file

@ -15,15 +15,15 @@
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx( let inputRef = undefined;
$: _class = cx(
'--btn', '--btn',
'--btn--sm', '--btn--sm',
kind && `--btn--${kind}`, kind && `--btn--${kind}`,
disabled && '--btn--disabled', disabled && '--btn--disabled',
className className
); );
let inputRef = undefined;
</script> </script>
<label <label

2
src/components/FileUploader/FileUploaderDropContainer.svelte
View file

@ -18,12 +18,12 @@
import { cx } from '../../lib'; import { cx } from '../../lib';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const _labelClass = cx('--file-browse-btn', disabled && '--file-browse-btn--disabled');
let over = false; let over = false;
let inputRef = undefined; let inputRef = undefined;
$: _class = cx('--file__drop-container', over && '--file__drop-container--drag-over', className); $: _class = cx('--file__drop-container', over && '--file__drop-container--drag-over', className);
$: _labelClass = cx('--file-browse-btn', disabled && '--file-browse-btn--disabled');
</script> </script>
<div <div

12
src/components/FileUploader/FileUploaderItem.svelte
View file

@ -15,14 +15,14 @@
import Filename from './Filename.svelte'; import Filename from './Filename.svelte';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const _class = cx(
'--file__selected-file',
invalid && '--file__selected-file--invalid',
className
);
</script> </script>
<span on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <span
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--file__selected-file', invalid && '--file__selected-file--invalid', className)}
{style}>
<p class={cx('--file-filename')}>{name}</p> <p class={cx('--file-filename')}>{name}</p>
<span class={cx('--file__state-container')}> <span class={cx('--file__state-container')}>
<Filename <Filename

2
src/components/Form/Form.svelte
View file

@ -5,7 +5,7 @@
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--form', className); $: _class = cx('--form', className);
</script> </script>
<form on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <form on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>

4
src/components/FormGroup/FormGroup.svelte
View file

@ -9,8 +9,8 @@
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--fieldset', className); $: _class = cx('--fieldset', className);
const _legendClass = cx('--label', className); $: _legendClass = cx('--label', className);
</script> </script>
<fieldset <fieldset

4
src/components/FormItem/FormItem.svelte
View file

@ -4,10 +4,8 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--form-item', className);
</script> </script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
<slot /> <slot />
</div> </div>

11
src/components/FormLabel/FormLabel.svelte
View file

@ -5,10 +5,15 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--form-item', className);
</script> </script>
<label on:click on:mouseover on:mouseenter on:mouseleave for={id} class={_class} {style}> <label
on:click
on:mouseover
on:mouseenter
on:mouseleave
for={id}
class={cx('--form-item', className)}
{style}>
<slot /> <slot />
</label> </label>

11
src/components/Icon/Icon.Skeleton.svelte
View file

@ -5,9 +5,12 @@
export let style = undefined; export let style = undefined;
import { cx, css } from '../../lib'; import { cx, css } from '../../lib';
const _class = cx('--icon--skeleton', className);
const _style = css([style, ['width', `${size}px`], ['height', `${size}px`]]);
</script> </script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} style={_style} /> <div
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--icon--skeleton', className)}
style={css([style, ['width', `${size}px`], ['height', `${size}px`]])} />

12
src/components/Icon/Icon.svelte
View file

@ -10,8 +10,8 @@
import IconSkeleton from './Icon.Skeleton.svelte'; import IconSkeleton from './Icon.Skeleton.svelte';
const iconName = render.toString().split(' ')[1]; $: iconName = render.toString().split(' ')[1];
const size = parseInt(iconName.slice(-2), 10); $: size = parseInt(iconName.slice(-2), 10);
</script> </script>
{#if skeleton} {#if skeleton}
@ -20,18 +20,18 @@
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
{size}
class={className} class={className}
{style} /> {style}
{size} />
{:else} {:else}
<svelte:component <svelte:component
this={render} this={render}
aria-label={$$props['aria-label']}
aria-labelledby={$$props['aria-labelledby']}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
aria-label={$$props['aria-label']}
aria-labelledby={$$props['aria-labelledby']}
class={className} class={className}
{tabindex} {tabindex}
{focusable} {focusable}

4
src/components/InlineLoading/InlineLoading.svelte
View file

@ -14,7 +14,7 @@
import Loading from '../Loading'; import Loading from '../Loading';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const _class = cx('--inline-loading', className);
let timeoutId = undefined; let timeoutId = undefined;
onDestroy(() => { onDestroy(() => {
@ -33,11 +33,11 @@
<div <div
aria-live={$$props['aria-live'] || 'assertive'} aria-live={$$props['aria-live'] || 'assertive'}
class={cx('--inline-loading', className)}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
class={_class}
{style}> {style}>
<div class={cx('--inline-loading__animation')}> <div class={cx('--inline-loading__animation')}>
{#if status === 'error'} {#if status === 'error'}

11
src/components/Link/Link.svelte
View file

@ -7,34 +7,27 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx(
'--link',
disabled && '--link--disabled',
inline && '--link--inline',
className
);
</script> </script>
{#if disabled} {#if disabled}
<p <p
aria-current={$$props['aria-current']} aria-current={$$props['aria-current']}
class={cx('--link', disabled && '--link--disabled', inline && '--link--inline', className)}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
class={_class}
{style}> {style}>
<slot /> <slot />
</p> </p>
{:else} {:else}
<a <a
aria-current={$$props['aria-current']} aria-current={$$props['aria-current']}
class={cx('--link', disabled && '--link--disabled', inline && '--link--inline', className)}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
class={_class}
{style} {style}
{href}> {href}>
<slot /> <slot />

4
src/components/ListItem/ListItem.svelte
View file

@ -4,10 +4,8 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--list__item', className);
</script> </script>
<li on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <li on:click on:mouseover on:mouseenter on:mouseleave class={cx('--list__item', className)} {style}>
<slot /> <slot />
</li> </li>

17
src/components/Loading/Loading.svelte
View file

@ -9,24 +9,17 @@
import { cx } from '../../lib'; import { cx } from '../../lib';
const loadingId = `loading-id-${Math.random()}`; $: loadingId = `loading-${Math.random()}`;
const spinnerRadius = small ? '26.8125' : '37.5'; $: spinnerRadius = small ? '26.8125' : '37.5';
const _class = cx(
'--loading',
small && '--loading--small',
!active && '--loading--stop',
className
);
const _overlayClass = cx('--loading-overlay', !active && '--loading-overlay--stop');
</script> </script>
{#if withOverlay} {#if withOverlay}
<div class={_overlayClass}> <div class={cx('--loading-overlay', !active && '--loading-overlay--stop')}>
<div <div
aria-atomic="true" aria-atomic="true"
aria-labelledby={loadingId} aria-labelledby={loadingId}
aria-live={active ? 'assertive' : 'off'} aria-live={active ? 'assertive' : 'off'}
class={_class} class={cx('--loading', small && '--loading--small', !active && '--loading--stop', className)}
{style}> {style}>
<label id={loadingId} class={cx('--visually-hidden')}>{description}</label> <label id={loadingId} class={cx('--visually-hidden')}>{description}</label>
<svg class={cx('--loading__svg')} viewBox="-75 -75 150 150"> <svg class={cx('--loading__svg')} viewBox="-75 -75 150 150">
@ -43,7 +36,7 @@
aria-atomic="true" aria-atomic="true"
aria-labelledby={loadingId} aria-labelledby={loadingId}
aria-live={active ? 'assertive' : 'off'} aria-live={active ? 'assertive' : 'off'}
class={_class} class={cx('--loading', small && '--loading--small', !active && '--loading--stop', className)}
{style}> {style}>
<label id={loadingId} class={cx('--visually-hidden')}>{description}</label> <label id={loadingId} class={cx('--visually-hidden')}>{description}</label>
<svg class={cx('--loading__svg')} viewBox="-75 -75 150 150"> <svg class={cx('--loading__svg')} viewBox="-75 -75 150 150">

17
src/components/Notification/InlineNotification.svelte
View file

@ -18,13 +18,6 @@
import { cx } from '../../lib'; import { cx } from '../../lib';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const _class = cx(
'--inline-notification',
lowContrast && '--inline-notification--low-contrast',
kind && `--inline-notification--${kind}`,
hideCloseButton && '--inline-notification--hide-close-button',
className
);
let open = true; let open = true;
@ -34,7 +27,15 @@
</script> </script>
{#if open} {#if open}
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style} {role} {kind}> <div
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--inline-notification', lowContrast && '--inline-notification--low-contrast', kind && `--inline-notification--${kind}`, hideCloseButton && '--inline-notification--hide-close-button', className)}
{style}
{role}
{kind}>
<div class={cx('--inline-notification__details')}> <div class={cx('--inline-notification__details')}>
<NotificationIcon {notificationType} {kind} {iconDescription} /> <NotificationIcon {notificationType} {kind} {iconDescription} />
<NotificationTextDetails {title} {subtitle} {notificationType}> <NotificationTextDetails {title} {subtitle} {notificationType}>

4
src/components/Notification/NotificationActionButton.svelte
View file

@ -5,8 +5,6 @@
import Button from '../Button'; import Button from '../Button';
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--inline-notification__action-button', className);
</script> </script>
<Button <Button
@ -16,7 +14,7 @@
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
class={_class} class={cx('--inline-notification__action-button', className)}
{style}> {style}>
<slot /> <slot />
</Button> </Button>

17
src/components/Notification/NotificationButton.svelte
View file

@ -10,16 +10,6 @@
import Close20 from 'carbon-icons-svelte/lib/Close20'; import Close20 from 'carbon-icons-svelte/lib/Close20';
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx(
notificationType === 'toast' && '--toast-notification__close-button',
notificationType === 'inline' && '--inline-notification__close-button',
className
);
const _iconClass = cx(
notificationType === 'toast' && '--toast-notification__close-icon',
notificationType === 'inline' && '--inline-notification__close-icon'
);
</script> </script>
<button <button
@ -29,8 +19,11 @@
on:mouseleave on:mouseleave
aria-label={iconDescription} aria-label={iconDescription}
title={iconDescription} title={iconDescription}
class={_class} class={cx(notificationType === 'toast' && '--toast-notification__close-button', notificationType === 'inline' && '--inline-notification__close-button', className)}
{style} {style}
{type}> {type}>
<svelte:component this={renderIcon} class={_iconClass} {title} /> <svelte:component
this={renderIcon}
class={cx(notificationType === 'toast' && '--toast-notification__close-icon', notificationType === 'inline' && '--inline-notification__close-icon')}
{title} />
</button> </button>

22
src/components/Notification/ToastNotification.svelte
View file

@ -20,12 +20,6 @@
import { cx } from '../../lib'; import { cx } from '../../lib';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const _class = cx(
'--toast-notification',
lowContrast && '--toast-notification--low-contrast',
kind && `--toast-notification--${kind}`,
className
);
let open = true; let open = true;
@ -43,18 +37,26 @@
</script> </script>
{#if open} {#if open}
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style} {role} {kind}> <div
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--toast-notification', lowContrast && '--toast-notification--low-contrast', kind && `--toast-notification--${kind}`, className)}
{style}
{role}
{kind}>
<NotificationIcon {notificationType} {kind} {iconDescription} /> <NotificationIcon {notificationType} {kind} {iconDescription} />
<NotificationTextDetails {title} {subtitle} {caption} {notificationType}> <NotificationTextDetails {title} {subtitle} {caption} {notificationType}>
<slot /> <slot />
</NotificationTextDetails> </NotificationTextDetails>
{#if !hideCloseButton} {#if !hideCloseButton}
<NotificationButton <NotificationButton
{iconDescription}
{notificationType}
on:click={() => { on:click={() => {
open = false; open = false;
}} /> }}
{iconDescription}
{notificationType} />
{/if} {/if}
</div> </div>
{/if} {/if}

10
src/components/OrderedList/OrderedList.svelte
View file

@ -5,10 +5,14 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--list--ordered', nested && '--list--nested', className);
</script> </script>
<ol on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <ol
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--list--ordered', nested && '--list--nested', className)}
{style}>
<slot /> <slot />
</ol> </ol>

10
src/components/Pagination/Pagination.Skeleton.svelte
View file

@ -5,11 +5,15 @@
import SkeletonText from '../SkeletonText'; import SkeletonText from '../SkeletonText';
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--pagination', '--skeleton', className);
</script> </script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <div
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--pagination', '--skeleton', className)}
{style}>
<div class={cx('--pagination__left')}> <div class={cx('--pagination__left')}>
<SkeletonText width="70px" /> <SkeletonText width="70px" />
<SkeletonText width="35px" /> <SkeletonText width="35px" />

17
src/components/Pagination/Pagination.svelte
View file

@ -23,24 +23,13 @@
import Select, { SelectItem } from '../Select'; import Select, { SelectItem } from '../Select';
import { cx, fillArray } from '../../lib'; import { cx, fillArray } from '../../lib';
const _class = cx('--pagination', className);
$: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1); $: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
$: selectItems = fillArray(totalPages); $: selectItems = fillArray(totalPages);
$: backButtonDisabled = disabled || page === 1; $: backButtonDisabled = disabled || page === 1;
$: _backButtonClass = cx(
'--pagination__button',
'--pagination__button--backward',
backButtonDisabled && '--pagination__button--no-index'
);
$: forwardButtonDisabled = disabled || page === totalPages; $: forwardButtonDisabled = disabled || page === totalPages;
$: _forwardButtonClass = cx(
'--pagination__button',
'--pagination__button--forward',
forwardButtonDisabled && '--pagination__button--no-index'
);
</script> </script>
<div class={_class} {style}> <div class={cx('--pagination', className)} {style}>
<div class={cx('--pagination__left')}> <div class={cx('--pagination__left')}>
<label <label
id={cx(`--pagination-select-${id}-count-label`)} id={cx(`--pagination-select-${id}-count-label`)}
@ -93,7 +82,7 @@
{/if} {/if}
<button <button
type="button" type="button"
class={_backButtonClass} class={cx('--pagination__button', '--pagination__button--backward', backButtonDisabled && '--pagination__button--no-index')}
on:click={() => { on:click={() => {
page--; page--;
}} }}
@ -103,7 +92,7 @@
</button> </button>
<button <button
type="button" type="button"
class={_forwardButtonClass} class={cx('--pagination__button', '--pagination__button--forward', forwardButtonDisabled && '--pagination__button--no-index')}
aria-label={forwardText} aria-label={forwardText}
on:click={() => { on:click={() => {
page++; page++;

10
src/components/ProgressIndicator/ProgressIndicator.Skeleton.svelte
View file

@ -5,11 +5,15 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--progress', vertical && '--progress--vertical', '--skeleton', className);
</script> </script>
<ul on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <ul
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--progress', vertical && '--progress--vertical', '--skeleton', className)}
{style}>
{#each [0, 1, 2, 3] as item, i (item)} {#each [0, 1, 2, 3] as item, i (item)}
<li class={cx('--progress-step', '--progress-step--incomplete')}> <li class={cx('--progress-step', '--progress-step--incomplete')}>
<div class={cx('--progress-step-button', '--progress-step-button--unclickable')}> <div class={cx('--progress-step-button', '--progress-step-button--unclickable')}>

10
src/components/ProgressIndicator/ProgressIndicator.svelte
View file

@ -10,7 +10,7 @@
import { cx } from '../../lib'; import { cx } from '../../lib';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const _class = cx('--progress', vertical && '--progress--vertical', className);
let steps = writable([]); let steps = writable([]);
let stepsById = derived(steps, $steps => $steps.reduce((a, c) => ({ ...a, [c.id]: c }), {})); let stepsById = derived(steps, $steps => $steps.reduce((a, c) => ({ ...a, [c.id]: c }), {}));
@ -34,6 +34,12 @@
}); });
</script> </script>
<ul on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <ul
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--progress', vertical && '--progress--vertical', className)}
{style}>
<slot /> <slot />
</ul> </ul>

16
src/components/ProgressIndicator/ProgressStep.svelte
View file

@ -26,22 +26,16 @@
current = step.current; current = step.current;
complete = step.complete; complete = step.complete;
} }
$: _class = cx(
'--progress-step',
current && '--progress-step--current',
complete && '--progress-step--complete',
!complete && !current && '--progress-step--incomplete',
disabled && '--progress-step--disabled',
className
);
$: _buttonClass = cx('--progress-step-button', current && '--progress-step-button--unclickable');
</script> </script>
<li aria-disabled={disabled} class={_class} {style}> <li
aria-disabled={disabled}
class={cx('--progress-step', current && '--progress-step--current', complete && '--progress-step--complete', !complete && !current && '--progress-step--incomplete', disabled && '--progress-step--disabled', className)}
{style}>
<div <div
role="button" role="button"
class={_buttonClass}
tabindex={current ? '-1' : '0'} tabindex={current ? '-1' : '0'}
class={cx('--progress-step-button', current && '--progress-step-button--unclickable')}
on:click={() => { on:click={() => {
change(step.index); change(step.index);
}} }}

10
src/components/RadioButton/RadioButton.Skeleton.svelte
View file

@ -4,11 +4,15 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--radio-button-wrapper', className);
</script> </script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <div
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--radio-button-wrapper', className)}
{style}>
<div class={cx('--radio-button', '--skeleton')} /> <div class={cx('--radio-button', '--skeleton')} />
<span class={cx('--radio-button__label', '--skeleton')} /> <span class={cx('--radio-button__label', '--skeleton')} />
</div> </div>

14
src/components/RadioButton/RadioButton.svelte
View file

@ -16,12 +16,6 @@
import { cx } from '../../lib'; import { cx } from '../../lib';
const ctx = getContext('RadioButtonGroup'); const ctx = getContext('RadioButtonGroup');
const _class = cx(
'--radio-button-wrapper',
labelPosition !== 'right' && `--radio-button-wrapper--label-${labelPosition}`,
className
);
const _innerLabelClass = cx(hideLabel && '--visually-hidden');
let selected = ctx ? ctx.selected : writable(checked ? value : undefined); let selected = ctx ? ctx.selected : writable(checked ? value : undefined);
@ -32,7 +26,9 @@
$: checked = $selected === value; $: checked = $selected === value;
</script> </script>
<div class={_class} {style}> <div
class={cx('--radio-button-wrapper', labelPosition !== 'right' && `--radio-button-wrapper--label-${labelPosition}`, className)}
{style}>
<input <input
type="radio" type="radio"
class={cx('--radio-button')} class={cx('--radio-button')}
@ -47,8 +43,8 @@
{checked} {checked}
{disabled} {disabled}
{value} /> {value} />
<label for={id} class={cx('--radio-button__label')}> <label class={cx('--radio-button__label')} for={id}>
<span class={cx('--radio-button__appearance')} /> <span class={cx('--radio-button__appearance')} />
<span class={_innerLabelClass}>{labelText}</span> <span class={cx(hideLabel && '--visually-hidden')}>{labelText}</span>
</label> </label>
</div> </div>

10
src/components/RadioButtonGroup/RadioButtonGroup.svelte
View file

@ -12,12 +12,6 @@
import { cx } from '../../lib'; import { cx } from '../../lib';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const _class = cx(
'--radio-button-group',
orientation === 'vertical' && `--radio-button-group--${orientation}`,
labelPosition && `--radio-button-group--label-${labelPosition}`,
className
);
let selected = writable(defaultSelected); let selected = writable(defaultSelected);
@ -40,7 +34,9 @@
</script> </script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item')} {style}> <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item')} {style}>
<div class={_class} {disabled}> <div
class={cx('--radio-button-group', orientation === 'vertical' && `--radio-button-group--${orientation}`, labelPosition && `--radio-button-group--label-${labelPosition}`, className)}
{disabled}>
<slot /> <slot />
</div> </div>
</div> </div>

10
src/components/Search/Search.Skeleton.svelte
View file

@ -5,11 +5,15 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--skeleton', !small && '--search--xl', small && '--search--sm', className);
</script> </script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <div
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--skeleton', !small && '--search--xl', small && '--search--sm', className)}
{style}>
<span class={cx('--label')} /> <span class={cx('--label')} />
<div class={cx('--search-input')} /> <div class={cx('--search-input')} />
</div> </div>

25
src/components/Search/Search.svelte
View file

@ -19,24 +19,13 @@
import { cx } from '../../lib'; import { cx } from '../../lib';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const _class = cx('--search', size && `--search--${size}`, light && '--search--light', className);
let inputRef = undefined; let inputRef = undefined;
function clearInput() {
value = '';
dispatch('change', value);
if (inputRef) {
inputRef.focus();
}
}
$: _clearClass = cx('--search-close', value === '' && '--search-close--hidden');
</script> </script>
<div class={_class} {style}> <div
class={cx('--search', size && `--search--${size}`, light && '--search--light', className)}
{style}>
<Search16 class={cx('--search-magnifier')} /> <Search16 class={cx('--search-magnifier')} />
<label for={id} class={cx('--label')}>{labelText}</label> <label for={id} class={cx('--label')}>{labelText}</label>
<input <input
@ -54,9 +43,13 @@
{value} /> {value} />
<button <button
type="button" type="button"
class={_clearClass} class={cx('--search-close', value === '' && '--search-close--hidden')}
on:click on:click
on:click={clearInput} on:click={() => {
value = '';
dispatch('change', value);
inputRef.focus();
}}
aria-label={closeButtonLabelText}> aria-label={closeButtonLabelText}>
<svelte:component this={size === 'xl' ? Close20 : Close16} /> <svelte:component this={size === 'xl' ? Close20 : Close16} />
</button> </button>

4
src/components/Select/Select.Skeleton.svelte
View file

@ -5,11 +5,9 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--form-item', className);
</script> </script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
{#if !hideLabel} {#if !hideLabel}
<span class={cx('--label', '--skeleton')} /> <span class={cx('--label', '--skeleton')} />
{/if} {/if}

34
src/components/Select/Select.svelte
View file

@ -21,41 +21,33 @@
import { cx } from '../../lib'; import { cx } from '../../lib';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const errorId = `error-${id}`;
const _class = cx(
'--select',
inline && '--select--inline',
light && '--select--light',
invalid && '--select--invalid',
disabled && '--select--disabled',
className
);
const _labelClass = cx(
'--label',
hideLabel && '--visually-hidden',
disabled && '--label--disabled'
);
const _helperTextClass = cx('--form__helper-text', disabled && '--form__helper-text--disabled');
let selected = writable(defaultValue); let selected = writable(defaultValue);
setContext('Select', { selected }); setContext('Select', { selected });
$: errorId = `error-${id}`;
$: { $: {
selected.set(defaultValue); selected.set(defaultValue);
dispatch('change', $selected); dispatch('change', $selected);
} }
$: defaultValue = $selected; $: defaultValue = $selected;
</script> </script>
<div class={cx('--form-item')} {style}> <div class={cx('--form-item')} {style}>
<div class={_class}> <div
class={cx('--select', inline && '--select--inline', light && '--select--light', invalid && '--select--invalid', disabled && '--select--disabled', className)}>
{#if !noLabel} {#if !noLabel}
<label for={id} class={_labelClass}>{labelText}</label> <label
for={id}
class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}>
{labelText}
</label>
{/if} {/if}
{#if !inline && helperText} {#if !inline && helperText}
<div class={_helperTextClass}>{helperText}</div> <div class={cx('--form__helper-text', disabled && '--form__helper-text--disabled')}>
{helperText}
</div>
{/if} {/if}
{#if inline} {#if inline}
<div class={cx('--select-input--inline__wrapper')}> <div class={cx('--select-input--inline__wrapper')}>
@ -81,7 +73,9 @@
{/if} {/if}
</div> </div>
{#if helperText} {#if helperText}
<div class={_helperTextClass}>{helperText}</div> <div class={cx('--form__helper-text', disabled && '--form__helper-text--disabled')}>
{helperText}
</div>
{/if} {/if}
{/if} {/if}
{#if !inline} {#if !inline}

9
src/components/Select/SelectItem.svelte
View file

@ -11,9 +11,14 @@
import { cx } from '../../lib'; import { cx } from '../../lib';
const { selected } = getContext('Select'); const { selected } = getContext('Select');
const _class = cx('--select-option', className);
</script> </script>
<option class={_class} {value} {disabled} {hidden} {style} selected={$selected === value}> <option
selected={$selected === value}
class={cx('--select-option', className)}
{value}
{disabled}
{hidden}
{style}>
{text} {text}
</option> </option>

4
src/components/Select/SelectItemGroup.svelte
View file

@ -6,10 +6,8 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--select-optgroup', className);
</script> </script>
<optgroup class={_class} {label} {disabled} {style}> <optgroup class={cx('--select-optgroup', className)} {label} {disabled} {style}>
<slot /> <slot />
</optgroup> </optgroup>

10
src/components/SkeletonPlaceholder/SkeletonPlaceholder.svelte
View file

@ -4,8 +4,12 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--skeleton__placeholder', className);
</script> </script>
<div on:click on:mouseover on:mouseenter on:mouseleave {style} class={_class} /> <div
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--skeleton__placeholder', className)}
{style} />

14
src/components/SkeletonText/SkeletonText.svelte
View file

@ -10,13 +10,11 @@
import { cx } from '../../lib'; import { cx } from '../../lib';
const randoms = [0.973051493507435, 0.15334737213558558, 0.5671034553053769]; const randoms = [0.973051493507435, 0.15334737213558558, 0.5671034553053769];
const _class = cx('--skeleton__text', heading && '--skeleton__heading', className);
const widthNum = parseInt(width, 10);
const widthPx = width.includes('px');
const widthPercent = width.includes('%');
let lines = []; let lines = [];
$: widthNum = parseInt(width, 10);
$: widthPx = width.includes('px');
$: widthPercent = width.includes('%');
$: if (paragraph) { $: if (paragraph) {
for (let i = 0; i < lineCount; i++) { for (let i = 0; i < lineCount; i++) {
const min = widthPx ? widthNum - 75 : 0; const min = widthPx ? widthNum - 75 : 0;
@ -30,7 +28,9 @@
{#if paragraph} {#if paragraph}
<div on:click on:mouseover on:mouseenter on:mouseleave {style}> <div on:click on:mouseover on:mouseenter on:mouseleave {style}>
{#each lines as { width }} {#each lines as { width }}
<p class={_class} style={`width: ${width};`} /> <p
class={cx('--skeleton__text', heading && '--skeleton__heading', className)}
style={`width: ${width};`} />
{/each} {/each}
</div> </div>
{:else} {:else}
@ -39,7 +39,7 @@
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
class={_class} class={cx('--skeleton__text', heading && '--skeleton__heading', className)}
style={`width: ${width};`} style={`width: ${width};`}
{style} /> {style} />
{/if} {/if}

20
src/components/StructuredList/StructuredList.Skeleton.svelte
View file

@ -2,21 +2,19 @@
let className = undefined; let className = undefined;
export { className as class }; export { className as class };
export let border = false; export let border = false;
export let rowCount = 5; export let rows = 5;
export let style = undefined; export let style = undefined;
import { cx, fillArray } from '../../lib'; import { cx, fillArray } from '../../lib';
const _class = cx(
'--skeleton',
'--structured-list',
border && '--structured-list--border',
className
);
const rows = fillArray(rowCount - 1);
</script> </script>
<section on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <section
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--skeleton', '--structured-list', border && '--structured-list--border', className)}
{style}>
<div class={cx('--structured-list-thead')}> <div class={cx('--structured-list-thead')}>
<div class={cx('--structured-list-row', '--structured-list-row--header-row')}> <div class={cx('--structured-list-row', '--structured-list-row--header-row')}>
<div class={cx('--structured-list-th')}> <div class={cx('--structured-list-th')}>
@ -31,7 +29,7 @@
</div> </div>
</div> </div>
<div class={cx('--structured-list-tbody')}> <div class={cx('--structured-list-tbody')}>
{#each rows as row, i (row)} {#each fillArray(rows) as row, i (row)}
<div class={cx('--structured-list-row')}> <div class={cx('--structured-list-row')}>
<div class={cx('--structured-list-td')} /> <div class={cx('--structured-list-td')} />
<div class={cx('--structured-list-td')} /> <div class={cx('--structured-list-td')} />

10
src/components/StructuredList/StructuredListBody.svelte
View file

@ -4,10 +4,14 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--structured-list-tbody', className);
</script> </script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <div
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--structured-list-tbody', className)}
{style}>
<slot /> <slot />
</div> </div>

15
src/components/StructuredList/StructuredListCell.svelte
View file

@ -6,15 +6,14 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx(
head && '--structured-list-th',
!head && '--structured-list-td',
noWrap && '--structured-list-content--nowrap',
className
);
</script> </script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <div
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx(head && '--structured-list-th', !head && '--structured-list-td', noWrap && '--structured-list-content--nowrap', className)}
{style}>
<slot /> <slot />
</div> </div>

10
src/components/StructuredList/StructuredListHead.svelte
View file

@ -4,10 +4,14 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--structured-list-thead', className);
</script> </script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <div
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--structured-list-thead', className)}
{style}>
<slot /> <slot />
</div> </div>

4
src/components/StructuredList/StructuredListInput.svelte
View file

@ -11,8 +11,6 @@
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--structured-list-input', className);
const { selected, update } = getContext('StructuredListWrapper'); const { selected, update } = getContext('StructuredListWrapper');
if (checked) { if (checked) {
@ -25,7 +23,7 @@
<input <input
type="radio" type="radio"
tabindex="-1" tabindex="-1"
class={_class} class={cx('--structured-list-input', className)}
on:change={() => { on:change={() => {
update(value); update(value);
}} }}

16
src/components/StructuredList/StructuredListRow.svelte
View file

@ -7,12 +7,6 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx(
'--structured-list-row',
head && '--structured-list-row--header-row',
className
);
</script> </script>
{#if label} {#if label}
@ -23,14 +17,20 @@
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
on:keydown on:keydown
class={_class} class={cx('--structured-list-row', head && '--structured-list-row--header-row', className)}
for={$$props.for} for={$$props.for}
{tabindex} {tabindex}
{style}> {style}>
<slot /> <slot />
</label> </label>
{:else} {:else}
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <div
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--structured-list-row', head && '--structured-list-row--header-row', className)}
{style}>
<slot /> <slot />
</div> </div>
{/if} {/if}

8
src/components/StructuredList/StructuredListWrapper.svelte
View file

@ -11,12 +11,6 @@
import { cx } from '../../lib'; import { cx } from '../../lib';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const _class = cx(
'--structured-list',
border && '--structured-list--border',
selection && '--structured-list--selection',
className
);
let selected = writable(defaultSelected); let selected = writable(defaultSelected);
@ -38,7 +32,7 @@
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
class={_class} class={cx('--structured-list', border && '--structured-list--border', selection && '--structured-list--selection', className)}
aria-label={$$props['aria-label'] || 'Structured list section'} aria-label={$$props['aria-label'] || 'Structured list section'}
{style}> {style}>
<slot /> <slot />

24
src/components/Tabs/Tab.svelte
View file

@ -1,5 +1,4 @@
<script> <script>
// TODO: fix space not selecting
let className = undefined; let className = undefined;
export { className as class }; export { className as class };
export let role = 'presentation'; export let role = 'presentation';
@ -23,17 +22,11 @@
$: if (selected && anchorRef) { $: if (selected && anchorRef) {
anchorRef.focus(); anchorRef.focus();
} }
$: _class = cx(
'--tabs__nav-item',
disabled && '--tabs__nav-item--disabled',
selected && '--tabs__nav-item--selected',
className
);
</script> </script>
<li <li
tabindex="-1" tabindex="-1"
class={_class} class={cx('--tabs__nav-item', disabled && '--tabs__nav-item--disabled', selected && '--tabs__nav-item--selected', className)}
on:click|preventDefault={() => { on:click|preventDefault={() => {
if (!disabled) { if (!disabled) {
update(id); update(id);
@ -42,27 +35,26 @@
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
on:keydown={event => { on:keydown={({ key }) => {
if (disabled) { if (!disabled) {
return; if (key === 'ArrowRight') {
}
if (event.key === 'ArrowRight') {
change(1); change(1);
} else if (event.key === 'ArrowLeft') { } else if (key === 'ArrowLeft') {
change(-1); change(-1);
} else if (event.key === ' ' || event.key === 'Enter') { } else if (key === ' ' || key === 'Enter') {
update(id); update(id);
} }
}
}} }}
{role} {role}
{style}> {style}>
<a <a
bind:this={anchorRef} bind:this={anchorRef}
role="tab" role="tab"
class={cx('--tabs__nav-link')}
tabindex={disabled ? '-1' : tabindex} tabindex={disabled ? '-1' : tabindex}
aria-selected={selected} aria-selected={selected}
aria-disabled={disabled} aria-disabled={disabled}
class={cx('--tabs__nav-link')}
{href}> {href}>
{label} {label}
</a> </a>

3
src/components/Tabs/TabContent.svelte
View file

@ -6,7 +6,6 @@
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--tab-content', className);
const id = Math.random(); const id = Math.random();
const { selectedContent, addContent } = getContext('Tabs'); const { selectedContent, addContent } = getContext('Tabs');
@ -15,6 +14,6 @@
$: selected = $selectedContent === id; $: selected = $selectedContent === id;
</script> </script>
<div class={_class} aria-hidden={!selected} hidden={!selected} {style}> <div aria-hidden={!selected} hidden={!selected} class={cx('--tab-content', className)} {style}>
<slot /> <slot />
</div> </div>

7
src/components/Tabs/Tabs.svelte
View file

@ -14,7 +14,7 @@
import { cx } from '../../lib'; import { cx } from '../../lib';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const _class = cx('--tabs', type === 'container' && '--tabs--container', className);
let dropdownHidden = true; let dropdownHidden = true;
let tabs = writable([]); let tabs = writable([]);
let tabsById = derived(tabs, _ => _.reduce((a, c) => ({ ...a, [c.id]: c }), {})); let tabsById = derived(tabs, _ => _.reduce((a, c) => ({ ...a, [c.id]: c }), {}));
@ -79,10 +79,9 @@
$: if ($selectedTab) { $: if ($selectedTab) {
dropdownHidden = true; dropdownHidden = true;
} }
$: _listClass = cx('--tabs__nav', dropdownHidden && '--tabs__nav--hidden');
</script> </script>
<div class={_class} {style} {role}> <div class={cx('--tabs', type === 'container' && '--tabs--container', className)} {style} {role}>
<div <div
role="listbox" role="listbox"
tabindex="0" tabindex="0"
@ -107,7 +106,7 @@
</a> </a>
<ChevronDownGlyph aria-hidden="true" title={iconDescription} /> <ChevronDownGlyph aria-hidden="true" title={iconDescription} />
</div> </div>
<ul role="tablist" class={_listClass}> <ul role="tablist" class={cx('--tabs__nav', dropdownHidden && '--tabs__nav--hidden')}>
<slot /> <slot />
</ul> </ul>
</div> </div>

12
src/components/Tabs/TabsSkeleton.svelte
View file

@ -4,14 +4,18 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--tabs', '--skeleton', className);
</script> </script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <div
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--tabs', '--skeleton', className)}
{style}>
<div class={cx('--tabs-trigger')}> <div class={cx('--tabs-trigger')}>
<div class={cx('--tabs-trigger-text')}>&nbsp;</div> <div class={cx('--tabs-trigger-text')}>&nbsp;</div>
<svg width="10" height="5" viewBox="0 0 10 5" fillRule="evenodd"> <svg width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
<path d="M10 0L5 5 0 0z" /> <path d="M10 0L5 5 0 0z" />
</svg> </svg>
</div> </div>

10
src/components/Tag/Tag.Skeleton.svelte
View file

@ -4,8 +4,12 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--tag', '--skeleton', className);
</script> </script>
<span on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style} /> <span
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--tag', '--skeleton', className)}
{style} />

26
src/components/Tag/Tag.svelte
View file

@ -10,31 +10,19 @@
import Close16 from 'carbon-icons-svelte/lib/Close16'; import Close16 from 'carbon-icons-svelte/lib/Close16';
import { cx } from '../../lib'; import { cx } from '../../lib';
import { TYPES } from './constants'; import { TYPES } from './constants';
const _class = cx(
'--tag',
type && `--tag--${type}`,
disabled && '--tag--disabled',
filter && '--tag--filter',
className
);
</script> </script>
{#if filter} <span
<span tabindex={filter ? '0' : undefined}
tabindex="0" title={filter ? title : undefined}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
class={_class} class={cx('--tag', type && `--tag--${type}`, disabled && '--tag--disabled', filter && '--tag--filter', className)}
{title}
{style}> {style}>
<slot>{TYPES[type]}</slot> <slot>{TYPES[type]}</slot>
{#if filter}
<Close16 aria-label={title} /> <Close16 aria-label={title} />
</span> {/if}
{:else} </span>
<span on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
<slot>{TYPES[type]}</slot>
</span>
{/if}

4
src/components/TextArea/TextArea.Skeleton.svelte
View file

@ -5,11 +5,9 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--form-item', className);
</script> </script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
{#if !hideLabel} {#if !hideLabel}
<span class={cx('--label', '--skeleton')} /> <span class={cx('--label', '--skeleton')} />
{/if} {/if}

27
src/components/TextArea/TextArea.svelte
View file

@ -20,27 +20,22 @@
import { cx } from '../../lib'; import { cx } from '../../lib';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const errorId = `${id}-error`;
const _labelClass = cx( $: errorId = `error-${id}`;
'--label',
hideLabel && '--visually-hidden',
disabled && '--label--disabled'
);
const _helperTextClass = cx('--form__helper-text', disabled && '--form__helper-text--disabled');
const _textAreaClass = cx(
'--text-area',
light && '--text-area--light',
invalid && '--text-area--invalid',
className
);
</script> </script>
<div on:mouseover on:mouseenter on:mouseleave class={cx('--form-item')} {style}> <div on:mouseover on:mouseenter on:mouseleave class={cx('--form-item')} {style}>
{#if labelText && !hideLabel} {#if labelText && !hideLabel}
<label for={id} class={_labelClass}>{labelText}</label> <label
for={id}
class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}>
{labelText}
</label>
{/if} {/if}
{#if helperText} {#if helperText}
<div class={_helperTextClass}>{helperText}</div> <div class={cx('--form__helper-text', disabled && '--form__helper-text--disabled')}>
{helperText}
</div>
{/if} {/if}
<div class={cx('--text-area__wrapper')} data-invalid={invalid || undefined}> <div class={cx('--text-area__wrapper')} data-invalid={invalid || undefined}>
{#if invalid} {#if invalid}
@ -63,7 +58,7 @@
dispatch('input', event); dispatch('input', event);
} }
}} }}
class={_textAreaClass} class={cx('--text-area', light && '--text-area--light', invalid && '--text-area--invalid', className)}
aria-invalid={invalid || undefined} aria-invalid={invalid || undefined}
aria-describedby={invalid ? errorId : undefined} aria-describedby={invalid ? errorId : undefined}
{disabled} {disabled}

44
src/components/TextInput/PasswordInput.svelte
View file

@ -23,45 +23,28 @@
import ViewOff16 from 'carbon-icons-svelte/lib/ViewOff16'; import ViewOff16 from 'carbon-icons-svelte/lib/ViewOff16';
import { cx } from '../../lib'; import { cx } from '../../lib';
const errorId = `${id}-error`; $: errorId = `error-${id}`;
const _labelClass = cx(
'--label',
hideLabel && '--visually-hidden',
disabled && '--label--disabled'
);
const _helperTextClass = cx('--form__helper-text', disabled && '--form__helper-text--disabled');
const _textInputClass = cx(
'--text-input',
'--password-input',
light && '--text-input--light',
invalid && '--text-input--invalid',
className
);
const _passwordVisibilityToggleClass = cx(
'--text-input--password__visibility__toggle',
'--btn--icon-only',
'--tooltip__trigger',
'--tooltip--a11y',
tooltipPosition && `--tooltip--${tooltipPosition}`,
tooltipAlignment && `--tooltip--align-${tooltipAlignment}`
);
$: passwordIsVisible = type === 'text';
</script> </script>
<div class={cx('--form-item', '--text-input-wrapper', '--password-input-wrapper')} {style}> <div class={cx('--form-item', '--text-input-wrapper', '--password-input-wrapper')} {style}>
{#if labelText} {#if labelText}
<label for={id} class={_labelClass}>{labelText}</label> <label
for={id}
class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}>
{labelText}
</label>
{/if} {/if}
{#if helperText} {#if helperText}
<div class={_helperTextClass}>{helperText}</div> <div class={cx('--form__helper-text', disabled && '--form__helper-text--disabled')}>
{helperText}
</div>
{/if} {/if}
<div class={cx('--text-input__field-wrapper')} data-invalid={invalid || undefined}> <div class={cx('--text-input__field-wrapper')} data-invalid={invalid || undefined}>
{#if invalid} {#if invalid}
<WarningFilled16 class={cx('--text-input__invalid-icon')} /> <WarningFilled16 class={cx('--text-input__invalid-icon')} />
{/if} {/if}
<input <input
class={_textInputClass} class={cx('--text-input', '--password-input', light && '--text-input--light', invalid && '--text-input--invalid', className)}
on:click on:click
on:change on:change
on:input on:input
@ -78,15 +61,14 @@
{disabled} /> {disabled} />
<button <button
type="button" type="button"
class={_passwordVisibilityToggleClass} class={cx('--text-input--password__visibility__toggle', '--btn--icon-only', '--tooltip__trigger', '--tooltip--a11y', tooltipPosition && `--tooltip--${tooltipPosition}`, tooltipAlignment && `--tooltip--align-${tooltipAlignment}`)}
on:click={() => { on:click={() => {
type = type === 'password' ? 'text' : 'password'; type = type === 'password' ? 'text' : 'password';
}}> }}>
<span class={cx('--assistive-text')}> <span class={cx('--assistive-text')}>
{#if passwordIsVisible}{hidePasswordLabel}{:else}{showPasswordLabel}{/if} {#if type === 'text'}{hidePasswordLabel}{:else}{showPasswordLabel}{/if}
</span> </span>
{#if type === 'text'}
{#if passwordIsVisible}
<ViewOff16 class={cx('--icon-visibility-off')} /> <ViewOff16 class={cx('--icon-visibility-off')} />
{:else} {:else}
<View16 class={cx('--icon-visibility-on')} /> <View16 class={cx('--icon-visibility-on')} />

4
src/components/TextInput/TextInput.Skeleton.svelte
View file

@ -5,11 +5,9 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--form-item', className);
</script> </script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
{#if !hideLabel} {#if !hideLabel}
<span class={cx('--label', '--skeleton')} /> <span class={cx('--label', '--skeleton')} />
{/if} {/if}

26
src/components/TextInput/TextInput.svelte
View file

@ -17,34 +17,28 @@
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16'; import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
import { cx } from '../../lib'; import { cx } from '../../lib';
const errorId = `${id}-error`; $: errorId = `error-${id}`;
const _labelClass = cx(
'--label',
hideLabel && '--visually-hidden',
disabled && '--label--disabled'
);
const _helperTextClass = cx('--form__helper-text', disabled && '--form__helper-text--disabled');
const _textInputClass = cx(
'--text-input',
light && '--text-input--light',
invalid && '--text-input--invalid',
className
);
</script> </script>
<div class={cx('--form-item', '--text-input-wrapper')} {style}> <div class={cx('--form-item', '--text-input-wrapper')} {style}>
{#if labelText} {#if labelText}
<label for={id} class={_labelClass}>{labelText}</label> <label
for={id}
class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}>
{labelText}
</label>
{/if} {/if}
{#if helperText} {#if helperText}
<div class={_helperTextClass}>{helperText}</div> <div class={cx('--form__helper-text', disabled && '--form__helper-text--disabled')}>
{helperText}
</div>
{/if} {/if}
<div class={cx('--text-input__field-wrapper')} data-invalid={invalid || undefined}> <div class={cx('--text-input__field-wrapper')} data-invalid={invalid || undefined}>
{#if invalid} {#if invalid}
<WarningFilled16 class={cx('--text-input__invalid-icon')} /> <WarningFilled16 class={cx('--text-input__invalid-icon')} />
{/if} {/if}
<input <input
class={_textInputClass} class={cx('--text-input', light && '--text-input--light', invalid && '--text-input--invalid', className)}
on:click on:click
on:change on:change
on:input on:input

15
src/components/Tile/ClickableTile.svelte
View file

@ -8,26 +8,17 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
$: _class = cx(
'--link',
'--tile',
'--tile--clickable',
clicked && '--tile--is-clicked',
light && '--tile--light',
className
);
</script> </script>
<a <a
class={_class} class={cx('--link', '--tile', '--tile--clickable', clicked && '--tile--is-clicked', light && '--tile--light', className)}
on:click on:click
on:click={() => { on:click={() => {
clicked = !clicked; clicked = !clicked;
}} }}
on:keydown on:keydown
on:keydown={event => { on:keydown={({ key }) => {
if (event.key === ' ' || event.key === 'Enter') { if (key === ' ' || key === 'Enter') {
clicked = !clicked; clicked = !clicked;
} }
}} }}

9
src/components/Tile/RadioTile.svelte
View file

@ -19,13 +19,6 @@
addTile({ id, value, checked }); addTile({ id, value, checked });
$: checked = value === $selected.value; $: checked = value === $selected.value;
$: _class = cx(
'--tile',
'--tile--selectable',
checked && '--tile--is-selected',
light && '--tile--light',
className
);
</script> </script>
<input <input
@ -41,7 +34,7 @@
{checked} /> {checked} />
<label <label
for={id} for={id}
class={_class} class={cx('--tile', '--tile--selectable', checked && '--tile--is-selected', light && '--tile--light', className)}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter

9
src/components/Tile/SelectableTile.svelte
View file

@ -20,13 +20,6 @@
$: if (selected) { $: if (selected) {
dispatch('select', id); dispatch('select', id);
} }
$: _class = cx(
'--tile',
'--tile--selectable',
selected && '--tile--is-selected',
light && '--tile--light',
className
);
</script> </script>
<input <input
@ -41,7 +34,7 @@
{title} /> {title} />
<label <label
for={id} for={id}
class={_class} class={cx('--tile', '--tile--selectable', selected && '--tile--is-selected', light && '--tile--light', className)}
on:click on:click
on:click|preventDefault={() => { on:click|preventDefault={() => {
selected = !selected; selected = !selected;

10
src/components/Tile/Tile.svelte
View file

@ -5,10 +5,14 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--tile', light && '--tile--light', className);
</script> </script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <div
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--tile', light && '--tile--light', className)}
{style}>
<slot /> <slot />
</div> </div>

4
src/components/Tile/TileGroup.svelte
View file

@ -44,11 +44,9 @@
defaultSelected = $selected; defaultSelected = $selected;
dispatch('select', $selected); dispatch('select', $selected);
} }
const _class = cx('--tile-group', className);
</script> </script>
<fieldset class={_class} {disabled} {style}> <fieldset class={cx('--tile-group', className)} {disabled} {style}>
{#if legend} {#if legend}
<legend>{legend}</legend> <legend>{legend}</legend>
{/if} {/if}

14
src/components/Toggle/Toggle.Skeleton.svelte
View file

@ -1,19 +1,19 @@
<script> <script>
let className = undefined; let className = undefined;
export { className as class }; export { className as class };
export let id = undefined; export let id = Math.random();
export let labelText = undefined; export let labelText = '';
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--form-item', className);
const ariaLabel = labelText ? null : $$props['aria-label'] || 'Toggle is loading';
</script> </script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
<input type="checkbox" class={cx('--toggle --skeleton')} {id} /> <input type="checkbox" class={cx('--toggle --skeleton')} {id} />
<label class={cx('--toggle__label', '--skeleton')} aria-label={ariaLabel} for={id}> <label
aria-label={labelText ? null : $$props['aria-label'] || 'Toggle is loading'}
class={cx('--toggle__label', '--skeleton')}
for={id}>
{#if labelText} {#if labelText}
<span class={cx('--toggle__label-text')}>{labelText}</span> <span class={cx('--toggle__label-text')}>{labelText}</span>
{/if} {/if}

9
src/components/Toggle/Toggle.svelte
View file

@ -13,8 +13,6 @@
import { cx } from '../../lib'; import { cx } from '../../lib';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const _class = cx('--form-item', className);
const ariaLabel = labelText ? undefined : $$props['aria-label'] || 'Toggle';
let inputRef = undefined; let inputRef = undefined;
@ -27,7 +25,7 @@
} }
</script> </script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
<input <input
bind:this={inputRef} bind:this={inputRef}
type="checkbox" type="checkbox"
@ -46,7 +44,10 @@
}} }}
{disabled} {disabled}
{id} /> {id} />
<label class={cx('--toggle-input__label')} for={id} aria-label={ariaLabel}> <label
aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle'}
class={cx('--toggle-input__label')}
for={id}>
{labelText} {labelText}
<span class={cx('--toggle__switch')}> <span class={cx('--toggle__switch')}>
<span aria-hidden="true" class={cx('--toggle__text--off')}>{labelA}</span> <span aria-hidden="true" class={cx('--toggle__text--off')}>{labelA}</span>

14
src/components/ToggleSmall/ToggleSmall.Skeleton.svelte
View file

@ -1,19 +1,19 @@
<script> <script>
let className = undefined; let className = undefined;
export { className as class }; export { className as class };
export let id = undefined; export let id = Math.random();
export let labelText = undefined; export let labelText = '';
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--form-item', className);
const ariaLabel = labelText ? undefined : $$props['aria-label'] || 'Toggle is loading';
</script> </script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
<input type="checkbox" class={cx('--toggle', '--toggle--small', '--skeleton')} {id} /> <input type="checkbox" class={cx('--toggle', '--toggle--small', '--skeleton')} {id} />
<label class={cx('--toggle__label --skeleton')} for={id}> <label
aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle is loading'}
class={cx('--toggle__label --skeleton')}
for={id}>
{#if labelText} {#if labelText}
<span class={cx('--toggle__label-text')}>{labelText}</span> <span class={cx('--toggle__label-text')}>{labelText}</span>
{/if} {/if}

9
src/components/ToggleSmall/ToggleSmall.svelte
View file

@ -13,8 +13,6 @@
import { cx } from '../../lib'; import { cx } from '../../lib';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const _class = cx('--form-item', className);
const ariaLabel = labelText ? undefined : $$props['aria-label'] || 'Toggle';
let inputRef = undefined; let inputRef = undefined;
@ -27,7 +25,7 @@
} }
</script> </script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
<input <input
bind:this={inputRef} bind:this={inputRef}
type="checkbox" type="checkbox"
@ -47,7 +45,10 @@
{disabled} {disabled}
{id} /> {id} />
<label class={cx('--toggle-input__label')} for={id} aria-label={ariaLabel}> <label
aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle'}
class={cx('--toggle-input__label')}
for={id}>
{labelText} {labelText}
<span class={cx('--toggle__switch')}> <span class={cx('--toggle__switch')}>
<svg width="6" height="5" viewBox="0 0 6 5" class={cx('--toggle__check')}> <svg width="6" height="5" viewBox="0 0 6 5" class={cx('--toggle__check')}>

17
src/components/TooltipDefinition/TooltipDefinition.svelte
View file

@ -4,31 +4,20 @@
export let direction = 'bottom'; export let direction = 'bottom';
export let align = 'center'; export let align = 'center';
export let id = Math.random(); export let id = Math.random();
export let triggerClassName = undefined; export let triggerClass = undefined;
export { triggerClassName as triggerClass };
export let tooltipText = ''; export let tooltipText = '';
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--tooltip--definition', '--tooltip--a11y', className);
const _triggerClass = cx(
'--tooltip__trigger',
'--tooltip--a11y',
'--tooltip__trigger--definition',
`--tooltip--${direction}`,
`--tooltip--align-${align}`,
triggerClassName
);
</script> </script>
<div class={_class} {style}> <div class={cx('--tooltip--definition', '--tooltip--a11y', className)} {style}>
<button <button
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
class={_triggerClass} class={cx('--tooltip__trigger', '--tooltip--a11y', '--tooltip__trigger--definition', `--tooltip--${direction}`, `--tooltip--align-${align}`, triggerClass)}
aria-describedby={id}> aria-describedby={id}>
<slot /> <slot />
</button> </button>

10
src/components/TooltipIcon/TooltipIcon.svelte
View file

@ -8,14 +8,6 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx(
'--tooltip__trigger',
'--tooltip--a11y',
`--tooltip--${direction}`,
`--tooltip--align-${align}`,
className
);
</script> </script>
<button <button
@ -24,7 +16,7 @@
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
aria-describedby={id} aria-describedby={id}
class={_class} class={cx('--tooltip__trigger', '--tooltip--a11y', `--tooltip--${direction}`, `--tooltip--align-${align}`, className)}
{style}> {style}>
<span class={cx('--assistive-text')} {id}>{tooltipText}</span> <span class={cx('--assistive-text')} {id}>{tooltipText}</span>
<slot /> <slot />

10
src/components/UnorderedList/UnorderedList.svelte
View file

@ -5,10 +5,14 @@
export let style = undefined; export let style = undefined;
import { cx } from '../../lib'; import { cx } from '../../lib';
const _class = cx('--list--unordered', nested && '--list--nested', className);
</script> </script>
<ul on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}> <ul
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--list--unordered', nested && '--list--nested', className)}
{style}>
<slot /> <slot />
</ul> </ul>