From 09ae9115e59867a9b69d547fe0d48f73510f9da6 Mon Sep 17 00:00:00 2001
From: Vladimir Kharlampidi <nolimits4web@gmail.com>
Date: Thu, 28 Apr 2022 14:01:46 +0300
Subject: [PATCH] 0.9.0 release

---
 CHANGELOG.md                                  | 14 +++++++
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 package/package.json                          |  4 +-
 package/svelte/components/Breadcrumbs.svelte  | 23 +++++++++++
 .../components/BreadcrumbsCollapsed.svelte    | 38 ++++++++++++++++++
 .../svelte/components/BreadcrumbsItem.svelte  | 40 +++++++++++++++++++
 .../components/BreadcrumbsSeparator.svelte    | 23 +++++++++++
 8 files changed, 143 insertions(+), 5 deletions(-)
 create mode 100644 package/svelte/components/Breadcrumbs.svelte
 create mode 100644 package/svelte/components/BreadcrumbsCollapsed.svelte
 create mode 100644 package/svelte/components/BreadcrumbsItem.svelte
 create mode 100644 package/svelte/components/BreadcrumbsSeparator.svelte

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e7e5694b..4a4ab9df 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,19 @@
 # Changelog
 
+# [0.9.0](https://github.com/konstaui/konsta/compare/v0.8.3...v0.9.0) (2022-04-28)
+
+### Bug Fixes
+
+- **ListItem:** use dark class on demand ([409ef5d](https://github.com/konstaui/konsta/commit/409ef5d653c424179f1c6ed003b538430a2aab35))
+- **popover:** consider el.el case when calc Popover position ([a3cebb6](https://github.com/konstaui/konsta/commit/a3cebb6cdb4aa07276bcd522a0061253ae8bf618))
+
+### Features
+
+- **react:** Breadcrumbs components ([58a62c4](https://github.com/konstaui/konsta/commit/58a62c41e093604cfc60baa0be5fbd543358fd75))
+- **svelte:** Breadcrumbs components ([098a8ec](https://github.com/konstaui/konsta/commit/098a8ec7f43203109efbc95aa18ede2da8a09da2))
+- **types:** types for Breadcrumbs components ([86cd6b8](https://github.com/konstaui/konsta/commit/86cd6b8e684df742d8bd75aa4e3f581836240c2a))
+- **vue:** Breadcrumbs components ([802aec1](https://github.com/konstaui/konsta/commit/802aec1574d672f746d40b4f5369d7c6718ecc2a))
+
 # [0.8.3](https://github.com/konstaui/konsta/compare/v0.8.3...v0.8.3) (2022-04-27)
 
 ### Bug Fixes
diff --git a/package-lock.json b/package-lock.json
index fbdeda83..07724050 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "konsta",
-  "version": "0.8.3",
+  "version": "0.9.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "konsta",
-      "version": "0.8.3",
+      "version": "0.9.0",
       "license": "MIT",
       "dependencies": {
         "konsta": "file:src"
diff --git a/package.json b/package.json
index 9d8fe1b6..1caaaa55 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "konsta",
   "description": "Mobile UI components made with Tailwind CSS",
-  "version": "0.8.3",
+  "version": "0.9.0",
   "private": true,
   "license": "MIT",
   "author": "Vladimir Kharlampidi",
diff --git a/package/package.json b/package/package.json
index f181834b..e9781aaa 100644
--- a/package/package.json
+++ b/package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "konsta",
-  "version": "0.8.3",
+  "version": "0.9.0",
   "description": "Mobile UI components made with Tailwind CSS",
   "repository": {
     "type": "git",
@@ -16,7 +16,7 @@
   "engines": {
     "node": ">= 4.7.0"
   },
-  "releaseDate": "April 27, 2022",
+  "releaseDate": "April 28, 2022",
   "svelte": "./svelte/konsta-svelte.js",
   "exports": {
     "./package.json": "./package.json",
diff --git a/package/svelte/components/Breadcrumbs.svelte b/package/svelte/components/Breadcrumbs.svelte
new file mode 100644
index 00000000..3f309d83
--- /dev/null
+++ b/package/svelte/components/Breadcrumbs.svelte
@@ -0,0 +1,23 @@
+<script>
+  import { BreadcrumbsClasses } from '../../shared/esm/classes/BreadcrumbsClasses.js';
+  import { useThemeClasses } from '../shared/use-theme-classes.js';
+
+  let className = undefined;
+  export { className as class };
+  export let ios = undefined;
+  export let material = undefined;
+
+  export let fontSizeIos = 'text-[17px]';
+  export let fontSizeMaterial = 'text-[16px]';
+
+  $: c = useThemeClasses(
+    { ios, material },
+    BreadcrumbsClasses({ fontSizeIos, fontSizeMaterial }),
+    className,
+    (v) => (c = v)
+  );
+</script>
+
+<div class={c.base} {...$$restProps}>
+  <slot />
+</div>
diff --git a/package/svelte/components/BreadcrumbsCollapsed.svelte b/package/svelte/components/BreadcrumbsCollapsed.svelte
new file mode 100644
index 00000000..0859aa0b
--- /dev/null
+++ b/package/svelte/components/BreadcrumbsCollapsed.svelte
@@ -0,0 +1,38 @@
+<script>
+  import { BreadcrumbsCollapsedClasses } from '../../shared/esm/classes/BreadcrumbsCollapsedClasses.js';
+  import { cls } from '../../shared/esm/cls.js';
+  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { useThemeClasses } from '../shared/use-theme-classes.js';
+
+  let className = undefined;
+  export { className as class };
+  export let ios = undefined;
+  export let material = undefined;
+
+  let colorsProp = undefined;
+  export { colorsProp as colors };
+
+  export let onClick = undefined;
+
+  const dark = useDarkClasses();
+
+  $: colors = {
+    bg: cls('bg-black bg-opacity-15', dark('dark:bg-white dark:bg-opacity-15')),
+    dotBg: cls('bg-black', dark('dark:bg-white')),
+    ...colorsProp,
+  };
+
+  $: c = useThemeClasses(
+    { ios, material },
+    BreadcrumbsCollapsedClasses({}, colors),
+    className,
+    (v) => (c = v)
+  );
+</script>
+
+<div class={c.base} {...$$restProps} on:click={onClick}>
+  <span class={c.dot} />
+  <span class={c.dot} />
+  <span class={c.dot} />
+  <slot />
+</div>
diff --git a/package/svelte/components/BreadcrumbsItem.svelte b/package/svelte/components/BreadcrumbsItem.svelte
new file mode 100644
index 00000000..f614a610
--- /dev/null
+++ b/package/svelte/components/BreadcrumbsItem.svelte
@@ -0,0 +1,40 @@
+<script>
+  import { BreadcrumbsItemClasses } from '../../shared/esm/classes/BreadcrumbsItemClasses.js';
+  import { cls } from '../../shared/esm/cls.js';
+  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { useThemeClasses } from '../shared/use-theme-classes.js';
+
+  let className = undefined;
+  export { className as class };
+  export let ios = undefined;
+  export let material = undefined;
+
+  let colorsProp = undefined;
+  export { colorsProp as colors };
+
+  export let onClick = undefined;
+
+  export let active = false;
+
+  const dark = useDarkClasses();
+
+  $: colors = {
+    text: cls(
+      'text-black text-opacity-55',
+      dark('dark:text-white dark:text-opacity-55')
+    ),
+    textActive: cls('text-black', dark('dark:text-white')),
+    ...colorsProp,
+  };
+
+  $: c = useThemeClasses(
+    { ios, material },
+    BreadcrumbsItemClasses({ active }, colors),
+    className,
+    (v) => (c = v)
+  );
+</script>
+
+<div class={c.base} {...$$restProps} on:click={onClick}>
+  <slot />
+</div>
diff --git a/package/svelte/components/BreadcrumbsSeparator.svelte b/package/svelte/components/BreadcrumbsSeparator.svelte
new file mode 100644
index 00000000..5a979dff
--- /dev/null
+++ b/package/svelte/components/BreadcrumbsSeparator.svelte
@@ -0,0 +1,23 @@
+<script>
+  import { BreadcrumbsSeparatorClasses } from '../../shared/esm/classes/BreadcrumbsSeparatorClasses.js';
+  import { useThemeClasses } from '../shared/use-theme-classes.js';
+
+  import ChevronIcon from './icons/ChevronIcon.svelte';
+
+  let className = undefined;
+  export { className as class };
+  export let ios = undefined;
+  export let material = undefined;
+
+  $: c = useThemeClasses(
+    { ios, material },
+    BreadcrumbsSeparatorClasses({}),
+    className,
+    (v) => (c = v)
+  );
+</script>
+
+<div class={c.base} {...$$restProps}>
+  <ChevronIcon class={c.icon} />
+  <slot />
+</div>