Merge pull request #5 from calvo-jp/tests

test: initial component tests

docs/tree-view.md

@@ -13,12 +13,12 @@ A component for displaying hierarchical data in a tree structure, allowing users
 <TreeView.Root>
   <TreeView.Label>Label</TreeView.Label>
 
-  <TreeView.Tree>
-    <TreeView.Item value="1" depth={3}>
+  <TreeView.Tree depth={3}>
+    <TreeView.Item value="1">
       <TreeView.ItemText>Item 1</TreeView.ItemText>
     </TreeView.Item>
 
-    <TreeView.Branch value="2" depth={3}>
+    <TreeView.Branch value="2">
       <TreeView.BranchControl>
         <TreeView.BranchIndicator>
           <ChevronRightIcon />
@@ -27,16 +27,16 @@ A component for displaying hierarchical data in a tree structure, allowing users
       </TreeView.BranchControl>
 
       <TreeView.BranchContent>
-        <TreeView.Item value="2.1" depth={3}>
+        <TreeView.Item value="2.1">
           <TreeView.ItemText>Item 2.1</TreeView.ItemText>
         </TreeView.Item>
-        <TreeView.Item value="2.2" depth={3}>
+        <TreeView.Item value="2.2">
           <TreeView.ItemText>Item 2.2</TreeView.ItemText>
         </TreeView.Item>
       </TreeView.BranchContent>
     </TreeView.Branch>
 
-    <TreeView.Branch value="3" depth={3}>
+    <TreeView.Branch value="3">
       <TreeView.BranchControl>
         <TreeView.BranchIndicator>
           <ChevronRightIcon />
@@ -45,19 +45,19 @@ A component for displaying hierarchical data in a tree structure, allowing users
       </TreeView.BranchControl>
 
       <TreeView.BranchContent>
-        <TreeView.Item value="3.1" depth={3}>
+        <TreeView.Item value="3.1">
           <TreeView.ItemText>Item 3.1</TreeView.ItemText>
         </TreeView.Item>
 
-        <TreeView.Branch value="3.2" depth={3}>
+        <TreeView.Branch value="3.2">
           <TreeView.BranchControl>
             <TreeView.BranchIndicator>
               <ChevronRightIcon />
             </TreeView.BranchIndicator>
             <TreeView.BranchText>Item 3.2.1</TreeView.BranchText>
           </TreeView.BranchControl>
           <TreeView.BranchContent>
-            <TreeView.Item value="3.1" depth={3}>
+            <TreeView.Item value="3.1">
               <TreeView.ItemText>Item 3.2.2</TreeView.ItemText>
             </TreeView.Item>
           </TreeView.BranchContent>

package.json

@@ -5,7 +5,9 @@
   "packageManager": "[email protected]",
   "scripts": {
     "ui-ingredients": "pnpm --filter ui-ingredients",
+    "ui-ingredients-tailwindcss-plugin": "pnpm --filter ui-ingredients-tailwindcss-plugin",
     "website": "pnpm --filter website",
+    "test": "pnpm ui-ingredients test && pnpm ui-ingredients-tailwindcss-plugin test",
     "lint": "eslint .",
     "format": "prettier --write ."
   },

packages/ui-ingredients/package.json

@@ -328,7 +328,7 @@
     "@sveltejs/package": "2.3.5",
     "@sveltejs/vite-plugin-svelte": "4.0.0-next.6",
     "@testing-library/jest-dom": "6.5.0",
-    "@testing-library/svelte": "5.2.1",
+    "@testing-library/svelte": "5.2.3",
     "@types/jsdom": "21.1.7",
     "@untitled-theme/icons-svelte": "0.10.9",
     "autoprefixer": "10.4.20",

packages/ui-ingredients/src/lib/combobox/combobox-input.svelte

@@ -13,7 +13,9 @@
 
   let combobox = getComboboxContext();
 
