@sp-days-framework/slidev-theme-sykehuspartner 1.1.1 → 1.1.3-beta1

package/docs/changelog.mdx

@@ -19,6 +19,75 @@ All packages within `@sp-days-framework` use the same version number. In some ca
 
 ---
 
+## Version 1.1.3-beta1 ![Beta](https://img.shields.io/badge/beta-prerelease-orange)
+
+New column layout features, styling improvements, and bug fixes
+
+<details>
+<summary><strong>Details</strong> (2026 May 08)</summary>
+
+### Breaking Changes
+
+- **Column layouts**: `two-cols` and `three-cols` (without `-header`) now use a named `::left::` slot instead of the default slot for left column content. Update existing slides to use `::left::` explicitly.
+
+### New Features
+
+- **Column ratio**: `two-cols` and `two-cols-header` layouts now accept a `ratio` prop to control the left/right column split (e.g., `ratio: "70%"` gives 70% left, 30% right). Default remains `50%`.
+- **Top/bottom slots**: All column layouts (`two-cols`, `two-cols-header`, `three-cols`, `three-cols-header`) now support `::top::`, `::top-center::`, `::bottom::`, and `::bottom-center::` slots for content above and below the columns.
+
+### Bug Fixes
+
+- **Inline code dark mode**: Fixed inline code background not being visible when the theme is installed as a package (CSS property was being overridden by conflicting rules)
+- **Inline code background opacity**: Fixed dark mode `--sp-code-background` being nearly invisible (`#01010213` → `#ffffff0f`)
+
+### Improvements
+
+- **Inline code color**: Inline code now has a subtle yellow tint (`#e8d44d`) in dark mode for better distinction from regular text
+- **Table headers**: Table headers (`th`) are now bold (`font-weight: 700`) and slightly larger (`font-size: 1.05em`) for better visual hierarchy
+- **Dependencies**: Replaced deprecated `glob` package with Node.js built-in `fs.globSync` (requires Node.js >= 22.0.0)
+
+### Migration
+
+**Column layout slot changes** — Update `two-cols` and `three-cols` slides to use named `::left::` slot:
+
+```markdown
+# Before (v1.1.2)
+---
+layout: two-cols
+---
+
+# Left content here
+
+::right::
+
+# Right content
+```
+
+```markdown
+# After (v1.1.3)
+---
+layout: two-cols
+---
+
+::left::
+
+# Left content here
+
+::right::
+
+# Right content
+```
+
+</details>
+
+---
+
+## Version 1.1.2 ![Sync](https://img.shields.io/badge/sync-version--bump-lightgrey)
+
+Version bump to match other packages in the framework
+
+---
+
 ## Version 1.1.1 ![Release](https://img.shields.io/badge/release-production-blue)
 
 Relative image path support and security updates

package/docs/multi-column/three-cols-header.mdx

@@ -12,7 +12,20 @@ Three equal columns with a header spanning all three.
 | Parameter | Type | Default | Description |
 |-----------|------|---------|-------------|
 | `logo` | boolean | `true` | Show/hide logo |
-| `textAlignment` | string | `'center'` | Content vertical alignment |
+| `textAlignment` | string | `'center'` | Content vertical alignment (`'top'`, `'center'`, `'bottom'`) |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| default | Header content (spans full width, above columns) |
+| `left` | Left column content |
+| `middle` | Middle column content |
+| `right` | Right column content |
+| `top` | Left-aligned text above all columns (below header) |
+| `top-center` | Center-aligned text above all columns (below header) |
+| `bottom` | Left-aligned text below all columns |
+| `bottom-center` | Center-aligned text below all columns |
 
 ## Basic Example
 

package/docs/multi-column/three-cols.mdx

