@imput/helium-prism 0.1.1 → 0.1.3

package/README.md

@@ -2,11 +2,9 @@
     <img width="1000" alt="Helium Prism" src="https://raw.githubusercontent.com/imputnet/helium-prism/refs/heads/main/docs/prism-splash.png">
 </p>
 
-<p align="center">
-    Shared UI components of
-    <a href="https://github.com/imputnet/helium">Helium</a>
-    web interfaces for Svelte.
-</p>
+## Helium Prism
+
+Shared UI components of [Helium](https://github.com/imputnet/helium) web interfaces for Svelte.
 
 Prism UI library contains the shared building blocks used by web-based Helium applications and
 websites, such as: typography, buttons, inputs, loading states, icons, and the brand gradient
@@ -15,6 +13,9 @@ shimmer effect.
 This library isn't built for use outside of Helium web apps, so it may feel clunky for anything
 else.
 
+Demo: [prism.helium.computer](https://prism.helium.computer/)\
+npm: [@imput/helium-prism](https://www.npmjs.com/package/@imput/helium-prism)
+
 ## Installation
 
 deno:

package/dist/components/Button.svelte

@@ -1,14 +1,24 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import type { HTMLButtonAttributes } from "svelte/elements";
+    import type { ClassValue, HTMLButtonAttributes } from "svelte/elements";
 
-    type Props = HTMLButtonAttributes & {
+    type ButtonVariantProps =
+        | {
+            primary?: boolean;
+            transparent?: false;
+        }
+        | {
+            primary?: false;
+            transparent?: boolean;
+        };
+
+    type Props = Omit<HTMLButtonAttributes, "class"> & {
         children: Snippet;
-        primary?: boolean;
+        class?: ClassValue;
         card?: boolean;
         selected?: boolean;
         circle?: boolean;
-    };
+    } & ButtonVariantProps;
 
     let {
         children,
@@ -18,17 +28,21 @@
         card = false,
         selected = false,
         circle = false,
+        transparent = false,
         ...rest
     }: Props = $props();
 </script>
 
 <button
     class={[
-        "button",
-        primary && "primary",
-        card && "card",
-        selected && "selected",
-        circle && "circle",
+        {
+            button: true,
+            primary,
+            card,
+            selected,
+            circle,
+            transparent,
+        },
         className,
     ]}
     {type}

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

@@ -1,12 +1,19 @@
 import type { Snippet } from "svelte";
-import type { HTMLButtonAttributes } from "svelte/elements";
-type Props = HTMLButtonAttributes & {
-    children: Snippet;
+import type { ClassValue, HTMLButtonAttributes } from "svelte/elements";
+type ButtonVariantProps = {
     primary?: boolean;
+    transparent?: false;
+} | {
+    primary?: false;
+    transparent?: boolean;
+};
+type Props = Omit<HTMLButtonAttributes, "class"> & {
+    children: Snippet;
+    class?: ClassValue;
     card?: boolean;
     selected?: boolean;
     circle?: boolean;
-};
+} & ButtonVariantProps;
 declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAGxD,KAAK,KAAK,GAAG,oBAAoB,GAAG;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA+BN,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAGpE,KAAK,kBAAkB,GACjB;IACE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC;CACvB,GACC;IACE,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEN,KAAK,KAAK,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAC,GAAG;IAC/C,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,kBAAkB,CAAC;AAoC3B,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/CardLink.svelte

@@ -13,7 +13,14 @@
 </script>
 
 <a
-    class={["button card card-link", className]}
+    class={[
+        {
+            button: true,
+            card: true,
+            "card-link": true,
+        },
+        className,
+    ]}
     {href}
     target="_blank"
     rel="noopener noreferrer"

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

@@ -1 +1 @@
-{"version":3,"file":"CardLink.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/CardLink.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI9C,KAAK,KAAK,GAAG;IACT,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,UAAU,CAAC;CACtB,CAAC;AAqBN,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"CardLink.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/CardLink.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI9C,KAAK,KAAK,GAAG;IACT,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,UAAU,CAAC;CACtB,CAAC;AA4BN,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/Checkbox.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import type { HTMLInputAttributes } from "svelte/elements";
+    import type { ClassValue, HTMLInputAttributes } from "svelte/elements";
     import IconCheck from "./icons/IconCheck.svelte";
 
     type CheckboxLabelProps =
@@ -20,8 +20,9 @@
             "aria-labelledby": string;
         };
 
-    type Props = Omit<HTMLInputAttributes, "id" | "type" | "checked"> & {
+    type Props = Omit<HTMLInputAttributes, "class" | "id" | "type" | "checked"> & {
         id: string;
+        class?: ClassValue;
         checked?: boolean;
     } & CheckboxLabelProps;
 
@@ -51,7 +52,16 @@
     });
 </script>
 
-<label class={["checkbox", disabled && "disabled", toggling && "toggling", className]}>
+<label
+    class={[
+        {
+            checkbox: true,
+            disabled,
+            toggling,
+        },
+        className,
+    ]}
+>
     <input {id} type="checkbox" bind:checked {disabled} {...rest} />
     <span class="checkbox-control" aria-hidden="true">
         <IconCheck />
@@ -112,12 +122,14 @@
         transition: transform 0.2s;
     }
 
-    .checkbox:hover input:not(:checked) + .checkbox-control {
-        background-color: var(--helium-elevated-10);
-    }
+    @media (hover: hover) {
+        .checkbox:hover input:not(:checked) + .checkbox-control {
+            background-color: var(--helium-elevated-10);
+        }
 
-    .checkbox:hover input:checked + .checkbox-control {
-        background-color: var(--helium-blue-hover);
+        .checkbox:hover input:checked + .checkbox-control {
+            background-color: var(--helium-blue-hover);
+        }
     }
 
     .checkbox:active .checkbox-control {

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

@@ -1,5 +1,5 @@
 import type { Snippet } from "svelte";
-import type { HTMLInputAttributes } from "svelte/elements";
+import type { ClassValue, HTMLInputAttributes } from "svelte/elements";
 type CheckboxLabelProps = {
     children: Snippet;
     "aria-label"?: string;
@@ -13,8 +13,9 @@ type CheckboxLabelProps = {
     "aria-label"?: string;
     "aria-labelledby": string;
 };
-type Props = Omit<HTMLInputAttributes, "id" | "type" | "checked"> & {
+type Props = Omit<HTMLInputAttributes, "class" | "id" | "type" | "checked"> & {
     id: string;
+    class?: ClassValue;
     checked?: boolean;
 } & CheckboxLabelProps;
 declare const Checkbox: import("svelte").Component<Props, {}, "checked">;

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Checkbox.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAIvD,KAAK,kBAAkB,GACjB;IACE,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B,GACC;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B,GACC;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEN,KAAK,KAAK,GAAG,IAAI,CAAC,mBAAmB,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC,GAAG;IAChE,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,kBAAkB,CAAC;AAkD3B,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Checkbox.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAInE,KAAK,kBAAkB,GACjB;IACE,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B,GACC;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B,GACC;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEN,KAAK,KAAK,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC,GAAG;IAC1E,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,kBAAkB,CAAC;AAyD3B,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/Dropdown.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import type { HTMLSelectAttributes } from "svelte/elements";
+    import type { ClassValue, HTMLSelectAttributes } from "svelte/elements";
     import IconChevronDown from "./icons/IconChevronDown.svelte";
 
     type DropdownOption = {
@@ -10,7 +10,7 @@
     };
     type NativeSelectProps = Omit<
         HTMLSelectAttributes,
-        "aria-label" | "id" | "size" | "value"
+        "aria-label" | "class" | "id" | "size" | "value"
     >;
     type DropdownContentProps =
         | {
@@ -32,6 +32,7 @@
     type Props = NativeSelectProps & {
         id: string;
         "aria-label": string;
+        class?: ClassValue;
         value?: string;
         width?: string;
         select?: HTMLSelectElement;
@@ -52,7 +53,16 @@
     }: Props = $props();
 </script>
 
-<label class={["dropdown", disabled && "disabled", className]} style:width>
+<label
+    class={[
+        {
+            dropdown: true,
+            disabled,
+        },
+        className,
+    ]}
+    style:width
+>
     <select
         bind:this={select}
         bind:value

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

@@ -1,11 +1,11 @@
 import type { Snippet } from "svelte";
-import type { HTMLSelectAttributes } from "svelte/elements";
+import type { ClassValue, HTMLSelectAttributes } from "svelte/elements";
 type DropdownOption = {
     value: string;
     label: string;
     disabled?: boolean;
 };
-type NativeSelectProps = Omit<HTMLSelectAttributes, "aria-label" | "id" | "size" | "value">;
+type NativeSelectProps = Omit<HTMLSelectAttributes, "aria-label" | "class" | "id" | "size" | "value">;
 type DropdownContentProps = {
     options: readonly DropdownOption[];
     placeholder?: string;
@@ -22,6 +22,7 @@ type DropdownContentProps = {
 type Props = NativeSelectProps & {
     id: string;
     "aria-label": string;
+    class?: ClassValue;
     value?: string;
     width?: string;
     select?: HTMLSelectElement;

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Dropdown.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAIxD,KAAK,cAAc,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AACF,KAAK,iBAAiB,GAAG,IAAI,CACzB,oBAAoB,EACpB,YAAY,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,CACzC,CAAC;AACF,KAAK,oBAAoB,GACnB;IACE,OAAO,EAAE,SAAS,cAAc,EAAE,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC;CACpB,GACC;IACE,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACrB,GACC;IACE,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEN,KAAK,KAAK,GAAG,iBAAiB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC9B,GAAG,oBAAoB,CAAC;AAiD7B,QAAA,MAAM,QAAQ,2DAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Dropdown.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAIpE,KAAK,cAAc,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AACF,KAAK,iBAAiB,GAAG,IAAI,CACzB,oBAAoB,EACpB,YAAY,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,CACnD,CAAC;AACF,KAAK,oBAAoB,GACnB;IACE,OAAO,EAAE,SAAS,cAAc,EAAE,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC;CACpB,GACC;IACE,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACrB,GACC;IACE,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEN,KAAK,KAAK,GAAG,iBAAiB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC9B,GAAG,oBAAoB,CAAC;AAuD7B,QAAA,MAAM,QAAQ,2DAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/Input.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import type { HTMLInputAttributes } from "svelte/elements";
+    import type { ClassValue, HTMLInputAttributes } from "svelte/elements";
 
     type NativeInputProps = Omit<
         HTMLInputAttributes,
-        "aria-label" | "id" | "input" | "size" | "value" | "width"
+        "aria-label" | "class" | "id" | "input" | "size" | "value" | "width"
     >;
 
     type Props = NativeInputProps & {
         id: string;
         "aria-label": string;
+        class?: ClassValue;
         value?: HTMLInputAttributes["value"];
         small?: boolean;
         width?: string;
@@ -35,7 +36,14 @@
 </script>
 
 <label
-    class={["input-field", small && "small", disabled && "disabled", className]}
+    class={[
+        {
+            "input-field": true,
+            small,
+            disabled,
+        },
+        className,
+    ]}
     style:width
 >
     {#if leading}

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

@@ -1,9 +1,10 @@
 import type { Snippet } from "svelte";
-import type { HTMLInputAttributes } from "svelte/elements";
-type NativeInputProps = Omit<HTMLInputAttributes, "aria-label" | "id" | "input" | "size" | "value" | "width">;
+import type { ClassValue, HTMLInputAttributes } from "svelte/elements";
+type NativeInputProps = Omit<HTMLInputAttributes, "aria-label" | "class" | "id" | "input" | "size" | "value" | "width">;
 type Props = NativeInputProps & {
     id: string;
     "aria-label": string;
+    class?: ClassValue;
     value?: HTMLInputAttributes["value"];
     small?: boolean;
     width?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGvD,KAAK,gBAAgB,GAAG,IAAI,CACxB,mBAAmB,EACnB,YAAY,GAAG,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAC7D,CAAC;AAEF,KAAK,KAAK,GAAG,gBAAgB,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAyCN,QAAA,MAAM,KAAK,0DAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGnE,KAAK,gBAAgB,GAAG,IAAI,CACxB,mBAAmB,EACnB,YAAY,GAAG,OAAO,GAAG,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CACvE,CAAC;AAEF,KAAK,KAAK,GAAG,gBAAgB,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAgDN,QAAA,MAAM,KAAK,0DAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/OuterLink.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import type { HTMLAnchorAttributes } from "svelte/elements";
+    import type { ClassValue, HTMLAnchorAttributes } from "svelte/elements";
 
-    type Props = Omit<HTMLAnchorAttributes, "href"> & {
+    type Props = Omit<HTMLAnchorAttributes, "class" | "href"> & {
         href: string;
+        class?: ClassValue;
         children: Snippet;
     };
 

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

@@ -1,7 +1,8 @@
 import type { Snippet } from "svelte";
-import type { HTMLAnchorAttributes } from "svelte/elements";
-type Props = Omit<HTMLAnchorAttributes, "href"> & {
+import type { ClassValue, HTMLAnchorAttributes } from "svelte/elements";
+type Props = Omit<HTMLAnchorAttributes, "class" | "href"> & {
     href: string;
+    class?: ClassValue;
     children: Snippet;
 };
 declare const OuterLink: import("svelte").Component<Props, {}, "">;

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

@@ -1 +1 @@
-{"version":3,"file":"OuterLink.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/OuterLink.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAGxD,KAAK,KAAK,GAAG,IAAI,CAAC,oBAAoB,EAAE,MAAM,CAAC,GAAG;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;CACrB,CAAC;AA0BN,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"OuterLink.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/OuterLink.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAGpE,KAAK,KAAK,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IACxD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACrB,CAAC;AA0BN,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/SearchBar.svelte

@@ -1,16 +1,17 @@
 <script lang="ts">
-    import type { HTMLInputAttributes } from "svelte/elements";
+    import type { ClassValue, HTMLInputAttributes } from "svelte/elements";
     import Input from "./Input.svelte";
     import IconSearch from "./icons/IconSearch.svelte";
 
     type NativeInputProps = Omit<
         HTMLInputAttributes,
-        "aria-label" | "id" | "input" | "type" | "value" | "size" | "width"
+        "aria-label" | "class" | "id" | "input" | "type" | "value" | "size" | "width"
     >;
 
     type Props = NativeInputProps & {
         id: string;
         "aria-label": string;
+        class?: ClassValue;
         value?: string;
         input?: HTMLInputElement | undefined;
         container?: HTMLDivElement | undefined;
@@ -25,7 +26,7 @@
         container = $bindable(),
         small = false,
         width,
-        class: className,
+        class: className = "",
         placeholder,
         "aria-label": ariaLabel,
         ...rest

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

@@ -1,8 +1,9 @@
-import type { HTMLInputAttributes } from "svelte/elements";
-type NativeInputProps = Omit<HTMLInputAttributes, "aria-label" | "id" | "input" | "type" | "value" | "size" | "width">;
+import type { ClassValue, HTMLInputAttributes } from "svelte/elements";
+type NativeInputProps = Omit<HTMLInputAttributes, "aria-label" | "class" | "id" | "input" | "type" | "value" | "size" | "width">;
 type Props = NativeInputProps & {
     id: string;
     "aria-label": string;
+    class?: ClassValue;
     value?: string;
     input?: HTMLInputElement | undefined;
     container?: HTMLDivElement | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/SearchBar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAKvD,KAAK,gBAAgB,GAAG,IAAI,CACxB,mBAAmB,EACnB,YAAY,GAAG,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CACtE,CAAC;AAEF,KAAK,KAAK,GAAG,gBAAgB,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAC;IACrC,SAAS,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAkCN,QAAA,MAAM,SAAS,wEAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"SearchBar.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/SearchBar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAKnE,KAAK,gBAAgB,GAAG,IAAI,CACxB,mBAAmB,EACnB,YAAY,GAAG,OAAO,GAAG,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAChF,CAAC;AAEF,KAAK,KAAK,GAAG,gBAAgB,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAC;IACrC,SAAS,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAkCN,QAAA,MAAM,SAAS,wEAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/Text.svelte

@@ -50,7 +50,14 @@
 
 <svelte:element
     this={element}
-    class={["text", tone && `tone-${tone}`, center && "center", className]}
+    class={[
+        {
+            text: true,
+            [`tone-${tone}`]: tone,
+            center,
+        },
+        className,
+    ]}
 >
     {@render children()}
 </svelte:element>

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

@@ -1 +1 @@
-{"version":3,"file":"Text.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Text.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG9C,KAAK,OAAO,GACN,SAAS,GACT,OAAO,GACP,SAAS,GACT,YAAY,GACZ,MAAM,GACN,SAAS,CAAC;AAChB,KAAK,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAC3D,KAAK,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,CAAC;AAE1E,KAAK,SAAS,GAAG;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;CACtB,CAAC;AACF,KAAK,YAAY,GAAG,SAAS,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AACF,KAAK,QAAQ,GAAG,SAAS,GAAG;IACxB,GAAG,EAAE,GAAG,CAAC;IACT,OAAO,CAAC,EAAE,KAAK,CAAC;CACnB,CAAC;AACF,KAAK,KAAK,GAAG,YAAY,GAAG,QAAQ,CAAC;AAwCzC,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Text.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Text.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG9C,KAAK,OAAO,GACN,SAAS,GACT,OAAO,GACP,SAAS,GACT,YAAY,GACZ,MAAM,GACN,SAAS,CAAC;AAChB,KAAK,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAC3D,KAAK,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,CAAC;AAE1E,KAAK,SAAS,GAAG;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;CACtB,CAAC;AACF,KAAK,YAAY,GAAG,SAAS,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AACF,KAAK,QAAQ,GAAG,SAAS,GAAG;IACxB,GAAG,EAAE,GAAG,CAAC;IACT,OAAO,CAAC,EAAE,KAAK,CAAC;CACnB,CAAC;AACF,KAAK,KAAK,GAAG,YAAY,GAAG,QAAQ,CAAC;AA+CzC,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/Toggle.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import type { HTMLButtonAttributes } from "svelte/elements";
+    import type { ClassValue, HTMLButtonAttributes } from "svelte/elements";
 
     type ToggleContentProps =
         | {
@@ -14,7 +14,8 @@
             desc?: string;
         };
 
-    type Props = Omit<HTMLButtonAttributes, "aria-checked" | "onchange"> & {
+    type Props = Omit<HTMLButtonAttributes, "aria-checked" | "class" | "onchange"> & {
+        class?: ClassValue;
         checked?: boolean;
         onchange?: (checked: boolean) => void;
     } & ToggleContentProps;

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

@@ -1,5 +1,5 @@
 import type { Snippet } from "svelte";
-import type { HTMLButtonAttributes } from "svelte/elements";
+import type { ClassValue, HTMLButtonAttributes } from "svelte/elements";
 type ToggleContentProps = {
     children: Snippet;
     name?: never;
@@ -9,7 +9,8 @@ type ToggleContentProps = {
     name: string;
     desc?: string;
 };
-type Props = Omit<HTMLButtonAttributes, "aria-checked" | "onchange"> & {
+type Props = Omit<HTMLButtonAttributes, "aria-checked" | "class" | "onchange"> & {
+    class?: ClassValue;
     checked?: boolean;
     onchange?: (checked: boolean) => void;
 } & ToggleContentProps;

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Toggle.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAGxD,KAAK,kBAAkB,GACjB;IACE,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC;CAChB,GACC;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEN,KAAK,KAAK,GAAG,IAAI,CAAC,oBAAoB,EAAE,cAAc,GAAG,UAAU,CAAC,GAAG;IACnE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC,GAAG,kBAAkB,CAAC;AAwD3B,QAAA,MAAM,MAAM,kDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Toggle.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAGpE,KAAK,kBAAkB,GACjB;IACE,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC;CAChB,GACC;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEN,KAAK,KAAK,GAAG,IAAI,CAAC,oBAAoB,EAAE,cAAc,GAAG,OAAO,GAAG,UAAU,CAAC,GAAG;IAC7E,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC,GAAG,kBAAkB,CAAC;AAwD3B,QAAA,MAAM,MAAM,kDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/Tooltip.svelte

@@ -81,7 +81,7 @@
         position: relative;
         width: fit-content;
         height: fit-content;
-        gap: var(--gap);
+        gap: var(--gap-1);
     }
 
     .tooltip-container {

package/dist/styles.css

@@ -13,7 +13,8 @@
     --bg-surface: #fbfcff;
     --bg-gradient-start: #f4f7ff;
     --bg-gradient-end: #acbbff;
-    --background: var(--bg-gradient-start);
+
+    --background: var(--bg-surface);
 
     --tooltip-bg: #eaedfd;
     --tooltip-shadow: color-mix(in srgb, #9ba6d8 50%, transparent);
@@ -29,9 +30,10 @@
     --helium-elevated-40: color-mix(in srgb, var(--helium-elevated) 40%, transparent);
     --helium-elevated-50: color-mix(in srgb, var(--helium-elevated) 50%, transparent);
 
-    --gap: 6px;
-    --gap-1: 12px;
-    --gap-2: 20px;
+    --gap-1: 6px;
+    --gap-2: 8px;
+    --gap-3: 12px;
+    --gap-4: 20px;
     --content-padding: 32px;
     --section-padding: 48px;
 
@@ -66,7 +68,6 @@
         --bg-surface: #0e1123;
         --bg-gradient-start: #151932;
         --bg-gradient-end: #2d3c7f;
-        --background: var(--bg-gradient-start);
 
         --helium-elevated: #b3beec;
         --glass-filter: blur(12px);
@@ -83,7 +84,7 @@
 }
 
 html {
-    background: var(--bg-gradient-start);
+    background: var(--background);
 }
 
 ::selection {
@@ -197,7 +198,7 @@ button,
     --size: 38px;
 
     color: var(--primary);
-    background-color: var(--helium-elevated-7);
+    background-color: transparent;
     font-size: 16px;
     min-height: 38px;
     padding: 9px 16px;
@@ -211,8 +212,8 @@ button,
     -webkit-user-select: none;
     -webkit-user-drag: none;
 
-    &:hover {
-        background-color: var(--helium-elevated-10);
+    &:not(.transparent) {
+        background-color: var(--helium-elevated-7);
     }
 
     &:active {
@@ -224,10 +225,6 @@ button,
         color: var(--white);
         background-color: var(--helium-blue);
 
-        &:hover {
-            background-color: var(--helium-blue-hover);
-        }
-
         &:active {
             background-color: var(--helium-blue-press);
         }
@@ -246,7 +243,7 @@ button,
         text-align: left;
         border-radius: 14px;
         padding: 14px 18px;
-        gap: var(--gap-1);
+        gap: var(--gap-3);
 
         &:active {
             transform: none;
@@ -264,9 +261,12 @@ button,
 
     &:disabled {
         color: var(--tertiary);
-        background-color: var(--helium-elevated-5);
         pointer-events: none;
 
+        &:not(.transparent) {
+            background-color: var(--helium-elevated-5);
+        }
+
         &:not(.selected) {
             box-shadow: none;
         }
@@ -284,6 +284,28 @@ button,
     }
 }
 
+@media (hover: hover) {
+    button:hover,
+    .button:hover {
+        background-color: var(--helium-elevated-10);
+    }
+
+    button:hover:active,
+    .button:hover:active {
+        background-color: var(--helium-elevated-15);
+    }
+
+    button.primary:hover,
+    .button.primary:hover {
+        background-color: var(--helium-blue-hover);
+    }
+
+    button.primary:hover:active,
+    .button.primary:hover:active {
+        background-color: var(--helium-blue-press);
+    }
+}
+
 a.button {
     text-decoration: none;
 }
@@ -297,7 +319,7 @@ a:focus-visible {
 
 .action-buttons {
     display: flex;
-    gap: var(--gap);
+    gap: var(--gap-1);
 
     & > button,
     & > .button {
@@ -318,7 +340,6 @@ a:focus-visible {
     background-color: var(--helium-elevated-7);
     display: inline-flex;
 
-    &:hover,
     &:focus-within {
         background-color: var(--helium-elevated-10);
     }
@@ -329,6 +350,13 @@ a:focus-visible {
     }
 }
 
+@media (hover: hover) {
+    .input-field:hover,
+    .dropdown:hover {
+        background-color: var(--helium-elevated-10);
+    }
+}
+
 .input-field {
     gap: 9px;
     width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imput/helium-prism",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Shared UI components of Helium web interfaces for Svelte",
   "type": "module",
   "license": "GPL-3.0-only",