lithesome 0.2.1 → 0.2.3

package/dist/components/Pin/Pin.svelte

@@ -11,7 +11,7 @@ let {
   use = [],
   class: klass,
   self,
-  value,
+  value = [],
   disabled = false,
   type = "text",
   placeholder = "\u25CB",

package/dist/components/Pin/Pin.svelte.d.ts

@@ -18,7 +18,7 @@ declare const __propDef: {
     props: BaseProps<HTMLDivElement, {
         filled: boolean;
     }> & {
-        value: string[];
+        value?: string[] | undefined;
         disabled?: boolean | undefined;
         type?: "text" | "password" | undefined;
         placeholder?: string | undefined;

package/dist/components/Pin/PinInput.svelte

@@ -6,7 +6,7 @@ import {
   KEYS
 } from "../../internal/index.js";
 import { onMount, tick } from "svelte";
-let { class: klass, use = [], self, name, onKeydown, onInput, onFocus, onBlur, ...props } = $props();
+let { class: klass, use = [], self, onKeydown, onInput, onFocus, onBlur, ...props } = $props();
 let value = $state("");
 const API = context();
 const { uid } = createUID("input");
@@ -100,7 +100,6 @@ const moveFocus = (direction) => {
 	bind:value
 	id={uid()}
 	class={classProp}
-	{name}
 	disabled={API.disabled}
 	placeholder={focused ? '' : API.placeholder}
 	data-pininput=""

package/dist/components/Pin/PinInput.svelte.d.ts

@@ -5,8 +5,6 @@ declare const __propDef: {
         filled: boolean;
         disabled: boolean;
     }>, "children"> & {
-        /** The HTML Input element name attribute. */
-        name?: string | undefined;
         onKeydown?: Handler<KeyboardEvent, HTMLInputElement> | undefined;
         onInput?: Handler<Event, HTMLInputElement> | undefined;
         onFocus?: Handler<FocusEvent, HTMLInputElement> | undefined;

package/dist/components/Popover/Popover.svelte

@@ -13,7 +13,7 @@ const API = createContext(uid, visible, {
     visible = val;
   }
 });
-const classProp = $derived(typeof klass === "function" ? klass({}) : klass);
+const classProp = $derived(typeof klass === "function" ? klass({ visible: API.visible }) : klass);
 setContext(contextName, API);
 const handleKeys = (e) => {
   const { key } = e;
@@ -32,6 +32,14 @@ $effect(() => {
 });
 </script>
 
-<div bind:this={self} use:useActions={use} id={uid()} class={classProp} data-popover="" {...props}>
-	{@render children({})}
+<div
+	bind:this={self}
+	use:useActions={use}
+	id={uid()}
+	class={classProp}
+	data-popover=""
+	data-state={API.visible ? 'opened' : 'closed'}
+	{...props}
+>
+	{@render children({ visible: API.visible })}
 </div>

package/dist/components/Popover/Popover.svelte.d.ts

@@ -12,7 +12,9 @@ export declare const context: () => {
 };
 import { type BaseProps } from '../../internal/index.js';
 declare const __propDef: {
-    props: BaseProps<HTMLDivElement, any> & {
+    props: BaseProps<HTMLDivElement, {
+        visible: boolean;
+    }> & {
         visible?: boolean | undefined;
     };
     events: {

package/dist/components/RadioGroup/context.svelte.js

@@ -12,6 +12,7 @@ export const createContext = (uid, value, hooks) => {
         },
         navigateItems(action) {
             selectedIndex = calculateIndex(action, items, selectedIndex);
+            document.querySelector(`[data-radiogroupitem][data-value="${selectedItem.value}"]`)?.focus();
         },
         setSelected(item) {
             selectedIndex = items.findIndex((el) => el.value === item.value);

package/dist/components/Select/SelectValue.svelte

@@ -1,6 +1,6 @@
 <script>import { context } from "./Select.svelte";
 import { useActions } from "../../internal/index.js";
-let { class: klass, use = [], self, placeholder, ...props } = $props();
+let { class: klass, use = [], self, placeholder = "Select an option...", ...props } = $props();
 const API = context();
 const placeholderVisible = $derived(API.selectedOptions.length === 0);
 const classProp = $derived(typeof klass === "function" ? klass({ placeholderVisible }) : klass);

package/dist/components/Tabs/Tabs.svelte

@@ -12,7 +12,7 @@ const API = createContext(uid, {
   orientation,
   value
 });
-const classProp = $derived(typeof klass === "function" ? klass({}) : klass);
+const classProp = $derived(typeof klass === "function" ? klass({ active: API.activeTab }) : klass);
 setContext(contextName, API);
 $effect(() => {
   API.setOrientation(orientation);
@@ -26,7 +26,8 @@ $effect(() => {
 	class={classProp}
 	data-tabs=""
 	data-orientation={orientation}
+	data-active={API.activeTab}
 	{...props}
 >
-	{@render children({})}
+	{@render children({ active: API.activeTab })}
 </div>

package/dist/components/Tabs/Tabs.svelte.d.ts

@@ -11,7 +11,9 @@ export declare const context: () => {
 };
 import { type BaseProps } from '../../internal/index.js';
 declare const __propDef: {
-    props: BaseProps<HTMLDivElement, any> & {
+    props: BaseProps<HTMLDivElement, {
+        active: string;
+    }> & {
         orientation?: "horizontal" | "vertical" | undefined;
         value?: string | undefined;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lithesome",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/Gibbu/lithesome.git"