@dillingerstaffing/strand-svelte 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dillingerstaffing/strand-svelte",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Strand UI - Svelte component library built on the Strand Design Language",
   "author": "Dillinger Staffing <engineering@dillingerstaffing.com> (https://dillingerstaffing.com)",
   "license": "MIT",
@@ -55,7 +55,7 @@
     "svelte": "^4.0.0 || ^5.0.0"
   },
   "dependencies": {
-    "@dillingerstaffing/strand": "^0.13.0"
+    "@dillingerstaffing/strand": "^0.14.0"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^5.0.0",

package/src/components/Link/Link.svelte

@@ -4,11 +4,15 @@
   export let href: string
   /** Opens in new tab with rel="noopener noreferrer" */
   export let external: boolean = false
+  /** Style variant */
+  export let variant: 'default' | 'cta' | 'mono' = 'default'
+
+  $: linkClasses = ['strand-link', variant !== 'default' && `strand-link--${variant}`].filter(Boolean).join(' ')
 </script>
 
 <a
   {href}
-  class="strand-link"
+  class={linkClasses}
   target={external ? '_blank' : undefined}
   rel={external ? 'noopener noreferrer' : undefined}
   {...$$restProps}

package/src/components/Link/Link.test.ts

@@ -25,4 +25,14 @@ describe('Link', () => {
     expect(el).toHaveAttribute('target', '_blank')
     expect(el).toHaveAttribute('rel', 'noopener noreferrer')
   })
+
+  it('applies cta variant class', () => {
+    const { container } = render(Link, { props: { href: '/start', variant: 'cta' } })
+    expect(container.querySelector('.strand-link')).toHaveClass('strand-link--cta')
+  })
+
+  it('applies mono variant class', () => {
+    const { container } = render(Link, { props: { href: '/', variant: 'mono' } })
+    expect(container.querySelector('.strand-link')).toHaveClass('strand-link--mono')
+  })
 })

package/src/components/Nav/Nav.svelte

@@ -8,15 +8,19 @@
 
   /** Navigation items */
   export let items: NavItem[] = []
+  /** Glassmorphic variant (fixed, backdrop-filter, DL 11.5) */
+  export let glass: boolean = false
 
   let menuOpen = false
 
   function toggleMenu() {
     menuOpen = !menuOpen
   }
+
+  $: navClasses = ['strand-nav', glass && 'strand-nav--glass'].filter(Boolean).join(' ')
 </script>
 
-<nav class="strand-nav" aria-label="Main navigation" {...$$restProps}>
+<nav class={navClasses} aria-label="Main navigation" {...$$restProps}>
   <div class="strand-nav__inner">
     {#if $$slots.logo}
       <div class="strand-nav__logo">

package/src/components/Nav/Nav.test.ts

@@ -72,4 +72,9 @@ describe('Nav', () => {
     const { container } = render(Nav, { props: { items: testItems } })
     expect(container.querySelector('.strand-nav__inner')).toBeInTheDocument()
   })
+
+  it('applies glass class', () => {
+    const { container } = render(Nav, { props: { items: testItems, glass: true } })
+    expect(container.querySelector('.strand-nav')).toHaveClass('strand-nav--glass')
+  })
 })

package/src/components/Section/Section.svelte

@@ -1,14 +1,17 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
 <script lang="ts">
   /** Padding variant */
-  export let variant: 'standard' | 'hero' = 'standard'
+  export let variant: 'standard' | 'hero' | 'compact' = 'standard'
   /** Surface background */
   export let background: 'primary' | 'elevated' | 'recessed' = 'primary'
+  /** Top border separator */
+  export let borderTop: boolean = false
 
   $: classes = [
     'strand-section',
     `strand-section--${variant}`,
     `strand-section--bg-${background}`,
+    borderTop && 'strand-section--border-top',
   ].filter(Boolean).join(' ')
 </script>
 

package/src/components/Section/Section.test.ts

@@ -18,6 +18,16 @@ describe('Section', () => {
     expect(container.querySelector('.strand-section')).toHaveClass('strand-section--hero')
   })
 
+  it('applies compact variant class', () => {
+    const { container } = render(Section, { props: { variant: 'compact' } })
+    expect(container.querySelector('.strand-section')).toHaveClass('strand-section--compact')
+  })
+
+  it('applies border-top class', () => {
+    const { container } = render(Section, { props: { borderTop: true } })
+    expect(container.querySelector('.strand-section')).toHaveClass('strand-section--border-top')
+  })
+
   it('applies background classes', () => {
     const backgrounds = ['primary', 'elevated', 'recessed'] as const
     for (const background of backgrounds) {