├── src ├── www │ ├── assets │ │ ├── .nojekyll │ │ ├── img │ │ │ ├── avatar-1.png │ │ │ ├── avatar-2.png │ │ │ ├── avatar-3.png │ │ │ ├── avatar-4.png │ │ │ ├── avatar-5.png │ │ │ ├── 04696e1a-eb5d-43b9-bb1d-d2ee117f4430.webp │ │ │ ├── 1b9a004a-db27-45e4-b762-0fa21bc97277.webp │ │ │ ├── 4603a846-4daf-4018-aa74-e3ab567a69fc.webp │ │ │ ├── b64f151d-e194-497a-9b70-e15ffdd8730d.webp │ │ │ └── c2179403-954f-4f5d-82a4-3dfdeaba9597.webp │ │ ├── github.svg │ │ ├── metis.svg │ │ └── favicon.svg │ ├── docs │ │ ├── components │ │ │ ├── transition │ │ │ │ └── +page.md │ │ │ ├── switch │ │ │ │ └── +page.md │ │ │ ├── breadcrumbs │ │ │ │ └── +page.md │ │ │ ├── pagination │ │ │ │ └── +page.md │ │ │ ├── checkbox │ │ │ │ └── +page.md │ │ │ ├── progress │ │ │ │ └── +page.md │ │ │ ├── range │ │ │ │ └── +page.md │ │ │ ├── steps │ │ │ │ └── +page.md │ │ │ ├── radio │ │ │ │ └── +page.md │ │ │ ├── periodictable │ │ │ │ └── +page.md │ │ │ └── meter │ │ │ │ └── +page.md │ │ ├── 01-getting_started │ │ │ ├── changelog │ │ │ │ └── +page.md │ │ │ ├── 02-customize │ │ │ │ └── +page.md │ │ │ ├── browser-support │ │ │ │ └── +page.md │ │ │ └── 01-installation │ │ │ │ └── +page.md │ │ ├── +layout.svelte │ │ ├── layouts │ │ │ ├── sidebar │ │ │ │ └── +page.md │ │ │ ├── code │ │ │ │ └── +page.md │ │ │ ├── hero │ │ │ │ └── +page.md │ │ │ ├── container │ │ │ │ └── +page.md │ │ │ ├── navbar │ │ │ │ └── +page.md │ │ │ ├── empty │ │ │ │ └── +page.md │ │ │ ├── form │ │ │ │ └── +page.md │ │ │ ├── figure │ │ │ │ └── +page.md │ │ │ ├── tile │ │ │ │ └── +page.md │ │ │ ├── panel │ │ │ │ └── +page.md │ │ │ ├── grid │ │ │ │ └── +page.md │ │ │ └── toggle │ │ │ │ └── +page.md │ │ └── +page.svelte │ ├── types.ts │ ├── app.html │ ├── app.scss │ ├── +layout.server.ts │ ├── media.ts │ └── +page.svelte ├── lib │ ├── types │ │ ├── asset.d.ts │ │ ├── shape.d.ts │ │ ├── size.d.ts │ │ ├── bg.d.ts │ │ ├── const.ts │ │ ├── display.d.ts │ │ ├── text.d.ts │ │ ├── icons.d.ts │ │ └── position.d.ts │ ├── layouts │ │ ├── Grid │ │ │ ├── index.ts │ │ │ ├── Col.svelte │ │ │ └── Grid.svelte │ │ ├── Card │ │ │ ├── index.ts │ │ │ └── Card.svelte │ │ ├── Code │ │ │ ├── index.ts │ │ │ └── Code.svelte │ │ ├── Hero │ │ │ ├── index.ts │ │ │ └── Hero.svelte │ │ ├── Tile │ │ │ ├── index.ts │ │ │ └── Tile.svelte │ │ ├── Empty │ │ │ ├── index.ts │ │ │ └── Empty.svelte │ │ ├── Modal │ │ │ ├── index.ts │ │ │ └── Modal.svelte │ │ ├── Panel │ │ │ ├── index.ts │ │ │ └── Panel.svelte │ │ ├── Figure │ │ │ ├── index.ts │ │ │ └── Figure.svelte │ │ ├── Navbar │ │ │ ├── index.ts │ │ │ └── Navbar.svelte │ │ ├── Toggle │ │ │ ├── index.ts │ │ │ └── Toggle.svelte │ │ ├── Popover │ │ │ ├── index.ts │ │ │ └── Popover.svelte │ │ ├── Sidebar │ │ │ └── index.ts │ │ ├── Dropdown │ │ │ ├── index.ts │ │ │ └── Dropdown.svelte │ │ ├── Container │ │ │ ├── index.ts │ │ │ └── Container.svelte │ │ ├── Form │ │ │ ├── index.ts │ │ │ ├── Form.svelte │ │ │ └── Group.svelte │ │ └── index.ts │ ├── components │ │ ├── Bars │ │ │ ├── index.ts │ │ │ └── Bars.svelte │ │ ├── Chip │ │ │ ├── index.ts │ │ │ └── Chip.svelte │ │ ├── Icon │ │ │ └── index.ts │ │ ├── Menu │ │ │ ├── index.ts │ │ │ └── Menu.svelte │ │ ├── Tabs │ │ │ ├── index.ts │ │ │ └── Tabs.svelte │ │ ├── Meter │ │ │ └── index.ts │ │ ├── Radio │ │ │ ├── index.ts │ │ │ └── Radio.svelte │ │ ├── Range │ │ │ ├── index.ts │ │ │ └── Range.svelte │ │ ├── Steps │ │ │ ├── index.ts │ │ │ └── Steps.svelte │ │ ├── Avatar │ │ │ ├── index.ts │ │ │ └── Avatar.svelte │ │ ├── Select │ │ │ ├── index.ts │ │ │ └── Select.svelte │ │ ├── Switch │ │ │ ├── index.ts │ │ │ └── Switch.svelte │ │ ├── Divider │ │ │ ├── index.ts │ │ │ └── Divider.svelte │ │ ├── Accordion │ │ │ ├── Accordioner.svelte │ │ │ ├── index.ts │ │ │ └── Accordion.svelte │ │ ├── Checkbox │ │ │ ├── index.ts │ │ │ └── Checkbox.svelte │ │ ├── Progress │ │ │ ├── index.ts │ │ │ └── Progress.svelte │ │ ├── CIFPlayer │ │ │ ├── index.ts │ │ │ └── CIFPlayer.svelte │ │ ├── Pagination │ │ │ └── index.ts │ │ ├── Transition │ │ │ ├── index.ts │ │ │ └── Transition.svelte │ │ ├── Breadcrumbs │ │ │ ├── index.ts │ │ │ └── Breadcrumbs.svelte │ │ ├── Autocomplete │ │ │ ├── index.ts │ │ │ └── utils.ts │ │ ├── PeriodicTable │ │ │ ├── index.ts │ │ │ └── chemical_content.json │ │ ├── Badge │ │ │ ├── index.ts │ │ │ ├── action.ts │ │ │ └── Badge.svelte │ │ ├── Input │ │ │ ├── index.ts │ │ │ ├── Group.svelte │ │ │ └── Input.svelte │ │ ├── Toast │ │ │ ├── index.ts │ │ │ ├── positions.ts │ │ │ ├── timer.ts │ │ │ ├── toast.ts │ │ │ └── Toaster.svelte │ │ ├── Button │ │ │ ├── index.ts │ │ │ ├── Group.svelte │ │ │ ├── IconButton.svelte │ │ │ └── Button.svelte │ │ └── index.ts │ ├── helpers │ │ ├── actions.ts │ │ ├── uuid.ts │ │ └── str_to_rgb.ts │ ├── index.ts │ └── dark.scss └── global.d.ts ├── .npmrc ├── .husky └── pre-commit ├── .gitignore ├── mdsvex.config.js ├── tests ├── setup │ ├── register.js │ ├── preprocess.js │ ├── svelteconfig.js │ ├── transformer.js │ └── slots.js ├── components │ ├── Avatar │ │ └── Avatar.spec.ts │ ├── Transition │ │ └── Transition.spec.ts │ ├── Pagination │ │ └── Pagination.spec.ts │ ├── Tabs │ │ └── Tabs.spec.ts │ ├── Radio │ │ └── Radio.spec.ts │ ├── Toast │ │ └── Toast.spec.ts │ ├── Range │ │ └── Range.spec.ts │ ├── Divider │ │ └── Divider.spec.ts │ ├── Input │ │ ├── Group.spec.ts │ │ └── Input.spec.ts │ ├── Icon │ │ └── Icon.spec.ts │ ├── Steps │ │ └── Steps.spec.ts │ ├── Breadcrumbs │ │ └── Breadcrumbs.spec.ts │ ├── Select │ │ └── Select.spec.ts │ ├── Progress │ │ └── Progress.spec.ts │ ├── Badge │ │ └── Badge.spec.ts │ ├── Switch │ │ └── Switch.spec.ts │ ├── Button │ │ ├── Group.spec.ts │ │ ├── IconButton.spec.ts │ │ └── Button.spec.ts │ ├── Accordion │ │ └── Accordion.spec.ts │ ├── Chip │ │ └── Chip.spec.ts │ └── Checkbox │ │ └── Checkbox.spec.ts └── layouts │ ├── Form │ ├── Form.spec.ts │ └── FormGroup.spec.ts │ ├── Card │ └── Card.spec.ts │ ├── Code │ └── Code.spec.ts │ ├── Hero │ └── Hero.spec.ts │ ├── Tile │ └── Tile.spec.ts │ ├── Grid │ ├── Col.spec.ts │ └── Grid.spec.ts │ ├── Empty │ └── Empty.spec.ts │ ├── Modal │ └── Modal.spec.ts │ ├── Panel │ └── Panel.spec.ts │ ├── Figure │ └── Figure.spec.ts │ ├── Navbar │ └── Navbar.spec.ts │ ├── Popover │ └── Popover.spec.ts │ ├── Sidebar │ └── Sidebar.spec.ts │ ├── Dropdown │ └── Dropdown.spec.ts │ └── Container │ └── Container.spec.ts ├── .editorconfig ├── .prettierrc ├── .eslintrc.cjs ├── vite.config.js ├── tsconfig.json ├── LICENSE ├── svelte.config.js ├── README.md └── package.json /src/www/assets/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npm run format 5 | -------------------------------------------------------------------------------- /src/www/assets/img/avatar-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/basf/svelte-spectre/HEAD/src/www/assets/img/avatar-1.png -------------------------------------------------------------------------------- /src/www/assets/img/avatar-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/basf/svelte-spectre/HEAD/src/www/assets/img/avatar-2.png -------------------------------------------------------------------------------- /src/www/assets/img/avatar-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/basf/svelte-spectre/HEAD/src/www/assets/img/avatar-3.png -------------------------------------------------------------------------------- /src/www/assets/img/avatar-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/basf/svelte-spectre/HEAD/src/www/assets/img/avatar-4.png -------------------------------------------------------------------------------- /src/www/assets/img/avatar-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/basf/svelte-spectre/HEAD/src/www/assets/img/avatar-5.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | -------------------------------------------------------------------------------- /src/lib/types/asset.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.svg' { 2 | const content: any; 3 | export default content; 4 | } 5 | -------------------------------------------------------------------------------- /src/lib/layouts/Grid/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Grid } from './Grid.svelte'; 2 | export { default as Col } from './Col.svelte'; 3 | -------------------------------------------------------------------------------- /src/lib/types/shape.d.ts: -------------------------------------------------------------------------------- 1 | /* class should be prefixed with `s-{type}` */ 2 | export type Shape = 'none' | 'rounded' | 'circle'; 3 | -------------------------------------------------------------------------------- /src/lib/layouts/Card/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Card.svelte'; 2 | export { default } from './Card.svelte'; 3 | export { default as Card } from './Card.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/layouts/Code/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Code.svelte'; 2 | export { default } from './Code.svelte'; 3 | export { default as Code } from './Code.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/layouts/Hero/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Hero.svelte'; 2 | export { default } from './Hero.svelte'; 3 | export { default as Hero } from './Hero.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/layouts/Tile/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Tile.svelte'; 2 | export { default } from './Tile.svelte'; 3 | export { default as Tile } from './Tile.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/types/size.d.ts: -------------------------------------------------------------------------------- 1 | import type { SIZE, ZOOM } from './const'; 2 | 3 | export type Size = keyof typeof SIZE; 4 | export type Zoom = keyof typeof ZOOM; 5 | -------------------------------------------------------------------------------- /src/lib/components/Bars/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Bars.svelte'; 2 | export { default } from './Bars.svelte'; 3 | export { default as Bars } from './Bars.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Chip/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Chip.svelte'; 2 | export { default } from './Chip.svelte'; 3 | export { default as Chip } from './Chip.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Icon/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Icon.svelte'; 2 | export { default } from './Icon.svelte'; 3 | export { default as Icon } from './Icon.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Menu/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Menu.svelte'; 2 | export { default } from './Menu.svelte'; 3 | export { default as Menu } from './Menu.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Tabs/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Tabs.svelte'; 2 | export { default } from './Tabs.svelte'; 3 | export { default as Tabs } from './Tabs.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/layouts/Empty/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Empty.svelte'; 2 | export { default } from './Empty.svelte'; 3 | export { default as Empty } from './Empty.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/layouts/Modal/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Modal.svelte'; 2 | export { default } from './Modal.svelte'; 3 | export { default as Modal } from './Modal.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/layouts/Panel/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Panel.svelte'; 2 | export { default } from './Panel.svelte'; 3 | export { default as Panel } from './Panel.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Meter/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Meter.svelte'; 2 | export { default } from './Meter.svelte'; 3 | export { default as Meter } from './Meter.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Radio/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Radio.svelte'; 2 | export { default } from './Radio.svelte'; 3 | export { default as Radio } from './Radio.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Range/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Range.svelte'; 2 | export { default } from './Range.svelte'; 3 | export { default as Range } from './Range.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Steps/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Steps.svelte'; 2 | export { default } from './Steps.svelte'; 3 | export { default as Steps } from './Steps.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/layouts/Figure/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Figure.svelte'; 2 | export { default } from './Figure.svelte'; 3 | export { default as Figure } from './Figure.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/layouts/Navbar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Navbar.svelte'; 2 | export { default } from './Navbar.svelte'; 3 | export { default as Navbar } from './Navbar.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/layouts/Toggle/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Toggle.svelte'; 2 | export { default } from './Toggle.svelte'; 3 | export { default as Toggle } from './Toggle.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Avatar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Avatar.svelte'; 2 | export { default } from './Avatar.svelte'; 3 | export { default as Avatar } from './Avatar.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Select/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Select.svelte'; 2 | export { default } from './Select.svelte'; 3 | export { default as Select } from './Select.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Switch/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Switch.svelte'; 2 | export { default } from './Switch.svelte'; 3 | export { default as Switch } from './Switch.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/layouts/Popover/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Popover.svelte'; 2 | export { default } from './Popover.svelte'; 3 | export { default as Popover } from './Popover.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/layouts/Sidebar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Sidebar.svelte'; 2 | export { default } from './Sidebar.svelte'; 3 | export { default as Sidebar } from './Sidebar.svelte'; 4 | -------------------------------------------------------------------------------- /src/www/assets/img/04696e1a-eb5d-43b9-bb1d-d2ee117f4430.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/basf/svelte-spectre/HEAD/src/www/assets/img/04696e1a-eb5d-43b9-bb1d-d2ee117f4430.webp -------------------------------------------------------------------------------- /src/www/assets/img/1b9a004a-db27-45e4-b762-0fa21bc97277.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/basf/svelte-spectre/HEAD/src/www/assets/img/1b9a004a-db27-45e4-b762-0fa21bc97277.webp -------------------------------------------------------------------------------- /src/www/assets/img/4603a846-4daf-4018-aa74-e3ab567a69fc.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/basf/svelte-spectre/HEAD/src/www/assets/img/4603a846-4daf-4018-aa74-e3ab567a69fc.webp -------------------------------------------------------------------------------- /src/www/assets/img/b64f151d-e194-497a-9b70-e15ffdd8730d.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/basf/svelte-spectre/HEAD/src/www/assets/img/b64f151d-e194-497a-9b70-e15ffdd8730d.webp -------------------------------------------------------------------------------- /src/www/assets/img/c2179403-954f-4f5d-82a4-3dfdeaba9597.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/basf/svelte-spectre/HEAD/src/www/assets/img/c2179403-954f-4f5d-82a4-3dfdeaba9597.webp -------------------------------------------------------------------------------- /src/lib/components/Divider/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Divider.svelte'; 2 | export { default } from './Divider.svelte'; 3 | export { default as Divider } from './Divider.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/layouts/Dropdown/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Dropdown.svelte'; 2 | export { default } from './Dropdown.svelte'; 3 | export { default as Dropdown } from './Dropdown.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Accordion/Accordioner.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | -------------------------------------------------------------------------------- /src/lib/components/Checkbox/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Checkbox.svelte'; 2 | export { default } from './Checkbox.svelte'; 3 | export { default as Checkbox } from './Checkbox.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Progress/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Progress.svelte'; 2 | export { default } from './Progress.svelte'; 3 | export { default as Progress } from './Progress.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/layouts/Container/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Container.svelte'; 2 | export { default } from './Container.svelte'; 3 | export { default as Container } from './Container.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/layouts/Toggle/Toggle.svelte: -------------------------------------------------------------------------------- 1 | 2 | {#if toggle} 3 | 4 | {/if} 5 | 6 | 9 | -------------------------------------------------------------------------------- /src/lib/components/CIFPlayer/index.ts: -------------------------------------------------------------------------------- 1 | export * from './CIFPlayer.svelte'; 2 | export { default } from './CIFPlayer.svelte'; 3 | export { default as CIFPlayer } from './CIFPlayer.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Pagination/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Pagination.svelte'; 2 | export { default } from './Pagination.svelte'; 3 | export { default as Pagination } from './Pagination.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Transition/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Transition.svelte'; 2 | export { default } from './Transition.svelte'; 3 | export { default as Transition } from './Transition.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/helpers/actions.ts: -------------------------------------------------------------------------------- 1 | // addClass to any element 2 | function addClass(node: HTMLElement, classes: string[]) { 3 | node.classList.add(...classes); 4 | } 5 | 6 | export { addClass }; 7 | -------------------------------------------------------------------------------- /src/lib/components/Breadcrumbs/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Breadcrumbs.svelte'; 2 | export { default } from './Breadcrumbs.svelte'; 3 | export { default as Breadcrumbs } from './Breadcrumbs.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Autocomplete/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Autocomplete.svelte'; 2 | export { default } from './Autocomplete.svelte'; 3 | export { default as Autocomplete } from './Autocomplete.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/PeriodicTable/index.ts: -------------------------------------------------------------------------------- 1 | export * from './PeriodicTable.svelte'; 2 | export { default } from './PeriodicTable.svelte'; 3 | export { default as PeriodicTable } from './PeriodicTable.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Badge/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Badge.svelte'; 2 | export { default } from './Badge.svelte'; 3 | export { default as Badge } from './Badge.svelte'; 4 | export { default as badge } from './action'; 5 | -------------------------------------------------------------------------------- /src/lib/layouts/Form/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Form.svelte'; 2 | export { default } from './Form.svelte'; 3 | export { default as Form } from './Form.svelte'; 4 | export { default as FormGroup } from './Group.svelte'; 5 | -------------------------------------------------------------------------------- /src/lib/index.ts: -------------------------------------------------------------------------------- 1 | export * from './components/'; 2 | export * from './layouts/'; 3 | export * from './Spectre.svelte'; 4 | export { default } from './Spectre.svelte'; 5 | export { default as Spectre } from './Spectre.svelte'; 6 | -------------------------------------------------------------------------------- /src/lib/components/Input/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Input.svelte'; 2 | export { default } from './Input.svelte'; 3 | export { default as Input } from './Input.svelte'; 4 | export { default as InputGroup } from './Group.svelte'; 5 | -------------------------------------------------------------------------------- /mdsvex.config.js: -------------------------------------------------------------------------------- 1 | const config = { 2 | extensions: ['.svelte.md', '.md', '.svx'], 3 | smartypants: { 4 | dashes: 'oldschool', 5 | }, 6 | remarkPlugins: [], 7 | rehypePlugins: [], 8 | }; 9 | 10 | export default config; 11 | -------------------------------------------------------------------------------- /src/www/docs/components/transition/+page.md: -------------------------------------------------------------------------------- 1 | --- 2 | file: transition.md 3 | title: Transition 4 | --- 5 | 6 | 9 | 10 | # {title} 11 | 12 | > 🚧 Under construction 13 | -------------------------------------------------------------------------------- /src/www/docs/01-getting_started/changelog/+page.md: -------------------------------------------------------------------------------- 1 | --- 2 | file: changelog.md 3 | title: Changelog 4 | --- 5 | 6 | 9 | 10 | # {title} 11 | 12 | > 🚧 Under construction 13 | -------------------------------------------------------------------------------- /tests/setup/register.js: -------------------------------------------------------------------------------- 1 | import { addHook } from 'pirates'; 2 | import { transform } from './transformer'; 3 | 4 | const handleSvelte = (source, filename) => transform(source, filename); 5 | 6 | addHook(handleSvelte, { exts: ['.svelte'] }); 7 | -------------------------------------------------------------------------------- /src/lib/components/Accordion/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Accordion.svelte'; 2 | export { default } from './Accordion.svelte'; 3 | export { default as Accordion } from './Accordion.svelte'; 4 | export { default as Accordioner } from './Accordioner.svelte'; 5 | -------------------------------------------------------------------------------- /src/lib/components/Toast/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Toast.svelte'; 2 | export { default } from './Toast.svelte'; 3 | export { default as Toast } from './Toast.svelte'; 4 | export { default as Toaster } from './Toaster.svelte'; 5 | export * from './toast'; 6 | -------------------------------------------------------------------------------- /src/lib/types/bg.d.ts: -------------------------------------------------------------------------------- 1 | export type Color = 2 | | 'initial' 3 | | 'primary' 4 | | 'secondary' 5 | | 'dark' 6 | | 'darked' 7 | | 'gray' 8 | | 'light' 9 | | 'success' 10 | | 'warning' 11 | | 'error' 12 | | ''; 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | 7 | [*.{js,css,html,json,svelte,yaml}] 8 | charset = utf-8 9 | indent_style = tab 10 | indent_size = 4 11 | trim_trailing_whitespace = true 12 | max_line_length = 100 13 | -------------------------------------------------------------------------------- /src/lib/types/const.ts: -------------------------------------------------------------------------------- 1 | export const SIZE = { 2 | xs: 16, 3 | sm: 24, 4 | md: 32, 5 | lg: 40, 6 | xl: 48, 7 | xxl: 64, 8 | } as const; 9 | 10 | export const ZOOM = { 11 | '1x': 1, 12 | '2x': 2, 13 | '3x': 3, 14 | '4x': 4, 15 | } as const; 16 | -------------------------------------------------------------------------------- /src/lib/components/Button/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Button.svelte'; 2 | export { default } from './Button.svelte'; 3 | export { default as Button } from './Button.svelte'; 4 | export { default as ButtonGroup } from './Group.svelte'; 5 | export { default as IconButton } from './IconButton.svelte'; 6 | -------------------------------------------------------------------------------- /src/lib/types/display.d.ts: -------------------------------------------------------------------------------- 1 | /* class should be prefixed with `d-{type}` */ 2 | export type Display = 3 | | 'initial' 4 | | 'block' 5 | | 'inline' 6 | | 'inline-block' 7 | | 'flex' 8 | | 'inline-flex' 9 | | 'none' 10 | | 'hide' 11 | | 'visible' 12 | | 'invisible'; 13 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 4, 3 | "semi": true, 4 | "singleQuote": true, 5 | "svelteSortOrder": "options-markup-scripts-styles", 6 | "svelteStrictMode": false, 7 | "svelteAllowShorthand": true, 8 | "svelteIndentScriptAndStyle": true, 9 | "plugins": [ 10 | "prettier-plugin-svelte" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /src/lib/components/Button/Group.svelte: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /src/lib/helpers/uuid.ts: -------------------------------------------------------------------------------- 1 | export default function uuid(): string { 2 | return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace( 3 | /[xy]/g, 4 | function (c) { 5 | const r = (Math.random() * 16) | 0; 6 | const v = c === 'x' ? r : (r & 0x3) | 0x8; 7 | return v.toString(16); 8 | } 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /src/global.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | declare module '*.svg?src' { 3 | const content: string; 4 | export default content; 5 | } 6 | 7 | declare module '*.svg?component' { 8 | const content: string; 9 | export default content; 10 | } 11 | 12 | declare module '*.svg?url' { 13 | const content: string; 14 | export default content; 15 | } 16 | -------------------------------------------------------------------------------- /src/www/docs/01-getting_started/02-customize/+page.md: -------------------------------------------------------------------------------- 1 | --- 2 | file: customize.md 3 | title: Customize 4 | --- 5 | 6 | 9 | 10 | # {title} 11 | 12 | > 🚧 Under construction 13 | 14 | You can customize your version of Spectre-css by editing Sass files in /src 15 | directory or removing unneeded components from .scss source files. 16 | -------------------------------------------------------------------------------- /src/lib/dark.scss: -------------------------------------------------------------------------------- 1 | $dark-background: darken($dark-color, 5%); 2 | $dark-text: darken($light-color, 5%); 3 | $dark-secondary: mix($dark-color, $primary-color, 90%); 4 | $dark-shadow: darken($dark-background, 10%); 5 | $dark-border: darken($border-color, 10%); 6 | $dark-overlay: rgba($dark-background, 0.69); 7 | $dark-code: mix($dark-color, $code-color, 90%); 8 | $dark-highlight: darken($highlight-color, 50%); 9 | -------------------------------------------------------------------------------- /src/lib/layouts/Navbar/Navbar.svelte: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 | 7 |
8 |
9 | 10 |
11 |
12 | 13 | 18 | -------------------------------------------------------------------------------- /src/lib/layouts/Container/Container.svelte: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | 10 | 11 | 14 | 15 | 20 | -------------------------------------------------------------------------------- /src/www/types.ts: -------------------------------------------------------------------------------- 1 | interface Meta { 2 | file: string; 3 | title: string; 4 | config?: any; 5 | api?: Api[]; 6 | } 7 | 8 | type Api = { 9 | title?: string; 10 | variables?: string; 11 | description?: string; 12 | }; 13 | 14 | type Link = { 15 | metadata: Meta; 16 | path: string; 17 | }; 18 | 19 | interface Links { 20 | [key: string]: Link[]; 21 | } 22 | 23 | export interface Data { 24 | links: Links; 25 | meta: Meta; 26 | title: string; 27 | } 28 | -------------------------------------------------------------------------------- /src/lib/layouts/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Card/'; 2 | export * from './Code/'; 3 | export * from './Container/'; 4 | export * from './Dropdown/'; 5 | export * from './Empty/'; 6 | export * from './Figure/'; 7 | export * from './Form/'; 8 | export * from './Grid/'; 9 | export * from './Hero/'; 10 | export * from './Modal/'; 11 | export * from './Navbar/'; 12 | export * from './Panel/'; 13 | export * from './Popover/'; 14 | export * from './Sidebar'; 15 | export * from './Tile/'; 16 | export * from './Toggle/'; 17 | -------------------------------------------------------------------------------- /src/www/docs/+layout.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 22 | -------------------------------------------------------------------------------- /tests/setup/preprocess.js: -------------------------------------------------------------------------------- 1 | import { preprocess } from 'svelte/compiler'; 2 | import { pathToFileURL } from 'url'; 3 | 4 | const { source, filename, svelteConfig } = process.env; 5 | 6 | import(pathToFileURL(svelteConfig).toString()) 7 | .then((configImport) => { 8 | const config = configImport.default ? configImport.default : configImport; 9 | 10 | preprocess(source, config.preprocess || {}, { filename }).then((r) => 11 | process.stdout.write(r.code) 12 | ); 13 | }) 14 | .catch((err) => process.stderr.write(err)); 15 | -------------------------------------------------------------------------------- /src/lib/components/Toast/positions.ts: -------------------------------------------------------------------------------- 1 | export type Pos = 2 | | '' 3 | | 'top_center' 4 | | 'top_right' 5 | | 'center_right' 6 | | 'bottom_right' 7 | | 'bottom_center' 8 | | 'bottom_left' 9 | | 'center_left' 10 | | 'top_left' 11 | | 'center_center'; 12 | 13 | export const positions: Pos[] = [ 14 | 'top_center', 15 | 'top_right', 16 | 'center_right', 17 | 'bottom_right', 18 | 'bottom_center', 19 | 'bottom_left', 20 | 'center_left', 21 | 'top_left', 22 | 'center_center', 23 | ]; 24 | -------------------------------------------------------------------------------- /src/www/docs/layouts/sidebar/+page.md: -------------------------------------------------------------------------------- 1 | --- 2 | file: sidebar.md 3 | title: Sidebar 4 | --- 5 | 6 | 9 | 10 | # {title} 11 | 12 | The `Sidebar` is a navigation layout that the sidebar can slide in and out of 13 | the viewport. It is built in pure CSS. 14 | 15 | By default, the Sidebar is collapsed whenever the window width is. But you can 16 | add the `off-canvas-sidebar-show` class to the `off-canvas` to make the sidebar 17 | expanded when the window width is larger than or equal to 960px. 18 | -------------------------------------------------------------------------------- /src/lib/layouts/Code/Code.svelte: -------------------------------------------------------------------------------- 1 | {#if action} 2 |
5 | {:else} 6 |
7 | {/if} 8 | 9 | 14 | 15 | 20 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: '@typescript-eslint/parser', 4 | extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'], 5 | plugins: ['svelte3', '@typescript-eslint'], 6 | ignorePatterns: ['*.cjs'], 7 | overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }], 8 | settings: { 9 | 'svelte3/typescript': () => require('typescript') 10 | }, 11 | parserOptions: { 12 | sourceType: 'module', 13 | ecmaVersion: 2020 14 | }, 15 | env: { 16 | browser: true, 17 | es2017: true, 18 | node: true 19 | } 20 | }; 21 | -------------------------------------------------------------------------------- /src/lib/components/Badge/action.ts: -------------------------------------------------------------------------------- 1 | export default function addBadge(node: HTMLElement, badge: string) { 2 | function update(badge: string) { 3 | if (!badge && !badge?.length) return destroy(); 4 | node.classList.add('badge'); 5 | badge.length > 0 6 | ? node.setAttribute('data-badge', badge) 7 | : node.removeAttribute('data-badge'); 8 | } 9 | function destroy() { 10 | node.classList.remove('badge'); 11 | node.removeAttribute('data-badge'); 12 | } 13 | update(badge); 14 | return { update, destroy }; 15 | } 16 | -------------------------------------------------------------------------------- /src/lib/layouts/Form/Form.svelte: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 8 | 9 | 28 | -------------------------------------------------------------------------------- /src/www/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | %sveltekit.head% 11 | 12 | 13 | 14 |
%sveltekit.body%
15 | 16 | 17 | -------------------------------------------------------------------------------- /src/lib/layouts/Panel/Panel.svelte: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 | 7 |
8 |
9 | 10 |
11 |
12 | 13 |
14 |
15 | 16 | 27 | -------------------------------------------------------------------------------- /src/lib/components/Breadcrumbs/Breadcrumbs.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 19 | 20 | 23 | 24 | 27 | -------------------------------------------------------------------------------- /tests/components/Avatar/Avatar.spec.ts: -------------------------------------------------------------------------------- 1 | import { test } from 'uvu'; 2 | import * as assert from 'uvu/assert'; 3 | import * as ENV from '../../setup/testenv'; 4 | 5 | import Avatar from '../../../src/lib/components/Avatar'; 6 | 7 | test.before(ENV.setup); 8 | test.before.each(ENV.reset); 9 | 10 | test('check Avatar', async () => { 11 | const { container, component } = ENV.render(Avatar, { title: 'Accordion' }); 12 | const avatar: HTMLElement = container.querySelector('.avatar'); 13 | avatar.innerHTML = 'avatar'; 14 | 15 | assert.is(avatar.innerHTML.includes(`avatar`), true); 16 | // assert.snapshot(container.innerHTML, 'just render view'); 17 | }); 18 | 19 | test.run(); 20 | -------------------------------------------------------------------------------- /src/lib/components/CIFPlayer/CIFPlayer.svelte: -------------------------------------------------------------------------------- 1 |