@dvcol/neo-svelte 0.1.6 → 0.1.7

package/CHANGELOG.md

@@ -2,6 +2,85 @@
 
 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.7](https://github.com/dvcol/neo-svelte/compare/v0.1.6...v0.1.7) (2025-02-03)
+
+
+### Features
+
+* **affix:** adds custom loading/close/validation snippets ([fcefc30](https://github.com/dvcol/neo-svelte/commit/fcefc309853a6566edacc244e59a3b288b534dd9))
+* **button:** adds support for theme colors ([e01c567](https://github.com/dvcol/neo-svelte/commit/e01c5679bf3b7d48fe822e2a43634b0fd6ac18f4))
+* **buttons:** adds indeterminate to switch and shallow to buttons ([a196c57](https://github.com/dvcol/neo-svelte/commit/a196c57c2b4c3eabcd2eb9dbce2b71492ebec848))
+* **buttons:** adds label snippet ([b39de08](https://github.com/dvcol/neo-svelte/commit/b39de087d34c78c8ea93236801e9c79fe99ad44e))
+* **buttons:** split checkbox, switch, radio buttons out ([536b353](https://github.com/dvcol/neo-svelte/commit/536b3539868fbf78bf720a807744bb6c6a2d0e2a))
+* **button:** support label in switch buttons ([9d69d2a](https://github.com/dvcol/neo-svelte/commit/9d69d2ac3832308482c5ba0f91ba66282739cad8))
+* **divider:** expand divider api ([fb2e932](https://github.com/dvcol/neo-svelte/commit/fb2e9327b8c5cbb41f322f53eaae9aaf61766782))
+* **elevation:** adds support for string elevations ([45d1cd0](https://github.com/dvcol/neo-svelte/commit/45d1cd00d59e3ef8e3df415099ff91022938eaa4))
+* **input:** adds native select component ([0b7dfc1](https://github.com/dvcol/neo-svelte/commit/0b7dfc105e6b65a13665423c37a42bde61f51580))
+* **inputs:** adds customisable icons ([054f4d7](https://github.com/dvcol/neo-svelte/commit/054f4d73d273e7abc8d34f21789776293d02da18))
+* **input:** style multi select native inputs ([308a6de](https://github.com/dvcol/neo-svelte/commit/308a6de8ae6f7a2892926a8defe6dc6cca7b1ba7))
+* **list:** adds aria roles ([165693d](https://github.com/dvcol/neo-svelte/commit/165693d7c55aa1ee58f260f72c92dbbecac0aa3d))
+* **list:** adds arrow navigation ([f339b75](https://github.com/dvcol/neo-svelte/commit/f339b75a2fbe3749e51a4c7d893e3486915335c0))
+* **list:** adds basic support for filtering/sorting ([bcf1c8f](https://github.com/dvcol/neo-svelte/commit/bcf1c8f46dda64ac29775886cd9960fe45296e1c))
+* **list:** adds custom base loader ([01bc010](https://github.com/dvcol/neo-svelte/commit/01bc010de72117d3cad4af9cf2f23e1cc20df3d9))
+* **list:** adds description support ([f7a2025](https://github.com/dvcol/neo-svelte/commit/f7a20254c586b6806547c7c014cd10ef27d7aa90))
+* **list:** adds onclick & href support ([da844ea](https://github.com/dvcol/neo-svelte/commit/da844eadc3da4fd15370601dba6c7b03e95a4948))
+* **list:** adds search input ([8d1593a](https://github.com/dvcol/neo-svelte/commit/8d1593a8548f7bf4c10251869f4b92874efc718c))
+* **list:** adds section support ([ce8f7ce](https://github.com/dvcol/neo-svelte/commit/ce8f7ce2d7ea0ed038432fd171921e856aaf40e0))
+* **list:** adds sticky section header ([9276852](https://github.com/dvcol/neo-svelte/commit/9276852220729eee5413aa17c4845cf48fcf7fc2))
+* **list:** adds support for disabled items ([6180f4c](https://github.com/dvcol/neo-svelte/commit/6180f4cfa17034622e9294fe0d4f12913d30866e))
+* **list:** clear selected if list mutates ([086d1bf](https://github.com/dvcol/neo-svelte/commit/086d1bf66210c8a527e4c7e595d1c93b75267bdd))
+* **list:** first draft for lists ([502885c](https://github.com/dvcol/neo-svelte/commit/502885ce92ba5525566f57440be75e76d32aaafc))
+* **list:** initial support for selectable lists ([1451253](https://github.com/dvcol/neo-svelte/commit/145125319e90e5896347b287873809d1676e32a3))
+* **list:** support after & before loading skeleton ([331a21d](https://github.com/dvcol/neo-svelte/commit/331a21d656d5f0902774b42878b2287edf1546f9))
+* **list:** support checkmarks ([45564ba](https://github.com/dvcol/neo-svelte/commit/45564ba73a681a1c82ec41e5967ef5aeba4cd52b))
+* **nav:** adds tab divider support ([5d07d80](https://github.com/dvcol/neo-svelte/commit/5d07d800a1d38248b7c2b3da6ef7eea1de22c031))
+* **scroll:** makes custom scrollbar optional ([2b54880](https://github.com/dvcol/neo-svelte/commit/2b54880ba24b38f1eff1dedafb8b97487bbf35fb))
+* **select:** basic option array input ([6b412fd](https://github.com/dvcol/neo-svelte/commit/6b412fd240ef848ba895a9024ec446c390e004de))
+* **skeleton:** adds auto-line discovery for skeleton ([1c54529](https://github.com/dvcol/neo-svelte/commit/1c54529f9c5c7078ef07b0c1637bb777eb2fe1a7))
+* **skeleton:** adds glass skeleton to generic component ([e0fe4f4](https://github.com/dvcol/neo-svelte/commit/e0fe4f4a1bac3c8a506e0e57ed76354ca07dacc6))
+* **skeleton:** auto-size skeleton containers ([10938e2](https://github.com/dvcol/neo-svelte/commit/10938e2a6f09f27e5186957d6dd64ca79919d000))
+* **tabs:** adds pill mode ([84d3615](https://github.com/dvcol/neo-svelte/commit/84d36158dac3a80d33b36bd3f8e7233a0abef0b3))
+* **tabs:** adjust hover colors & transitions ([a6a8fed](https://github.com/dvcol/neo-svelte/commit/a6a8fed31343b1c93dab4b8163d4a878ca8b92dc))
+* **text:** adds ellipsis and mark components ([0719445](https://github.com/dvcol/neo-svelte/commit/0719445b9f6ae0229c887bfb7000cad165995c91))
+* **text:** adds scroll-shadow ([9c6fd29](https://github.com/dvcol/neo-svelte/commit/9c6fd29a75796427a264dd9f97ec3e9444796bf0))
+* **theme:** adds colour pickers ([9757934](https://github.com/dvcol/neo-svelte/commit/97579340e0b143b182267b36c35905234bf4644e))
+* **tooltip:** adds custom tooltip snippets ([33d2d59](https://github.com/dvcol/neo-svelte/commit/33d2d59bd90052462d4b16618900e6ed82e860ba))
+* **tooltip:** adds generic tooltip component ([813fc2f](https://github.com/dvcol/neo-svelte/commit/813fc2ff5b43d8157954bf79186ee9e3913bb9a5))
+* **tooltip:** adds supports for external refs ([09f1be1](https://github.com/dvcol/neo-svelte/commit/09f1be1d748e34e45d157b0d40d2b5f039253c2e))
+* **tooltip:** match width with trigger ([853ed32](https://github.com/dvcol/neo-svelte/commit/853ed324ac5a647e3ad94d1bd4cff5c641604b84))
+* **tooltips:** adds tooltip styling ([4e5418b](https://github.com/dvcol/neo-svelte/commit/4e5418b60aa8d840a543dabdca3ef8b2958a4e14))
+
+
+### Bug Fixes
+
+* **button:** adjust icon spacing ([cb6f163](https://github.com/dvcol/neo-svelte/commit/cb6f163fb939ba382361dc0ff8ff28ef141f8d8a))
+* **button:** remove enter pressed state on blur ([9c53dd1](https://github.com/dvcol/neo-svelte/commit/9c53dd16aa68da20495fae09c5ffe051f865d4ad))
+* **buttons:** correct border color for flat glass style ([65b9e12](https://github.com/dvcol/neo-svelte/commit/65b9e121bd740119182f852ff7ece796a4742c28))
+* **card:** fix media card css ([8dd8088](https://github.com/dvcol/neo-svelte/commit/8dd8088fcaae8ec0764b6cae6a3edbd5695d3b61))
+* **card:** makes scrollbar transition additive ([59e2a8f](https://github.com/dvcol/neo-svelte/commit/59e2a8ff4c976cd63a30f4e2f7940ddb39bbde9d))
+* **checkbox:** adds missing touched binding ([8736cb6](https://github.com/dvcol/neo-svelte/commit/8736cb68507e6d465a4267e9c0667a0009dd974f))
+* **colors:** adjust variables to be relative to theme color ([754e4d2](https://github.com/dvcol/neo-svelte/commit/754e4d2effe5d74e67eff20a85413c39c84fd7be))
+* **glass:** adjust border color when flat ([01995fe](https://github.com/dvcol/neo-svelte/commit/01995fe9757b9d2504c60f7416338f8b5be1178a))
+* **glass:** adjust pressed glass shadow ([2182943](https://github.com/dvcol/neo-svelte/commit/21829437e5fbc5e832aeda9f963fd7a529099902))
+* **glass:** remove border when inset ([631efbe](https://github.com/dvcol/neo-svelte/commit/631efbe00268c3546e7d3b097695c3f0eeb528a3))
+* **icon:** make checkbox prop reactive ([7f72fb6](https://github.com/dvcol/neo-svelte/commit/7f72fb6c324a640f124362f2a4b54dab23ca484f))
+* **input:** adjust color picker min height/width ([8536e03](https://github.com/dvcol/neo-svelte/commit/8536e03709a4a03132fe7f5e0c30317baf8ee82b))
+* **input:** adjust label translate ([3e35382](https://github.com/dvcol/neo-svelte/commit/3e3538250314464afca4e9ed0582df33ab7e15fd))
+* **input:** debounce clearable to fix touch flashing on mobile ([72b86d8](https://github.com/dvcol/neo-svelte/commit/72b86d81269d4ef800dd3f0dacf813279b041afe))
+* **input:** keep close button visible on focusin ([761ac31](https://github.com/dvcol/neo-svelte/commit/761ac31461cae17bff17caa41cf77f723e226f3f))
+* **input:** resize floating values on element resize ([f77acc2](https://github.com/dvcol/neo-svelte/commit/f77acc2c903c8ee02c19b3663ebec6e4f35fe824))
+* **list:** handle reflow dividers ([8b7ca36](https://github.com/dvcol/neo-svelte/commit/8b7ca36dceacb46006719263b5e31325a23c55f9))
+* **list:** keep selection when sorting/filtering ([48c43ec](https://github.com/dvcol/neo-svelte/commit/48c43ec2194a9eb4f39e38b1b737552d98001abb))
+* **list:** move to simple scale and scrollToBottom ([80165fa](https://github.com/dvcol/neo-svelte/commit/80165fa73d988e48ad8748ed45187d86fb53ef74))
+* **list:** only animate top level list ([9106151](https://github.com/dvcol/neo-svelte/commit/9106151154dec7fec0ec7b386c0f60816b1447de))
+* **list:** remove scroll shadow when empty ([2654975](https://github.com/dvcol/neo-svelte/commit/2654975c22e68ea9590d2f60a11dcda3b8c47f23))
+* **list:** rework transitions ([3bf6de9](https://github.com/dvcol/neo-svelte/commit/3bf6de959206f844a6964e57c3af1839624f73cf))
+* **skeleton:** adjust font & line height to match defaults ([06eb497](https://github.com/dvcol/neo-svelte/commit/06eb4973b2d72fef3e12effd6cbdbcb927e28332))
+* **skeleton:** adjust line spacing in alt mode ([7ec1ec9](https://github.com/dvcol/neo-svelte/commit/7ec1ec91906f6aabffe61d49c5b4ce795819a1ff))
+* **style:** improve :global scoping in tabs & list ([363e106](https://github.com/dvcol/neo-svelte/commit/363e106b1ade7ba0baa7c788146a757fc270f972))
+* **tabs:** fix line regression & add dynamic default slide elevation ([8894bdf](https://github.com/dvcol/neo-svelte/commit/8894bdffd7006e44186852c60da733304964e20b))
+* **tooltip:** keep open while focused ([ac5df59](https://github.com/dvcol/neo-svelte/commit/ac5df592a96fc793b7637b1a6117a66c0f5cc797))
+
 ### [0.1.6](https://github.com/dvcol/neo-svelte/compare/v0.1.5...v0.1.6) (2025-01-10)
 
 

package/README.md

@@ -51,6 +51,8 @@ See examples in the demo (code [here](https://github.com/dvcol/neo-svelte/tree/f
 ## TODO
 - [ ] @media any-pointer:coarse any-hover:none
 - [x] Buttons
+  - [x] toggle
+  - [x] groups
 - [x] Tabs
 - [x] Card
 - [x] Inputs
@@ -78,9 +80,67 @@ See examples in the demo (code [here](https://github.com/dvcol/neo-svelte/tree/f
   - [x] custom before-after
   - [x] steps
   - [ ] vertical
-- [ ] select
+  - [ ] rating (stars)
+- [x] select
+  - [x] native
+  - [ ] custom
+- [x] tooltip
+  - [ ] popconfirm
+  - [ ] popselect
+  - [ ] nested menus
+
+- [x] list
+  - [x] select
+    - [X] multiple
+    - [x] disabled
+    - [x] readonly
+    - [x] sections
+    - [x] keyboard navigation
+  - [x] scroll shadow
+  - [ ] virtualized
+  - [ ] infinite scroll
+  - [ ] drag & drop
+  - [ ] pagination
+  - [ ] pull/scroll to refresh
+  - [x] filter
+  - [x] sort
+  - [ ] tree
+
+- [ ] stepper
+  - [ ] vertical
+  - [ ] progress/dots
+
+- [ ] Chat
+  - [ ] infinite scroll 
+  - [ ] virtual scroll
+  - [ ] async
+  - [ ] stream
+  - [ ] generative text animation
+  - [ ] scroll to bottom
+  - [ ] typing indicator
+  - [ ] read indicator
+  - [ ] reactions
+  - [ ] threads
+  - [ ] @ / # tags
+  - [ ] mentions
+  - [ ] attachments
+  - [ ] gifs/images
+  - [ ] videos
+  - [ ] audio
+  - [ ] custom cards (contact, etc.)
+  - [ ] custom bubbles
+  - [ ] custom input
+
+- [ ] Modal/dialog
+- [ ] drawer/panel
+  - [ ] collapsible
+  - [ ] position
+  - [ ] backdrop
+  - [ ] click outside
+
 - [ ] table
 - [ ] pagination
+
 - [ ] auto-complete
   - [ ] @ / # tags
   - [ ] select
@@ -104,23 +164,16 @@ See examples in the demo (code [here](https://github.com/dvcol/neo-svelte/tree/f
   - [ ] summary
   - [ ] details (html semantic tags)
 
-- [ ] tooltip
-  - [ ] popconfirm
-  - [ ] popselect
 - [ ] text
   - [ ] elevation
-  - [ ] elipsis
+  - [x] ellipsis
+  - [x] mark
+  - [x] scroll & shadow
+  - [ ] typing animation
 
 - [ ] Alerts
     - [ ] toast
     - [ ] rich notification
-- [ ] Modal/dialog
-- [ ] drawer/panel
-    - [ ] collapsible
-    - [ ] position
-    - [ ] backdrop
-    - [ ] click outside
-- [ ] scrollbar ?
 - [ ] container
   - [x] transition
   - [ ] split/resizable

package/dist/buttons/NeoButton.svelte

@@ -5,12 +5,14 @@
 
   import IconCircleLoading from '../icons/IconCircleLoading.svelte';
   import { toAction, toActionProps, toTransition, toTransitionProps } from '../utils/action.utils.js';
-  import { enterDefaultTransition } from '../utils/transition.utils.js';
+  import { getColorVariable } from '../utils/colors.utils.js';
+  import { enterTransitionProps } from '../utils/transition.utils.js';
 
   /* eslint-disable prefer-const -- necessary for binding checked */
   let {
     // Snippets
     children,
+    label,
     icon,
 
     // States
@@ -27,11 +29,14 @@
 
     // Styles
     start,
+    color,
+    ghost,
     text,
     flat,
     glass,
     rounded,
     inset,
+    shallow,
     reverse,
     coalesce,
     pulse,
@@ -46,6 +51,7 @@
     onclick,
     onkeydown,
     onkeyup,
+    onblur,
 
     // Transition
     in: inAction,
@@ -63,7 +69,7 @@
   let enter = $state(false);
   let active = $state(false);
   const pressed = $derived(enter || active || checked);
-  const empty = $derived(only || !children);
+  const empty = $derived(only || (!children && !label));
 
   let timeout: ReturnType<typeof setTimeout>;
   const onActive = () => {
@@ -99,6 +105,11 @@
     onkeyup?.(e);
   };
 
+  const onBlur: NeoButtonProps['onblur'] = e => {
+    enter = false;
+    onblur?.(e);
+  };
+
   const element = $derived(tag ?? (href ? 'a' : 'button'));
   const role = $derived(!['button', 'a'].includes(element) ? 'button' : undefined);
   const tabindex = $derived(!disabled && role ? 0 : undefined);
@@ -115,7 +126,7 @@
 <svelte:element
   this={element}
   bind:this={ref}
-  {href}
+  href={loading || disabled ? undefined : href}
   {role}
   {tabindex}
   class:neo-button={true}
@@ -127,11 +138,14 @@
   class:neo-skeleton={skeleton}
   class:neo-start={start}
   class:neo-glass={glass}
-  class:neo-flat={flat || text}
-  class:neo-borderless={text}
+  class:neo-flat={flat || text || ghost}
+  class:neo-ghost={ghost}
+  class:neo-borderless={text || ghost}
   class:neo-inset={inset}
+  class:neo-shallow={shallow}
   class:neo-rounded={rounded}
   class:neo-empty={empty}
+  style:--neo-btn-text-color={getColorVariable(color)}
   style:justify-content={justify}
   style:align-items={align}
   style:flex
@@ -141,12 +155,13 @@
   onkeydown={onKeydownEnter}
   onkeyup={onKeyUpEnter}
   onclick={onClick}
-  disabled={disabled || skeleton}
+  onblur={onBlur}
+  {disabled}
   {...rest}
 >
-  <span class="neo-content" class:neo-reverse={reverse}>
+  <div class="neo-content" class:neo-reverse={reverse}>
     {#if loading || icon}
-      <span class="neo-icon" class:neo-only={empty} transition:width={enterDefaultTransition}>
+      <span class="neo-icon" class:neo-only={empty} transition:width={enterTransitionProps}>
         {#if loading}
           <IconCircleLoading />
         {:else}
@@ -155,9 +170,14 @@
       </span>
     {/if}
     {#if !empty}
+      {#if typeof label === 'string'}
+        <span class="neo-label">{label}</span>
+      {:else}
+        {@render label?.()}
+      {/if}
       {@render children?.()}
     {/if}
-  </span>
+  </div>
 </svelte:element>
 
 <style>.neo-button.neo-pulse::after, .neo-button.neo-pulse::before, .neo-button.neo-coalesce::after, .neo-button.neo-coalesce::before {
@@ -174,12 +194,12 @@
 }
 
 .neo-button {
-  display: flex;
+  display: inline-flex;
   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);
+  min-height: var(--neo-btn-min-height, var(--neo-line-height));
   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);
@@ -199,31 +219,84 @@
   cursor: wait;
 }
 .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-btn-box-shadow-active: var(--neo-box-shadow-inset-1);
+  --neo-btn-box-shadow-focus-active: var(--neo-box-shadow-inset-1);
+}
+.neo-button.neo-shallow {
+  --neo-btn-box-shadow-active: var(--neo-box-shadow-pressed-1);
+  --neo-btn-box-shadow-focus-active: var(--neo-box-shadow-pressed-1);
+  --neo-btn-box-shadow-active-flat: var(--neo-box-shadow-inset-2);
+  --neo-btn-box-shadow-active-flat-toggle: var(--neo-box-shadow-inset-2);
+  --neo-btn-scale-pressed: 1;
+}
+.neo-button .neo-content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  transition: color 0.3s ease, scale 0.3s ease;
+  scale: 1;
+}
+.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.5rem)));
+}
+.neo-button .neo-content.neo-reverse {
+  flex-direction: row-reverse;
+}
+.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.5rem)));
+  margin-left: var(--neo-btn-icon-gap, 0.35rem);
+}
+.neo-button.neo-ghost {
+  justify-content: unset;
+  padding: var(--neo-btn-padding, 0);
+  border: none;
+}
+.neo-button.neo-ghost .neo-content {
+  justify-content: unset;
+  text-align: start;
 }
 .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:hover .neo-content {
+  color: var(--neo-btn-text-color-hover, var(--neo-text-color-hover));
+}
+.neo-button:focus-visible .neo-content {
+  color: var(--neo-btn-text-color-focused, var(--neo-text-color-focused));
+}
 .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.neo-pressed .neo-content, .neo-button:active:not(.neo-loading) .neo-content {
+  scale: var(--neo-btn-scale-pressed, 0.98);
+  color: var(--neo-btn-text-color-active, var(--neo-text-color-active));
+}
+.neo-button:disabled:disabled .neo-content, .neo-button[disabled]:not([disabled=false]) .neo-content {
+  color: var(--neo-btn-text-color-disabled, var(--neo-text-color-disabled));
+  scale: 1;
+}
 .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;
+  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:focus-visible:hover {
+.neo-button:focus-visible:not(:hover) .neo-content {
+  transition: color 0s ease, scale 0.3s ease;
+}
+.neo-button:focus-visible:hover .neo-content {
   color: var(--neo-btn-text-color-focused-hover, var(--neo-text-color-focused));
 }
 .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:focus-visible.neo-pressed .neo-content, .neo-button:focus-visible:active:not(.neo-loading) .neo-content {
+  color: var(--neo-btn-text-color-focused-active, var(--neo-text-color-focused-active));
+}
 .neo-button.neo-borderless {
   border-color: transparent !important;
 }
@@ -234,10 +307,7 @@
   border-color: var(--neo-btn-border-color, var(--neo-border-color));
   box-shadow: var(--neo-box-shadow-flat);
 }
-.neo-button.neo-flat:focus-visible {
-  border-color: var(--neo-btn-border-color-focused, var(--neo-border-color-focused));
-}
-.neo-button.neo-flat:hover {
+.neo-button.neo-flat:focus-visible, .neo-button.neo-flat:hover {
   border-color: transparent;
   box-shadow: var(--neo-btn-box-shadow-hover-flat, var(--neo-box-shadow-inset-1));
 }
@@ -300,8 +370,11 @@
 .neo-button.neo-glass.neo-inset.neo-pressed, .neo-button.neo-glass.neo-inset:active:not(.neo-loading) {
   border-color: transparent;
 }
-.neo-button.neo-glass.neo-flat {
-  border-color: var(--neo-btn-border-color, var(--neo-glass-border-color));
+.neo-button.neo-glass.neo-flat:not(.neo-pressed, :active:not(.neo-loading)) {
+  border-color: var(--neo-btn-border-color, var(--neo-glass-border-color-flat));
+}
+.neo-button.neo-glass.neo-flat:not(.neo-pressed, :active:not(.neo-loading)):hover {
+  border-color: transparent;
 }
 @starting-style {
   .neo-button.neo-start {
@@ -312,7 +385,6 @@
   }
 }
 .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));
 }
@@ -327,12 +399,14 @@
 .neo-button.neo-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;
+  --neo-skeleton-start: 1;
+  --neo-skeleton-end: calc(1 + var(--neo-skeleton-step, -0.3));
+  color: var(--neo-skeleton-color);
+  background-color: var(--neo-skeleton-color);
+  background-clip: padding-box;
+  border-color: var(--neo-skeleton-color);
+  opacity: 1;
+  transition: background-color 1s ease, color 1s ease, border-color 1s ease, opacity 1s ease;
   animation: skeleton 3s var(--neo-transition-skeleton) infinite;
   animation-delay: 1s;
 }
@@ -344,25 +418,11 @@
   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);
+  0%, 80%, 100% {
+    opacity: var(--neo-skeleton-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);
+    opacity: var(--neo-skeleton-end);
   }
 }
 .neo-button.neo-rounded {
@@ -455,25 +515,4 @@
     transform: scale(1);
     opacity: 0;
   }
-}
-.neo-button .neo-icon,
-.neo-button .neo-content {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: max-content;
-}
-.neo-button .neo-content {
-  height: 100%;
-}
-.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 .neo-content.neo-reverse {
-  flex-direction: row-reverse;
-}
-.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>