-  let mergedProps = $derived(mergeProps(combobox.getInputProps(), props));
+  let mergedProps = $derived(
+    mergeProps({'aria-expanded': false}, combobox.getInputProps(), props),
+  );
 </script>
 
 {#if asChild}

packages/ui-ingredients/src/lib/editable/editable-preview.svelte

@@ -18,7 +18,10 @@
 
   let editable = getEditableContext();
 
-  let mergedProps = $derived(mergeProps(editable.getPreviewProps(), props));
+  let mergedProps = $derived({
+    ...mergeProps(editable.getPreviewProps(), props),
+    'aria-label': props['aria-label'] ?? undefined,
+  });
 </script>
 
 {#if asChild}

packages/ui-ingredients/src/lib/highlight/highlight.svelte

@@ -30,7 +30,7 @@
 {#if asChild}
   {@render asChild(localProps)}
 {:else}
-  <div bind:this={ref} {...localProps}>
+  <div bind:this={ref} data-scope="highlight" data-part="root" {...localProps}>
     {#each chunks as chunk}
       {#if chunk.match}
         <mark>{chunk.text}</mark>

packages/ui-ingredients/src/lib/index.ts

@@ -17,6 +17,7 @@ export * from './highlight/index.js';
 export * from './hover-card/index.js';
 export * from './locale-provider/index.js';
 export * from './menu/index.js';
+export * from './merge-props.js';
 export * from './number-input/index.js';
 export * from './pagination/index.js';
 export * from './pin-input/index.js';

packages/ui-ingredients/src/lib/number-input/index.ts

@@ -7,6 +7,7 @@ export type {NumberInputInputProps} from './number-input-input.svelte';
 export type {NumberInputLabelProps} from './number-input-label.svelte';
 export type {NumberInputProps} from './number-input-root.svelte';
 export type {NumberInputScrubberProps} from './number-input-scrubber.svelte';
+export type {NumberInputValueTextProps} from './number-input-value-text.svelte';
 
 export {anatomy as numberInputAnatomy} from '@zag-js/number-input';
 export {getNumberInputContext} from './number-input-context.svelte.js';

packages/ui-ingredients/src/lib/number-input/number-input-value-text.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '$lib/types.js';
+
+  export interface NumberInputValueTextProps
+    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '$lib/merge-props.js';
+  import {getNumberInputContext} from './number-input-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: NumberInputValueTextProps = $props();
+
+  let numberInput = getNumberInputContext();
+
+  let mergedProps = $derived(
+    mergeProps(numberInput.getValueTextProps(), props),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span bind:this={ref} {...mergedProps}>
+    {#if children}
+      {@render children?.()}
+    {:else}
+      {numberInput.valueAsNumber}
+    {/if}
+  </span>
+{/if}

packages/ui-ingredients/src/lib/number-input/number-input.ts

@@ -5,3 +5,4 @@ export {default as Input} from './number-input-input.svelte';
 export {default as Label} from './number-input-label.svelte';
 export {default as Root} from './number-input-root.svelte';
 export {default as Scrubber} from './number-input-scrubber.svelte';
+export {default as ValueText} from './number-input-value-text.svelte';

packages/ui-ingredients/src/lib/pagination/pagination-ellipsis.svelte

@@ -32,6 +32,10 @@
   {@render asChild(mergedProps)}
 {:else}
   <span bind:this={ref} {...mergedProps}>
-    {@render children?.()}
+    {#if children}
+      {@render children?.()}
+    {:else}
+      ...
+    {/if}
   </span>
 {/if}

packages/ui-ingredients/src/lib/pagination/pagination-item.svelte

@@ -38,6 +38,10 @@
   {@render asChild(mergedProps)}
 {:else}
   <button bind:this={ref} type="button" {...mergedProps}>
-    {@render children?.()}
+    {#if children}
+      {@render children?.()}
+    {:else}
+      {value}
+    {/if}
   </button>
 {/if}

packages/ui-ingredients/src/lib/pin-input/index.ts

@@ -1,6 +1,7 @@
 export * as PinInput from './pin-input.js';
 
 export type {PinInputClearTriggerProps} from './pin-input-clear-trigger.svelte';
+export type {PinInputControlProps} from './pin-input-control.svelte';
 export type {PinInputHiddenInputProps} from './pin-input-hidden-input.svelte';
 export type {PinInputInputProps} from './pin-input-input.svelte';
 export type {PinInputLabelProps} from './pin-input-label.svelte';

packages/ui-ingredients/src/lib/pin-input/pin-input-control.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '$lib/types.js';
+
+  export interface PinInputControlProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '$lib/merge-props.js';
+  import {getPinInputContext} from './pin-input-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: PinInputControlProps = $props();
+
+  let pinInput = getPinInputContext();
+
+  let mergedProps = $derived(mergeProps(pinInput.getControlProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

packages/ui-ingredients/src/lib/pin-input/pin-input.ts

@@ -1,4 +1,5 @@
 export {default as ClearTrigger} from './pin-input-clear-trigger.svelte';
+export {default as Control} from './pin-input-control.svelte';
 export {default as HiddenInput} from './pin-input-hidden-input.svelte';
 export {default as Input} from './pin-input-input.svelte';
 export {default as Label} from './pin-input-label.svelte';

packages/ui-ingredients/src/lib/popover/index.ts

@@ -1,10 +1,12 @@
 export * as Popover from './popover.js';
 
+export type {PopoverAnchorProps} from './popover-anchor.svelte';
 export type {PopoverArrowTipProps} from './popover-arrow-tip.svelte';
 export type {PopoverArrowProps} from './popover-arrow.svelte';
 export type {PopoverCloseTriggerProps} from './popover-close-trigger.svelte';
 export type {PopoverContentProps} from './popover-content.svelte';
 export type {PopoverDescriptionProps} from './popover-description.svelte';
+export type {PopoverIndicatorProps} from './popover-indicator.svelte';
 export type {PopoverPositionerProps} from './popover-positioner.svelte';
 export type {PopoverProps} from './popover-root.svelte';
 export type {PopoverTitleProps} from './popover-title.svelte';

packages/ui-ingredients/src/lib/popover/popover-anchor.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '$lib/types.js';
+
+  export interface PopoverAnchorProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '$lib/merge-props.js';
+  import {getPopoverContext} from './popover-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: PopoverAnchorProps = $props();
+
+  let popover = getPopoverContext();
+
+  let mergedProps = $derived(mergeProps(popover.getAnchorProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

packages/ui-ingredients/src/lib/popover/popover-indicator.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '$lib/types.js';
+
+  export interface PopoverIndicatorProps
+    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '$lib/merge-props.js';
+  import {getPopoverContext} from './popover-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: PopoverIndicatorProps = $props();
+
+  let popover = getPopoverContext();
+
+  let mergedProps = $derived(mergeProps(popover.getIndicatorProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

packages/ui-ingredients/src/lib/popover/popover.ts

@@ -1,8 +1,10 @@
+export {default as Anchor} from './popover-anchor.svelte';
 export {default as ArrowTip} from './popover-arrow-tip.svelte';
 export {default as Arrow} from './popover-arrow.svelte';
 export {default as CloseTrigger} from './popover-close-trigger.svelte';
 export {default as Content} from './popover-content.svelte';
 export {default as Description} from './popover-description.svelte';
+export {default as Indicator} from './popover-indicator.svelte';
 export {default as Positioner} from './popover-positioner.svelte';
 export {default as Root} from './popover-root.svelte';
 export {default as Title} from './popover-title.svelte';

packages/ui-ingredients/src/lib/rating-group/rating-group-item.svelte

@@ -25,7 +25,11 @@
 
   let itemState = $derived(ratingGroup.getItemState({index}));
   let mergedProps = $derived(
-    mergeProps(ratingGroup.getItemProps({index}), props),
+    mergeProps(
+      {'aria-checked': itemState.checked},
+      ratingGroup.getItemProps({index}),
+      props,
+    ),
   );
 </script>
 

packages/ui-ingredients/src/lib/select/select-trigger.svelte

@@ -18,7 +18,9 @@
 
   let select = getSelectContext();
 
-  let mergedProps = $derived(mergeProps(select.getTriggerProps(), props));
+  let mergedProps = $derived(
+    mergeProps({'aria-expanded': false}, select.getTriggerProps(), props),
+  );
 </script>
 
 {#if asChild}

packages/ui-ingredients/src/lib/tabs/index.ts

@@ -1,6 +1,7 @@
 export * as Tabs from './tabs.js';
 
 export type {TabsContentProps} from './tabs-content.svelte';
+export type {TabsIndicatorProps} from './tabs-indicator.svelte';
 export type {TabsListProps} from './tabs-list.svelte';
 export type {TabsProps} from './tabs-root.svelte';
 export type {TabsTriggerProps} from './tabs-trigger.svelte';

packages/ui-ingredients/src/lib/tabs/tabs-indicator.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '$lib/types.js';
+
+  export interface TabsIndicatorProps
+    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '$lib/merge-props.js';
+  import {getTabsContext} from './tabs-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: TabsIndicatorProps = $props();
+
+  let tabs = getTabsContext();
+
+  let mergedProps = $derived(mergeProps(tabs.getIndicatorProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

packages/ui-ingredients/src/lib/tabs/tabs.ts

@@ -1,4 +1,5 @@
 export {default as Content} from './tabs-content.svelte';
+export {default as Indicator} from './tabs-indicator.svelte';
 export {default as List} from './tabs-list.svelte';
 export {default as Root} from './tabs-root.svelte';
 export {default as Trigger} from './tabs-trigger.svelte';