sve-ui 0.1.1 → 0.2.0

package/dist/components/DropdownMenu/DropdownMenuItem.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { DropdownMenu } from 'bits-ui';
+  import type { ComponentProps } from 'svelte';
+
+  type BitsItemProps = ComponentProps<typeof DropdownMenu.Item>;
+
+  interface Props extends Omit<BitsItemProps, 'class'> {
+    class?: string;
+  }
+
+  let { class: cls, children, ...rest }: Props = $props();
+</script>
+
+<DropdownMenu.Item
+  class={['sve-dropdown-item', cls].filter(Boolean).join(' ')}
+  {children}
+  {...rest}
+/>
+
+<style>
+  :global(.sve-dropdown-item) {
+    cursor: default;
+    padding: var(--sve-space-1) var(--sve-space-2);
+    border-radius: var(--sve-radius-sm);
+    font-size: var(--sve-font-size-sm);
+    color: var(--sve-color-default-foreground, #1a202c);
+    outline: none;
+  }
+
+  :global(.sve-dropdown-item[data-highlighted]) {
+    background-color: var(--sve-color-primary-surface, #fff5f5);
+    color: var(--sve-color-default-foreground, #1a202c);
+  }
+
+  :global(.sve-dropdown-item[data-disabled]) {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+</style>

package/dist/components/DropdownMenu/DropdownMenuItem.svelte.d.ts

@@ -0,0 +1,10 @@
+import { DropdownMenu } from 'bits-ui';
+import type { ComponentProps } from 'svelte';
+type BitsItemProps = ComponentProps<typeof DropdownMenu.Item>;
+interface Props extends Omit<BitsItemProps, 'class'> {
+    class?: string;
+}
+declare const DropdownMenuItem: import("svelte").Component<Props, {}, "">;
+type DropdownMenuItem = ReturnType<typeof DropdownMenuItem>;
+export default DropdownMenuItem;
+//# sourceMappingURL=DropdownMenuItem.svelte.d.ts.map

package/dist/components/DropdownMenu/DropdownMenuItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenuItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/DropdownMenu/DropdownMenuItem.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAG3C,KAAK,aAAa,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC;AAE9D,UAAU,KAAM,SAAQ,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgBH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/DropdownMenu/DropdownMenuLabel.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { DropdownMenu } from 'bits-ui';
+  import type { ComponentProps } from 'svelte';
+
+  type BitsGroupHeadingProps = ComponentProps<typeof DropdownMenu.GroupHeading>;
+
+  interface Props extends Omit<BitsGroupHeadingProps, 'class'> {
+    class?: string;
+  }
+
+  let { class: cls, children, ...rest }: Props = $props();
+</script>
+
+<!--
+  DropdownMenuLabel uses GroupHeading from bits-ui — this is the semantic
+  label element for a group of menu items, not the generic Label component.
+-->
+<DropdownMenu.GroupHeading
+  class={['sve-dropdown-label', cls].filter(Boolean).join(' ')}
+  {children}
+  {...rest}
+/>
+
+<style>
+  :global(.sve-dropdown-label) {
+    padding: var(--sve-space-1) var(--sve-space-2);
+    font-size: var(--sve-font-size-xs);
+    font-weight: var(--sve-font-weight-bold);
+    color: var(--sve-color-default-foreground, #1a202c);
+    opacity: 0.6;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+</style>

package/dist/components/DropdownMenu/DropdownMenuLabel.svelte.d.ts

@@ -0,0 +1,10 @@
+import { DropdownMenu } from 'bits-ui';
+import type { ComponentProps } from 'svelte';
+type BitsGroupHeadingProps = ComponentProps<typeof DropdownMenu.GroupHeading>;
+interface Props extends Omit<BitsGroupHeadingProps, 'class'> {
+    class?: string;
+}
+declare const DropdownMenuLabel: import("svelte").Component<Props, {}, "">;
+type DropdownMenuLabel = ReturnType<typeof DropdownMenuLabel>;
+export default DropdownMenuLabel;
+//# sourceMappingURL=DropdownMenuLabel.svelte.d.ts.map

package/dist/components/DropdownMenu/DropdownMenuLabel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenuLabel.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/DropdownMenu/DropdownMenuLabel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAG3C,KAAK,qBAAqB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,YAAY,CAAC,CAAC;AAE9E,UAAU,KAAM,SAAQ,IAAI,CAAC,qBAAqB,EAAE,OAAO,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiBH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/components/DropdownMenu/DropdownMenuSeparator.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { DropdownMenu } from 'bits-ui';
+  import type { ComponentProps } from 'svelte';
+
+  type BitsSeparatorProps = ComponentProps<typeof DropdownMenu.Separator>;
+
+  interface Props extends Omit<BitsSeparatorProps, 'class'> {
+    class?: string;
+  }
+
+  let { class: cls, ...rest }: Props = $props();
+</script>
+
+<DropdownMenu.Separator
+  class={['sve-dropdown-separator', cls].filter(Boolean).join(' ')}
+  {...rest}
+/>
+
+<style>
+  :global(.sve-dropdown-separator) {
+    height: 1px;
+    background-color: var(--sve-color-default-border, #e5e7eb);
+    margin: var(--sve-space-1) 0;
+  }
+</style>

package/dist/components/DropdownMenu/DropdownMenuSeparator.svelte.d.ts

@@ -0,0 +1,10 @@
+import { DropdownMenu } from 'bits-ui';
+import type { ComponentProps } from 'svelte';
+type BitsSeparatorProps = ComponentProps<typeof DropdownMenu.Separator>;
+interface Props extends Omit<BitsSeparatorProps, 'class'> {
+    class?: string;
+}
+declare const DropdownMenuSeparator: import("svelte").Component<Props, {}, "">;
+type DropdownMenuSeparator = ReturnType<typeof DropdownMenuSeparator>;
+export default DropdownMenuSeparator;
+//# sourceMappingURL=DropdownMenuSeparator.svelte.d.ts.map

package/dist/components/DropdownMenu/DropdownMenuSeparator.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenuSeparator.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/DropdownMenu/DropdownMenuSeparator.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAG3C,KAAK,kBAAkB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,SAAS,CAAC,CAAC;AAExE,UAAU,KAAM,SAAQ,IAAI,CAAC,kBAAkB,EAAE,OAAO,CAAC;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgBH,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/components/DropdownMenu/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * DropdownMenu namespace — sve-ui styled wrappers over bits-ui DropdownMenu primitives.
+ *
+ * Root, Trigger, Sub, SubTrigger, SubContent, CheckboxItem, RadioItem, RadioGroup:
+ *   re-exported as-is (behavior-only, Bits UI owns ARIA + keyboard).
+ * Content, Item, Separator, Group, Label: styled wrappers adding --sve-* token styles.
+ * Content wraps Portal + Bits Content internally (consumers don't manage portaling).
+ *
+ * Confirmed Bits UI 2.x API:
+ *   import { DropdownMenu } from 'bits-ui'
+ *   DropdownMenu.Root / Trigger / Content / Item / Separator / Group /
+ *   GroupHeading / Sub / SubTrigger / SubContent / CheckboxItem / RadioItem /
+ *   RadioGroup / Portal
+ */
+import type { Component } from 'svelte';
+import type { DropdownMenuRootProps, DropdownMenuTriggerProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuSubContentProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioItemProps, DropdownMenuRadioGroupProps, DropdownMenuArrowProps } from 'bits-ui';
+export declare const Root: Component<DropdownMenuRootProps>;
+export declare const Trigger: Component<DropdownMenuTriggerProps>;
+export declare const Sub: Component<DropdownMenuSubProps>;
+export declare const SubTrigger: Component<DropdownMenuSubTriggerProps>;
+export declare const SubContent: Component<DropdownMenuSubContentProps>;
+export declare const CheckboxItem: Component<DropdownMenuCheckboxItemProps>;
+export declare const RadioItem: Component<DropdownMenuRadioItemProps>;
+export declare const RadioGroup: Component<DropdownMenuRadioGroupProps>;
+export declare const Arrow: Component<DropdownMenuArrowProps>;
+export { default as Content } from './DropdownMenuContent.svelte';
+export { default as Item } from './DropdownMenuItem.svelte';
+export { default as Separator } from './DropdownMenuSeparator.svelte';
+export { default as Group } from './DropdownMenuGroup.svelte';
+export { default as Label } from './DropdownMenuLabel.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DropdownMenu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/DropdownMenu/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,KAAK,EACV,qBAAqB,EACrB,wBAAwB,EACxB,oBAAoB,EACpB,2BAA2B,EAC3B,2BAA2B,EAC3B,6BAA6B,EAC7B,0BAA0B,EAC1B,2BAA2B,EAC3B,sBAAsB,EACvB,MAAM,SAAS,CAAC;AAIjB,eAAO,MAAM,IAAI,EAAE,SAAS,CAAC,qBAAqB,CAA6D,CAAC;AAChH,eAAO,MAAM,OAAO,EAAE,SAAS,CAAC,wBAAwB,CAAmE,CAAC;AAC5H,eAAO,MAAM,GAAG,EAAE,SAAS,CAAC,oBAAoB,CAA2D,CAAC;AAC5G,eAAO,MAAM,UAAU,EAAE,SAAS,CAAC,2BAA2B,CAAyE,CAAC;AACxI,eAAO,MAAM,UAAU,EAAE,SAAS,CAAC,2BAA2B,CAAyE,CAAC;AACxI,eAAO,MAAM,YAAY,EAAE,SAAS,CAAC,6BAA6B,CAA6E,CAAC;AAChJ,eAAO,MAAM,SAAS,EAAE,SAAS,CAAC,0BAA0B,CAAuE,CAAC;AACpI,eAAO,MAAM,UAAU,EAAE,SAAS,CAAC,2BAA2B,CAAyE,CAAC;AAGxI,eAAO,MAAM,KAAK,EAAE,SAAS,CAAC,sBAAsB,CAA+D,CAAC;AAGpH,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/components/DropdownMenu/index.js

@@ -0,0 +1,33 @@
+/**
+ * DropdownMenu namespace — sve-ui styled wrappers over bits-ui DropdownMenu primitives.
+ *
+ * Root, Trigger, Sub, SubTrigger, SubContent, CheckboxItem, RadioItem, RadioGroup:
+ *   re-exported as-is (behavior-only, Bits UI owns ARIA + keyboard).
+ * Content, Item, Separator, Group, Label: styled wrappers adding --sve-* token styles.
+ * Content wraps Portal + Bits Content internally (consumers don't manage portaling).
+ *
+ * Confirmed Bits UI 2.x API:
+ *   import { DropdownMenu } from 'bits-ui'
+ *   DropdownMenu.Root / Trigger / Content / Item / Separator / Group /
+ *   GroupHeading / Sub / SubTrigger / SubContent / CheckboxItem / RadioItem /
+ *   RadioGroup / Portal
+ */
+import { DropdownMenu as BitsDropdownMenu } from 'bits-ui';
+// Behavior re-exports — cast to portable Component types to avoid referencing
+// bits-ui internal types (OnChangeFn) in the exported declaration.
+export const Root = BitsDropdownMenu.Root;
+export const Trigger = BitsDropdownMenu.Trigger;
+export const Sub = BitsDropdownMenu.Sub;
+export const SubTrigger = BitsDropdownMenu.SubTrigger;
+export const SubContent = BitsDropdownMenu.SubContent;
+export const CheckboxItem = BitsDropdownMenu.CheckboxItem;
+export const RadioItem = BitsDropdownMenu.RadioItem;
+export const RadioGroup = BitsDropdownMenu.RadioGroup;
+// Arrow: bits-ui floating-ui arrow for visual pointer; positioning is automatic.
+export const Arrow = BitsDropdownMenu.Arrow;
+// Styled wrappers
+export { default as Content } from './DropdownMenuContent.svelte';
+export { default as Item } from './DropdownMenuItem.svelte';
+export { default as Separator } from './DropdownMenuSeparator.svelte';
+export { default as Group } from './DropdownMenuGroup.svelte';
+export { default as Label } from './DropdownMenuLabel.svelte';

package/dist/components/Heading/Heading.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  type Level = 1 | 2 | 3 | 4 | 5 | 6;
+  type Size = 'sm' | 'md' | 'lg';
+  type Weight = 'normal' | 'medium' | 'bold';
+  type Color = 'inherit' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default';
+
+  interface Props extends Omit<HTMLAttributes<HTMLHeadingElement>, 'class'> {
+    level?: Level;
+    size?: Size;
+    weight?: Weight;
+    color?: Color;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    level = 2,
+    size,
+    weight = 'bold',
+    color = 'inherit',
+    class: cls,
+    children,
+    ...rest
+  }: Props = $props();
+
+  const tag = $derived(`h${level}` as const);
+
+  const className = $derived(
+    [
+      'sve-heading',
+      size   ? `sve-heading--${size}`   : '',
+      weight ? `sve-heading--${weight}` : '',
+      color !== 'inherit' ? `sve-c-${color}` : '',
+      cls ?? '',
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<svelte:element this={tag} class={className} {...rest}>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .sve-heading {
+    font-family: var(--sve-font-family-sans);
+    line-height: var(--sve-line-height-tight);
+    margin: 0;
+  }
+
+  /* --- Sizes --- */
+  .sve-heading--sm { font-size: var(--sve-font-size-sm); }
+  .sve-heading--md { font-size: var(--sve-font-size-md); }
+  .sve-heading--lg { font-size: var(--sve-font-size-lg); }
+
+  /* --- Weights --- */
+  .sve-heading--normal { font-weight: var(--sve-font-weight-normal); }
+  .sve-heading--medium { font-weight: var(--sve-font-weight-medium); }
+  .sve-heading--bold   { font-weight: var(--sve-font-weight-bold); }
+
+  /* --- Semantic colors --- */
+  .sve-c-primary   { color: var(--sve-color-primary); }
+  .sve-c-secondary { color: var(--sve-color-secondary); }
+  .sve-c-success   { color: var(--sve-color-success); }
+  .sve-c-warning   { color: var(--sve-color-warning-foreground); }
+  .sve-c-danger    { color: var(--sve-color-danger); }
+  .sve-c-default   { color: var(--sve-color-default-foreground); }
+</style>

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

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type Level = 1 | 2 | 3 | 4 | 5 | 6;
+type Size = 'sm' | 'md' | 'lg';
+type Weight = 'normal' | 'medium' | 'bold';
+type Color = 'inherit' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default';
+interface Props extends Omit<HTMLAttributes<HTMLHeadingElement>, 'class'> {
+    level?: Level;
+    size?: Size;
+    weight?: Weight;
+    color?: Color;
+    class?: string;
+    children?: Snippet;
+}
+declare const Heading: import("svelte").Component<Props, {}, "">;
+type Heading = ReturnType<typeof Heading>;
+export default Heading;
+//# sourceMappingURL=Heading.svelte.d.ts.map

package/dist/components/Heading/Heading.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Heading/Heading.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACnC,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC/B,KAAK,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC3C,KAAK,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEhG,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IACvE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2CH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/Input/Input.svelte

@@ -0,0 +1,151 @@
+<script module lang="ts">
+  import { defineVariants } from '../../internal/variants';
+
+  type Size    = 'sm' | 'md' | 'lg';
+  type Variant = 'outline' | 'filled';
+
+  export const inputVariants = defineVariants({
+    base: 'sve-input',
+    variants: {
+      variant: {
+        outline: 'sve-input--outline',
+        filled:  'sve-input--filled',
+      },
+      size: {
+        sm: 'sve-input--sm',
+        md: 'sve-input--md',
+        lg: 'sve-input--lg',
+      },
+    },
+    defaultVariants: {
+      variant: 'outline',
+      size:    'md',
+    },
+  });
+
+  export type { Size, Variant };
+</script>
+
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+
+  interface Props extends Omit<HTMLInputAttributes, 'class' | 'size'> {
+    size?: Size;
+    variant?: Variant;
+    invalid?: boolean;
+    class?: string;
+  }
+
+  let {
+    size,
+    variant,
+    invalid = false,
+    class: cls,
+    value = $bindable(),
+    ...rest
+  }: Props = $props();
+
+  const className = $derived(
+    inputVariants({
+      size,
+      variant,
+      class: [cls, invalid ? 'sve-input--invalid' : ''].filter(Boolean).join(' ') || undefined,
+    })
+  );
+</script>
+
+<!--
+  Accessibility: consumers MUST associate a label via one of:
+    - <label for="..."> matching the input's forwarded `id` prop
+    - aria-labelledby pointing to a visible label element
+  Both approaches work through the spread `{...rest}`.
+  `aria-invalid` is wired automatically via the `invalid` prop.
+-->
+<input
+  class={className}
+  aria-invalid={invalid ? true : undefined}
+  bind:value
+  {...rest}
+/>
+
+<style>
+  .sve-input {
+    display: block;
+    width: 100%;
+    border-radius: var(--sve-radius-md);
+    border: 1px solid transparent;
+    font-family: var(--sve-font-family-sans);
+    font-size: var(--sve-font-size-md);
+    line-height: var(--sve-line-height-normal);
+    /* Suppress the default browser outline; we render our own focus-visible ring below */
+    outline: none;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+    background-color: transparent;
+    color: var(--sve-color-default-foreground);
+  }
+
+  /* --- Sizes --- */
+  .sve-input--sm {
+    padding: var(--sve-space-1) var(--sve-space-2);
+    font-size: var(--sve-font-size-sm);
+    height: 2rem;
+  }
+
+  .sve-input--md {
+    padding: var(--sve-space-2) var(--sve-space-3);
+    height: 2.5rem;
+  }
+
+  .sve-input--lg {
+    padding: var(--sve-space-3) var(--sve-space-4);
+    font-size: var(--sve-font-size-lg);
+    height: 3rem;
+  }
+
+  /* --- Focus-visible ring (respects high-contrast mode via outline) --- */
+  .sve-input:focus-visible {
+    outline: 2px solid var(--sve-color-primary);
+    outline-offset: 1px;
+  }
+
+  /* --- Outline variant --- */
+  .sve-input--outline {
+    background-color: transparent;
+    border-color: var(--sve-color-default-border);
+  }
+
+  .sve-input--outline:focus-visible {
+    border-color: var(--sve-color-primary-border);
+    box-shadow: 0 0 0 3px var(--sve-color-primary-surface);
+  }
+
+  /* --- Filled variant --- */
+  .sve-input--filled {
+    background-color: var(--sve-color-default-surface);
+    border-color: transparent;
+  }
+
+  .sve-input--filled:focus-visible {
+    background-color: var(--sve-color-default-surface);
+    border-color: var(--sve-color-primary-border);
+    box-shadow: 0 0 0 3px var(--sve-color-primary-surface);
+  }
+
+  /* --- Invalid state --- */
+  .sve-input--invalid {
+    border-color: var(--sve-color-danger-border);
+  }
+
+  .sve-input--invalid:focus-visible {
+    border-color: var(--sve-color-danger);
+    box-shadow: 0 0 0 3px var(--sve-color-danger-surface);
+    outline-color: var(--sve-color-danger);
+  }
+
+  /* --- Disabled state --- */
+  .sve-input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+</style>

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

@@ -0,0 +1,25 @@
+type Size = 'sm' | 'md' | 'lg';
+type Variant = 'outline' | 'filled';
+export declare const inputVariants: (props?: import("../../internal/variants").VariantProps<{
+    variant: {
+        outline: string;
+        filled: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}> | undefined) => string;
+export type { Size, Variant };
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLInputAttributes, 'class' | 'size'> {
+    size?: Size;
+    variant?: Variant;
+    invalid?: boolean;
+    class?: string;
+}
+declare const Input: import("svelte").Component<Props, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;
+//# sourceMappingURL=Input.svelte.d.ts.map

package/dist/components/Input/Input.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/Input.svelte.ts"],"names":[],"mappings":"AAKE,KAAK,IAAI,GAAM,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAClC,KAAK,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEpC,eAAO,MAAM,aAAa;;;;;;;;;;yBAiBxB,CAAC;AAEH,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AAGhC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,UAAU,KAAM,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,MAAM,CAAC;IACjE,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgCH,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/Popover/PopoverContent.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { Popover } from 'bits-ui';
+  import type { ComponentProps } from 'svelte';
+
+  type BitsContentProps = ComponentProps<typeof Popover.Content>;
+
+  interface Props extends Omit<BitsContentProps, 'class'> {
+    class?: string;
+  }
+
+  let { class: cls, children, ...rest }: Props = $props();
+</script>
+
+<!--
+  PopoverContent renders via a Portal (managed by bits-ui) that wraps:
+  Popover.Content — the floating panel with ARIA and positioning via Bits UI.
+
+  Portal defaults to document.body, keeping z-index stacking clean.
+-->
+<Popover.Portal>
+  <Popover.Content
+    class={['sve-popover-content', cls].filter(Boolean).join(' ')}
+    {children}
+    {...rest}
+  />
+</Popover.Portal>
+
+<style>
+  :global(.sve-popover-content) {
+    background-color: var(--sve-color-default-surface, #fff);
+    border: 1px solid var(--sve-color-default-border, #e5e7eb);
+    border-radius: var(--sve-radius-md);
+    box-shadow: var(--sve-shadow-md);
+    padding: var(--sve-space-4);
+    /* z-index convention: Dialog overlay=50/content=51, Dropdown/Popover=60, Tooltip=70 */
+    z-index: 60;
+    min-width: 10rem;
+    max-width: 20rem;
+  }
+</style>

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

@@ -0,0 +1,10 @@
+import { Popover } from 'bits-ui';
+import type { ComponentProps } from 'svelte';
+type BitsContentProps = ComponentProps<typeof Popover.Content>;
+interface Props extends Omit<BitsContentProps, 'class'> {
+    class?: string;
+}
+declare const PopoverContent: import("svelte").Component<Props, {}, "">;
+type PopoverContent = ReturnType<typeof PopoverContent>;
+export default PopoverContent;
+//# sourceMappingURL=PopoverContent.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverContent.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Popover/PopoverContent.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAG3C,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,OAAO,CAAC,CAAC;AAE/D,UAAU,KAAM,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmBH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,20 @@
+/**
+ * Popover namespace — sve-ui styled wrappers over bits-ui Popover primitives.
+ *
+ * Root, Trigger, Close: re-exported as-is (behavior-only, Bits UI owns ARIA + positioning).
+ * Content: styled wrapper adding --sve-* token styles.
+ * Content wraps Portal + Bits Content internally (consumers don't manage portaling).
+ * Arrow: re-exported as-is for consumers who want a pointer arrow on the popover.
+ *
+ * Confirmed Bits UI 2.x API:
+ *   import { Popover } from 'bits-ui'
+ *   Popover.Root / Trigger / Close / Content / Arrow / Portal
+ */
+import type { Component } from 'svelte';
+import type { PopoverRootProps, PopoverTriggerProps, PopoverCloseProps, PopoverArrowProps } from 'bits-ui';
+export declare const Root: Component<PopoverRootProps>;
+export declare const Trigger: Component<PopoverTriggerProps>;
+export declare const Close: Component<PopoverCloseProps>;
+export declare const Arrow: Component<PopoverArrowProps>;
+export { default as Content } from './PopoverContent.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Popover/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,KAAK,EACV,gBAAgB,EAChB,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,SAAS,CAAC;AAIjB,eAAO,MAAM,IAAI,EAAE,SAAS,CAAC,gBAAgB,CAAmD,CAAC;AACjG,eAAO,MAAM,OAAO,EAAE,SAAS,CAAC,mBAAmB,CAAyD,CAAC;AAC7G,eAAO,MAAM,KAAK,EAAE,SAAS,CAAC,iBAAiB,CAAqD,CAAC;AAErG,eAAO,MAAM,KAAK,EAAE,SAAS,CAAC,iBAAiB,CAAqD,CAAC;AAErG,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/components/Popover/index.js

@@ -0,0 +1,21 @@
+/**
+ * Popover namespace — sve-ui styled wrappers over bits-ui Popover primitives.
+ *
+ * Root, Trigger, Close: re-exported as-is (behavior-only, Bits UI owns ARIA + positioning).
+ * Content: styled wrapper adding --sve-* token styles.
+ * Content wraps Portal + Bits Content internally (consumers don't manage portaling).
+ * Arrow: re-exported as-is for consumers who want a pointer arrow on the popover.
+ *
+ * Confirmed Bits UI 2.x API:
+ *   import { Popover } from 'bits-ui'
+ *   Popover.Root / Trigger / Close / Content / Arrow / Portal
+ */
+import { Popover as BitsPopover } from 'bits-ui';
+// Behavior re-exports — cast to portable Component types to avoid referencing
+// bits-ui internal types (OnChangeFn) in the exported declaration.
+export const Root = BitsPopover.Root;
+export const Trigger = BitsPopover.Trigger;
+export const Close = BitsPopover.Close;
+// Arrow: bits-ui floating-ui arrow for visual pointer; positioning is automatic.
+export const Arrow = BitsPopover.Arrow;
+export { default as Content } from './PopoverContent.svelte';