From 01de6fc8d701599bfc1e8b551a074227fb263121 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Mon, 3 Mar 2025 22:49:55 +0530
Subject: [PATCH] feat: add vertical bar chart component

---
 config/vite.js                                |   1 +
 docs/.vitepress/theme/components/Showcase.vue |   2 +-
 docs/components/grid.md                       |   2 +-
 docs/components/table.md                      |   2 +-
 lib/components/SChart.vue                     |  11 +
 lib/components/SChartBarVertical.vue          | 167 ++++++
 lib/styles/utilities.css                      |   9 +
 package.json                                  |   2 +
 pnpm-lock.yaml                                | 529 ++++++++++++++++++
 stories/_support/Board.vue                    |   2 +-
 stories/components/SButton.02_Sizes.story.vue |   2 +-
 .../SButton.03_Types_and_Modes.story.vue      |   2 +-
 stories/components/SButton.04_Icons.story.vue |   2 +-
 .../components/SChart.01_Playground.story.vue |  46 ++
 .../SInputCheckbox.02_Indeterminate.story.vue |   2 +-
 .../SInputNumber.02_Addons.story.vue          |   2 +-
 .../SInputSwitches.01_Playground.story.vue    |   2 +-
 .../SInputText.01_Playground.story.vue        |   2 +-
 .../components/SInputText.02_Addons.story.vue |   2 +-
 .../SMarkdown.01_Playground.story.vue         |   2 +-
 ...SSnackbars.01_Playground.story.Fixture.vue |   2 +-
 .../components/STable.01_Playground.story.vue |   2 +-
 22 files changed, 780 insertions(+), 15 deletions(-)
 create mode 100644 lib/components/SChart.vue
 create mode 100644 lib/components/SChartBarVertical.vue
 create mode 100644 stories/components/SChart.01_Playground.story.vue

