From cc9d3fdc65dcc873a9b77e25909b97aa1bf8060a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20R=C3=B6schke?= Date: Fri, 14 Apr 2023 11:45:54 +0200 Subject: [PATCH 01/27] Added Divider to the core keywords. --- src/docs/links.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/docs/links.ts b/src/docs/links.ts index 223bc1d55..441dcb429 100644 --- a/src/docs/links.ts +++ b/src/docs/links.ts @@ -41,7 +41,7 @@ export const menuNavLinks: any = [ id: 'base', title: 'Globals', list: [ - { href: '/elements/core', label: 'Core', keywords: 'body, scroll, scrollbar, hr, horizontal, rule' }, + { href: '/elements/core', label: 'Core', keywords: 'body, scroll, scrollbar, hr, horizontal, rule, divider' }, { href: '/elements/typography', label: 'Typography', From a465ffa6300d5cb8ec924ab32b7bccdfcd1edf24 Mon Sep 17 00:00:00 2001 From: Dominik <31982384+Sarenor@users.noreply.github.com> Date: Fri, 14 Apr 2023 17:31:39 +0200 Subject: [PATCH 02/27] Updated Bug_report.yaml (#1325) Included asking for a reproduction and a hint that reproductions will improve the bug answer process --- .github/ISSUE_TEMPLATE/bug_report.yml | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index cca678e07..d0fc5fa1c 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -11,15 +11,20 @@ body: required: false - type: textarea attributes: - label: Steps To Reproduce - description: Steps to reproduce the behavior. + label: Reproduction / Steps To Reproduce + description: Stackblitz/Link to a repository with steps to reproduce the behavior. placeholder: | + As you can see in this code example/Stackblitz link/repostitory 1. Using this component... 2. With these properties... 3. Click '...' 4. See error... validations: required: false +- type: markdown + attributes: + value: | + Bug Reports with a repository with a full reproduction or a Stackblitz can be anwswered far quicker, so please consider including as much information as possible to let us help you quicker! - type: textarea attributes: label: Anything else? @@ -27,4 +32,4 @@ body: Links? References? Anything that will give us more context about the issue you are encountering! Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in. validations: - required: false \ No newline at end of file + required: false From 80f98c87494480c63718c13e25f82efb5f825b1c Mon Sep 17 00:00:00 2001 From: Cucumberrbob <128094686+Cucumberrbob@users.noreply.github.com> Date: Fri, 14 Apr 2023 18:40:30 +0100 Subject: [PATCH 03/27] Use `cspell` to fix spelling issues (#1249) * use cspell add ignore list in cspell.json fix spelling mistakes * add cspell github action to check spelling * fix remaining issues * remove github action * revert line wrap changes * horiz/vert -> horizontal/vertical * use loremIpsum variable instead of hard-coded in `Accordion` * fix remaining line wrap issues * add back new line at end of root layout * set Code Spell Checker (cspell) as a reccommended extension --- .gitignore | 1 - .vscode/extensions.json | 13 ++ .vscode/settings.json | 3 + cspell.json | 123 ++++++++++++++++++ package.json | 1 + scripts/compile-css-to-js.cjs | 2 +- scripts/post-build.js | 2 +- .../components/DocsAppBar/DocsAppBar.svelte | 2 +- .../layouts/DocsShell/partials/Header.svelte | 2 +- .../DocsShell/partials/PanelEvents.svelte | 4 +- src/docs/layouts/DocsShell/sveldMapper.ts | 2 +- src/docs/layouts/DocsShell/types.ts | 6 +- src/docs/layouts/DocsThemer/DocsThemer.svelte | 8 +- src/docs/layouts/LayoutPage/LayoutPage.svelte | 2 + src/docs/links.ts | 2 +- src/lib/actions/Clipboard/clipboard.ts | 2 +- .../Filters/svg-filters/Emerald.svelte | 2 +- src/lib/components/Accordion/Accordion.svelte | 2 +- src/lib/components/AppRail/AppRailTile.svelte | 2 +- src/lib/components/AppShell/AppShell.svelte | 20 +-- .../Autocomplete/Autocomplete.svelte | 8 +- src/lib/components/Autocomplete/types.ts | 2 +- src/lib/components/ListBox/ListBox.svelte | 2 +- src/lib/components/Paginator/Paginator.svelte | 2 +- .../components/ProgressBar/ProgressBar.svelte | 4 +- src/lib/components/Stepper/Stepper.svelte | 2 +- src/lib/components/Tab/TabGroup.test.ts | 2 +- .../TableOfContents/TableOfContents.svelte | 4 +- src/lib/styles/elements/buttons.css | 2 +- src/lib/styles/tailwind.css | 2 +- src/lib/styles/variants.css | 2 +- src/lib/utilities/DataTable/actions.ts | 2 +- .../utilities/LightSwitch/LightSwitch.svelte | 2 +- src/lib/utilities/Modal/Modal.svelte | 2 +- src/lib/utilities/Popup/types.ts | 6 +- .../(inner)/actions/filters/+page.svelte | 2 +- .../components/accordions/+page.svelte | 6 +- .../components/conic-gradients/+page.svelte | 2 +- .../components/input-chips/+page.svelte | 2 +- .../components/radio-groups/+page.svelte | 10 +- .../(inner)/components/steppers/+page.svelte | 18 +-- .../contributing/documentation/+page.svelte | 4 +- .../contributing/requirements/+page.svelte | 4 +- .../contributing/style-guide/+page.svelte | 2 +- src/routes/(inner)/docs/features/+page.svelte | 2 +- .../docs/get-started/SectionInstall.svelte | 4 +- .../get-started/SectionStylesheets.svelte | 2 +- .../docs/get-started/SectionTailwind.svelte | 2 +- .../docs/get-started/SectionThemes.svelte | 2 +- .../(inner)/docs/quickstart/+page.svelte | 8 +- src/routes/(inner)/docs/tokens/+page.svelte | 2 +- .../(inner)/elements/alerts/+page.svelte | 1 + .../(inner)/elements/breadcrumbs/+page.svelte | 4 +- .../(inner)/elements/cards/+page.svelte | 4 +- src/routes/(inner)/elements/core/+page.svelte | 6 +- .../(inner)/elements/forms/+page.svelte | 7 +- .../(inner)/elements/lists/+page.svelte | 2 +- .../(inner)/elements/tables/+page.svelte | 2 +- .../(inner)/elements/typography/+page.svelte | 4 +- src/routes/(inner)/template/+page.svelte | 1 + .../utilities/data-tables/+page.svelte | 4 +- .../(inner)/utilities/drawers/+page.svelte | 4 +- .../(inner)/utilities/modals/+page.svelte | 6 +- .../(inner)/utilities/popups/+page.svelte | 6 +- .../(inner)/utilities/toasts/+page.svelte | 3 + src/routes/+layout.svelte | 6 +- src/routes/home-partials/HomeFeatures.svelte | 5 +- .../home-partials/HomeHeroComponents.svelte | 16 +-- src/routes/home-partials/HomeSponsors.svelte | 2 +- src/routes/home-partials/HomeTailwind.svelte | 2 +- 70 files changed, 279 insertions(+), 123 deletions(-) create mode 100644 .vscode/extensions.json create mode 100644 .vscode/settings.json create mode 100644 cspell.json diff --git a/.gitignore b/.gitignore index 36ba5e8e8..760b7a0e7 100644 --- a/.gitignore +++ b/.gitignore @@ -8,7 +8,6 @@ dist !.env.example coverage pnpm-lock.yaml -.vscode .temp src/lib/tailwind/generated *.tgz \ No newline at end of file diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 000000000..f0f1fb47a --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,13 @@ +{ + // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations. + // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp + + // List of extensions which should be recommended for users of this workspace. + "recommendations": [ + "streetsidesoftware.code-spell-checker" + ], + // List of extensions recommended by VS Code that should not be recommended for users of this workspace. + "unwantedRecommendations": [ + + ] +} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..80d6be736 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "cSpell.language": "en" +} \ No newline at end of file diff --git a/cspell.json b/cspell.json new file mode 100644 index 000000000..3a4100546 --- /dev/null +++ b/cspell.json @@ -0,0 +1,123 @@ +{ + "language": "en", + "ignorePaths": ["src/lib/tailwind/generated/**", "static/**", "pnpm-lock.yaml", "package-lock.json", "yarn.lock", "package/**"], + "dictionaries": ["html", "typescript", "softwareTerms", "companies"], + "allowCompoundWords": true, + "words": [ + "Abril", + "autocollapse", + "autohide", + "Barebones", + "Benzara", + "Berganza", + "blockquote", + "bluenight", + "callout", + "carbonads", + "Chicunamictlán", + "Codepen", + "colindex", + "colormatrix", + "combobox", + "Consolas", + "contenteditable", + "cpath", + "Cruisin", + "csvg", + "datetime", + "delisted", + "describedby", + "destring", + "Destrings", + "doctag", + "dropzone", + "Elems", + "endigo", + "Fatface", + "Felte", + "fieldset", + "filesize", + "flexbox", + "Flowbite", + "fontawesome", + "Fonticons", + "FOSS", + "Gekko", + "gravesites", + "Grotesk", + "hamlindigo", + "hljs", + "hovera", + "hoverable", + "iframe", + "incidunt", + "ipsum", + "iste", + "Javis", + "JSDocced", + "labelledby", + "laborum", + "Lightswitch", + "lightswitches", + "listbox", + "maiores", + "Menlo", + "minima", + "mininal", + "Muertos", + "Nahua", + "Neue", + "noirlight", + "Noto", + "nowrap", + "Nussbaum", + "officia", + "ofrendas", + "Paginators", + "Pérez", + "Playfair", + "PNPM", + "postcss", + "poweredby", + "preconfigured", + "Prefs", + "premade", + "Quense", + "Quickstart", + "rcgy", + "rgba", + "roadmap", + "Roboto", + "rowindex", + "Sarenor", + "Schennink", + "Scrollbars", + "seafoam", + "Segoe", + "skeletonlabs", + "slnt", + "stylesheet", + "sveld", + "svelte", + "sveltejs", + "sveltekit", + "Tahar", + "tailwindcolorshades", + "tailwindcss", + "testid", + "textareas", + "Themeable", + "Themer", + "tickmarks", + "Transpiles", + "unsub", + "Unsubscriber", + "Vercel", + "Vitest", + "vite", + "wght", + "Wonka", + "xmark", + "xpro" + ] +} diff --git a/package.json b/package.json index 41fe6006b..d5a9697b1 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "@vercel/analytics": "^0.1.11", "autoprefixer": "^10.4.14", "c8": "^7.13.0", + "cspell": "^6.31.1", "eslint": "^8.37.0", "eslint-config-prettier": "^8.8.0", "eslint-plugin-svelte3": "^4.0.0", diff --git a/scripts/compile-css-to-js.cjs b/scripts/compile-css-to-js.cjs index 62dcadc9f..0fb60bc52 100644 --- a/scripts/compile-css-to-js.cjs +++ b/scripts/compile-css-to-js.cjs @@ -41,7 +41,7 @@ async function generateAllTWClasses() { const result = await postcss().use(tailwindcss(twConfig)).process(css, { from: cssEntryPath }); const cssInJs = postcssJs.objectify(result.root); - // Caches the TW classes so we don't have to generate them again after the intial run + // Caches the TW classes so we don't have to generate them again after the initial run fs.writeFileSync('./.temp/twClasses.cjs', `module.exports = ${JSON.stringify(cssInJs)}`); return structuredClone(cssInJs); // return as a POJO diff --git a/scripts/post-build.js b/scripts/post-build.js index e64496c0d..c09e460ba 100644 --- a/scripts/post-build.js +++ b/scripts/post-build.js @@ -42,7 +42,7 @@ function extractJSDocBlocks() { } } -//Rescursive function for traversing node hierarchy to get JSDocs blocks, different node types have the information we want in different places +// Recursive function for traversing node hierarchy to get JSDocs blocks, different node types have the information we want in different places function _extractJSDocBlocks(srcFile, propsObj) { ts.forEachChild(srcFile, (node) => { if (node?.jsDoc) { diff --git a/src/docs/components/DocsAppBar/DocsAppBar.svelte b/src/docs/components/DocsAppBar/DocsAppBar.svelte index 7da73fed8..b2c2a1306 100644 --- a/src/docs/components/DocsAppBar/DocsAppBar.svelte +++ b/src/docs/components/DocsAppBar/DocsAppBar.svelte @@ -24,7 +24,7 @@ // Local let isOsMac = false; - // Set Search Shortkey Keys + // Set Search Keyboard Shortcut if (browser) { let os = navigator.userAgent; isOsMac = os.search('Mac') !== -1; diff --git a/src/docs/layouts/DocsShell/partials/Header.svelte b/src/docs/layouts/DocsShell/partials/Header.svelte index b9515d4d3..65d1852a1 100644 --- a/src/docs/layouts/DocsShell/partials/Header.svelte +++ b/src/docs/layouts/DocsShell/partials/Header.svelte @@ -79,7 +79,7 @@ {#if pageData.dependencies?.length} {#each pageData.dependencies as d} - + {d.label} diff --git a/src/docs/layouts/DocsShell/partials/PanelEvents.svelte b/src/docs/layouts/DocsShell/partials/PanelEvents.svelte index b5cd1cdd5..a63605ebf 100644 --- a/src/docs/layouts/DocsShell/partials/PanelEvents.svelte +++ b/src/docs/layouts/DocsShell/partials/PanelEvents.svelte @@ -2,7 +2,7 @@ // Types import type { DocsShellSettings } from '$docs/layouts/DocsShell/types'; // Sveld Mapper - import { sveldeMapperEvents } from '$docs/layouts/DocsShell/sveldMapper'; + import { sveldMapperEvents } from '$docs/layouts/DocsShell/sveldMapper'; // Components import Table from '$lib/components/Table/Table.svelte'; @@ -20,7 +20,7 @@ {#if pageData.components} {#each pageData.components as comp} {#if comp.sveld.events.length > 0} - {@const tableSource = sveldeMapperEvents(comp)} + {@const tableSource = sveldMapperEvents(comp)}
{#if comp.label}

{comp.label}

{/if} {#if comp.descEvents}
{@html comp.descEvents}
{/if} diff --git a/src/docs/layouts/DocsShell/sveldMapper.ts b/src/docs/layouts/DocsShell/sveldMapper.ts index 6ea27e6ef..16d89183e 100644 --- a/src/docs/layouts/DocsShell/sveldMapper.ts +++ b/src/docs/layouts/DocsShell/sveldMapper.ts @@ -41,7 +41,7 @@ export function sveldMapperSlots(component: Component): TableSource { } // Mapper: Events -export function sveldeMapperEvents(component: Component): TableSource { +export function sveldMapperEvents(component: Component): TableSource { const { events } = component.sveld; const eventsHeadings = ['Name', 'Type', 'Element', 'Response', 'Description']; return { diff --git a/src/docs/layouts/DocsShell/types.ts b/src/docs/layouts/DocsShell/types.ts index 7b0ab73a8..e7c7486a9 100644 --- a/src/docs/layouts/DocsShell/types.ts +++ b/src/docs/layouts/DocsShell/types.ts @@ -46,7 +46,7 @@ export interface DocsShellSettings { name: string; /** The feature description */ description: string; - /** Specifiy the GitHub source path for the feature (partial) */ + /** Specify the GitHub source path for the feature (partial) */ source?: string; /** List of import alias names. */ imports?: string[]; @@ -63,9 +63,9 @@ export interface DocsShellSettings { /** Package URL */ url: string; }; - /** Specifify the GitHub documentation source for the feature (partial) */ + /** Specify the GitHub documentation source for the feature (partial) */ docsPath?: string; - /** Provide list of depedency links. */ + /** Provide list of dependency links. */ dependencies?: Link[]; /** WAI-ARIA APG reference page URL. */ aria?: string; diff --git a/src/docs/layouts/DocsThemer/DocsThemer.svelte b/src/docs/layouts/DocsThemer/DocsThemer.svelte index fee6af4d7..577fccc48 100644 --- a/src/docs/layouts/DocsThemer/DocsThemer.svelte +++ b/src/docs/layouts/DocsThemer/DocsThemer.svelte @@ -297,10 +297,10 @@
- - - - + + + +
diff --git a/src/docs/layouts/LayoutPage/LayoutPage.svelte b/src/docs/layouts/LayoutPage/LayoutPage.svelte index b0560acd7..ccc30da56 100644 --- a/src/docs/layouts/LayoutPage/LayoutPage.svelte +++ b/src/docs/layouts/LayoutPage/LayoutPage.svelte @@ -28,12 +28,14 @@ {#if $storeVercelProductionMode === true} + + {:else}
+
{#if optionsFiltered.length > 0} {:else} -
{emptyState}
+
{emptyState}
{/if}
diff --git a/src/lib/components/Autocomplete/types.ts b/src/lib/components/Autocomplete/types.ts index a39ed4dec..74b2319a8 100644 --- a/src/lib/components/Autocomplete/types.ts +++ b/src/lib/components/Autocomplete/types.ts @@ -5,7 +5,7 @@ export interface AutocompleteOption { label: string; /** Provide a unique option value. */ value: unknown; - /** Provide a comma seperated list of keywords. */ + /** Provide a comma separated list of keywords. */ keywords?: any; /** Pass arbitrary data per option. */ meta?: any; diff --git a/src/lib/components/ListBox/ListBox.svelte b/src/lib/components/ListBox/ListBox.svelte index d3a110c77..141a8ea94 100644 --- a/src/lib/components/ListBox/ListBox.svelte +++ b/src/lib/components/ListBox/ListBox.svelte @@ -9,7 +9,7 @@ export let multiple: boolean = false; // Props (styles) - /** Provide classs to set the vertical spacing style. */ + /** Provide class to set the vertical spacing style. */ export let spacing: CssClasses = 'space-y-1'; /** Provide classes to set the listbox box radius styles. */ export let rounded: CssClasses = 'rounded-token'; diff --git a/src/lib/components/Paginator/Paginator.svelte b/src/lib/components/Paginator/Paginator.svelte index 6b683742c..ba3b47969 100644 --- a/src/lib/components/Paginator/Paginator.svelte +++ b/src/lib/components/Paginator/Paginator.svelte @@ -24,7 +24,7 @@ export let text = 'text-xs'; /** Set the text for the amount selection input. */ export let amountText = 'Items'; - /** Provide abtitrary classes to the next/previous buttons. */ + /** Provide arbitrary classes to the next/previous buttons. */ export let buttonClasses: CssClasses = 'btn-icon variant-filled'; /** Set the text label for the Previous button. */ export let buttonTextPrevious: CssClasses = '←'; diff --git a/src/lib/components/ProgressBar/ProgressBar.svelte b/src/lib/components/ProgressBar/ProgressBar.svelte index 4ac730f8a..813197760 100644 --- a/src/lib/components/ProgressBar/ProgressBar.svelte +++ b/src/lib/components/ProgressBar/ProgressBar.svelte @@ -36,10 +36,10 @@ // Indeterminate State $: indeterminate = value === undefined || value < 0; - $: classesIndterminate = indeterminate ? 'animIndeterminate' : ''; + $: classesIndeterminate = indeterminate ? 'animIndeterminate' : ''; // Reactive Classes $: classesTrack = `${cTrack} ${height} ${rounded} ${track} ${$$props.class ?? ''}`; - $: classesMeter = `${cMeter} ${rounded} ${classesIndterminate} ${meter}`; + $: classesMeter = `${cMeter} ${rounded} ${classesIndeterminate} ${meter}`; diff --git a/src/lib/components/Stepper/Stepper.svelte b/src/lib/components/Stepper/Stepper.svelte index 8cc288d04..6dca4fd0d 100644 --- a/src/lib/components/Stepper/Stepper.svelte +++ b/src/lib/components/Stepper/Stepper.svelte @@ -6,7 +6,7 @@ // Types import type { CssClasses } from '$lib'; - // Event Dispacher + // Event Dispatcher const dispatchParent = createEventDispatcher(); // Props diff --git a/src/lib/components/Tab/TabGroup.test.ts b/src/lib/components/Tab/TabGroup.test.ts index 5ea2ca0e7..cc6e7addc 100644 --- a/src/lib/components/Tab/TabGroup.test.ts +++ b/src/lib/components/Tab/TabGroup.test.ts @@ -21,7 +21,7 @@ describe('TabGroup.svelte', () => { color: 'text-primary-500', fill: 'fill-primary-500', hover: 'hover:bg-primary-500/10', - labeledby: 'testTabGroupLabel1', + labelledby: 'testTabGroupLabel1', label: 'testTabGroup1' } }); diff --git a/src/lib/components/TableOfContents/TableOfContents.svelte b/src/lib/components/TableOfContents/TableOfContents.svelte index d8b34dd5a..a452b1f01 100644 --- a/src/lib/components/TableOfContents/TableOfContents.svelte +++ b/src/lib/components/TableOfContents/TableOfContents.svelte @@ -94,14 +94,14 @@ } function pageScrollHandler(): void { - const headingSizeThreadshold = 40; // px + const headingSizeThreshold = 40; // px // List of visible headings let visibleHeadings: HTMLElement[] = []; // Loop each allowed heading from the target element allowedHeadingsList?.forEach((header: HTMLElement) => { const scrollableTop = elemScrollParent?.getBoundingClientRect().top || 0; const headerBoundTop = header.getBoundingClientRect().top; - const offsetTop = headerBoundTop - scrollableTop + headingSizeThreadshold; + const offsetTop = headerBoundTop - scrollableTop + headingSizeThreshold; // If heading visible, add to visibleHeadings if (offsetTop >= 0) visibleHeadings.push(header); }); diff --git a/src/lib/styles/elements/buttons.css b/src/lib/styles/elements/buttons.css index 505f3a4bb..62ce73eaa 100644 --- a/src/lib/styles/elements/buttons.css +++ b/src/lib/styles/elements/buttons.css @@ -45,7 +45,7 @@ /* A circular button meant for housing icons. */ .btn-icon { - /* Extend Base Button Clases */ + /* Extend Base Button Classes */ @apply button-base-styles; /* Padding */ @apply p-0; diff --git a/src/lib/styles/tailwind.css b/src/lib/styles/tailwind.css index 0a3030d3d..46dc35d72 100644 --- a/src/lib/styles/tailwind.css +++ b/src/lib/styles/tailwind.css @@ -7,7 +7,7 @@ IMPORTANT: Be sure to remove these directives from your global CSS stylesheet. Tailwind directives should only be included ONCE per project. -These directives should preceed ALL Skeleton stylesheets. +These directives should precede ALL Skeleton stylesheets. */ @tailwind base; diff --git a/src/lib/styles/variants.css b/src/lib/styles/variants.css index 3e0b674a2..3507521e4 100644 --- a/src/lib/styles/variants.css +++ b/src/lib/styles/variants.css @@ -1,5 +1,5 @@ /* === Variants === */ -/* A canned set of reusabled variant styles. */ +/* A canned set of reusable variant styles. */ @layer components { /* Outline -- supports ringed and host variants */ diff --git a/src/lib/utilities/DataTable/actions.ts b/src/lib/utilities/DataTable/actions.ts index 1ad92f627..a4a7119aa 100644 --- a/src/lib/utilities/DataTable/actions.ts +++ b/src/lib/utilities/DataTable/actions.ts @@ -57,7 +57,7 @@ export function tableA11y(node: HTMLElement) { } } }; - // Event Listner + // Event Listener node.addEventListener('keydown', onKeyDown); // Lifecycle return { diff --git a/src/lib/utilities/LightSwitch/LightSwitch.svelte b/src/lib/utilities/LightSwitch/LightSwitch.svelte index 5e1cd6480..5d96f147f 100644 --- a/src/lib/utilities/LightSwitch/LightSwitch.svelte +++ b/src/lib/utilities/LightSwitch/LightSwitch.svelte @@ -43,7 +43,7 @@ // A11y Input Handlers function onKeyDown(event: OnKeyDownEvent): void { - // Enter/Space triggers selecton event + // Enter/Space triggers selection event if (['Enter', 'Space'].includes(event.code)) { event.preventDefault(); event.currentTarget.click(); diff --git a/src/lib/utilities/Modal/Modal.svelte b/src/lib/utilities/Modal/Modal.svelte index 29a9c93c7..2648166c4 100644 --- a/src/lib/utilities/Modal/Modal.svelte +++ b/src/lib/utilities/Modal/Modal.svelte @@ -144,7 +144,7 @@ $modalStore[0]?.modalClasses ?? '' }`; // IMPORTANT: add values to pass to the children templates. - // There is a way to self-reference component values, but it involes svelte-internal and is not yet stable. + // There is a way to self-reference component values, but it involves svelte-internal and is not yet stable. // REPL: https://svelte.dev/repl/badd0f11aa99450ca69dca6690d4d5a4?version=3.52.0 // Source: https://discord.com/channels/457912077277855764/1037768846855118909 $: parent = { diff --git a/src/lib/utilities/Popup/types.ts b/src/lib/utilities/Popup/types.ts index 3ae808f5f..f59e81463 100644 --- a/src/lib/utilities/Popup/types.ts +++ b/src/lib/utilities/Popup/types.ts @@ -5,8 +5,8 @@ type Direction = 'top' | 'bottom' | 'left' | 'right'; /** Placement https://floating-ui.com/docs/computePosition#placement */ type Placement = Direction | `${Direction}-start` | `${Direction}-end`; -// Options & Middlware -interface Middlware { +// Options & Middleware +interface Middleware { /** Offset options: https://floating-ui.com/docs/offset */ offset?: number | Record; /** Shift options: https://floating-ui.com/docs/shift */ @@ -28,7 +28,7 @@ export interface PopupSettings { /** Query list of elements that will close the popup. Default: `'a[href], button'`. */ closeQuery?: string; /** Provide additional options and middleware settings. */ - middleware?: Middlware; + middleware?: Middleware; /** Provide an optional callback function to monitor open/close state. */ state?: (event: { state: boolean }) => void; } diff --git a/src/routes/(inner)/actions/filters/+page.svelte b/src/routes/(inner)/actions/filters/+page.svelte index a4d61738c..26524e414 100644 --- a/src/routes/(inner)/actions/filters/+page.svelte +++ b/src/routes/(inner)/actions/filters/+page.svelte @@ -40,7 +40,7 @@ diff --git a/src/routes/(inner)/components/accordions/+page.svelte b/src/routes/(inner)/components/accordions/+page.svelte index 397a3be74..c623ae828 100644 --- a/src/routes/(inner)/components/accordions/+page.svelte +++ b/src/routes/(inner)/components/accordions/+page.svelte @@ -36,6 +36,7 @@ // Local const loremIpsum = + // cspell:disable-next-line 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eligendi quibusdam odit, temporibus ullam ab enim expedita eum officia ipsum, laboriosam, nobis quasi laborum aspernatur reiciendis dignissimos optio sunt distinctio.'; @@ -74,10 +75,7 @@

Games

This is the content panel for the games item.

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eligendi quibusdam odit, temporibus ullam ab enim - expedita eum officia ipsum, laboriosam, nobis quasi laborum aspernatur reiciendis dignissimos optio sunt distinctio. -

+

{loremIpsum}

 diff --git a/src/routes/(inner)/components/conic-gradients/+page.svelte b/src/routes/(inner)/components/conic-gradients/+page.svelte index 31a5390fc..1a092a3fd 100644 --- a/src/routes/(inner)/components/conic-gradients/+page.svelte +++ b/src/routes/(inner)/components/conic-gradients/+page.svelte @@ -182,7 +182,7 @@ const conicStops: ConicStop[] = [

Rotate Axis

- Use the Tailwind rotate utility clases with the + Use the Tailwind rotate utility classes with the regionCone property to change the starting axis position.

`} /> diff --git a/src/routes/(inner)/components/input-chips/+page.svelte b/src/routes/(inner)/components/input-chips/+page.svelte index 207d922ea..13fad3a8b 100644 --- a/src/routes/(inner)/components/input-chips/+page.svelte +++ b/src/routes/(inner)/components/input-chips/+page.svelte @@ -86,7 +86,7 @@ - +

Custom Validation

You can optionally provide a function to provide custom validation. Make sure to accept a string value and return a boolean.

diff --git a/src/routes/(inner)/components/radio-groups/+page.svelte b/src/routes/(inner)/components/radio-groups/+page.svelte index ed3eca285..dc7893776 100644 --- a/src/routes/(inner)/components/radio-groups/+page.svelte +++ b/src/routes/(inner)/components/radio-groups/+page.svelte @@ -32,8 +32,8 @@ // Local let justify: number = 0; - let timeHorz: string = 'months'; - let timeVert: string = 'Millennia'; + let timeHorizontal: string = 'months'; + let timeVertical: string = 'Millennia'; let timeNames = ['Millennia', 'Epochs', 'Eras', 'Eons']; @@ -87,8 +87,8 @@ - Months - Years + Months + Years @@ -106,7 +106,7 @@ {#each timeNames as name, i} - {name} + {name} {/each} diff --git a/src/routes/(inner)/components/steppers/+page.svelte b/src/routes/(inner)/components/steppers/+page.svelte index c9d999077..cc1e76a12 100644 --- a/src/routes/(inner)/components/steppers/+page.svelte +++ b/src/routes/(inner)/components/steppers/+page.svelte @@ -92,14 +92,16 @@ Long Form Content.

The steps will expand to fit content of any length.

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque vel expedita porro vero, saepe dicta repellendus facilis ab - accusamus unde, tempora ut nobis eum. Veniam, architecto corrupti. Lorem ipsum dolor sit amet consectetur adipisicing elit. - Itaque vel expedita porro vero, saepe dicta repellendus facilis ab accusamus unde, tempora ut nobis eum. Veniam, architecto - corrupti. Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque vel expedita porro vero, saepe dicta repellendus - facilis ab accusamus unde, tempora ut nobis eum. Veniam, architecto corrupti. Lorem ipsum dolor sit amet consectetur - adipisicing elit. Itaque vel expedita porro vero, saepe dicta repellendus facilis ab accusamus unde, tempora ut nobis eum. - Veniam, architecto corrupti. Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque vel expedita porro vero, saepe - dicta repellendus facilis ab accusamus unde, tempora ut nobis eum. Veniam, architecto corrupti. + accusamus unde, tempora ut nobis eum. Veniam, architecto corrupti. Lorem ipsum dolor sit amet consectetur adipisicing elit. + Itaque vel expedita porro vero, saepe dicta repellendus facilis ab accusamus unde, tempora ut nobis eum. Veniam, architecto + corrupti. Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque vel expedita porro vero, saepe dicta repellendus + facilis ab accusamus unde, tempora ut nobis eum. Veniam, architecto corrupti. Lorem ipsum dolor sit amet consectetur + adipisicing elit. Itaque vel expedita porro vero, saepe dicta repellendus facilis ab accusamus unde, tempora ut nobis eum. + Veniam, architecto corrupti. Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque vel expedita porro vero, saepe + dicta repellendus facilis ab accusamus unde, tempora ut nobis eum. Veniam, architecto corrupti. +

@@ -156,7 +158,7 @@ ...`} />
TIP: e.state.current contains the step shown to the user after navigation, e.step contains the step where navigation - occured. + occurred.
diff --git a/src/routes/(inner)/docs/contributing/documentation/+page.svelte b/src/routes/(inner)/docs/contributing/documentation/+page.svelte index e49db02cd..16614f078 100644 --- a/src/routes/(inner)/docs/contributing/documentation/+page.svelte +++ b/src/routes/(inner)/docs/contributing/documentation/+page.svelte @@ -170,7 +170,7 @@ dispatch('dragover', event);`}

-

Reference all available settings from the Typescript interface defintion.

+

Reference all available settings from the Typescript interface definition.

  • Buttons showcases how to document Tailwind Element classes.
  • Accordion makes use of most Component settings utilizing Sveld.
    • -
  • Paginator uses Dipatched Event documentation.
    • +
  • Paginator uses Dispatched Event documentation.

    • Examples

    diff --git a/src/routes/(inner)/docs/contributing/requirements/+page.svelte b/src/routes/(inner)/docs/contributing/requirements/+page.svelte index 6abeb252c..ec1ecd7d0 100644 --- a/src/routes/(inner)/docs/contributing/requirements/+page.svelte +++ b/src/routes/(inner)/docs/contributing/requirements/+page.svelte @@ -89,7 +89,7 @@

    Feature Branch Conventions

    -

    The wildcards (*) should be replaced with short and semantic descriptions that are lowercase and seperated by dashes.

    +

    The wildcards (*) should be replaced with short and semantic descriptions that are lowercase and separated by dashes.

    feat/my-new-component-name
    @@ -97,7 +97,7 @@

    Third Party Dependencies

    - Avoid adding additional depedencies without prior consent from a core team member. Pull Requests that do not follow this + Avoid adding additional dependencies without prior consent from a core team member. Pull Requests that do not follow this recommendation will be rejected outright.

    diff --git a/src/routes/(inner)/docs/contributing/style-guide/+page.svelte b/src/routes/(inner)/docs/contributing/style-guide/+page.svelte index 111aa4c14..28827d66f 100644 --- a/src/routes/(inner)/docs/contributing/style-guide/+page.svelte +++ b/src/routes/(inner)/docs/contributing/style-guide/+page.svelte @@ -86,7 +86,7 @@ function prunedRestProps(): any {
  • Color props should follow standard CSS style conventions (ex: color for text color).
  • If you need multiple words, use camel-casing (ex: ringWidth).
  • Never pass class props as arrays or objects. Strings work better (ex: border border-primary-500).
    • -
  • Always pass the full Tailwind class name. Tailwind does not support contructed class names.
    • +
  • Always pass the full Tailwind class name. Tailwind does not support constructed class names.
  • Ensure Typescript types are provided and set relevant default values when possible.
  • If a new prop is added or modified then please consider updating the documentation with an example if necessary.
    • diff --git a/src/routes/(inner)/docs/features/+page.svelte b/src/routes/(inner)/docs/features/+page.svelte index 4fa734e7d..5a920139d 100644 --- a/src/routes/(inner)/docs/features/+page.svelte +++ b/src/routes/(inner)/docs/features/+page.svelte @@ -80,7 +80,7 @@

    Components

    These are Svelte Components purpose built for the Skeleton library. - They can include their own UI templates, scripted logic, and mantaine their own state. These automatically update and adjust to your + They can include their own UI templates, scripted logic, and maintain their own state. These automatically update and adjust to your custom theme and provide unique props to update and adjust settings per component.

    diff --git a/src/routes/(inner)/docs/get-started/SectionInstall.svelte b/src/routes/(inner)/docs/get-started/SectionInstall.svelte index 6020f0ac6..adab1345d 100644 --- a/src/routes/(inner)/docs/get-started/SectionInstall.svelte +++ b/src/routes/(inner)/docs/get-started/SectionInstall.svelte @@ -11,13 +11,13 @@ Skeleton CLI - Manual Install + Manual Install {#if $storeOnboardMethod === 'cli'}

    If you're creating a new project we highly recommend this option. The CLI will not only scaffold a new SvelteKit project for - you, but automatically configure Skeleton, install Tailwind, and add optional depedencies on demand. + you, but automatically configure Skeleton, install Tailwind, and add optional dependencies on demand.

    Skeleton CLI - Manual Install + Manual Install {#if $storeOnboardMethod === 'cli'} diff --git a/src/routes/(inner)/docs/get-started/SectionTailwind.svelte b/src/routes/(inner)/docs/get-started/SectionTailwind.svelte index d80c1dbca..6c333ebea 100644 --- a/src/routes/(inner)/docs/get-started/SectionTailwind.svelte +++ b/src/routes/(inner)/docs/get-started/SectionTailwind.svelte @@ -15,7 +15,7 @@ Skeleton CLI - Manual Install + Manual Install {#if $storeOnboardMethod === 'cli'} diff --git a/src/routes/(inner)/docs/get-started/SectionThemes.svelte b/src/routes/(inner)/docs/get-started/SectionThemes.svelte index bcb4a027b..c0f7a2171 100644 --- a/src/routes/(inner)/docs/get-started/SectionThemes.svelte +++ b/src/routes/(inner)/docs/get-started/SectionThemes.svelte @@ -26,7 +26,7 @@ Skeleton CLI - Manual Install + Manual Install {#if $storeOnboardMethod === 'cli'}

    diff --git a/src/routes/(inner)/docs/quickstart/+page.svelte b/src/routes/(inner)/docs/quickstart/+page.svelte index 6ab5fd4ec..177d85de9 100644 --- a/src/routes/(inner)/docs/quickstart/+page.svelte +++ b/src/routes/(inner)/docs/quickstart/+page.svelte @@ -7,12 +7,12 @@

    Quickstart

    -

    This guide will walk you throught the basics of creating a new Skeleton app using SvelteKit.

    +

    This guide will walk you through the basics of creating a new Skeleton app using SvelteKit.

    - +

    Get Started

    To begin, let's scaffold our project using the Skeleton CLI. Note that we've listed a couple required options for this guide.

    @@ -41,7 +41,7 @@ npm run dev `} />

    Next, let's implement a navigation list within the App Shell's left sidebar slot. Append this slot - fragement alongside any other fragment within the AppShell. + fragment alongside any other fragment within the AppShell.

    /src/routes/+page.svelte and replace the contents with the following. This will provide multiple elements automatically styled by the all.css stylesheet in our root layout.

    + `} /> +

    Add a Component

    diff --git a/src/routes/(inner)/docs/tokens/+page.svelte b/src/routes/(inner)/docs/tokens/+page.svelte index 163299b3c..e9c7d84ab 100644 --- a/src/routes/(inner)/docs/tokens/+page.svelte +++ b/src/routes/(inner)/docs/tokens/+page.svelte @@ -126,7 +126,7 @@ example, the surface color swatch 50 is the lightest available color, so we utilize that for your light theme background color. While swatch 900 is the darkest, so vice versa. These two colors form a pair. We then generate design token classes for .bg-surface-50-900-token - and bg-surface-900-50-token that automaticallys switch between these in light/dark mode respectively. + and bg-surface-900-50-token that automatically switch between these in light/dark mode respectively.

    ...`} />
    -

    Using #Each Loops

    +

    Using #each Loops

    - Use the following technique to ensure the current item is formatted properly and prevent an extra seperator at the end. + Use the following technique to ensure the current item is formatted properly and prevent an extra separator at the end.

    Skeleton is Awesome!

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam aspernatur provident eveniet eligendi cumque consequatur - tempore sint nisi sapiente. Iste beatae laboriosam iure molestias cum expedita architecto itaque quae rem. + tempore sint nisi sapiente. Iste beatae laboriosam iure molestias cum expedita architecto itaque quae rem. +

    diff --git a/src/routes/(inner)/elements/core/+page.svelte b/src/routes/(inner)/elements/core/+page.svelte index d014824b9..8f65f0daa 100644 --- a/src/routes/(inner)/elements/core/+page.svelte +++ b/src/routes/(inner)/elements/core/+page.svelte @@ -21,8 +21,8 @@

    Body Background

    - Your app's background is automatically set via a design token class. - Adjust your theme's color scheme to customize. This affects both light and dark mode. + Your app's background is automatically set via a design token class. Adjust your theme's color scheme to customize. + This affects both light and dark mode.

    @@ -75,6 +75,7 @@

    Test Scrolling Here

    + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa corrupti iusto dolor. Similique quibusdam eveniet quae deleniti architecto modi natus, quos ducimus! Repudiandae reiciendis totam sequi veniam necessitatibus, magni harum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa corrupti iusto dolor. Similique quibusdam eveniet quae deleniti @@ -98,6 +99,7 @@ quae deleniti architecto modi natus, quos ducimus! Repudiandae reiciendis totam sequi veniam necessitatibus, magni harum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa corrupti iusto dolor. Similique quibusdam eveniet quae deleniti architecto modi natus, quos ducimus! Repudiandae reiciendis totam sequi veniam necessitatibus, magni harum. +

    diff --git a/src/routes/(inner)/elements/forms/+page.svelte b/src/routes/(inner)/elements/forms/+page.svelte index 08a07a25a..9abc045fa 100644 --- a/src/routes/(inner)/elements/forms/+page.svelte +++ b/src/routes/(inner)/elements/forms/+page.svelte @@ -26,7 +26,7 @@ ['.input-group', '', 'Creates a group of related inputs and information.'], ['.input-group-divider', '', 'Adds vertical lines between group segments.'], ['.input-group-shim', '', 'Provides a shaded background segment.'], - ['.input-[variant]', 'succes | warning | error', 'Color highlights for input for validation states.'] + ['.input-[variant]', 'success | warning | error', 'Color highlights for input for validation states.'] ] }; @@ -57,6 +57,7 @@