@@ -13,6 +13,18 @@ Organize content across three equal columns.
 |-----------|------|---------|-------------|
 | `logo` | boolean | `false` | Show/hide logo |
 
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `left` | Left column content |
+| `middle` | Middle column content |
+| `right` | Right column content |
+| `top` | Left-aligned text above all columns |
+| `top-center` | Center-aligned text above all columns |
+| `bottom` | Left-aligned text below all columns |
+| `bottom-center` | Center-aligned text below all columns |
+
 ## Basic Example
 
 ```markdown
@@ -20,6 +32,8 @@ Organize content across three equal columns.
 layout: three-cols
 ---
 
+::left::
+
 # Development
 
 - Local Docker
@@ -45,3 +59,34 @@ layout: three-cols
 - Logging
 - Backups
 ```
+
+## Top & Bottom Slots Example
+
+```markdown
+---
+layout: three-cols
+---
+
+::top-center::
+
+Overview of all environments
+
+::left::
+
+## Dev
+- Content here
+
+::middle::
+
+## Staging
+- Content here
+
+::right::
+
+## Prod
+- Content here
+
+::bottom::
+
+All environments use the same base configuration.
+```

package/docs/multi-column/two-cols-header.mdx

@@ -5,14 +5,27 @@ description: Two columns with spanning header
 
 # Two Cols Header Layout
 
-Two equal columns with a header that spans both columns.
+Two columns with a header that spans both columns.
 
 ## Parameters
 
 | Parameter | Type | Default | Description |
 |-----------|------|---------|-------------|
 | `logo` | boolean | `true` | Show/hide logo |
-| `textAlignment` | string | `'center'` | Content vertical alignment |
+| `textAlignment` | string | `'center'` | Content vertical alignment (`'top'`, `'center'`, `'bottom'`) |
+| `ratio` | string | `'50%'` | Width of the left column (e.g., `'70%'` gives 70% left, 30% right) |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| default | Header content (spans full width, above columns) |
+| `left` | Left column content |
+| `right` | Right column content |
+| `top` | Left-aligned text above both columns (below header) |
+| `top-center` | Center-aligned text above both columns (below header) |
+| `bottom` | Left-aligned text below both columns |
+| `bottom-center` | Center-aligned text below both columns |
 
 ## Basic Example
 
@@ -41,3 +54,26 @@ layout: two-cols-header
 - Zero-downtime deploy
 - Easy rollback
 ```
+
+## Custom Ratio Example
+
+```markdown
+---
+layout: two-cols-header
+ratio: "30%"
+---
+
+# Sidebar Layout
+
+::left::
+
+## Navigation
+- Item 1
+- Item 2
+
+::right::
+
+## Main Content (70%)
+
+The right column gets the remaining space.
+```

package/docs/multi-column/two-cols.mdx

@@ -5,13 +5,25 @@ description: Two equal-width columns
 
 # Two Cols Layout
 
-Split content into two equal columns for comparisons, lists, or parallel information.
+Split content into two columns for comparisons, lists, or parallel information.
 
 ## Parameters
 
 | Parameter | Type | Default | Description |
 |-----------|------|---------|-------------|
 | `logo` | boolean | `false` | Show/hide logo |
+| `ratio` | string | `'50%'` | Width of the left column (e.g., `'70%'` gives 70% left, 30% right) |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `left` | Left column content |
+| `right` | Right column content |
+| `top` | Left-aligned text above both columns |
+| `top-center` | Center-aligned text above both columns |
+| `bottom` | Left-aligned text below both columns |
+| `bottom-center` | Center-aligned text below both columns |
 
 ## Basic Example
 
@@ -20,6 +32,8 @@ Split content into two equal columns for comparisons, lists, or parallel informa
 layout: two-cols
 ---
 
+::left::
+
 # Traditional VMs
 
 - Heavy resource usage
@@ -36,3 +50,50 @@ layout: two-cols
 - Shared OS kernel
 - Simple orchestration
 ```
