From 265d2ab0b8b4fd1b9c745b9d84dbadbb7da47dba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krystian=20Droz=CC=87dz=CC=87yn=CC=81ski?=
 <krystian@drozdzynski.me>
Date: Fri, 8 Dec 2023 18:17:31 +0100
Subject: [PATCH] feat: component as nested selector

---
 .../stories/ComponentSelector.stories.svelte  | 20 +++++++++++++++++++
 .../svelte/stories/ComponentSelector.svelte   |  7 +++++++
 packages/svelte/stories/componentSelector.ts  | 19 ++++++++++++++++++
 3 files changed, 46 insertions(+)
 create mode 100644 packages/svelte/stories/ComponentSelector.stories.svelte
 create mode 100644 packages/svelte/stories/ComponentSelector.svelte
 create mode 100644 packages/svelte/stories/componentSelector.ts

diff --git a/packages/svelte/stories/ComponentSelector.stories.svelte b/packages/svelte/stories/ComponentSelector.stories.svelte
new file mode 100644
index 0000000..8defff0
--- /dev/null
+++ b/packages/svelte/stories/ComponentSelector.stories.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+  import ComponentSelector from "./ComponentSelector.svelte";
+</script>
+
+<Meta
+  title="Svelte/ComponentSelector"
+  component={ComponentSelector}
+  argTypes={{
+    label: { control: "text" },
+  }}
+/>
+
+<Template let:args>
+  <ComponentSelector {...args} on:click={args.onClick} />
+</Template>
+
+<Story
+  name="Default"
+/>
diff --git a/packages/svelte/stories/ComponentSelector.svelte b/packages/svelte/stories/ComponentSelector.svelte
new file mode 100644
index 0000000..cc309d1
--- /dev/null
+++ b/packages/svelte/stories/ComponentSelector.svelte
@@ -0,0 +1,7 @@
+
+<script lang="ts">
+  import { Component, InnerComponent } from './componentSelector'
+</script>
+
+<Component>Default component</Component>
+<InnerComponent><Component>Same component with color override</Component></InnerComponent>
\ No newline at end of file
diff --git a/packages/svelte/stories/componentSelector.ts b/packages/svelte/stories/componentSelector.ts
new file mode 100644
index 0000000..bfc282f
--- /dev/null
+++ b/packages/svelte/stories/componentSelector.ts
@@ -0,0 +1,19 @@
+import { component } from '@teiler/svelte'
+
+const Component = component.div`
+  color: black;
+  background: #efefef;
+  border-radius: 5px;
+  padding: 10px 12px;
+  display: inline-block;
+`
+
+const InnerComponent = component`
+  display: inline-block;
+
+  & ${Component} {
+    color: red !important;
+  }
+`
+
+export { Component, InnerComponent }