bits-ui 0.13.4 → 0.13.6

package/README.md

@@ -2,6 +2,11 @@
 
 The headless components for Svelte.
 
-[Read the docs](https://bits-ui.com) (still a work in progress)
+[Read the docs](https://bits-ui.com)
 
-Powered by [Melt UI](https://melt-ui.com) builders.
+## Credits
+
+- [Bitworks](https://bitworks.cz) - The design team behind the Bits UI documentation and example components.
+- [Melt UI](https://melt-ui.com) - The underlying builder API that powers Bits.
+- [Radix UI](https://radix-ui.com) - The incredible headless component APIs that we've taken heavy inspiration from.
+- [React Spectrum](https://react-spectrum.adobe.com) - An incredible collection of headless components we've taken inspiration from.

package/dist/bits/calendar/ctx.js

@@ -22,7 +22,6 @@ export function getCalendarData() {
 export function setCtx(props) {
     const { NAME, PARTS } = getCalendarData();
     const getCalendarAttrs = createBitAttrs(NAME, PARTS);
-    console.log(getCalendarAttrs);
     const calendar = { ...createCalendar(removeUndefined(props)), getCalendarAttrs };
     setContext(NAME, calendar);
     return {
@@ -33,6 +32,5 @@ export function setCtx(props) {
 export function getCtx() {
     const { NAME } = getCalendarData();
     const ctx = getContext(NAME);
-    console.log(ctx);
     return ctx;
 }

package/dist/bits/date-picker/ctx.js

@@ -20,7 +20,7 @@ export function setCtx(props) {
     const { NAME: POPOVER_NAME, PARTS: POPOVER_PARTS } = getPopoverData();
     const getPopoverAttrs = createBitAttrs(POPOVER_NAME, POPOVER_PARTS);
     const datePicker = {
-        ...createDatePicker(removeUndefined(props)),
+        ...createDatePicker({ ...removeUndefined(props), forceVisible: true }),
         getCalendarAttrs,
         getFieldAttrs,
         getPopoverAttrs

package/dist/bits/date-range-picker/ctx.js

@@ -20,7 +20,7 @@ export function setCtx(props) {
     const { NAME: POPOVER_NAME, PARTS: POPOVER_PARTS } = getPopoverData();
     const getPopoverAttrs = createBitAttrs(POPOVER_NAME, POPOVER_PARTS);
     const dateRangePicker = {
-        ...createDateRangePicker(removeUndefined(props)),
+        ...createDateRangePicker({ ...removeUndefined(props), forceVisible: true }),
         getCalendarAttrs,
         getFieldAttrs,
         getPopoverAttrs

package/dist/bits/dialog/ctx.js

@@ -20,7 +20,10 @@ export function getDialogData() {
 export function setCtx(props) {
     const { NAME, PARTS } = getDialogData();
     const getAttrs = createBitAttrs(NAME, PARTS);
-    const dialog = { ...createDialog({ ...removeUndefined(props), role: "dialog" }), getAttrs };
+    const dialog = {
+        ...createDialog({ ...removeUndefined(props), role: "dialog", forceVisible: true }),
+        getAttrs
+    };
     setContext(NAME, dialog);
     return {
         ...dialog,

package/dist/bits/floating/helpers.js

@@ -20,10 +20,11 @@ export function updatePositioning(store, props) {
             ...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,

package/dist/bits/menu/_types.js

@@ -1 +1 @@
-export { ContentProps, ContentProps as SubContentProps };
+export {};

package/dist/bits/select/ctx.js

@@ -33,7 +33,10 @@ export function setCtx(
 props) {
     const { NAME, PARTS } = getSelectData();
     const getAttrs = createBitAttrs(NAME, PARTS);
-    const select = { ...createSelect(removeUndefined(props)), getAttrs };
+    const select = {
+        ...createSelect({ ...removeUndefined(props), forceVisible: true }),
+        getAttrs
+    };
     setContext(NAME, select);
     return {
         ...select,

package/dist/bits/tooltip/components/tooltip-content.svelte

@@ -26,7 +26,7 @@ const {
   states: { open },
   ids,
   getAttrs
-} = getCtx(sideOffset);
+} = getCtx();
 const dispatch = createDispatcher();
 const attrs = getAttrs("content");
 $:
@@ -38,19 +38,21 @@ $:
 $:
   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
+    });
+  }
 </script>
 
 {#if asChild && $open}

package/dist/bits/tooltip/components/tooltip.svelte

@@ -29,6 +29,12 @@ const {
       open = next;
     }
     return next;
+  },
+  positioning: {
+    gutter: 0,
+    offset: {
+      mainAxis: 1
+    }
   }
 });
 const idValues = derived(

package/dist/bits/tooltip/ctx.d.ts

@@ -57,7 +57,7 @@ export declare function setCtx(props: CreateTooltipProps): {
         }> | undefined;
     }, "open" | "ids">>;
 };
-export declare function getCtx(sideOffset?: number): GetReturn;
+export declare function getCtx(): GetReturn;
 export declare function setArrow(size?: number): GetReturn;
 export declare function updatePositioning(props: FloatingProps): void;
 export {};

package/dist/bits/tooltip/ctx.js

@@ -16,10 +16,12 @@ export function setCtx(props) {
     const tooltip = {
         ...createTooltip({
             positioning: {
-                placement: "top"
+                placement: "top",
+                gutter: 0
             },
             openDelay: 700,
-            ...removeUndefined(props)
+            ...removeUndefined(props),
+            forceVisible: true
         }),
         getAttrs
     };
@@ -29,12 +31,9 @@ export function setCtx(props) {
         updateOption: getOptionUpdater(tooltip.options)
     };
 }
-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) {
     const tooltip = getCtx();
@@ -44,10 +43,11 @@ export function setArrow(size = 8) {
 export function updatePositioning(props) {
     const defaultPlacement = {
         side: "top",
-        align: "center"
+        align: "center",
+        sideOffset: 1
     };
     const withDefaults = { ...defaultPlacement, ...props };
     const { options: { positioning } } = getCtx();
     const updater = getPositioningUpdater(positioning);
-    updater(withDefaults);
+    updater({ ...withDefaults });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "0.13.4",
+  "version": "0.13.6",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "exports": {
@@ -17,53 +17,53 @@
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "@huntabyte/mdsvex": "0.16.5",
-    "@melt-ui/pp": "^0.1.4",
+    "@melt-ui/pp": "^0.3.0",
     "@playwright/test": "^1.28.1",
     "@sveltejs/adapter-vercel": "^3.1.0",
     "@sveltejs/kit": "^1.27.6",
-    "@sveltejs/package": "^2.2.3",
+    "@sveltejs/package": "^2.2.5",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@tailwindcss/typography": "^0.5.10",
-    "@testing-library/dom": "^9.3.1",
+    "@testing-library/dom": "^9.3.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/svelte": "^4.0.5",
     "@testing-library/user-event": "^14.4.3",
-    "@types/jest-axe": "^3.5.8",
+    "@types/jest-axe": "^3.5.9",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
+    "@typescript-eslint/eslint-plugin": "^6.18.0",
+    "@typescript-eslint/parser": "^6.18.0",
     "autoprefixer": "^10.4.16",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.0",
     "concurrently": "^8.2.2",
     "contentlayer": "^0.3.4",
-    "eslint": "^8.53.0",
+    "eslint": "^8.56.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-svelte": "^2.35.0",
+    "eslint-plugin-svelte": "^2.35.1",
     "esm-env": "^1.0.0",
     "hast-util-to-html": "^9.0.0",
     "jest-axe": "^8.0.0",
     "jsdom": "^22.1.0",
-    "mode-watcher": "^0.1.1",
-    "phosphor-svelte": "^1.3.0",
-    "postcss": "^8.4.31",
+    "mode-watcher": "^0.1.2",
+    "phosphor-svelte": "^1.4.2",
+    "postcss": "^8.4.33",
     "postcss-load-config": "^4.0.1",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.1",
     "prettier-plugin-tailwindcss": "0.2.7",
-    "publint": "^0.2.5",
+    "publint": "^0.2.7",
     "rehype-pretty-code": "^0.10.0",
     "remark-gfm": "^4.0.0",
     "resize-observer-polyfill": "^1.5.1",
     "shiki": "^0.14.5",
-    "svelte": "^4.2.3",
-    "svelte-check": "^3.6.0",
+    "svelte": "^4.2.8",
+    "svelte-check": "^3.6.2",
     "svelte-sequential-preprocessor": "^2.0.1",
     "svelte-wrap-balancer": "^0.0.4",
-    "tailwind-merge": "^1.14.0",
-    "tailwind-variants": "^0.1.14",
-    "tailwindcss": "^3.3.5",
+    "tailwind-merge": "^2.2.0",
+    "tailwind-variants": "^0.1.20",
+    "tailwindcss": "^3.4.1",
     "tslib": "^2.6.2",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.3",
     "unist-builder": "^4.0.0",
     "unist-util-visit": "^5.0.0",
     "vite": "^4.5.0",