+
+## Custom Ratio Example
+
+```markdown
+---
+layout: two-cols
+ratio: "70%"
+---
+
+::left::
+
+# Main Content (70%)
+
+This column takes up 70% of the width.
+
+::right::
+
+# Sidebar (30%)
+
+- Quick notes
+```
+
+## Top & Bottom Slots Example
+
+```markdown
+---
+layout: two-cols
+---
+
+::top::
+
+This text appears above both columns, left-aligned.
+
+::left::
+
+## Left Column
+- Content here
+
+::right::
+
+## Right Column
+- Content here
+
+::bottom-center::
+
+This centered text appears below both columns.
+```

package/layouts/three-cols-header.vue

@@ -6,6 +6,10 @@
     <div class="header">
       <slot />
     </div>
+    <div v-if="$slots.top || $slots['top-center']" class="top-section" :class="{ 'text-center': $slots['top-center'] && !$slots.top }">
+      <slot name="top" />
+      <slot name="top-center" />
+    </div>
     <div class="cols-container">
       <div class="col left">
         <slot name="left" />
@@ -17,6 +21,10 @@
         <slot name="right" />
       </div>
     </div>
+    <div v-if="$slots.bottom || $slots['bottom-center']" class="bottom-section" :class="{ 'text-center': $slots['bottom-center'] && !$slots.bottom }">
+      <slot name="bottom" />
+      <slot name="bottom-center" />
+    </div>
   </div>
 </template>
 
