@geoffcox/sterling-svelte 0.0.19 → 0.0.20

package/Link.svelte

@@ -0,0 +1,91 @@
+<script>export let href;
+export let disabled = false;
+export let variant = "regular";
+</script>
+
+<a
+  class="sterling-link"
+  class:disabled
+  class:ghost={variant === 'ghost'}
+  class:undecorated={variant === 'undecorated'}
+  {href}
+  on:blur
+  on:click
+  on:dblclick
+  on:focus
+  on:focusin
+  on:focusout
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mousedown
+  on:mouseenter
+  on:mouseleave
+  on:mousemove
+  on:mouseover
+  on:mouseout
+  on:mouseup
+  on:pointercancel
+  on:pointerdown
+  on:pointerenter
+  on:pointerleave
+  on:pointermove
+  on:pointerover
+  on:pointerout
+  on:pointerup
+  on:wheel
+  {...$$restProps}><slot {disabled} {href} {variant} /></a
+>
+
+<style>
+  a {
+    background-color: transparent;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    border-radius: 0;
+    border-bottom-style: var(--stsv-Button__border-style);
+    border-bottom-width: calc(var(--stsv-Button__border-width));
+    border-bottom-color: var(--stsv-Button__border-color);
+    color: var(--stsv-Button__color);
+    cursor: pointer;
+    font: inherit;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  a:visited {
+    border-bottom-color: var(--stsv-Button__border-color);
+  }
+
+  a.ghost {
+    border-bottom-color: transparent;
+  }
+
+  a:hover {
+    border-bottom-color: var(--stsv-Button__border-color--hover);
+    color: var(--stsv-Button__color--hover);
+  }
+
+  a:active {
+    border-bottom-color: var(--stsv-Button__border-color--active);
+    color: var(--stsv-Button__color--active);
+  }
+
+  a.disabled {
+    border-bottom-color: var(--stsv-Common__border-color--disabled);
+    color: var(--stsv-Common__color--disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  a.undecorated,
+  a.undecorated:hover,
+  a.undecorated:active,
+  a.undecorated:visited {
+    border: none;
+  }
+</style>

package/Link.svelte.d.ts

@@ -0,0 +1,52 @@
+import { SvelteComponentTyped } from "svelte";
+import type { LinkVariant } from './Link.types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        href: string;
+        disabled?: boolean | undefined;
+        variant?: LinkVariant | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        dblclick: MouseEvent;
+        focus: FocusEvent;
+        focusin: FocusEvent;
+        focusout: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mousedown: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mousemove: MouseEvent;
+        mouseover: MouseEvent;
+        mouseout: MouseEvent;
+        mouseup: MouseEvent;
+        pointercancel: PointerEvent;
+        pointerdown: PointerEvent;
+        pointerenter: PointerEvent;
+        pointerleave: PointerEvent;
+        pointermove: PointerEvent;
+        pointerover: PointerEvent;
+        pointerout: PointerEvent;
+        pointerup: PointerEvent;
+        wheel: WheelEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            disabled: boolean;
+            href: string;
+            variant: LinkVariant;
+        };
+    };
+};
+export type LinkProps = typeof __propDef.props;
+export type LinkEvents = typeof __propDef.events;
+export type LinkSlots = typeof __propDef.slots;
+export default class Link extends SvelteComponentTyped<LinkProps, LinkEvents, LinkSlots> {
+}
+export {};

package/Link.types.d.ts

@@ -0,0 +1 @@
+export type LinkVariant = 'regular' | 'ghost' | 'undecorated';

package/Link.types.js

@@ -0,0 +1 @@
+export {};

package/index.d.ts

@@ -12,6 +12,7 @@ export { toggleDarkTheme } from './theme/toggleDarkTheme';
 export { menuBarContextKey, menuItemContextKey } from './Menus.constants';
 export type { ButtonVariant, ButtonShape } from './Button.types';
 export type { FieldStatus } from './Field.types';
+export type { LinkVariant } from './Link.types';
 export type { ListContext } from './List.types';
 export type { MenuBarContext, MenuItemContext, MenuItemRegistration } from './Menus.types';
 export type { ProgressColorful } from './Progress.types';
@@ -29,6 +30,7 @@ import Dropdown from './Dropdown.svelte';
 import Field from './Field.svelte';
 import Input from './Input.svelte';
 import Label from './Label.svelte';
+import Link from './Link.svelte';
 import List from './List.svelte';
 import ListItem from './ListItem.svelte';
 import Menu from './Menu.svelte';
@@ -50,4 +52,4 @@ import Tree from './Tree.svelte';
 import TreeChevron from './TreeChevron.svelte';
 import TreeItem from './TreeItem.svelte';
 import TreeItemDisplay from './TreeItemDisplay.svelte';
-export { Button, Checkbox, Dialog, Dropdown, Field, Input, Label, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };
+export { Button, Checkbox, Dialog, Dropdown, Field, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };

package/index.js

@@ -25,6 +25,7 @@ import Dropdown from './Dropdown.svelte';
 import Field from './Field.svelte';
 import Input from './Input.svelte';
 import Label from './Label.svelte';
+import Link from './Link.svelte';
 import List from './List.svelte';
 import ListItem from './ListItem.svelte';
 import Menu from './Menu.svelte';
@@ -46,4 +47,4 @@ import Tree from './Tree.svelte';
 import TreeChevron from './TreeChevron.svelte';
 import TreeItem from './TreeItem.svelte';
 import TreeItemDisplay from './TreeItemDisplay.svelte';
-export { Button, Checkbox, Dialog, Dropdown, Field, Input, Label, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };
+export { Button, Checkbox, Dialog, Dropdown, Field, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -60,6 +60,8 @@
     "./Field.types": "./Field.types.js",
     "./Input.svelte": "./Input.svelte",
     "./Label.svelte": "./Label.svelte",
+    "./Link.svelte": "./Link.svelte",
+    "./Link.types": "./Link.types.js",
     "./List.constants": "./List.constants.js",
     "./List.svelte": "./List.svelte",
     "./List.types": "./List.types.js",