@dvcol/neo-svelte 0.1.3 → 0.1.4

package/CHANGELOG.md

@@ -2,6 +2,81 @@
 
 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.4](https://github.com/dvcol/neo-svelte/compare/v0.1.3...v0.1.4) (2024-12-31)
+
+
+### Features
+
+* **affix:** refactor affix in standalone ([a5574a1](https://github.com/dvcol/neo-svelte/commit/a5574a1b7d0e8340f4ed5dee8cb0397c70165c88))
+* **input:** adds affix to pin ([4f8d9ba](https://github.com/dvcol/neo-svelte/commit/4f8d9babfdd27c9205474f8860e876d027724e59))
+* **input:** adds checkbox input ([c530603](https://github.com/dvcol/neo-svelte/commit/c530603c1ddd833c16b909ee30a0328e69870a04))
+* **input:** adds date-time input ([c170a51](https://github.com/dvcol/neo-svelte/commit/c170a513fd577e75e121843493ac0b12774aee02))
+* **input:** adds drop append for file picker ([fc4b65d](https://github.com/dvcol/neo-svelte/commit/fc4b65d5f3e9132b33930880ba4d68e9ff26331a))
+* **input:** adds expanded files input view ([6576cc8](https://github.com/dvcol/neo-svelte/commit/6576cc868a58324cd7b121a9740517a65280fe05))
+* **input:** adds first draft of pin input ([12cda19](https://github.com/dvcol/neo-svelte/commit/12cda1924250d66b4c47f07b90c8bc69c2c6d96d))
+* **input:** adds flat styles for range ([f5c9f1e](https://github.com/dvcol/neo-svelte/commit/f5c9f1ebdd168f00bc8b01f66cae521c2b06d649))
+* **input:** adds pin labels ([d3651b9](https://github.com/dvcol/neo-svelte/commit/d3651b9b36e702a4728ec80afb58e0a7435470c2))
+* **input:** adds pin password ([2096c45](https://github.com/dvcol/neo-svelte/commit/2096c45712fee3611aa85111591c70ee3fad819e))
+* **input:** adds pin validity check ([cf1452d](https://github.com/dvcol/neo-svelte/commit/cf1452de9211b359d05db7384390b3727f299391))
+* **input:** adds radio input ([1e05949](https://github.com/dvcol/neo-svelte/commit/1e05949a5f80f8ef971f04dbf19d972e17205053))
+* **input:** adds styled number input ([999e90b](https://github.com/dvcol/neo-svelte/commit/999e90b0e76a2f5a6d2d066806469d6786764118))
+* **input:** adds switch ([99bc099](https://github.com/dvcol/neo-svelte/commit/99bc09968871fba1503116ba69af7d98e57d6dd7))
+* **input:** adds validation to expanded file picker ([e6d9a8c](https://github.com/dvcol/neo-svelte/commit/e6d9a8c7d3d79cafcb49433c0a8883346f22f298))
+* **input:** drag & drop file base logic ([9ea5d68](https://github.com/dvcol/neo-svelte/commit/9ea5d6840783c51913e34cf7ff0c48ebb0f9c549))
+* **input:** drag & drop support for default file view ([251cf35](https://github.com/dvcol/neo-svelte/commit/251cf3510471834bf8ed6f94df3ce5f22a50cac9))
+* **input:** first draft range input ([c4509e0](https://github.com/dvcol/neo-svelte/commit/c4509e02b2cc8d806496d581552e951f378b4102))
+* **input:** inset dropzone on drag hover ([ce9311d](https://github.com/dvcol/neo-svelte/commit/ce9311d5ea736cfcaa08d3631c561c8e79e457a8))
+* **inputs:** merge neo-button override within inputs ([5d8b5e4](https://github.com/dvcol/neo-svelte/commit/5d8b5e4869a23da5ae9fafd54acc30fb8c071d5d))
+* **input:** split expanded input into dedicated component ([d4cdfb2](https://github.com/dvcol/neo-svelte/commit/d4cdfb2041a1947687df56e07028b23d1ec649c2))
+* **input:** supports double range ([e1a17e5](https://github.com/dvcol/neo-svelte/commit/e1a17e5d9e6e1a5036f9e4f5a3c3a87b3c96699e))
+* **input:** wip file picker ([deba9d8](https://github.com/dvcol/neo-svelte/commit/deba9d827e3441e5b4e50f402fa71dbc99ab6acd))
+* **shadows:** adds convex & pressed ([52a6748](https://github.com/dvcol/neo-svelte/commit/52a67487bcb4720298bba375c65d01fd64c029db))
+* **shadows:** adds pressed to inputs & cards ([57e8ad0](https://github.com/dvcol/neo-svelte/commit/57e8ad0fc84ac67dda0121b9f078168e8decab6d))
+
+
+### Bug Fixes
+
+* **affix:** adjust styling and include disable ([a410944](https://github.com/dvcol/neo-svelte/commit/a41094427d3b8ca238535730cb887a4ca6401f2b))
+* **affix:** move inputs to refactored affix ([7549b97](https://github.com/dvcol/neo-svelte/commit/7549b97dc0931c05822a9544b31fdda3173ee80c))
+* **button:** rework button styling ([822518a](https://github.com/dvcol/neo-svelte/commit/822518ad9bccb0a9e933e2c54ae9b2b4ae9c29d4))
+* **buttons:** fix flat border in glass mode ([13bda34](https://github.com/dvcol/neo-svelte/commit/13bda348e860566e33e362119e9fa26394df5172))
+* **elevation:** change pressed default elevation ([aae3eab](https://github.com/dvcol/neo-svelte/commit/aae3eab314923da2a8a64d0a22e7ed8f4f920c62))
+* **flex:** change inputs to inline-flex ([668acb8](https://github.com/dvcol/neo-svelte/commit/668acb8dff879ecf176fdad529b566f6f50e1e5e))
+* **glass:** fix glass shadows and filters ([8f790cd](https://github.com/dvcol/neo-svelte/commit/8f790cd63a564ef8f48c3d0a75cffb26c19c2344))
+* **group:** rework group to use elevation ([2301b64](https://github.com/dvcol/neo-svelte/commit/2301b64053acf65c459deb6271af0055f5f5295d))
+* **groups:** remove shallow & inset ([4171224](https://github.com/dvcol/neo-svelte/commit/417122407c40cf4181a1523b3e740f02cac9cb34))
+* **icon:** adds scaling option to icons ([8822a60](https://github.com/dvcol/neo-svelte/commit/8822a6016d6a7a99aa7444db7437656294f668e4))
+* **input:** add missing context to file picker & type value ([fcc56d8](https://github.com/dvcol/neo-svelte/commit/fcc56d81d5909a7ca3bfee6b8f5cec07f785723c))
+* **input:** adds colour picker ([a5f41e9](https://github.com/dvcol/neo-svelte/commit/a5f41e96fb7d626e949cbadd5442241a9fb7c0ea))
+* **input:** adds disable state to file picker ([ebcc1c9](https://github.com/dvcol/neo-svelte/commit/ebcc1c94e914c2e36320fb78c928d274a8236da2))
+* **input:** adds skeleton to affix & buttons ([fa8ab3f](https://github.com/dvcol/neo-svelte/commit/fa8ab3fb722c21c39d57ed931daea9b3e0545b68))
+* **input:** adds transition to number ([34e5d82](https://github.com/dvcol/neo-svelte/commit/34e5d82b5a461009975b6c2f2ec52dcb6d02bfcb))
+* **input:** adjust ios color picker & fix file validation ([aab6462](https://github.com/dvcol/neo-svelte/commit/aab64621910f6a43ed2d7014cbdf92a81fabc0ee))
+* **input:** adjust styles to support extra long labels ([b433d07](https://github.com/dvcol/neo-svelte/commit/b433d07ab18e7c5f9cf842d6f554034f0697a03d))
+* **input:** adjust styling for ios Safari ([c3e85b3](https://github.com/dvcol/neo-svelte/commit/c3e85b388b2b6cc2a4a439c0fd88427977f756d1))
+* **input:** adjust various css styling in inputs ([21d2653](https://github.com/dvcol/neo-svelte/commit/21d2653147d7341650ec0a43a3e8a84ab44fffda))
+* **input:** await tick before clearing state ([9bd0045](https://github.com/dvcol/neo-svelte/commit/9bd0045638b4300827a6f74f0e4a19807e774418))
+* **input:** clean up styles ([b1ba008](https://github.com/dvcol/neo-svelte/commit/b1ba0082276761185753a1cddea327c0662ba393))
+* **input:** de-correlate toggle width from spacing ([04dd1c8](https://github.com/dvcol/neo-svelte/commit/04dd1c853e5393d0e776ad71e619692de7ffdf59))
+* **input:** emit input event on clear ([cf8731b](https://github.com/dvcol/neo-svelte/commit/cf8731bb181b92ad4aa5fc9050ea146a3a9854b3))
+* **input:** expose container props as group props ([18415bc](https://github.com/dvcol/neo-svelte/commit/18415bce8f19b34e01001f857ad71f563bdbb3f6))
+* **input:** fix flat styles for switch ([4f04bcf](https://github.com/dvcol/neo-svelte/commit/4f04bcf9de82b022644c22f4ff2aef3d4b25c488))
+* **input:** fix styling with prefix & floating ([241a809](https://github.com/dvcol/neo-svelte/commit/241a80928942e2f61df95b83abf2bb3200b48724))
+* **input:** incorrect floating condition ([6a1938a](https://github.com/dvcol/neo-svelte/commit/6a1938af3a365a45d661ffe9dad446106d923fd8))
+* **input:** make checkbox elevation customizable ([a334e40](https://github.com/dvcol/neo-svelte/commit/a334e40ed704e662eb1c1a5242ee7effc52047f6))
+* **input:** override neo-button in textarea after ([4d9c1c9](https://github.com/dvcol/neo-svelte/commit/4d9c1c9ca0c15352ac164ad97b6b8878f402c2e1))
+* **input:** simplify fallback logic ([005ad27](https://github.com/dvcol/neo-svelte/commit/005ad273d1f6ef20ac1264eb17876538a4c63431))
+* **inputs:** update styling on icons & sizing ([b3353d8](https://github.com/dvcol/neo-svelte/commit/b3353d8190a5fbb65b88eeb8ef03e963fd4cbd65))
+* **input:** switch uses absolute positioning instead of width ([5be7a16](https://github.com/dvcol/neo-svelte/commit/5be7a16d4bba5dfffa6b4c15219517ac46644232))
+* **input:** trigger picker on mobile & fix styling ([6838137](https://github.com/dvcol/neo-svelte/commit/6838137fd734514ca6753fa3c94af6d8571ed4bd))
+* **input:** update state on blue by default ([3517bae](https://github.com/dvcol/neo-svelte/commit/3517baea9fab7635bf3be8e8cb7455dce95c6487))
+* **input:** update validity on input number increment ([7a73cf2](https://github.com/dvcol/neo-svelte/commit/7a73cf2b9f3d9ee0d61c1c97d86a9cd95093a161))
+* **mixin:** add transparent mask to border rotate & progress ([d7cb224](https://github.com/dvcol/neo-svelte/commit/d7cb2246c43bbb643c464e510973b2dcd18f836e))
+* **nav:** move to elevation & adds pressed/convex ([9354c3b](https://github.com/dvcol/neo-svelte/commit/9354c3b91b258c7538da5b761c4ff41f6663772c))
+* **styling:** adjust spacing to round pixels ([19caae1](https://github.com/dvcol/neo-svelte/commit/19caae1936116b909582ff7a4adae4a366f34951))
+* **theme:** adjust glass color theme ([00c0817](https://github.com/dvcol/neo-svelte/commit/00c0817ce5930b368197f3976047fca8f728d21f))
+* **theme:** rework glass colors & theme provider styles ([dcb0257](https://github.com/dvcol/neo-svelte/commit/dcb025713be14fd80d72348b28904b464da2c5ce))
+
 ### [0.1.3](https://github.com/dvcol/neo-svelte/compare/v0.1.2...v0.1.3) (2024-11-25)
 
 

package/README.md

@@ -8,39 +8,34 @@ Neomorphic ui library for svelte 5
 - [x] Card
 - [x] Inputs
   - [x] Password
-  - [ ] Color picker
-- [ ] numbers
-  - [ } digits
+  - [x] Pin
+  - [x] Color picker
+  - [x] checkbox
+  - [x] radio
+- [x] Text Area
+  - [ ] @ / # tags
+- [x] file picker
+  - [x] drag & drop
+  - [x] multiple
+- [x] numbers
+  - [x] digits
   - [ ] range
-  - [ ] animation ?
-  - [ ] currency
-  - [ ] percentage
   - [ ] phone
   - [ ] credit card
-  - [ ] pin
+  - [x] pin
+- [x] time/date/week
+  - [ ] range
+- [x] switch
 - [ ] slider
   - [ ] range
+  - [ ] inset
+  - [ ] before - after stepper
+  - [ ] custom before-after
   - [ ] 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
+- [ ] table
+- [ ] pagination
 - [ ] auto-complete
   - [ ] @ / # tags
   - [ ] select
@@ -82,8 +77,12 @@ Neomorphic ui library for svelte 5
     - [ ] click outside
 - [ ] scrollbar ?
 - [ ] container
-  - [ ] transition
+  - [x] transition
   - [ ] split/resizable
   - [ ] flex
   - [ ] grid
   - [ ] masonry ?
+
+
+# TODO (work in progress)
+

package/dist/buttons/NeoButton.svelte

@@ -26,13 +26,12 @@
     checked = $bindable(false),
 
     // Styles
-    borderless,
     start,
     text,
     flat,
     glass,
-    shallow,
     rounded,
+    inset,
     reverse,
     coalesce,
     pulse,
@@ -75,7 +74,7 @@
     }, 150);
   };
 
-  const onClick = (e: MouseEvent) => {
+  const onClick: NeoButtonProps['onclick'] = e => {
     if (loading || disabled) return;
     if (toggle) {
       if (!readonly) checked = !checked;
@@ -88,13 +87,13 @@
     onActive();
   };
 
-  const onKeydownEnter = (e: KeyboardEvent) => {
+  const onKeydownEnter: NeoButtonProps['onkeydown'] = e => {
     if (loading || disabled) return;
     if (e.key === 'Enter') enter = true;
     onkeydown?.(e);
   };
 
-  const onKeyUpEnter = (e: KeyboardEvent) => {
+  const onKeyUpEnter: NeoButtonProps['onkeydown'] = e => {
     if (e.key === 'Enter') enter = false;
     if (loading || disabled) return;
     onkeyup?.(e);
@@ -120,18 +119,19 @@
   {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
+  class:neo-pulse={pulse}
+  class:neo-coalesce={coalesce}
+  class:neo-pressed={pressed}
+  class:neo-toggle={toggle}
+  class:neo-loading={loading}
+  class:neo-skeleton={skeleton}
+  class:neo-start={start}
+  class:neo-glass={glass}
+  class:neo-flat={flat || text}
+  class:neo-borderless={text}
+  class:neo-inset={inset}
+  class:neo-rounded={rounded}
+  class:neo-empty={empty}
   style:justify-content={justify}
   style:align-items={align}
   style:flex
@@ -144,9 +144,9 @@
   disabled={disabled || skeleton}
   {...rest}
 >
-  <span class="content" class:reverse>
+  <span class="neo-content" class:neo-reverse={reverse}>
     {#if loading || icon}
-      <span class="icon" class:only={empty} transition:width={enterDefaultTransition}>
+      <span class="neo-icon" class:neo-only={empty} transition:width={enterDefaultTransition}>
         {#if loading}
           <IconCircleLoading />
         {:else}
@@ -160,7 +160,7 @@
   </span>
 </svelte:element>
 
-<style>.neo-button.pulse::after, .neo-button.pulse::before, .neo-button.coalesce::after, .neo-button.coalesce::before {
+<style>.neo-button.neo-pulse::after, .neo-button.neo-pulse::before, .neo-button.neo-coalesce::after, .neo-button.neo-coalesce::before {
   position: absolute;
   top: 0;
   left: 0;
@@ -178,138 +178,153 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
+  min-width: var(--neo-btn-min-width);
   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;
+  margin: var(--neo-btn-margin, var(--neo-shadow-margin, 0.625rem));
+  padding: var(--neo-btn-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);
+  box-shadow: var(--neo-btn-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.neo-empty {
+  padding: var(--neo-btn-padding-empty, 0.5rem);
 }
-.neo-button.loading {
+.neo-button.neo-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.neo-inset {
+  --neo-box-shadow-pressed-2: var(--neo-box-shadow-inset-2);
+  --neo-glass-box-shadow-pressed-2: var(--neo-glass-box-shadow-inset-2);
 }
 .neo-button:hover {
   color: var(--neo-btn-text-color-hover, inherit);
+  box-shadow: var(--neo-btn-box-shadow-hover, var(--neo-box-shadow-raised-2));
 }
-.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.neo-pressed, .neo-button:active:not(.neo-loading) {
+  color: var(--neo-btn-text-color-active, var(--neo-text-color-active));
+  box-shadow: var(--neo-btn-box-shadow-active, var(--neo-box-shadow-pressed-2));
+  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.glass:focus-visible {
-  background-color: var(--neo-glass-background-color-focus);
-  box-shadow: var(--neo-glass-box-shadow-raised-2);
+.neo-button:focus-visible {
+  color: var(--neo-btn-text-color-focused, var(--neo-text-color-focused));
+  outline: none;
+  box-shadow: var(--neo-btn-box-shadow-focus, var(--neo-box-shadow-raised-2));
+  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.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:focus-visible:hover {
+  color: var(--neo-btn-text-color-focused-hover, var(--neo-text-color-focused));
 }
-.neo-button.glass.pressed.shallow, .neo-button.glass:active.shallow {
-  box-shadow: var(--neo-glass-box-shadow-flat);
+.neo-button:focus-visible.neo-pressed, .neo-button:focus-visible:active:not(.neo-loading) {
+  color: var(--neo-btn-text-color-focused-active, var(--neo-text-color-focused-active));
+  box-shadow: var(--neo-btn-box-shadow-focus-active, var(--neo-box-shadow-pressed-2));
 }
-.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.neo-borderless {
+  border-color: transparent !important;
 }
-.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));
+.neo-button.neo-flat {
+  --neo-coalesce-box-shadow: var(--neo-box-shadow-raised-2);
+  --neo-pulse-box-shadow: var(--neo-box-shadow-raised-2);
+  margin: var(--neo-btn-margin, 0);
+  border-color: var(--neo-btn-border-color, var(--neo-border-color));
   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.neo-flat:focus-visible {
+  border-color: var(--neo-btn-border-color-focused, var(--neo-border-color-focused));
 }
-.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.neo-flat:hover {
+  border-color: transparent;
+  box-shadow: var(--neo-btn-box-shadow-hover-flat, var(--neo-box-shadow-inset-1));
 }
-.neo-button.pressed.shallow, .neo-button:active.shallow {
-  box-shadow: var(--neo-box-shadow-flat);
+.neo-button.neo-flat.neo-pressed, .neo-button.neo-flat:active:not(.neo-loading) {
+  border-color: transparent;
+  box-shadow: var(--neo-btn-box-shadow-active-flat, var(--neo-box-shadow-inset-3));
+}
+.neo-button.neo-flat.neo-pressed.neo-toggle, .neo-button.neo-flat:active:not(.neo-loading).neo-toggle {
+  box-shadow: var(--neo-btn-box-shadow-active-flat-toggle, var(--neo-box-shadow-inset-3));
+}
+.neo-button.neo-glass {
+  /** Box Shadows raised */
+  --neo-box-shadow-raised-5: var(--neo-glass-box-shadow-raised-5);
+  --neo-box-shadow-raised-4: var(--neo-glass-box-shadow-raised-4);
+  --neo-box-shadow-raised-3: var(--neo-glass-box-shadow-raised-3);
+  --neo-box-shadow-raised-2: var(--neo-glass-box-shadow-raised-2);
+  --neo-box-shadow-raised-1: var(--neo-glass-box-shadow-raised-1);
+  /** Box Shadows inset */
+  --neo-box-shadow-inset-1: var(--neo-glass-box-shadow-inset-1);
+  --neo-box-shadow-inset-2: var(--neo-glass-box-shadow-inset-2);
+  --neo-box-shadow-inset-3: var(--neo-glass-box-shadow-inset-3);
+  --neo-box-shadow-inset-4: var(--neo-glass-box-shadow-inset-4);
+  --neo-box-shadow-inset-5: var(--neo-glass-box-shadow-inset-5);
+  /** Box Shadows pressed */
+  --neo-box-shadow-pressed-1: var(--neo-glass-box-shadow-pressed-1);
+  --neo-box-shadow-pressed-2: var(--neo-glass-box-shadow-pressed-2);
+  --neo-box-shadow-pressed-3: var(--neo-glass-box-shadow-pressed-3);
+  --neo-box-shadow-pressed-4: var(--neo-glass-box-shadow-pressed-4);
+  --neo-box-shadow-pressed-5: var(--neo-glass-box-shadow-pressed-5);
+  /** Box Shadows convex */
+  --neo-box-shadow-convex-1: var(--neo-glass-box-shadow-convex-1);
+  --neo-box-shadow-convex-2: var(--neo-glass-box-shadow-convex-2);
+  --neo-box-shadow-convex-3: var(--neo-glass-box-shadow-convex-3);
+  --neo-box-shadow-convex-4: var(--neo-glass-box-shadow-convex-4);
+  --neo-box-shadow-convex-5: var(--neo-glass-box-shadow-convex-5);
+  /** Skeleton color */
+  --neo-skeleton-color: var(--neo-glass-skeleton-color);
+  background-color: var(--neo-btn-bg-color, var(--neo-glass-background-color));
+  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));
+  backdrop-filter: var(--neo-btn-backdrop-filter, var(--neo-blur-2) var(--neo-saturate-3));
 }
-.neo-button.pressed.shallow.flat, .neo-button:active.shallow.flat {
-  box-shadow: var(--neo-box-shadow-inset-2);
+.neo-button.neo-glass:focus-visible {
+  background-color: var(--neo-btn-bg-color, var(--neo-glass-background-color-focus));
+  backdrop-filter: var(--neo-btn-backdrop-filter-focus, var(--neo-blur-1) var(--neo-saturate-3));
 }
-.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.neo-glass:hover {
+  background-color: var(--neo-btn-bg-color, var(--neo-glass-background-color-hover));
+  backdrop-filter: var(--neo-btn-backdrop-filter-hover, var(--neo-blur-1) var(--neo-saturate-2));
 }
-.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.neo-glass.neo-pressed, .neo-button.neo-glass:active:not(.neo-loading) {
+  backdrop-filter: var(--neo-btn-backdrop-filter-active, var(--neo-blur-0) var(--neo-saturate-2));
 }
-.neo-button:focus-visible:hover {
-  color: var(--neo-btn-text-color-focused-hover, var(--neo-text-color-focused));
+.neo-button.neo-glass:disabled, .neo-button.neo-glass[disabled]:not([disabled=false]) {
+  backdrop-filter: var(--neo-btn-backdrop-filter-disabled, var(--neo-blur-1));
 }
-.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.neo-glass.neo-inset:hover:not(.neo-button.neo-glass.neo-inset.neo-pressed, .neo-button.neo-glass.neo-inset:active:not(.neo-loading), .neo-button.neo-glass.neo-inset:disabled, .neo-button.neo-glass.neo-inset[disabled]:not([disabled=false])) {
+  border-color: var(--neo-btn-border-color-hover, var(--neo-glass-border-color-hover));
+  box-shadow: var(--neo-box-shadow-flat);
 }
-.neo-button:focus-visible:not(.pressed, :active) {
-  box-shadow: var(--neo-box-shadow-raised-2);
+.neo-button.neo-glass.neo-inset.neo-pressed, .neo-button.neo-glass.neo-inset:active:not(.neo-loading) {
+  border-color: transparent;
 }
-.flat:not(:active, :hover, .neo-button.pressed):focus-visible {
-  border-color: var(--neo-btn-border-color-focused, var(--neo-border-color-focused));
+.neo-button.neo-glass.neo-flat {
+  border-color: var(--neo-btn-border-color, var(--neo-glass-border-color));
 }
 @starting-style {
-  .neo-button.start {
+  .neo-button.neo-start {
     box-shadow: var(--neo-box-shadow-flat);
   }
-  .neo-button.start:not(.borderless, .glass) {
+  .neo-button.neo-start:not(.neo-borderless, .neo-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;
+.neo-button:disabled:disabled, .neo-button[disabled]:not([disabled=false]) {
+  color: var(--neo-btn-text-color-disabled, var(--neo-text-color-disabled));
   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) {
+.neo-button:disabled:disabled:not(.neo-pressed), .neo-button[disabled]:not([disabled=false]):not(.neo-pressed) {
+  border-color: var(--neo-btn-border-color-disabled, var(--neo-border-color-disabled));
   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 {
+.neo-button:disabled:disabled::after, .neo-button:disabled:disabled::before, .neo-button[disabled]:not([disabled=false])::after, .neo-button[disabled]:not([disabled=false])::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 {
+.neo-button.neo-skeleton {
   box-shadow: var(--neo-box-shadow-flat) !important;
   pointer-events: none;
   --neo-skeleton-color-start: var(--neo-skeleton-color);
@@ -321,10 +336,10 @@
   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(> *) {
+.neo-button.neo-skeleton::before, .neo-button.neo-skeleton::after,
+.neo-button.neo-skeleton :global(> *::before),
+.neo-button.neo-skeleton :global(> *::after),
+.neo-button.neo-skeleton :global(> *) {
   visibility: hidden;
   pointer-events: none;
 }
@@ -350,26 +365,23 @@
     border-color: var(--neo-skeleton-color-start);
   }
 }
-.neo-button.skeleton.glass {
-  --neo-skeleton-color: var(--neo-glass-skeleton-color);
-}
-.neo-button.rounded {
+.neo-button.neo-rounded {
   border-radius: var(--neo-btn-border-radius-rounded, var(--neo-border-radius-lg));
 }
-.neo-button.pulse {
+.neo-button.neo-pulse {
   position: relative;
 }
-.neo-button.pulse::after, .neo-button.pulse::before {
+.neo-button.neo-pulse::after, .neo-button.neo-pulse::before {
   box-shadow: var(--neo-pulse-box-shadow, var(--neo-box-shadow-raised-3));
   will-change: transform, opacity;
 }
-.neo-button.pulse::before {
+.neo-button.neo-pulse::before {
   animation: pulse var(--neo-pulse-duration, 6s) linear var(--neo-pulse-delay, 1s) infinite;
 }
-.neo-button.pulse::after {
+.neo-button.neo-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 {
+.neo-button.neo-pulse.pressed::after, .neo-button.neo-pulse.pressed::before, .neo-button.neo-pulse:focus-visible::after, .neo-button.neo-pulse:focus-visible::before, .neo-button.neo-pulse:hover::after, .neo-button.neo-pulse:hover::before, .neo-button.neo-pulse:active::after, .neo-button.neo-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;
@@ -400,20 +412,20 @@
     opacity: 0;
   }
 }
-.neo-button.coalesce {
+.neo-button.neo-coalesce {
   position: relative;
 }
-.neo-button.coalesce::after, .neo-button.coalesce::before {
+.neo-button.neo-coalesce::after, .neo-button.neo-coalesce::before {
   box-shadow: var(--neo-coalesce-box-shadow, var(--neo-box-shadow-raised-3));
   will-change: transform, opacity;
 }
-.neo-button.coalesce::before {
+.neo-button.neo-coalesce::before {
   animation: coalesce var(--neo-coalesce-duration, 6s) ease-out var(--neo-coalesce-delay, 1s) infinite;
 }
-.neo-button.coalesce::after {
+.neo-button.neo-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 {
+.neo-button.neo-coalesce.pressed::after, .neo-button.neo-coalesce.pressed::before, .neo-button.neo-coalesce:focus-visible::after, .neo-button.neo-coalesce:focus-visible::before, .neo-button.neo-coalesce:hover::after, .neo-button.neo-coalesce:hover::before, .neo-button.neo-coalesce:active::after, .neo-button.neo-coalesce:active::before {
   box-shadow: var(--neo-coalesce-box-shadow-reverse, var(--neo-box-shadow-inset-2));
   animation-name: pulse;
   animation-timing-function: linear;
@@ -444,23 +456,23 @@
     opacity: 0;
   }
 }
-.neo-button .icon,
-.neo-button .content {
+.neo-button .neo-icon,
+.neo-button .neo-content {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
-.neo-button .content {
+.neo-button .neo-content {
   height: 100%;
 }
-.neo-button .content .icon:not(.only) {
+.neo-button .neo-content .neo-icon:not(.neo-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 {
+.neo-button .neo-content.neo-reverse {
   flex-direction: row-reverse;
 }
-.neo-button .content.reverse .icon:not(.only) {
+.neo-button .neo-content.neo-reverse .neo-icon:not(.neo-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>