@@ -66,6 +74,14 @@ const contentAlignmentStyle = computed(() => {
   margin-bottom: 1rem;
 }
 
+.top-section {
+  margin-bottom: 1rem;
+}
+
+.bottom-section {
+  margin-top: 1rem;
+}
+
 .cols-container {
   display: flex;
   flex-grow: 1;
@@ -98,6 +114,4 @@ const contentAlignmentStyle = computed(() => {
   right: 1rem;
   z-index: 10;
 }
-
-/* Logo styling moved to global layout.css */
 </style>

package/layouts/three-cols.vue

@@ -3,9 +3,13 @@
     <div v-if="showLogo" class="logo-container">
       <div class="logo-image logo"></div>
     </div>
+    <div v-if="$slots.top || $slots['top-center']" class="top-section" :class="{ 'text-center': $slots['top-center'] && !$slots.top }">
+      <slot name="top" />
+      <slot name="top-center" />
+    </div>
     <div class="cols-container">
       <div class="col left">
-        <slot />
+        <slot name="left" />
       </div>
       <div class="col middle">
         <slot name="middle" />
@@ -14,6 +18,10 @@
         <slot name="right" />
       </div>
     </div>
+    <div v-if="$slots.bottom || $slots['bottom-center']" class="bottom-section" :class="{ 'text-center': $slots['bottom-center'] && !$slots.bottom }">
+      <slot name="bottom" />
+      <slot name="bottom-center" />
+    </div>
   </div>
 </template>
 
@@ -41,6 +49,14 @@ const showLogo = computed(() => {
   flex-direction: column;
 }
 
+.top-section {
+  margin-bottom: 1rem;
+}
+
+.bottom-section {
+  margin-top: 1rem;
+}
+
 .cols-container {
   display: flex;
   flex-grow: 1;
@@ -72,6 +88,4 @@ const showLogo = computed(() => {
   right: 1rem;
   z-index: 10;
 }
-
-/* Logo styling moved to global layout.css */
 </style>

package/layouts/two-cols-header.vue

@@ -6,14 +6,22 @@
     <div class="header">
       <slot />
     </div>
+    <div v-if="$slots.top || $slots['top-center']" class="top-section" :class="{ 'text-center': $slots['top-center'] && !$slots.top }">
+      <slot name="top" />
+      <slot name="top-center" />
+    </div>
     <div class="cols-container">
-      <div class="col left">
+      <div class="col left" :style="{ width: leftWidth }">
         <slot name="left" />
       </div>
-      <div class="col right">
+      <div class="col right" :style="{ width: rightWidth }">
         <slot name="right" />
       </div>
     </div>
+    <div v-if="$slots.bottom || $slots['bottom-center']" class="bottom-section" :class="{ 'text-center': $slots['bottom-center'] && !$slots.bottom }">
+      <slot name="bottom" />
+      <slot name="bottom-center" />
+    </div>
   </div>
 </template>
 
@@ -29,6 +37,10 @@ const props = defineProps({
     type: String,
     default: 'center',
     validator: (value) => ['top', 'center', 'bottom'].includes(value)
+  },
+  ratio: {
+    type: String,
+    default: '50%'
   }
 })
 
@@ -51,6 +63,16 @@ const contentAlignmentStyle = computed(() => {
       return 'center'
   }
 })
+
+const leftWidth = computed(() => {
+  const r = props.ratio.endsWith('%') ? props.ratio : `${parseFloat(props.ratio)}%`
+  return r
+})
+
+const rightWidth = computed(() => {
+  const left = parseFloat(leftWidth.value)
+  return `${100 - left}%`
+})
 </script>
 
 <style scoped>
@@ -69,6 +91,14 @@ const contentAlignmentStyle = computed(() => {
   margin-bottom: 0.5rem;
 }
 
+.top-section {
+  margin-bottom: 1rem;
+}
+
+.bottom-section {
+  margin-top: 1rem;
+}
+
 .cols-container {
   display: flex;
   flex-grow: 1;
@@ -78,7 +108,6 @@ const contentAlignmentStyle = computed(() => {
 .col {
   display: flex;
   flex-direction: column;
-  width: 50%;
   justify-content: v-bind(contentAlignmentStyle);
 }
 
@@ -96,6 +125,4 @@ const contentAlignmentStyle = computed(() => {
   right: 1rem;
   z-index: 10;
 }
-
-/* Logo styling moved to global layout.css */
 </style>

package/layouts/two-cols.vue

@@ -3,14 +3,22 @@
     <div v-if="showLogo" class="logo-container">
       <div class="logo-image logo"></div>
     </div>
+    <div v-if="$slots.top || $slots['top-center']" class="top-section" :class="{ 'text-center': $slots['top-center'] && !$slots.top }">
+      <slot name="top" />
+      <slot name="top-center" />
+    </div>
     <div class="cols-container">
-      <div class="col left">
-        <slot />
+      <div class="col left" :style="{ width: leftWidth }">
+        <slot name="left" />
       </div>
-      <div class="col right">
+      <div class="col right" :style="{ width: rightWidth }">
         <slot name="right" />
       </div>
     </div>
+    <div v-if="$slots.bottom || $slots['bottom-center']" class="bottom-section" :class="{ 'text-center': $slots['bottom-center'] && !$slots.bottom }">
+      <slot name="bottom" />
+      <slot name="bottom-center" />
+    </div>
   </div>
 </template>
 
@@ -21,6 +29,10 @@ const props = defineProps({
   logo: {
     type: Boolean,
     default: false
+  },
+  ratio: {
+    type: String,
+    default: '50%'
   }
 })
 
@@ -30,6 +42,16 @@ const showLogo = computed(() => {
   }
   return props.logo
 })
+
+const leftWidth = computed(() => {
+  const r = props.ratio.endsWith('%') ? props.ratio : `${parseFloat(props.ratio)}%`
+  return r
+})
+
+const rightWidth = computed(() => {
+  const left = parseFloat(leftWidth.value)
+  return `${100 - left}%`
+})
 </script>
 
 <style scoped>
@@ -38,6 +60,14 @@ const showLogo = computed(() => {
   flex-direction: column;
 }
 
+.top-section {
+  margin-bottom: 1rem;
+}
+
+.bottom-section {
+  margin-top: 1rem;
+}
+
 .cols-container {
   display: flex;
   flex-grow: 1;
@@ -47,7 +77,6 @@ const showLogo = computed(() => {
 .col {
   display: flex;
   flex-direction: column;
-  width: 50%;
 }
 
 .left {
@@ -64,6 +93,4 @@ const showLogo = computed(() => {
   right: 1rem;
   z-index: 10;
 }
-
-/* Logo styling moved to global layout.css */
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sp-days-framework/slidev-theme-sykehuspartner",
-  "version": "1.1.1",
+  "version": "1.1.3-beta1",
   "description": "A Slidev theme for Sykehuspartner presentations.",
   "type": "module",
   "repository": {
@@ -19,7 +19,7 @@
     "./publish-package-docs": "./publish-package-docs.js"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=22.0.0"
   },
   "scripts": {
     "slidev": "slidev",
@@ -28,9 +28,7 @@
     "export": "slidev export example.md",
     "screenshot": "slidev export example.md --format png"
   },
-  "dependencies": {
-    "glob": "^11.1.0"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@iconify-json/vscode-icons": "^1.2.36",
     "@slidev/cli": "^52.9.1",
@@ -43,7 +41,7 @@
   },
   "overrides": {
     "dompurify": "^3.2.4",
-    "lodash-es": ">=4.17.23",
+    "lodash-es": ">=4.18.1",
     "chevrotain": ">=11.1.1"
   },
   "files": [

package/styles/layout.css

@@ -7,7 +7,7 @@
   --sp-danger: #fa383e;
   --sp-background: #f7faff;
   --sp-shadow: #00000028;
-  --sp-code-background: #53535309;
+  --sp-code-background: #2525250a;
 
   /* Primary color variations (light) */
   --sp-primary-dark: #023977;
@@ -29,7 +29,7 @@
   --sp-danger: #ff6369;
   --sp-background: #0d1117;
   --sp-shadow: #ffffff28;
-  --sp-code-background: #01010213;
+  --sp-code-background: #cfcfcf0f;
 
   /* Primary color variations inverted (dark) */
   --sp-primary-light: #5ea4e1;
@@ -40,6 +40,15 @@
   --sp-primary-darkest: #c1dcf4;
 }
 
+.slidev-layout :not(pre) > code {
+  color: #272200;
+}
+
+/* Dark mode inline code font color */
+.dark .slidev-layout :not(pre) > code {
+  color: #f0e38f;
+}
+
 /* Default styling for all layouts */
 .slidev-layout {
   h1 {
@@ -65,7 +74,17 @@
   position: relative;
 
   :not(pre) > code {
-    background: var(--sp-code-background);
+    background: var(--sp-code-background) !important;
+    border-radius: var(--slidev-code-radius) !important;
+    padding-top: 0.06rem !important;
+    padding-bottom: 0.06rem !important;
+    padding-left: 0.375rem !important;
+    padding-right: 0.375rem !important;
+  }
+
+  th {
+    font-weight: 700;
+    font-size: 1.05em;
   }
 
   /* blockquote {

package/uno.config.ts

@@ -1,7 +1,6 @@
 import { defineConfig } from 'unocss'
 import fs from 'fs'
 import path from 'path'
-import { globSync } from 'glob'
 
 /**
  * Scans markdown files for VSCode icon patterns used in code blocks.
@@ -75,12 +74,10 @@ function scanFilesForIcons(): string[] {
                 if (!fs.existsSync(searchRoot)) continue
                 
                 // Find all markdown files, excluding node_modules but INCLUDE .docusaurus
-                const slideFiles = globSync('**/*.md', { 
-                    absolute: true, 
+                const slideFiles = fs.globSync('**/*.md', { 
                     cwd: searchRoot,
-                    ignore: ['**/node_modules/**', '**/dist/**', '**/build/**'],
-                    dot: true
-                })
+                    exclude: (name) => name === 'node_modules' || name === 'dist' || name === 'build'
+                }).map((f: string) => path.resolve(searchRoot, f))
                 
                 // Scan each file for icon patterns
                 slideFiles.forEach((file: string) => {