@dvcol/neo-svelte 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,58 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+### 0.1.1 (2024-11-25)
+
+
+### Features
+
+* **button-groups:** adds button groups ([92c23bf](https://github.com/dvcol/neo-svelte/commit/92c23bf1cef47a06ca1f01d407e204a9d675ca21))
+* **button:** adds glass button style ([287f7fe](https://github.com/dvcol/neo-svelte/commit/287f7fe4eaec6ef6907c1aa31def0b2b95d8e6f7))
+* **button:** adds initial setup & button component ([f3c6237](https://github.com/dvcol/neo-svelte/commit/f3c62378bd29b950c77de1d4599c96432355d41a))
+* **button:** adds skeleton state ([c1bae7c](https://github.com/dvcol/neo-svelte/commit/c1bae7c23a5474bd4746e109a9963681b3019fd1))
+* **button:** adds support for anchor buttons ([6919204](https://github.com/dvcol/neo-svelte/commit/6919204bed54b9b93b8192f52e88e8bc0a653012))
+* **buttons:** adds shallow styling for buttons & tabs ([3bbb5d7](https://github.com/dvcol/neo-svelte/commit/3bbb5d79f6e9dc75930feff5c37608e9b58ae5cd))
+* **cards:** adds card segments ([c7eb3df](https://github.com/dvcol/neo-svelte/commit/c7eb3dfc7683b8c3c50544650361de690a3d0c0e))
+* **cards:** first commit about cards ([50496e4](https://github.com/dvcol/neo-svelte/commit/50496e4c5673f1346b4b06e47817be4aea1b65ce))
+* **card:** supports close button ([8d0bff1](https://github.com/dvcol/neo-svelte/commit/8d0bff16cf52e636429291fd45a1fed87c66e437))
+* **card:** supports horizontal view ([71699c3](https://github.com/dvcol/neo-svelte/commit/71699c32bd9d9b2613b113737dad665c4a5f5321))
+* **glass:** adds saturation ([aee2cd9](https://github.com/dvcol/neo-svelte/commit/aee2cd9462433be0296ba0dd754e6b6995a1725b))
+* **groups:** adds recessed style to groups & tabs ([98ce6dc](https://github.com/dvcol/neo-svelte/commit/98ce6dc0aeb52b5a5a0bafceb7407a0e51c957b9))
+* **input:** adds basic label support ([473b4c7](https://github.com/dvcol/neo-svelte/commit/473b4c79dc540caa74a69e419b6d869c8c283f28))
+* **input:** adds first draft of text area ([902d43c](https://github.com/dvcol/neo-svelte/commit/902d43ced6e7bafd2abded70595813f74e43900c))
+* **input:** adds text-area auto-resize ([c8892af](https://github.com/dvcol/neo-svelte/commit/c8892af1d861b103958739224433f0bb68014760))
+* **input:** adds text-area scrollbar ([0752d22](https://github.com/dvcol/neo-svelte/commit/0752d22d1204af900efa8f3ef701b77f58c07ba9))
+* **input:** initial commit for inputs ([df5f565](https://github.com/dvcol/neo-svelte/commit/df5f565271109187d53d21024bd19d888ba02544))
+* **input:** input password ([82abf80](https://github.com/dvcol/neo-svelte/commit/82abf8079a3c0f0b0ecbb9fb7cd930defcb40bce))
+* **input:** refactor validation ([9f5940a](https://github.com/dvcol/neo-svelte/commit/9f5940a6ddded79c04de2514e7067385374c400f))
+* **input:** standard inputs ([fc5df4a](https://github.com/dvcol/neo-svelte/commit/fc5df4afb7347aa780db6f228c71e0b9065ba426))
+* **input:** support validation ([b323288](https://github.com/dvcol/neo-svelte/commit/b3232889523429db24eca274198a1f3da323244b))
+* **input:** switch to translate instead of absolute ([32e117e](https://github.com/dvcol/neo-svelte/commit/32e117e9003ffe5b2ec1cc5a1ca1e9dc87fb0b65))
+* **package:** adds index & exports ([506fcea](https://github.com/dvcol/neo-svelte/commit/506fceaa9980f451af228cedb6baa1eb3a8ba3f2))
+* **provider:** adds theme provider & selector ([93f68e6](https://github.com/dvcol/neo-svelte/commit/93f68e65741fc257b96dce0ba1c5ae2f4c81d4d0))
+* **shadows:** adds light source origin ([6ea598c](https://github.com/dvcol/neo-svelte/commit/6ea598cae648411c6b1414d6188cbe630722f157))
+* **skeleton:** adds skeleton & various fixes ([96994a8](https://github.com/dvcol/neo-svelte/commit/96994a800f9dfb3cdd12d17374a2f112efd83953))
+* **style:** adds dark mode support ([b0a9422](https://github.com/dvcol/neo-svelte/commit/b0a942212a3db1a24e8c958de931912d93c8baf4))
+* **styles:** adds border loading & progress ([07b65c2](https://github.com/dvcol/neo-svelte/commit/07b65c20755f25370f04760576e32511440ae16c))
+* **TabBar:** adds slider animation ([1fd438a](https://github.com/dvcol/neo-svelte/commit/1fd438a3c86c5856e20d53f513624bf9e7c98e02))
+* **tabs:** adds animated tab card wrapper ([105202c](https://github.com/dvcol/neo-svelte/commit/105202c796d76f7fe8446aef85f7ddd7c48d3bda))
+* **tabs:** adds base tab bar component ([9864b86](https://github.com/dvcol/neo-svelte/commit/9864b86ce56df1ba4b225ce5714fd55cb73e8543))
+* **tabs:** adds pane to tabs ([0e6d0fa](https://github.com/dvcol/neo-svelte/commit/0e6d0fab0e120e3ae0acd1eb2aca33955296606e))
+* **theme:** adds light/dark theme toggle ([6a33674](https://github.com/dvcol/neo-svelte/commit/6a3367457bf42f9cfa6a70b4899895610f993ddc))
+
+
+### Bug Fixes
+
+* **a11y:** update aria dynamically ([a151753](https://github.com/dvcol/neo-svelte/commit/a151753d46a4828c307e110ceb3f2860b707d9fc))
+* **button:** remove border rotate ([03a6c14](https://github.com/dvcol/neo-svelte/commit/03a6c14440ff1fda1a4f63832b21cd0e21995aee))
+* **buttons:** fix line styling & rework action binding ([62b9544](https://github.com/dvcol/neo-svelte/commit/62b9544aab91581447c033f012e46547cb0b0e8c))
+* **card:** show close on hover & fix focus-visible color ([23026ee](https://github.com/dvcol/neo-svelte/commit/23026eeb90c3ecd51e93d4a1e767d43766abba73))
+* **css:** adjust css and switch to semantic tags ([b5d80d8](https://github.com/dvcol/neo-svelte/commit/b5d80d816dbb81dde1adc54cfe31759412c4d10e))
+* **elevation:** remove half steps ([4f9801e](https://github.com/dvcol/neo-svelte/commit/4f9801e31d22f17eb4b9e9f6a566e2079be6ba6a))
+* **input:** support floating positions labels ([f249aec](https://github.com/dvcol/neo-svelte/commit/f249aec28a8b134f6b777c00717f26e49fbaa590))
+* **lint:** fix various ts errors ([63c19e9](https://github.com/dvcol/neo-svelte/commit/63c19e9449b501893d98f5419c3fd5f3ee34ad6e))
+* **panes:** get animate state from context if not provided ([a2510a6](https://github.com/dvcol/neo-svelte/commit/a2510a659ecd7bc670c968fba255e51543fe0b46))
+* **spacing:** adjust margin and elevation ([45f0858](https://github.com/dvcol/neo-svelte/commit/45f0858492de4028c3d2b3bc33f2d078b1269a8b))
+* **spacing:** adjust shadow margin ([a1ea01f](https://github.com/dvcol/neo-svelte/commit/a1ea01fd677985c7eea7a94628df6bf28ad014d1))
+* **tabs:** adds flex override and nowrap ([02cfac5](https://github.com/dvcol/neo-svelte/commit/02cfac5839ca7c79989173338e72b04d23ccd3b6))

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Dinh-Van Colomban
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,89 @@
+# neo-svelte
+Neomorphic ui library for svelte 5
+
+## TODO
+- [ ] @media any-pointer:coarse any-hover:none
+- [x] Buttons
+- [x] Tabs
+- [x] Card
+- [x] Inputs
+  - [x] Password
+  - [ ] Color picker
+- [ ] numbers
+  - [ } digits
+  - [ ] range
+  - [ ] animation ?
+  - [ ] currency
+  - [ ] percentage
+  - [ ] phone
+  - [ ] credit card
+  - [ ] pin
+- [ ] slider
+  - [ ] range
+  - [ ] steps/ticks
+  - [ ] labels
+- [ ] file picker
+  - [ ] drag & drop ?
+  - [ ] progress ?
+  - [ ] multiple
+- [ ] select
+- [ ] Text Area
+  - [ ] lines
+  - [ ] auto-resize
+  - [ ] @ / # tags
+- [ ] time/date/week
+  - [ ] range
+- [ ] switch
+  - [ ] loading
+  - [ ] border loading
+  - [ ] skeleton
+  - [ ] checkbox
+  - [ ] checkbox (square & round)
+  - [ ] radio
+  - [ ] groups
+- [ ] auto-complete
+  - [ ] @ / # tags
+  - [ ] select
+  - [ ] multiple
+  - [ ] auto-complete
+    - [ ] @ / # tags
+
+- [ ] image
+  - [ ] videos
+  - [ ] carousel
+- [ ] avatar
+  - [ ] badge
+- [ ] tags/pills
+    - [ ] badge
+- [ ] Progress/Loading
+  - [ ] bar
+  - [ ] circle
+  - [ ] border
+  - [ ] background
+- [ ] accordion
+  - [ ] summary
+  - [ ] details (html semantic tags)
+
+- [ ] tooltip
+  - [ ] popconfirm
+  - [ ] popselect
+- [ ] text
+  - [ ] elevation
+  - [ ] elipsis
+
+- [ ] Alerts
+    - [ ] toast
+    - [ ] rich notification
+- [ ] Modal/dialog
+- [ ] drawer/panel
+    - [ ] collapsible
+    - [ ] position
+    - [ ] backdrop
+    - [ ] click outside
+- [ ] scrollbar ?
+- [ ] container
+  - [ ] transition
+  - [ ] split/resizable
+  - [ ] flex
+  - [ ] grid
+  - [ ] masonry ?

package/dist/assets/neo-icon-resizer-bottom-right.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="1em" height="1em" opacity="0.5" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21 15L15 21M21 8L8 21" stroke="#a49fa4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+

package/dist/buttons/NeoButton.svelte

@@ -0,0 +1,466 @@
+<script lang="ts">
+  import { width } from '@dvcol/svelte-utils/transition';
+
+  import type { NeoButtonProps } from './neo-button.model.js';
+
+  import IconCircleLoading from '../icons/IconCircleLoading.svelte';
+  import { toAction, toActionProps, toTransition, toTransitionProps } from '../utils/action.utils.js';
+  import { enterDefaultTransition } from '../utils/transition.utils.js';
+
+  /* eslint-disable prefer-const -- necessary for binding checked */
+  let {
+    // Snippets
+    children,
+    icon,
+
+    // States
+    ref = $bindable(),
+    tag,
+    href,
+    loading,
+    skeleton,
+    disabled,
+    empty: only,
+    toggle,
+    readonly,
+    checked = $bindable(false),
+
+    // Styles
+    borderless,
+    start,
+    text,
+    flat,
+    glass,
+    shallow,
+    rounded,
+    reverse,
+    coalesce,
+    pulse,
+
+    // Flex
+    justify,
+    align,
+    flex,
+
+    // Events
+    onchecked,
+    onclick,
+    onkeydown,
+    onkeyup,
+
+    // Transition
+    in: inAction,
+    out: outAction,
+    transition: transitionAction,
+
+    // Actions
+    use,
+
+    // Other props
+    ...rest
+  }: NeoButtonProps = $props();
+  /* eslint-enable prefer-const */
+
+  let enter = $state(false);
+  let active = $state(false);
+  const pressed = $derived(enter || active || checked);
+  const empty = $derived(only || !children);
+
+  let timeout: ReturnType<typeof setTimeout>;
+  const onActive = () => {
+    clearTimeout(timeout);
+    active = true;
+    timeout = setTimeout(() => {
+      active = false;
+    }, 150);
+  };
+
+  const onClick = (e: MouseEvent) => {
+    if (loading || disabled) return;
+    if (toggle) {
+      if (!readonly) checked = !checked;
+      onchecked?.(checked);
+      onclick?.(e, checked);
+      return;
+    }
+
+    onclick?.(e);
+    onActive();
+  };
+
+  const onKeydownEnter = (e: KeyboardEvent) => {
+    if (loading || disabled) return;
+    if (e.key === 'Enter') enter = true;
+    onkeydown?.(e);
+  };
+
+  const onKeyUpEnter = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') enter = false;
+    if (loading || disabled) return;
+    onkeyup?.(e);
+  };
+
+  const element = $derived(tag ?? (href ? 'a' : 'button'));
+  const role = $derived(!['button', 'a'].includes(element) ? 'button' : undefined);
+  const tabindex = $derived(!disabled && role ? 0 : undefined);
+
+  const inFn = $derived(toTransition(inAction ?? transitionAction));
+  const inProps = $derived(toTransitionProps(inAction ?? transitionAction));
+  const outFn = $derived(toTransition(outAction ?? transitionAction));
+  const outProps = $derived(toTransitionProps(outAction ?? transitionAction));
+
+  const useFn = $derived(toAction(use));
+  const useProps = $derived(toActionProps(use));
+</script>
+
+<svelte:element
+  this={element}
+  bind:this={ref}
+  {href}
+  {role}
+  {tabindex}
+  class:neo-button={true}
+  class:pulse
+  class:coalesce
+  class:pressed
+  class:loading
+  class:skeleton
+  class:start
+  class:glass
+  class:flat={flat || text}
+  class:borderless={borderless || text}
+  class:shallow
+  class:rounded
+  class:empty
+  style:justify-content={justify}
+  style:align-items={align}
+  style:flex
+  use:useFn={useProps}
+  out:outFn={outProps}
+  in:inFn={inProps}
+  onkeydown={onKeydownEnter}
+  onkeyup={onKeyUpEnter}
+  onclick={onClick}
+  disabled={disabled || skeleton}
+  {...rest}
+>
+  <span class="content" class:reverse>
+    {#if loading || icon}
+      <span class="icon" class:only={empty} transition:width={enterDefaultTransition}>
+        {#if loading}
+          <IconCircleLoading />
+        {:else}
+          {@render icon?.()}
+        {/if}
+      </span>
+    {/if}
+    {#if !empty}
+      {@render children?.()}
+    {/if}
+  </span>
+</svelte:element>
+
+<style>.neo-button.pulse::after, .neo-button.pulse::before, .neo-button.coalesce::after, .neo-button.coalesce::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: var(--neo-z-index-behind, -1);
+  display: flex;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  opacity: 0;
+  content: "";
+}
+
+.neo-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-height: calc(var(--neo-btn-min-height, var(--neo-line-height)) + 0.5rem);
+  margin: var(--neo-shadow-margin, 0.6rem);
+  padding: 0.25rem 0.75rem;
+  color: var(--neo-btn-text-color, inherit);
+  font: inherit;
+  text-decoration: inherit;
+  background-color: var(--neo-btn-bg-color, transparent);
+  border: var(--neo-border-width, 1px) var(--neo-btn-border-color, transparent) solid;
+  border-radius: var(--neo-btn-border-radius, var(--neo-border-radius));
+  box-shadow: var(--neo-box-shadow-raised-3);
+  cursor: pointer;
+  transition: opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease-out;
+}
+.neo-button.empty {
+  padding: 0.5rem;
+}
+.neo-button.loading {
+  cursor: wait;
+}
+.neo-button.borderless {
+  border-color: transparent !important;
+}
+.neo-button.flat, .neo-button.shallow {
+  --neo-coalesce-box-shadow: var(--neo-box-shadow-raised-2);
+  --neo-pulse-box-shadow: var(--neo-box-shadow-raised-2);
+}
+.neo-button.shallow {
+  --neo-coalesce-box-shadow-reverse: var(--neo-box-shadow-inset-1);
+  --neo-pulse-box-shadow-reverse: var(--neo-box-shadow-inset-1);
+}
+.neo-button:hover {
+  color: var(--neo-btn-text-color-hover, inherit);
+}
+.neo-button.glass {
+  background-color: var(--neo-btn-bg-color, var(--neo-glass-background-color));
+  box-shadow: var(--neo-glass-box-shadow-raised-3);
+  backdrop-filter: var(--neo-blur-4) var(--neo-saturate-2);
+}
+.neo-button.glass:focus-visible {
+  background-color: var(--neo-glass-background-color-focus);
+  box-shadow: var(--neo-glass-box-shadow-raised-2);
+}
+.neo-button.glass.pressed, .neo-button.glass:active {
+  box-shadow: var(--neo-glass-box-shadow-inset-3);
+  backdrop-filter: var(--neo-blur-2) var(--neo-saturate-3);
+}
+.neo-button.glass.pressed.shallow, .neo-button.glass:active.shallow {
+  box-shadow: var(--neo-glass-box-shadow-flat);
+}
+.neo-button.glass:not(:hover, :active, .neo-button.glass.pressed, .neo-button.glass.skeleton) {
+  border-color: var(--neo-btn-border-color, var(--neo-glass-top-border-color) var(--neo-glass-right-border-color) var(--neo-glass-bottom-border-color) var(--neo-glass-left-border-color));
+}
+.neo-button.glass.loading:active:not(.pressed), .neo-button.glass:hover:not(:active, .neo-button.glass.pressed) {
+  background-color: var(--neo-glass-background-color-hover);
+  border-color: var(--neo-btn-border-color-hover, var(--neo-glass-border-color-hover));
+  box-shadow: var(--neo-box-shadow-flat);
+  backdrop-filter: var(--neo-blur-3) var(--neo-saturate-2);
+}
+.neo-button.glass.loading:active:not(.pressed).shallow, .neo-button.glass:hover:not(:active, .neo-button.glass.pressed).shallow {
+  border-color: transparent;
+  box-shadow: var(--neo-glass-box-shadow-raised-2);
+}
+.neo-button.pressed, .neo-button:active {
+  color: var(--neo-btn-text-color-active, var(--neo-text-color-active));
+  box-shadow: var(--neo-box-shadow-inset-3);
+  transition: opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease, border-radius 0.3s ease, box-shadow 0.15s ease-out;
+}
+.neo-button.pressed.shallow, .neo-button:active.shallow {
+  box-shadow: var(--neo-box-shadow-flat);
+}
+.neo-button.pressed.shallow.flat, .neo-button:active.shallow.flat {
+  box-shadow: var(--neo-box-shadow-inset-2);
+}
+.neo-button.pressed.shallow:not(.flat, .glass, .loading), .neo-button:active.shallow:not(.flat, .glass, .loading) {
+  border-color: var(--neo-btn-border-color, var(--neo-border-color));
+}
+.neo-button:focus-visible {
+  color: var(--neo-btn-text-color-focused, var(--neo-text-color-focused));
+  outline: none;
+  transition: opacity 0.3s ease, color 0s, background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease, border-radius 0.3s ease, box-shadow 0.15s ease-out;
+}
+.neo-button:focus-visible:hover {
+  color: var(--neo-btn-text-color-focused-hover, var(--neo-text-color-focused));
+}
+.neo-button:focus-visible.pressed, .neo-button:focus-visible:active {
+  color: var(--neo-btn-text-color-focused-active, var(--neo-text-color-focused-active));
+}
+.neo-button:focus-visible:not(.pressed, :active) {
+  box-shadow: var(--neo-box-shadow-raised-2);
+}
+.flat:not(:active, :hover, .neo-button.pressed):focus-visible {
+  border-color: var(--neo-btn-border-color-focused, var(--neo-border-color-focused));
+}
+@starting-style {
+  .neo-button.start {
+    box-shadow: var(--neo-box-shadow-flat);
+  }
+  .neo-button.start:not(.borderless, .glass) {
+    border-color: var(--neo-btn-border-color, var(--neo-border-color));
+  }
+}
+.neo-button:disabled:not(.skeleton), .neo-button[disabled]:not([disabled=false], .skeleton) {
+  color: var(--neo-btn-text-color-disabled, var(--neo-text-color-disabled)) !important;
+  cursor: not-allowed;
+  opacity: var(--neo-btn-opacity-disabled, var(--neo-opacity-disabled));
+}
+.neo-button:disabled:not(.skeleton):not(.pressed), .neo-button[disabled]:not([disabled=false], .skeleton):not(.pressed) {
+  box-shadow: var(--neo-box-shadow-flat);
+}
+.neo-button:disabled:not(.skeleton):not(.borderless), .neo-button[disabled]:not([disabled=false], .skeleton):not(.borderless) {
+  border-color: var(--neo-btn-border-color-disabled, var(--neo-border-color-disabled)) !important;
+}
+.neo-button:disabled:not(.skeleton)::after, .neo-button:disabled:not(.skeleton)::before, .neo-button[disabled]:not([disabled=false], .skeleton)::after, .neo-button[disabled]:not([disabled=false], .skeleton)::before {
+  box-shadow: none;
+  animation-play-state: paused;
+}
+.neo-button.flat:not(:active, .neo-button.pressed), .neo-button.loading:active:not(.pressed), .neo-button:hover:not(:active, .neo-button.pressed) {
+  box-shadow: var(--neo-box-shadow-flat);
+}
+.neo-button.flat:not(:active, .neo-button.pressed):not(.glass, .borderless, .flat:hover, .flat:focus-visible, .shallow:not(.flat)), .neo-button.loading:active:not(.pressed):not(.glass, .borderless, .flat:hover, .flat:focus-visible, .shallow:not(.flat)), .neo-button:hover:not(:active, .neo-button.pressed):not(.glass, .borderless, .flat:hover, .flat:focus-visible, .shallow:not(.flat)) {
+  border-color: var(--neo-btn-border-color-hover, var(--neo-border-color));
+}
+.neo-button.flat:not(:active, .neo-button.pressed).shallow:not(.flat, .glass), .neo-button.loading:active:not(.pressed).shallow:not(.flat, .glass), .neo-button:hover:not(:active, .neo-button.pressed).shallow:not(.flat, .glass) {
+  box-shadow: var(--neo-box-shadow-raised-2);
+}
+.neo-button.flat.loading:active:not(.pressed), .neo-button.flat:hover:not(:active, .neo-button.pressed) {
+  box-shadow: var(--neo-box-shadow-inset-2);
+}
+.neo-button.flat.loading:active:not(.pressed).shallow, .neo-button.flat:hover:not(:active, .neo-button.pressed).shallow {
+  box-shadow: var(--neo-box-shadow-inset-1);
+}
+.neo-button.skeleton {
+  box-shadow: var(--neo-box-shadow-flat) !important;
+  pointer-events: none;
+  --neo-skeleton-color-start: var(--neo-skeleton-color);
+  --neo-skeleton-color-end: oklch(from var(--neo-skeleton-color) calc(l - var(--neo-skeleton-color-step, 0.05)) c h);
+  color: var(--neo-skeleton-color-start);
+  background-color: var(--neo-skeleton-color-start);
+  border-color: var(--neo-skeleton-color-start);
+  transition: background-color 1s ease, color 1s ease, border-color 1s ease;
+  animation: skeleton 3s var(--neo-transition-skeleton) infinite;
+  animation-delay: 1s;
+}
+.neo-button.skeleton::before, .neo-button.skeleton::after,
+.neo-button.skeleton :global(> *::before),
+.neo-button.skeleton :global(> *::after),
+.neo-button.skeleton :global(> *) {
+  visibility: hidden;
+  pointer-events: none;
+}
+@keyframes skeleton {
+  0% {
+    color: var(--neo-skeleton-color-start);
+    background-color: var(--neo-skeleton-color-start);
+    border-color: var(--neo-skeleton-color-start);
+  }
+  40% {
+    color: var(--neo-skeleton-color-end);
+    background-color: var(--neo-skeleton-color-end);
+    border-color: var(--neo-skeleton-color-end);
+  }
+  80% {
+    color: var(--neo-skeleton-color-start);
+    background-color: var(--neo-skeleton-color-start);
+    border-color: var(--neo-skeleton-color-start);
+  }
+  100% {
+    color: var(--neo-skeleton-color-start);
+    background-color: var(--neo-skeleton-color-start);
+    border-color: var(--neo-skeleton-color-start);
+  }
+}
+.neo-button.skeleton.glass {
+  --neo-skeleton-color: var(--neo-glass-skeleton-color);
+}
+.neo-button.rounded {
+  border-radius: var(--neo-btn-border-radius-rounded, var(--neo-border-radius-lg));
+}
+.neo-button.pulse {
+  position: relative;
+}
+.neo-button.pulse::after, .neo-button.pulse::before {
+  box-shadow: var(--neo-pulse-box-shadow, var(--neo-box-shadow-raised-3));
+  will-change: transform, opacity;
+}
+.neo-button.pulse::before {
+  animation: pulse var(--neo-pulse-duration, 6s) linear var(--neo-pulse-delay, 1s) infinite;
+}
+.neo-button.pulse::after {
+  animation: pulse var(--neo-pulse-duration, 6s) linear calc(var(--neo-pulse-delay, 1s) + var(--neo-pulse-interval, 3s)) infinite;
+}
+.neo-button.pulse.pressed::after, .neo-button.pulse.pressed::before, .neo-button.pulse:focus-visible::after, .neo-button.pulse:focus-visible::before, .neo-button.pulse:hover::after, .neo-button.pulse:hover::before, .neo-button.pulse:active::after, .neo-button.pulse:active::before {
+  box-shadow: var(--neo-pulse-box-shadow-reverse, var(--neo-box-shadow-inset-2));
+  animation-name: coalesce;
+  animation-timing-function: ease-out;
+}
+@keyframes pulse {
+  0% {
+    transform: scaleX(1) scaleY(1);
+    opacity: 0;
+  }
+  25% {
+    opacity: 1;
+  }
+  100% {
+    transform: scaleX(var(--neo-pulse-scale-x, 2)) scaleY(var(--neo-pulse-scale-y, 2));
+    opacity: 0;
+  }
+}
+@keyframes coalesce {
+  0% {
+    transform: scaleX(var(--neo-pulse-scale-x, 2)) scaleY(var(--neo-pulse-scale-y, 2));
+    opacity: 0;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+.neo-button.coalesce {
+  position: relative;
+}
+.neo-button.coalesce::after, .neo-button.coalesce::before {
+  box-shadow: var(--neo-coalesce-box-shadow, var(--neo-box-shadow-raised-3));
+  will-change: transform, opacity;
+}
+.neo-button.coalesce::before {
+  animation: coalesce var(--neo-coalesce-duration, 6s) ease-out var(--neo-coalesce-delay, 1s) infinite;
+}
+.neo-button.coalesce::after {
+  animation: coalesce var(--neo-coalesce-duration, 6s) ease-out calc(var(--neo-coalesce-delay, 1s) + var(--neo-coalesce-interval, 3s)) infinite;
+}
+.neo-button.coalesce.pressed::after, .neo-button.coalesce.pressed::before, .neo-button.coalesce:focus-visible::after, .neo-button.coalesce:focus-visible::before, .neo-button.coalesce:hover::after, .neo-button.coalesce:hover::before, .neo-button.coalesce:active::after, .neo-button.coalesce:active::before {
+  box-shadow: var(--neo-coalesce-box-shadow-reverse, var(--neo-box-shadow-inset-2));
+  animation-name: pulse;
+  animation-timing-function: linear;
+}
+@keyframes pulse {
+  0% {
+    transform: scaleX(1) scaleY(1);
+    opacity: 0;
+  }
+  25% {
+    opacity: 1;
+  }
+  100% {
+    transform: scaleX(var(--neo-coalesce-scale-x, 2)) scaleY(var(--neo-coalesce-scale-y, 2));
+    opacity: 0;
+  }
+}
+@keyframes coalesce {
+  0% {
+    transform: scaleX(var(--neo-coalesce-scale-x, 2)) scaleY(var(--neo-coalesce-scale-y, 2));
+    opacity: 0;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+.neo-button .icon,
+.neo-button .content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.neo-button .content {
+  height: 100%;
+}
+.neo-button .content .icon:not(.only) {
+  margin-right: var(--neo-btn-icon-gap, 0.35rem);
+  margin-left: var(--neo-btn-icon-offset, calc(0.25rem - var(--neo-btn-icon-gap, 0.35rem)));
+}
+.neo-button .content.reverse {
+  flex-direction: row-reverse;
+}
+.neo-button .content.reverse .icon:not(.only) {
+  margin-right: var(--neo-btn-icon-offset, calc(0.25rem - var(--neo-btn-icon-gap, 0.35rem)));
+  margin-left: var(--neo-btn-icon-gap, 0.35rem);
+}</style>

package/dist/buttons/NeoButton.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { NeoButtonProps } from './neo-button.model.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NeoButton: $$__sveltets_2_IsomorphicComponent<NeoButtonProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref" | "checked">;
+type NeoButton = InstanceType<typeof NeoButton>;
+export default NeoButton;