diff --git a/config/vite.js b/config/vite.js
index 39b1d66e..89859c78 100644
--- a/config/vite.js
+++ b/config/vite.js
@@ -57,6 +57,7 @@ export const baseConfig = {
       '@vueuse/core',
       'body-scroll-lock',
       'dayjs',
+      'd3',
       'file-saver',
       'fuse.js',
       'lodash-es',
diff --git a/docs/.vitepress/theme/components/Showcase.vue b/docs/.vitepress/theme/components/Showcase.vue
index d0ea5f80..0408461a 100644
--- a/docs/.vitepress/theme/components/Showcase.vue
+++ b/docs/.vitepress/theme/components/Showcase.vue
@@ -31,7 +31,7 @@ const computedStory = computed(() => {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="postcss">
 .Showcase {
   margin: 0 -12px;
   border: 1px solid var(--c-divider);
diff --git a/docs/components/grid.md b/docs/components/grid.md
index c534315b..210c9603 100644
--- a/docs/components/grid.md
+++ b/docs/components/grid.md
@@ -108,7 +108,7 @@ If you need to adjust the overall grid layout based on different screen sizes or
   </SGrid>
 </template>
 
-<style scoped>
+<style scoped lang="postcss">
 .grid {
   grid-template-columns: 1fr;
   gap: 16px;
diff --git a/docs/components/table.md b/docs/components/table.md
index b4fb2867..8aa6eb7e 100644
--- a/docs/components/table.md
+++ b/docs/components/table.md
@@ -39,7 +39,7 @@ const options = useTable({
 })
 </script>
 
-<style scoped>
+<style scoped lang="postcss">
 .table :deep(.col-name)   { --table-col-width: 128px; }
 .table :deep(.col-group)  { --table-col-width: 128px; }
 .table :deep(.col-status) { --table-col-width: 128px; }
diff --git a/lib/components/SChart.vue b/lib/components/SChart.vue
new file mode 100644
index 00000000..efba0aaa
--- /dev/null
+++ b/lib/components/SChart.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  height: string
+}>()
+</script>
+
+<template>
+  <div class="SChart" :style="{ height }">
+    <slot />
+  </div>
+</template>
diff --git a/lib/components/SChartBarVertical.vue b/lib/components/SChartBarVertical.vue
new file mode 100644
index 00000000..ab7589f7
--- /dev/null
+++ b/lib/components/SChartBarVertical.vue
@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import * as d3 from 'd3'
+import { ref, watch } from 'vue'
+
+export type KV = { key: string; value: number }
+
+const props = defineProps<{
+  data: KV[]
+  margins?: { top: number; right: number; bottom: number; left: number }
+  ticks?: number
+  tooltip?: (d: KV) => string
+}>()
+
+const chartRef = ref<HTMLElement>()
+const { width, height } = useElementSize(chartRef)
+
+// Function to render the chart
+function renderChart({ clientWidth, clientHeight }: { clientWidth: number; clientHeight: number }) {
+  if (!chartRef.value) { return }
+
+  // Clear any existing SVG
+  d3.select(chartRef.value).selectAll('*').remove()
+
+  // Set dimensions and margins
+  const margin = { top: 30, right: 30, bottom: 60, left: 60, ...props.margins }
+  const width = clientWidth - margin.left - margin.right
+  const height = clientHeight - margin.top - margin.bottom
+
+  // Create SVG
+  const svg = d3
+    .select(chartRef.value)
+    .append('svg')
+    .attr('width', '100%')
+    .attr('height', height + margin.top + margin.bottom)
+    .append('g')
+    .attr('transform', `translate(${margin.left},${margin.top})`)
+
+  // X scale
+  const x = d3
+    .scaleBand()
+    .domain(props.data.map((d) => d.key))
+    .range([0, width])
+    .padding(0.4)
+
+  // Y scale
+  const y = d3
+    .scaleLinear()
+    .domain([0, d3.max(props.data, (d) => d.value)!])
+    .nice()
+    .range([height, 0])
+
+  // Add X axis
+  svg
+    .append('g')
+    .attr('transform', `translate(0,${height})`)
+    .call(d3.axisBottom(x))
+    .selectAll('text')
+    .style('fill', 'var(--c-text-1)')
+    .style('font-size', '14px')
+    .style('text-anchor', 'middle')
+
+  // Remove X axis line
+  svg.select('.domain').remove()
+
+  // Add Y axis
+  svg
+    .append('g')
+    .call(d3.axisLeft(y).ticks(props.ticks || 5))
+    .selectAll('text')
+    .style('fill', 'var(--c-text-1)')
+    .style('font-size', '14px')
+
+  // Remove Y axis line
+  svg.select('.domain').remove()
+
+  // Add horizontal grid lines
+  svg
+    .selectAll('line.grid')
+    .data(y.ticks(props.ticks || 5))
+    .enter()
+    .append('line')
+    .attr('class', 'grid')
+    .attr('x1', 0)
+    .attr('x2', width)
+    .attr('y1', (d) => y(d))
+    .attr('y2', (d) => y(d))
+    .attr('stroke', 'var(--c-divider)')
+    .attr('stroke-dasharray', '2,2')
+
+  // Create a tooltip
+  const Tooltip = d3.select(chartRef.value).append('div').attr('class', 'tooltip')
+
+  // Add bars
+  svg
+    .selectAll('rect')
+    .data(props.data)
+    .enter()
+    .append('rect')
+    .attr('x', (d) => x(d.key)!)
+    .attr('y', (d) => y(d.value))
+    .attr('width', x.bandwidth())
+    .attr('height', (d) => height - y(d.value))
+    .attr('fill', 'var(--c-fg-info-1)')
+    .attr('rx', 2)
+    .attr('ry', 2)
+    .on('mouseover', () => {
+      Tooltip.style('opacity', 1)
+    })
+    .on('mousemove', (event, d) => {
+      Tooltip.html(props.tooltip ? props.tooltip(d) : `${d.key}: ${d.value}`)
+        .style('transform', `translate3d(${event.pageX + 10}px,${event.pageY + 10}px,0)`)
+        .style('--max-tooltip-width', `${Tooltip.text().length}ch`)
+        .style('--min-tooltip-width', `${Math.max(...Tooltip.text().split(' ').map((t) => t.length))}ch`)
+        .style('--available-width', `${clientWidth - event.pageX + 24}px`)
+    })
+    .on('mouseleave', () => {
+      Tooltip.style('opacity', 0)
+    })
+}
+
+watch(
+  [width, height],
+  ([clientWidth, clientHeight]) => {
+    if (!clientWidth || !clientHeight) { return }
+    renderChart({ clientWidth, clientHeight })
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <div class="SChartBar" ref="chartRef" />
+</template>
+
+<style scoped lang="postcss">
+.SChartBar {
+  width: 100%;
+  height: 100%;
+  font-feature-settings: 'tnum' 1;
+}
+
+/* Hide axis lines */
+:deep(.domain) {
+  display: none;
+}
+
+/* Style the ticks */
+:deep(.tick line) {
+  display: none;
+}
+
+:deep(.tooltip) {
+  opacity: 0;
+  background-color: var(--c-bg-elv-2);
+  border: 1px solid var(--c-divider);
+  border-radius: 6px;
+  padding: 6px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: transform 0.4s ease-out, opacity 0.25s 0.75s;
+  pointer-events: none;
+  width: min(var(--max-tooltip-width), max(var(--min-tooltip-width), var(--available-width)));
+  width: calc-size(auto, min(size, max(var(--min-tooltip-width), var(--available-width))));
+}
+</style>
diff --git a/lib/styles/utilities.css b/lib/styles/utilities.css
index d89c1541..bcd38135 100644
--- a/lib/styles/utilities.css
+++ b/lib/styles/utilities.css
@@ -155,6 +155,15 @@
 .s-max-w-lg     { max-width: 960px; }
 .s-max-w-xl     { max-width: 1216px; }
 
+.s-h-256  { height: 256px; }
+.s-h-320  { height: 320px; }
+.s-h-512  { height: 512px; }
+.s-h-full { height: 100%; }
+
+.s-aspect-16-9 { aspect-ratio: 16 / 9; }
+.s-aspect-4-3  { aspect-ratio: 4 / 3; }
+.s-aspect-1-1  { aspect-ratio: 1 / 1; }
+
 /**
  * Typography
  * -------------------------------------------------------------------------- */
diff --git a/package.json b/package.json
index 62014ad4..727e30df 100644
--- a/package.json
+++ b/package.json
@@ -71,8 +71,10 @@
     "@tanstack/vue-virtual": "3.0.0-beta.62",
     "@tinyhttp/content-disposition": "^2.2.2",
     "@tinyhttp/cookie": "^2.1.1",
+    "@types/d3": "^7.4.3",
     "@types/file-saver": "^2.0.7",
     "@types/qs": "^6.9.18",
+    "d3": "^7.9.0",
     "file-saver": "^2.0.5",
     "magic-string": "^0.30.17",
     "ofetch": "^1.4.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 80603833..27568142 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,12 +23,18 @@ importers:
       '@tinyhttp/cookie':
         specifier: ^2.1.1
         version: 2.1.1
+      '@types/d3':
+        specifier: ^7.4.3
+        version: 7.4.3
       '@types/file-saver':
         specifier: ^2.0.7
         version: 2.0.7
       '@types/qs':
         specifier: ^6.9.18
         version: 6.9.18
+      d3:
+        specifier: ^7.9.0
+        version: 7.9.0
       file-saver:
         specifier: ^2.0.5
         version: 2.0.5
@@ -1161,6 +1167,99 @@ packages:
   '@types/body-scroll-lock@3.1.2':
     resolution: {integrity: sha512-ELhtuphE/YbhEcpBf/rIV9Tl3/O0A0gpCVD+oYFSS8bWstHFJUgA4nNw1ZakVlRC38XaQEIsBogUZKWIPBvpfQ==}
 
+  '@types/d3-array@3.2.1':
+    resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
+
+  '@types/d3-axis@3.0.6':
+    resolution: {integrity: sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==}
+
+  '@types/d3-brush@3.0.6':
+    resolution: {integrity: sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==}
+
+  '@types/d3-chord@3.0.6':
+    resolution: {integrity: sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==}
+
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-contour@3.0.6':
+    resolution: {integrity: sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==}
+
+  '@types/d3-delaunay@6.0.4':
+    resolution: {integrity: sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==}
+
+  '@types/d3-dispatch@3.0.6':
+    resolution: {integrity: sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ==}
+
+  '@types/d3-drag@3.0.7':
+    resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
+
+  '@types/d3-dsv@3.0.7':
+    resolution: {integrity: sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==}
+
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+
+  '@types/d3-fetch@3.0.7':
+    resolution: {integrity: sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==}
+
+  '@types/d3-force@3.0.10':
+    resolution: {integrity: sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==}
+
+  '@types/d3-format@3.0.4':
+    resolution: {integrity: sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==}
+
+  '@types/d3-geo@3.1.0':
+    resolution: {integrity: sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==}
+
+  '@types/d3-hierarchy@3.1.7':
+    resolution: {integrity: sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-polygon@3.0.2':
+    resolution: {integrity: sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==}
+
+  '@types/d3-quadtree@3.0.6':
+    resolution: {integrity: sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==}
+
+  '@types/d3-random@3.0.3':
+    resolution: {integrity: sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==}
+
+  '@types/d3-scale-chromatic@3.1.0':
+    resolution: {integrity: sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==}
+
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+
+  '@types/d3-selection@3.0.11':
+    resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==}
+
+  '@types/d3-shape@3.1.7':
+    resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==}
+
+  '@types/d3-time-format@4.0.3':
+    resolution: {integrity: sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==}
+
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+
+  '@types/d3-transition@3.0.9':
+    resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==}
+
+  '@types/d3-zoom@3.0.8':
+    resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
+
+  '@types/d3@7.4.3':
+    resolution: {integrity: sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==}
+
   '@types/estree@1.0.6':
     resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
 
@@ -1173,6 +1272,9 @@ packages:
   '@types/fs-extra@9.0.13':
     resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==}
 
+  '@types/geojson@7946.0.16':
+    resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==}
+
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
@@ -1768,6 +1870,10 @@ packages:
     resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
     engines: {node: '>=14'}
 
+  commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+
   compare-func@2.0.0:
     resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==}
 
@@ -1900,6 +2006,133 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-axis@3.0.0:
+    resolution: {integrity: sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==}
+    engines: {node: '>=12'}
+
+  d3-brush@3.0.0:
+    resolution: {integrity: sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==}
+    engines: {node: '>=12'}
+
+  d3-chord@3.0.1:
+    resolution: {integrity: sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-contour@4.0.2:
+    resolution: {integrity: sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==}
+    engines: {node: '>=12'}
+
+  d3-delaunay@6.0.4:
+    resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==}
+    engines: {node: '>=12'}
+
+  d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+
+  d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+
+  d3-dsv@3.0.1:
+    resolution: {integrity: sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-fetch@3.0.1:
+    resolution: {integrity: sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==}
+    engines: {node: '>=12'}
+
+  d3-force@3.0.0:
+    resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.0:
+    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+    engines: {node: '>=12'}
+
+  d3-geo@3.1.1:
+    resolution: {integrity: sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==}
+    engines: {node: '>=12'}
+
+  d3-hierarchy@3.1.2:
+    resolution: {integrity: sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-polygon@3.0.1:
+    resolution: {integrity: sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==}
+    engines: {node: '>=12'}
+
+  d3-quadtree@3.0.1:
+    resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==}
+    engines: {node: '>=12'}
+
+  d3-random@3.0.1:
+    resolution: {integrity: sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==}
+    engines: {node: '>=12'}
+
+  d3-scale-chromatic@3.1.0:
+    resolution: {integrity: sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  d3-transition@3.0.1:
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+
+  d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+
+  d3@7.9.0:
+    resolution: {integrity: sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==}
+    engines: {node: '>=12'}
+
   data-uri-to-buffer@6.0.2:
     resolution: {integrity: sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw==}
     engines: {node: '>= 14'}
@@ -1981,6 +2214,9 @@ packages:
     resolution: {integrity: sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==}
     engines: {node: '>= 14'}
 
+  delaunator@5.0.1:
+    resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==}
+
   delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
@@ -2679,6 +2915,10 @@ packages:
     peerDependencies:
       '@types/node': '>=18'
 
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+
   interpret@1.4.0:
     resolution: {integrity: sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==}
     engines: {node: '>= 0.10'}
@@ -3582,6 +3822,9 @@ packages:
     deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
+  robust-predicates@3.0.2:
+    resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==}
+
   rollup@3.29.5:
     resolution: {integrity: sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
@@ -3603,6 +3846,9 @@ packages:
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
+  rw@1.3.3:
+    resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
+
   rxjs@7.8.2:
     resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
 
@@ -5373,6 +5619,123 @@ snapshots:
 
   '@types/body-scroll-lock@3.1.2': {}
 
+  '@types/d3-array@3.2.1': {}
+
+  '@types/d3-axis@3.0.6':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-brush@3.0.6':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-chord@3.0.6': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-contour@3.0.6':
+    dependencies:
+      '@types/d3-array': 3.2.1
+      '@types/geojson': 7946.0.16
+
+  '@types/d3-delaunay@6.0.4': {}
+
+  '@types/d3-dispatch@3.0.6': {}
+
+  '@types/d3-drag@3.0.7':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-dsv@3.0.7': {}
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-fetch@3.0.7':
+    dependencies:
+      '@types/d3-dsv': 3.0.7
+
+  '@types/d3-force@3.0.10': {}
+
+  '@types/d3-format@3.0.4': {}
+
+  '@types/d3-geo@3.1.0':
+    dependencies:
+      '@types/geojson': 7946.0.16
+
+  '@types/d3-hierarchy@3.1.7': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-polygon@3.0.2': {}
+
+  '@types/d3-quadtree@3.0.6': {}
+
+  '@types/d3-random@3.0.3': {}
+
+  '@types/d3-scale-chromatic@3.1.0': {}
+
+  '@types/d3-scale@4.0.9':
+    dependencies:
+      '@types/d3-time': 3.0.4
+
+  '@types/d3-selection@3.0.11': {}
+
+  '@types/d3-shape@3.1.7':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time-format@4.0.3': {}
+
+  '@types/d3-time@3.0.4': {}
+
+  '@types/d3-timer@3.0.2': {}
+
+  '@types/d3-transition@3.0.9':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-zoom@3.0.8':
+    dependencies:
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3@7.4.3':
+    dependencies:
+      '@types/d3-array': 3.2.1
+      '@types/d3-axis': 3.0.6
+      '@types/d3-brush': 3.0.6
+      '@types/d3-chord': 3.0.6
+      '@types/d3-color': 3.1.3
+      '@types/d3-contour': 3.0.6
+      '@types/d3-delaunay': 6.0.4
+      '@types/d3-dispatch': 3.0.6
+      '@types/d3-drag': 3.0.7
+      '@types/d3-dsv': 3.0.7
+      '@types/d3-ease': 3.0.2
+      '@types/d3-fetch': 3.0.7
+      '@types/d3-force': 3.0.10
+      '@types/d3-format': 3.0.4
+      '@types/d3-geo': 3.1.0
+      '@types/d3-hierarchy': 3.1.7
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-path': 3.1.1
+      '@types/d3-polygon': 3.0.2
+      '@types/d3-quadtree': 3.0.6
+      '@types/d3-random': 3.0.3
+      '@types/d3-scale': 4.0.9
+      '@types/d3-scale-chromatic': 3.1.0
+      '@types/d3-selection': 3.0.11
+      '@types/d3-shape': 3.1.7
+      '@types/d3-time': 3.0.4
+      '@types/d3-time-format': 4.0.3
+      '@types/d3-timer': 3.0.2
+      '@types/d3-transition': 3.0.9
+      '@types/d3-zoom': 3.0.8
+
   '@types/estree@1.0.6': {}
 
   '@types/file-saver@2.0.7': {}
@@ -5383,6 +5746,8 @@ snapshots:
     dependencies:
       '@types/node': 22.13.5
 
+  '@types/geojson@7946.0.16': {}
+
   '@types/hast@3.0.4':
     dependencies:
       '@types/unist': 3.0.3
@@ -6049,6 +6414,8 @@ snapshots:
 
   commander@10.0.1: {}
 
+  commander@7.2.0: {}
+
   compare-func@2.0.0:
     dependencies:
       array-ify: 1.0.0
@@ -6203,6 +6570,158 @@ snapshots:
 
   csstype@3.1.3: {}
 
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-axis@3.0.0: {}
+
+  d3-brush@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
+  d3-chord@3.0.1:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-color@3.1.0: {}
+
+  d3-contour@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-delaunay@6.0.4:
+    dependencies:
+      delaunator: 5.0.1
+
+  d3-dispatch@3.0.1: {}
+
+  d3-drag@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+
+  d3-dsv@3.0.1:
+    dependencies:
+      commander: 7.2.0
+      iconv-lite: 0.6.3
+      rw: 1.3.3
+
+  d3-ease@3.0.1: {}
+
+  d3-fetch@3.0.1:
+    dependencies:
+      d3-dsv: 3.0.1
+
+  d3-force@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-timer: 3.0.1
+
+  d3-format@3.1.0: {}
+
+  d3-geo@3.1.1:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-hierarchy@3.1.2: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@3.1.0: {}
+
+  d3-polygon@3.0.1: {}
+
+  d3-quadtree@3.0.1: {}
+
+  d3-random@3.0.1: {}
+
+  d3-scale-chromatic@3.1.0:
+    dependencies:
+      d3-color: 3.1.0
+      d3-interpolate: 3.0.1
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-selection@3.0.0: {}
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
+  d3-transition@3.0.1(d3-selection@3.0.0):
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+
+  d3-zoom@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
+  d3@7.9.0:
+    dependencies:
+      d3-array: 3.2.4
+      d3-axis: 3.0.0
+      d3-brush: 3.0.0
+      d3-chord: 3.0.1
+      d3-color: 3.1.0
+      d3-contour: 4.0.2
+      d3-delaunay: 6.0.4
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-dsv: 3.0.1
+      d3-ease: 3.0.1
+      d3-fetch: 3.0.1
+      d3-force: 3.0.0
+      d3-format: 3.1.0
+      d3-geo: 3.1.1
+      d3-hierarchy: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-path: 3.1.0
+      d3-polygon: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-random: 3.0.1
+      d3-scale: 4.0.2
+      d3-scale-chromatic: 3.1.0
+      d3-selection: 3.0.0
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+      d3-timer: 3.0.1
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+      d3-zoom: 3.0.0
+
   data-uri-to-buffer@6.0.2: {}
 
   data-urls@3.0.2:
@@ -6260,6 +6779,10 @@ snapshots:
       escodegen: 2.1.0
       esprima: 4.0.1
 
+  delaunator@5.0.1:
+    dependencies:
+      robust-predicates: 3.0.2
+
   delayed-stream@1.0.0: {}
 
   dequal@2.0.3: {}
@@ -7183,6 +7706,8 @@ snapshots:
       run-async: 3.0.0
       rxjs: 7.8.2
 
+  internmap@2.0.3: {}
+
   interpret@1.4.0: {}
 
   ip-address@9.0.5:
@@ -8118,6 +8643,8 @@ snapshots:
     dependencies:
       glob: 7.2.3
 
+  robust-predicates@3.0.2: {}
+
   rollup@3.29.5:
     optionalDependencies:
       fsevents: 2.3.3
@@ -8155,6 +8682,8 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
+  rw@1.3.3: {}
+
   rxjs@7.8.2:
     dependencies:
       tslib: 2.8.1
diff --git a/stories/_support/Board.vue b/stories/_support/Board.vue
index ce87f5ae..2a5a69ec 100644
--- a/stories/_support/Board.vue
+++ b/stories/_support/Board.vue
@@ -43,7 +43,7 @@ const href = computed(() => {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="postcss">
 .b-root {
   display: flex;
   flex-direction: column;
diff --git a/stories/components/SButton.02_Sizes.story.vue b/stories/components/SButton.02_Sizes.story.vue
index 8e849236..2f23cc64 100644
--- a/stories/components/SButton.02_Sizes.story.vue
+++ b/stories/components/SButton.02_Sizes.story.vue
@@ -75,7 +75,7 @@ function state() {
   </Story>
 </template>
 
-<style scoped>
+<style scoped lang="postcss">
 .root {
   display: grid;
   gap: 32px;
diff --git a/stories/components/SButton.03_Types_and_Modes.story.vue b/stories/components/SButton.03_Types_and_Modes.story.vue
index 4e3f8ead..ffce6825 100644
--- a/stories/components/SButton.03_Types_and_Modes.story.vue
+++ b/stories/components/SButton.03_Types_and_Modes.story.vue
@@ -65,7 +65,7 @@ function state() {
   </Story>
 </template>
 
-<style scoped>
+<style scoped lang="postcss">
 .root {
   display: grid;
   gap: 32px;
diff --git a/stories/components/SButton.04_Icons.story.vue b/stories/components/SButton.04_Icons.story.vue
index e79e10a7..ca769fc5 100644
--- a/stories/components/SButton.04_Icons.story.vue
+++ b/stories/components/SButton.04_Icons.story.vue
@@ -120,7 +120,7 @@ function state() {
   </Story>
 </template>
 
-<style scoped>
+<style scoped lang="postcss">
 .root {
   display: grid;
   gap: 32px;
diff --git a/stories/components/SChart.01_Playground.story.vue b/stories/components/SChart.01_Playground.story.vue
new file mode 100644
index 00000000..e68908f2
--- /dev/null
+++ b/stories/components/SChart.01_Playground.story.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import SCard from 'sefirot/components/SCard.vue'
+import SCardBlock from 'sefirot/components/SCardBlock.vue'
+import SChartBar from 'sefirot/components/SChartBarVertical.vue'
+
+const title = 'Components / SChart / 01. Playground'
+
+const data = [
+  { key: '2018', value: 10 },
+  { key: '2019', value: 15 },
+  { key: '2020', value: 20 },
+  { key: '2021', value: 25 },
+  { key: '2022', value: 30 },
+  { key: '2023', value: 35 },
+  { key: '2024', value: 40 },
+  { key: '2025', value: 45 }
+]
+</script>
+
+<template>
+  <Story :title="title" source="Not available" auto-props-disabled>
+    <Board :title="title">
+      <SCard class="chart-card">
+        <SCardBlock size="medium" class="s-px-24" bg="elv-2">
+          <div class="s-font-14 s-font-w-500">Annual Sales Data</div>
+        </SCardBlock>
+        <SCardBlock bg="elv-2">
+          <div class="s-w-full s-h-320">
+            <SChartBar :data :tooltip="(d) => `Total: <span class=tooltip-number>${d.value}</span>`" />
+          </div>
+        </SCardBlock>
+      </SCard>
+    </Board>
+  </Story>
+</template>
+
+<style scoped lang="postcss">
+.chart-card {
+  background-color: transparent;
+  min-width: 512px;
+}
+
+:deep(.tooltip-number) {
+  font-weight: 500;
+}
+</style>
diff --git a/stories/components/SInputCheckbox.02_Indeterminate.story.vue b/stories/components/SInputCheckbox.02_Indeterminate.story.vue
index 561ed659..9477d246 100644
--- a/stories/components/SInputCheckbox.02_Indeterminate.story.vue
+++ b/stories/components/SInputCheckbox.02_Indeterminate.story.vue
@@ -47,7 +47,7 @@ const control = computed({
   </Story>
 </template>
 
-<style scoped>
+<style scoped lang="postcss">
 .indent {
   margin-left: 24px;
 }
diff --git a/stories/components/SInputNumber.02_Addons.story.vue b/stories/components/SInputNumber.02_Addons.story.vue
index 747b26c9..e52c7dce 100644
--- a/stories/components/SInputNumber.02_Addons.story.vue
+++ b/stories/components/SInputNumber.02_Addons.story.vue
@@ -227,7 +227,7 @@ function state() {
   </Story>
 </template>
 
-<style scoped>
+<style scoped lang="postcss">
 .root {
   display: grid;
   gap: 32px;
diff --git a/stories/components/SInputSwitches.01_Playground.story.vue b/stories/components/SInputSwitches.01_Playground.story.vue
index b5b32043..1f1b84cc 100644
--- a/stories/components/SInputSwitches.01_Playground.story.vue
+++ b/stories/components/SInputSwitches.01_Playground.story.vue
@@ -30,7 +30,7 @@ const options = [
   </Story>
 </template>
 
-<style scoped>
+<style scoped lang="postcss">
 .switches {
   width: 192px;
 }
diff --git a/stories/components/SInputText.01_Playground.story.vue b/stories/components/SInputText.01_Playground.story.vue
index 08f68c96..981a1754 100644
--- a/stories/components/SInputText.01_Playground.story.vue
+++ b/stories/components/SInputText.01_Playground.story.vue
@@ -182,7 +182,7 @@ function state() {
   </Story>
 </template>
 
-<style scoped>
+<style scoped lang="postcss">
 .actions {
   display: flex;
   gap: 8px;
diff --git a/stories/components/SInputText.02_Addons.story.vue b/stories/components/SInputText.02_Addons.story.vue
index 93e3cabc..64aa9e11 100644
--- a/stories/components/SInputText.02_Addons.story.vue
+++ b/stories/components/SInputText.02_Addons.story.vue
@@ -220,7 +220,7 @@ function state() {
   </Story>
 </template>
 
-<style scoped>
+<style scoped lang="postcss">
 .root {
   display: grid;
   gap: 32px;
diff --git a/stories/components/SMarkdown.01_Playground.story.vue b/stories/components/SMarkdown.01_Playground.story.vue
index ac485cea..37021b65 100644
--- a/stories/components/SMarkdown.01_Playground.story.vue
+++ b/stories/components/SMarkdown.01_Playground.story.vue
@@ -15,7 +15,7 @@ const title = 'Components / SMarkdown / 01. Playground'
   </Story>
 </template>
 
-<style scoped>
+<style scoped lang="postcss">
 .markdown {
   line-height: 24px;
   font-size: 16px;
diff --git a/stories/components/SSnackbars.01_Playground.story.Fixture.vue b/stories/components/SSnackbars.01_Playground.story.Fixture.vue
index 3e4b447f..674d2c04 100644
--- a/stories/components/SSnackbars.01_Playground.story.Fixture.vue
+++ b/stories/components/SSnackbars.01_Playground.story.Fixture.vue
@@ -46,7 +46,7 @@ function pushDangerSnackbar() {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="postcss">
 .list {
   display: flex;
   flex-wrap: wrap;
diff --git a/stories/components/STable.01_Playground.story.vue b/stories/components/STable.01_Playground.story.vue
index 026d4a49..c2dfce01 100644
--- a/stories/components/STable.01_Playground.story.vue
+++ b/stories/components/STable.01_Playground.story.vue
@@ -388,7 +388,7 @@ const selected = ref<string[]>([])
   </Story>
 </template>
 
-<style scoped>
+<style scoped lang="postcss">
 .table :deep(.col-name)      { --table-col-width: 144px; }
 .table :deep(.col-status)    { --table-col-width: 128px; }
 .table :deep(.col-authors)   { --table-col-width: 128px; }