diff --git a/.changeset/hip-terms-promise.md b/.changeset/hip-terms-promise.md new file mode 100644 index 00000000..2f9045cb --- /dev/null +++ b/.changeset/hip-terms-promise.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/site-kit': patch +--- + +fix homepage link colour, remove subtitle on desktop diff --git a/.changeset/new-cherries-drop.md b/.changeset/new-cherries-drop.md new file mode 100644 index 00000000..0e917860 --- /dev/null +++ b/.changeset/new-cherries-drop.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/site-kit': patch +--- + +remove subtitle from desktop nav, separate it from homepage link diff --git a/.changeset/pre.json b/.changeset/pre.json index 2547567d..26506545 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -6,6 +6,8 @@ }, "changesets": [ "afraid-panthers-hide", + "hip-terms-promise", + "new-cherries-drop", "twenty-queens-talk" ] } diff --git a/packages/site-kit/CHANGELOG.md b/packages/site-kit/CHANGELOG.md index dae53097..0e3346d0 100644 --- a/packages/site-kit/CHANGELOG.md +++ b/packages/site-kit/CHANGELOG.md @@ -1,5 +1,17 @@ # @sveltejs/site-kit changelog +## 6.0.0-next.3 + +### Patch Changes + +- 2422a25: fix homepage link colour, remove subtitle on desktop + +## 6.0.0-next.2 + +### Patch Changes + +- 3fce2fa: remove subtitle from desktop nav, separate it from homepage link + ## 6.0.0-next.1 ### Patch Changes diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json index 1e0737ba..470f8e4e 100644 --- a/packages/site-kit/package.json +++ b/packages/site-kit/package.json @@ -1,6 +1,6 @@ { "name": "@sveltejs/site-kit", - "version": "6.0.0-next.1", + "version": "6.0.0-next.3", "description": "Styles and components for use in *.svelte.dev websites", "type": "module", "scripts": { diff --git a/packages/site-kit/src/lib/actions/focus.js b/packages/site-kit/src/lib/actions/focus.js index b688318b..46764926 100644 --- a/packages/site-kit/src/lib/actions/focus.js +++ b/packages/site-kit/src/lib/actions/focus.js @@ -45,6 +45,8 @@ export function focusable_children(node) { } export function trap(node) { + const previous = /** @type HTMLElement} */ (document.activeElement); + const handle_keydown = (e) => { if (e.key === 'Tab') { e.preventDefault(); @@ -63,6 +65,7 @@ export function trap(node) { return { destroy: () => { node.removeEventListener('keydown', handle_keydown); + previous?.focus({ preventScroll: true }); } }; } diff --git a/packages/site-kit/src/lib/components/ThemeToggle.svelte b/packages/site-kit/src/lib/components/ThemeToggle.svelte index 98995396..55a5760d 100644 --- a/packages/site-kit/src/lib/components/ThemeToggle.svelte +++ b/packages/site-kit/src/lib/components/ThemeToggle.svelte @@ -68,7 +68,7 @@ width: 40px; height: 22px; flex-shrink: 0; - border: 1px solid var(--sk-text-3); + border: 1px solid var(--sk-text-4); background-color: var(--sk-back-2); transition: border-color 0.25s; } diff --git a/packages/site-kit/src/lib/nav/Menu.svelte b/packages/site-kit/src/lib/nav/Menu.svelte index 13965e69..5066aa83 100644 --- a/packages/site-kit/src/lib/nav/Menu.svelte +++ b/packages/site-kit/src/lib/nav/Menu.svelte @@ -1,34 +1,203 @@ + { + if (e.key === 'Escape') { + close(); + } + }} +/> +
-
- -
+ {#if open} -
- +
+
+
(ready = mounted)} + /> + +
{ + const target = /** @type {HTMLElement} */ (e.target); + + if (!target?.classList.contains('viewport')) return; + if (e.propertyName !== 'transform') return; + + // we need to apply a clip-path during the transition so that the contents + // are constrained to the menu background, but only while the transition + // is running, otherwise it prevents the contents from being scrolled + const a = 'calc(var(--height-difference) + 1px)'; + const b = '1px'; + + const start = show_context_menu ? a : b; + const end = show_context_menu ? b : a; + + const container = e.currentTarget; + + container.style.clipPath = `polygon(0% ${start}, 100% ${start}, 100% 100%, 0% 100%)`; + + setTimeout(() => { + container.style.clipPath = `polygon(0% ${end}, 100% ${end}, 100% 100%, 0% 100%)`; + }, 0); + }} + on:transitionend={(e) => { + const target = /** @type {HTMLElement} */ (e.target); + + if (!target?.classList.contains('viewport')) return; + if (e.propertyName !== 'transform') return; + + e.currentTarget.style.clipPath = ''; + }} + > +
+
+
+ {#each links as link} + + {link.title} + + {#if link.sections} + + {/if} + + {/each} + + +
+
+ +
+ {#if current_menu_view} + + {/if} +
+ + +
+
+
{/if}
@@ -36,16 +205,180 @@ diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte index 32e87b9c..055ddbb9 100644 --- a/packages/site-kit/src/lib/nav/Nav.svelte +++ b/packages/site-kit/src/lib/nav/Nav.svelte @@ -3,47 +3,19 @@ Top navigation bar for the application. It provides a slot for the left side, th --> - + @@ -158,145 +69,94 @@ Top navigation bar for the application. It provides a slot for the left side, th - - {#if title} -
- {title} -
- {/if} -
- ($current_menu_view = $page_selected)}> - - -
-
(ready = mounted)} - /> - -
{ - const target = /** @type {HTMLElement} */ (e.target); - - if (!target?.classList.contains('viewport')) return; - if (e.propertyName !== 'transform') return; - - // we need to apply a clip-path during the transition so that the contents - // are constrained to the menu background, but only while the transition - // is running, otherwise it prevents the contents from being scrolled - const a = 'calc(var(--height-difference) + 10px)'; - const b = '10px'; - - const start = $current_menu_view ? a : b; - const end = $current_menu_view ? b : a; - - const container = e.currentTarget; - - container.style.clipPath = `polygon(0% ${start}, 100% ${start}, 100% 100%, 0% 100%)`; - - setTimeout(() => { - container.style.clipPath = `polygon(0% ${end}, 100% ${end}, 100% 100%, 0% 100%)`; - }, 0); - }} - on:transitionend={(e) => { - const target = /** @type {HTMLElement} */ (e.target); - - if (!target?.classList.contains('viewport')) return; - if (e.propertyName !== 'transform') return; - - e.currentTarget.style.clipPath = ''; - }} - > -
-
-
-
    - -
- -
- -
- Theme - -
-
-
- -
- -
- - -
-
+ {#if title} +
+ ｜ {title} +
+ {/if} + +
+ + +
+ {#each links as link} + + {link.title} + + {/each} + + + + + +
+ Theme +
-
+
- +
+ + + + + + -
-
    - -
-
- Theme - -
+ +
+ Theme + +
+
diff --git a/packages/site-kit/src/lib/nav/NavItem.svelte b/packages/site-kit/src/lib/nav/NavItem.svelte deleted file mode 100644 index 6f16514d..00000000 --- a/packages/site-kit/src/lib/nav/NavItem.svelte +++ /dev/null @@ -1,124 +0,0 @@ - - - - -
  • - - - - - - - - - {#if relatedMenuName} - - - {/if} - -
    • - - diff --git a/packages/site-kit/src/lib/nav/Separator.svelte b/packages/site-kit/src/lib/nav/Separator.svelte index 23fa8714..288cf808 100644 --- a/packages/site-kit/src/lib/nav/Separator.svelte +++ b/packages/site-kit/src/lib/nav/Separator.svelte @@ -3,17 +3,17 @@ Simple separator component for use within `Nav` --> -{#if linear} - -{:else} - -{/if} +
    diff --git a/packages/site-kit/src/lib/nav/index.js b/packages/site-kit/src/lib/nav/index.js index 48026495..ab0e6537 100644 --- a/packages/site-kit/src/lib/nav/index.js +++ b/packages/site-kit/src/lib/nav/index.js @@ -1,5 +1,4 @@ export { default as Nav } from './Nav.svelte'; -export { default as NavItem } from './NavItem.svelte'; export { default as PreloadingIndicator } from './PreloadingIndicator.svelte'; export { default as Separator } from './Separator.svelte'; export { default as SkipLink } from './SkipLink.svelte'; diff --git a/packages/site-kit/src/lib/nav/nav.context.js b/packages/site-kit/src/lib/nav/nav.context.js deleted file mode 100644 index dd8c33dc..00000000 --- a/packages/site-kit/src/lib/nav/nav.context.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * @typedef {{ - * current_menu_view: import("svelte/store").Writable - * page_selected: import("svelte/store").Writable - * }} NavContext - */ - -import { getContext, setContext } from 'svelte'; - -const symbol = Symbol('NavContext'); - -/** - * @param {NavContext} value - */ -export function set_nav_context(value) { - setContext(symbol, value); -} - -/** - * @returns {NavContext} - */ -export function get_nav_context() { - return getContext(symbol); -} diff --git a/packages/site-kit/src/lib/types.d.ts b/packages/site-kit/src/lib/types.d.ts index 72048a78..96c84ae4 100644 --- a/packages/site-kit/src/lib/types.d.ts +++ b/packages/site-kit/src/lib/types.d.ts @@ -1,4 +1,4 @@ -export interface Section { +interface Section { title: string; sections: { title: string; @@ -7,4 +7,9 @@ export interface Section { }[]; } -export type Menu = Record; +export interface NavigationLink { + title: string; + prefix: string; + pathname: string; + sections?: Section[]; +}