+
- {#each pages as page (page.key)}
- {#if page.type === "ellipsis"}
-
-
-
- {:else}
-
- {page.value}
-
- {/if}
- {/each}
+
+ {#each pages as page (page.key)}
+ {#if page.type === "ellipsis"}
+
...
+ {:else}
+
+ {page.value}
+
+ {/if}
+ {/each}
+
+
+ Showing {range.start} - {range.end}
+
diff --git a/src/components/demos/range-calendar-demo.svelte b/src/components/demos/range-calendar-demo.svelte
index fea5130b6..0cb049dd3 100644
--- a/src/components/demos/range-calendar-demo.svelte
+++ b/src/components/demos/range-calendar-demo.svelte
@@ -46,13 +46,13 @@
{#each weekDates as date}
- import { Tooltip } from "$lib";
- import { flyAndScale } from "@/utils";
+ import { Tooltip } from "$lib/index.js";
+ import { flyAndScale } from "@/utils/index.js";
+ import { MagicWand } from "phosphor-svelte";
-
+
- Hover me
+
- It doesn't get much better than bits.
+
+
+
+
+ Make some magic!
+
diff --git a/src/lib/bits/calendar/ctx.ts b/src/lib/bits/calendar/ctx.ts
index e18c90daa..45f33ffbc 100644
--- a/src/lib/bits/calendar/ctx.ts
+++ b/src/lib/bits/calendar/ctx.ts
@@ -27,7 +27,6 @@ type GetReturn = Omit, "updateOption">;
export function setCtx(props: CreateCalendarProps) {
const { NAME, PARTS } = getCalendarData();
const getCalendarAttrs = createBitAttrs(NAME, PARTS);
- console.log(getCalendarAttrs);
const calendar = { ...createCalendar(removeUndefined(props)), getCalendarAttrs };
@@ -43,6 +42,5 @@ export function getCtx() {
const { NAME } = getCalendarData();
const ctx = getContext(NAME);
- console.log(ctx);
return ctx;
}
diff --git a/src/lib/bits/floating/helpers.ts b/src/lib/bits/floating/helpers.ts
index eacb99c01..bb12b38a1 100644
--- a/src/lib/bits/floating/helpers.ts
+++ b/src/lib/bits/floating/helpers.ts
@@ -29,10 +29,11 @@ export function updatePositioning(store: Writable, props: Floati
...prev,
placement: joinPlacement(withDefaults.side, withDefaults.align),
offset: {
+ ...prev.offset,
mainAxis: withDefaults.sideOffset,
crossAxis: withDefaults.alignOffset
},
- gutter: undefined,
+ gutter: 0,
sameWidth: withDefaults.sameWidth,
flip: withDefaults.avoidCollisions,
overflowPadding: withDefaults.collisionPadding,
diff --git a/src/lib/bits/tooltip/components/tooltip-content.svelte b/src/lib/bits/tooltip/components/tooltip-content.svelte
index 216742106..bdb24ee44 100644
--- a/src/lib/bits/tooltip/components/tooltip-content.svelte
+++ b/src/lib/bits/tooltip/components/tooltip-content.svelte
@@ -37,7 +37,7 @@
states: { open },
ids,
getAttrs
- } = getCtx(sideOffset);
+ } = getCtx();
const dispatch = createDispatcher();
const attrs = getAttrs("content");
@@ -47,19 +47,22 @@
}
$: builder = $content;
$: Object.assign(builder, attrs);
- $: updatePositioning({
- side,
- align,
- sideOffset,
- alignOffset,
- collisionPadding,
- avoidCollisions,
- collisionBoundary,
- sameWidth,
- fitViewport,
- strategy,
- overlap
- });
+
+ $: if ($open) {
+ updatePositioning({
+ side,
+ align,
+ sideOffset,
+ alignOffset,
+ collisionPadding,
+ avoidCollisions,
+ collisionBoundary,
+ sameWidth,
+ fitViewport,
+ strategy,
+ overlap
+ });
+ }
{#if asChild && $open}
diff --git a/src/lib/bits/tooltip/components/tooltip.svelte b/src/lib/bits/tooltip/components/tooltip.svelte
index 888ef8ffd..63e1152f4 100644
--- a/src/lib/bits/tooltip/components/tooltip.svelte
+++ b/src/lib/bits/tooltip/components/tooltip.svelte
@@ -36,6 +36,12 @@
open = next;
}
return next;
+ },
+ positioning: {
+ gutter: 0,
+ offset: {
+ mainAxis: 1
+ }
}
});
@@ -48,6 +54,7 @@
);
$: open !== undefined && localOpen.set(open);
+
$: updateOption("closeOnEscape", closeOnEscape);
$: updateOption("portal", portal);
$: updateOption("closeOnPointerDown", closeOnPointerDown);
diff --git a/src/lib/bits/tooltip/ctx.ts b/src/lib/bits/tooltip/ctx.ts
index ff86f2437..2bae24c5a 100644
--- a/src/lib/bits/tooltip/ctx.ts
+++ b/src/lib/bits/tooltip/ctx.ts
@@ -23,10 +23,12 @@ export function setCtx(props: CreateTooltipProps) {
const tooltip = {
...createTooltip({
positioning: {
- placement: "top"
+ placement: "top",
+ gutter: 0
},
openDelay: 700,
- ...removeUndefined(props)
+ ...removeUndefined(props),
+ forceVisible: true
}),
getAttrs
};
@@ -37,16 +39,9 @@ export function setCtx(props: CreateTooltipProps) {
};
}
-export function getCtx(sideOffset = 0) {
+export function getCtx() {
const { NAME } = getTooltipData();
- const tooltip = getContext(NAME);
-
- const {
- options: { positioning }
- } = tooltip;
- positioning.update((prev) => ({ ...prev, gutter: sideOffset }));
-
- return tooltip;
+ return getContext(NAME);
}
export function setArrow(size = 8) {
@@ -58,7 +53,8 @@ export function setArrow(size = 8) {
export function updatePositioning(props: FloatingProps) {
const defaultPlacement = {
side: "top",
- align: "center"
+ align: "center",
+ sideOffset: 1
} satisfies FloatingProps;
const withDefaults = { ...defaultPlacement, ...props } satisfies FloatingProps;
const {
@@ -66,5 +62,5 @@ export function updatePositioning(props: FloatingProps) {
} = getCtx();
const updater = getPositioningUpdater(positioning as Writable);
- updater(withDefaults);
+ updater({ ...withDefaults });
}
diff --git a/src/styles/app.postcss b/src/styles/app.postcss
index 385855e71..0cff9f82d 100644
--- a/src/styles/app.postcss
+++ b/src/styles/app.postcss
@@ -14,6 +14,7 @@
--muted-foreground: 0 0% 9% / 0.4;
--border: 240 6% 10%;
--border-input: 240 6% 10% / 0.17;
+ --border-input-hover: 240 6% 10% / 0.4;
--border-card: 240 6% 10% / 0.1;
--dark: 240 6% 10%;
--dark-10: 240 6% 10% / 0.1;
@@ -33,6 +34,7 @@
--shadow-kbd: 0px 2px 0px 0px rgba(0, 0, 0, 0.07);
--shadow-btn: 0px 1px 0px 1px rgba(0, 0, 0, 0.03);
--shadow-card: 0px 2px 0px 1px rgba(0, 0, 0, 0.04);
+ --shadow-date-field-focus: 0px 0px 0px 3px rgba(24, 24, 27, 0.17);
}
.dark {
@@ -44,6 +46,7 @@
--muted-foreground: 0 0% 100% / 0.4;
--border: 0 0% 96%;
--border-input: 0 0% 96% / 0.17;
+ --border-input-hover: 0 0% 96% / 0.4;
--border-card: 0 0% 96% / 0.1;
--dark: 0 0% 96%;
--dark-40: 0 0% 96% / 0.4;
@@ -61,6 +64,7 @@
--shadow-kbd: 0px 2px 0px 0px rgba(255, 255, 255, 0.07);
--shadow-btn: 0px 1px 0px 1px rgba(255, 255, 255, 0.03);
--shadow-card: 0px 2px 0px 1px rgba(255, 255, 255, 0.04);
+ --shadow-date-field-focus: 0px 0px 0px 3px rgba(244, 244, 245, 0.3);
}
}
diff --git a/src/tests/tooltip/Tooltip.spec.ts b/src/tests/tooltip/Tooltip.spec.ts
index 326e9e2e9..2e2508841 100644
--- a/src/tests/tooltip/Tooltip.spec.ts
+++ b/src/tests/tooltip/Tooltip.spec.ts
@@ -97,12 +97,12 @@ describe("Tooltip", () => {
it("respects binding the open prop", async () => {
const { queryByTestId, getByTestId, user } = await open({ closeOnPointerDown: false });
const binding = getByTestId("binding");
- expect(binding).toHaveTextContent("true");
+ await waitFor(() => expect(binding).toHaveTextContent("true"));
await user.click(binding);
- expect(binding).toHaveTextContent("false");
+ await waitFor(() => expect(binding).toHaveTextContent("false"));
expect(queryByTestId("content")).toBeNull();
await user.click(binding);
- expect(binding).toHaveTextContent("true");
+ await waitFor(() => expect(binding).toHaveTextContent("true"));
expect(queryByTestId("content")).not.toBeNull();
});
});
diff --git a/static/avatar-1.png b/static/avatar-1.png
index e7c395ec2..02ca1d12e 100644
Binary files a/static/avatar-1.png and b/static/avatar-1.png differ
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d553ba776..54c4658cd 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -17,7 +17,8 @@ export default {
colors: {
border: {
DEFAULT: "hsl(var(--border-card))",
- input: "hsl(var(--border-input))"
+ input: "hsl(var(--border-input))",
+ "input-hover": "hsl(var(--border-input-hover))"
},
background: {
DEFAULT: "hsl(var(--background) / )"
@@ -79,7 +80,8 @@ export default {
popover: "var(--shadow-popover)",
kbd: "var(--shadow-kbd)",
btn: "var(--shadow-btn)",
- card: "var(--shadow-card)"
+ card: "var(--shadow-card)",
+ "date-field-focus": "var(--shadow-date-field-focus)"
},
opacity: {
8: "0.08"
diff --git a/vite.config.ts b/vite.config.ts
index ef164e517..9901f7902 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,4 +1,3 @@
-///
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vitest/config";
import { fileURLToPath, URL } from "url";
@@ -17,7 +16,8 @@ export default defineConfig({
coverage: {
exclude: ["setupTest.ts"]
},
- alias: [{ find: /^svelte$/, replacement: "svelte/internal" }]
+ alias: [{ find: /^svelte$/, replacement: "svelte/internal" }],
+ retry: 3
},
assetsInclude: ["**/*.md"],
server: {