@dvcol/neo-svelte 0.1.2 → 0.1.4

package/dist/buttons/NeoButtonGroup.svelte

@@ -2,6 +2,7 @@
   import type { NeoButtonGroupProps } from './neo-button-group.model.js';
 
   import { toAction, toActionProps, toTransition, toTransitionProps } from '../utils/action.utils.js';
+  import { computeGlassFilter, computeShadowElevation, getDefaultElevation } from '../utils/shadow.utils.js';
 
   /* eslint-disable prefer-const -- necessary for binding checked */
   let {
@@ -14,13 +15,12 @@
     skeleton,
 
     // Styles
+    pressed,
+    convex,
+    elevation = getDefaultElevation(pressed),
     borderless,
     start,
-    text,
-    flat,
     glass,
-    inset,
-    shallow,
     rounded,
     pulse,
     coalesce,
@@ -45,6 +45,9 @@
   }: NeoButtonGroupProps = $props();
   /* eslint-enable prefer-const */
 
+  const filter = $derived(computeGlassFilter(elevation, glass));
+  const boxShadow = $derived(computeShadowElevation(elevation, { glass, pressed, convex }));
+
   const inFn = $derived(toTransition(inAction ?? transitionAction));
   const inProps = $derived(toTransitionProps(inAction ?? transitionAction));
   const outFn = $derived(toTransition(outAction ?? transitionAction));
@@ -58,19 +61,20 @@
   this={tag}
   bind:this={ref}
   class:neo-button-group={true}
-  class:borderless
-  class:start
-  class:text
-  class:flat
-  class:glass
-  class:shallow
-  class:inset
-  class:rounded
-  class:pulse
-  class:coalesce
-  class:skeleton
-  class:vertical
-  class:nowrap
+  class:neo-borderless={borderless}
+  class:neo-start={start}
+  class:neo-flat={!elevation}
+  class:neo-convex={convex}
+  class:neo-inset={elevation < 0}
+  class:neo-glass={glass}
+  class:neo-rounded={rounded}
+  class:neo-pulse={pulse}
+  class:neo-coalesce={coalesce}
+  class:neo-skeleton={skeleton}
+  class:neo-vertical={vertical}
+  class:neo-nowrap={nowrap}
+  style:--neo-btn-group-box-shadow={boxShadow}
+  style:--neo-btn-group-glass-blur={filter}
   style:justify-content={justify}
   style:align-items={align}
   style:flex
@@ -84,18 +88,20 @@
     skeleton,
 
     // styles
-    start,
-    text,
-    flat,
-    glass,
+    elevation,
+    pressed,
+    convex,
+    borderless,
     rounded,
+    glass,
     pulse,
     coalesce,
     vertical,
+    start,
   })}
 </svelte:element>
 
-<style>.neo-button-group.pulse:not(.skeleton)::after, .neo-button-group.pulse:not(.skeleton)::before, .neo-button-group.coalesce:not(.skeleton)::after, .neo-button-group.coalesce:not(.skeleton)::before {
+<style>.neo-button-group.neo-pulse::after, .neo-button-group.neo-pulse::before, .neo-button-group.neo-coalesce::after, .neo-button-group.neo-coalesce::before {
   position: absolute;
   top: 0;
   left: 0;
@@ -117,90 +123,108 @@
   justify-content: center;
   box-sizing: border-box;
   width: fit-content;
-  margin: var(--neo-shadow-margin, 0.6rem);
+  margin: var(--neo-shadow-margin, 0.625rem);
   padding: 0.25rem;
   background-color: var(--neo-btn-bg-color, transparent);
   border: var(--neo-border-width, 1px) var(--neo-btn-border-color, transparent) solid;
   border-radius: calc(var(--neo-btn-border-radius, var(--neo-border-radius)) + 0.25rem);
+  box-shadow: var(--neo-btn-group-box-shadow, var(--neo-box-shadow-flat));
   transition: color 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease-out;
 }
-.neo-button-group.nowrap {
+.neo-button-group.neo-nowrap {
   flex-wrap: nowrap;
   justify-content: flex-start;
   overflow: auto;
   white-space: nowrap;
 }
-.neo-button-group.flat {
-  border-color: var(--neo-btn-border-color, var(--neo-border-color));
-}
-.neo-button-group.borderless, .neo-button-group.text {
+.neo-button-group.neo-borderless {
   border-color: transparent !important;
 }
-.neo-button-group:not(.text, .flat, .glass) {
-  box-shadow: var(--neo-box-shadow-raised-3);
+.neo-button-group.neo-convex:not(.neo-inset), .neo-button-group.neo-inset:not(.neo-borderless) {
+  padding: 0.375rem;
+}
+.neo-button-group.neo-flat:not(.neo-borderless) {
+  border-color: var(--neo-btn-border-color, var(--neo-border-color));
 }
 @starting-style {
-  .neo-button-group.start {
+  .neo-button-group.neo-start {
     box-shadow: var(--neo-box-shadow-flat);
   }
-  .neo-button-group.start:not(.text, .glass, .borderless) {
+  .neo-button-group.neo-start:not(.neo-glass, .neo-borderless) {
     border-color: var(--neo-btn-border-color, var(--neo-border-color));
   }
 }
-.neo-button-group.glass {
+.neo-button-group.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-blur-4) var(--neo-saturate-2);
-}
-.neo-button-group.glass:not(.text, .flat) {
-  box-shadow: var(--neo-glass-box-shadow-raised-3);
+  backdrop-filter: var(--neo-btn-group-glass-blur, var(--neo-blur-3) var(--neo-saturate-2));
 }
-.neo-button-group.glass :global(.neo-button) {
+.neo-button-group.neo-glass :global(.neo-button) {
   background-color: transparent;
   backdrop-filter: none;
 }
-.neo-button-group.glass :global(.neo-button:not(:active, .pressed)) {
-  box-shadow: var(--neo-glass-box-shadow-flat);
+.neo-button-group.neo-glass.neo-flat {
+  border-color: var(--neo-btn-border-color, var(--neo-glass-border-color));
 }
 .neo-button-group :global(.neo-button) {
   margin: 0;
   border-color: transparent !important;
 }
-.neo-button-group :global(.neo-button:disabled:not(.skeleton)),
-.neo-button-group :global(.neo-button[disabled]:not([disabled="false"], .skeleton)) {
-  border-color: transparent !important;
-}
-.neo-button-group :global(.neo-button:disabled:not(.skeleton, .pressed)),
-.neo-button-group :global(.neo-button[disabled]:not([disabled="false"], .skeleton, .pressed)) {
+.neo-button-group :global(.neo-button:disabled:not(.neo-pressed)),
+.neo-button-group :global(.neo-button[disabled]:not([disabled="false"], .neo-pressed)) {
   box-shadow: var(--neo-box-shadow-flat) !important;
 }
-.neo-button-group :global(.neo-button:not(:active, .pressed)) {
+.neo-button-group :global(.neo-button:not(:active:not(.neo-loading), .neo-pressed)) {
   box-shadow: var(--neo-box-shadow-flat);
 }
-.neo-button-group :global(.neo-button.loading:active:not(.pressed)),
-.neo-button-group :global(.neo-button:not(.flat, .text, :active, .pressed):hover) {
-  box-shadow: var(--neo-box-shadow-inset-2);
+.neo-button-group :global(.neo-button:not(.neo-flat, :active:not(.neo-loading), .neo-pressed):hover) {
+  box-shadow: var(--neo-box-shadow-inset-1);
 }
-.neo-button-group :global(.neo-button.pulse::after),
-.neo-button-group :global(.neo-button.pulse::before),
-.neo-button-group :global(.neo-button.coalesce::after),
-.neo-button-group :global(.neo-button.coalesce::before) {
-  animation: none;
+.neo-button-group :global(.neo-button.neo-pressed),
+.neo-button-group :global(.neo-button:active:not(.neo-loading)) {
+  --neo-box-shadow-pressed-2: var(--neo-box-shadow-inset-3);
+  --neo-glass-box-shadow-pressed-2: var(--neo-glass-box-shadow-inset-3);
 }
-.neo-button-group.pulse:not(.skeleton) {
+.neo-button-group.neo-pulse {
   position: relative;
 }
-.neo-button-group.pulse:not(.skeleton)::after, .neo-button-group.pulse:not(.skeleton)::before {
+.neo-button-group.neo-pulse::after, .neo-button-group.neo-pulse::before {
   box-shadow: var(--neo-pulse-box-shadow, var(--neo-box-shadow-raised-3));
   will-change: transform, opacity;
 }
-.neo-button-group.pulse:not(.skeleton)::before {
+.neo-button-group.neo-pulse::before {
   animation: pulse var(--neo-pulse-duration, 6s) linear var(--neo-pulse-delay, 1s) infinite;
 }
-.neo-button-group.pulse:not(.skeleton)::after {
+.neo-button-group.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-group.pulse:not(.skeleton).pressed::after, .neo-button-group.pulse:not(.skeleton).pressed::before, .neo-button-group.pulse:not(.skeleton):focus-visible::after, .neo-button-group.pulse:not(.skeleton):focus-visible::before, .neo-button-group.pulse:not(.skeleton):hover::after, .neo-button-group.pulse:not(.skeleton):hover::before, .neo-button-group.pulse:not(.skeleton):active::after, .neo-button-group.pulse:not(.skeleton):active::before {
+.neo-button-group.neo-pulse.pressed::after, .neo-button-group.neo-pulse.pressed::before, .neo-button-group.neo-pulse:focus-visible::after, .neo-button-group.neo-pulse:focus-visible::before, .neo-button-group.neo-pulse:hover::after, .neo-button-group.neo-pulse:hover::before, .neo-button-group.neo-pulse:active::after, .neo-button-group.neo-pulse:active::before {
   box-shadow: var(--neo-pulse-box-shadow-reverse, var(--neo-box-shadow-raised-3));
   animation-name: coalesce;
   animation-timing-function: ease-out;
@@ -231,20 +255,20 @@
     opacity: 0;
   }
 }
-.neo-button-group.coalesce:not(.skeleton) {
+.neo-button-group.neo-coalesce {
   position: relative;
 }
-.neo-button-group.coalesce:not(.skeleton)::after, .neo-button-group.coalesce:not(.skeleton)::before {
+.neo-button-group.neo-coalesce::after, .neo-button-group.neo-coalesce::before {
   box-shadow: var(--neo-coalesce-box-shadow, var(--neo-box-shadow-raised-3));
   will-change: transform, opacity;
 }
-.neo-button-group.coalesce:not(.skeleton)::before {
+.neo-button-group.neo-coalesce::before {
   animation: coalesce var(--neo-coalesce-duration, 6s) ease-out var(--neo-coalesce-delay, 1s) infinite;
 }
-.neo-button-group.coalesce:not(.skeleton)::after {
+.neo-button-group.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-group.coalesce:not(.skeleton).pressed::after, .neo-button-group.coalesce:not(.skeleton).pressed::before, .neo-button-group.coalesce:not(.skeleton):focus-visible::after, .neo-button-group.coalesce:not(.skeleton):focus-visible::before, .neo-button-group.coalesce:not(.skeleton):hover::after, .neo-button-group.coalesce:not(.skeleton):hover::before, .neo-button-group.coalesce:not(.skeleton):active::after, .neo-button-group.coalesce:not(.skeleton):active::before {
+.neo-button-group.neo-coalesce.pressed::after, .neo-button-group.neo-coalesce.pressed::before, .neo-button-group.neo-coalesce:focus-visible::after, .neo-button-group.neo-coalesce:focus-visible::before, .neo-button-group.neo-coalesce:hover::after, .neo-button-group.neo-coalesce:hover::before, .neo-button-group.neo-coalesce:active::after, .neo-button-group.neo-coalesce:active::before {
   box-shadow: var(--neo-coalesce-box-shadow-reverse, var(--neo-box-shadow-raised-3));
   animation-name: pulse;
   animation-timing-function: linear;
@@ -275,44 +299,14 @@
     opacity: 0;
   }
 }
-.neo-button-group.shallow:not(.inset, .skeleton) {
-  --neo-coalesce-box-shadow: var(--neo-box-shadow-raised-2);
-  --neo-pulse-box-shadow: var(--neo-box-shadow-raised-2);
-  --neo-coalesce-box-shadow-reverse: var(--neo-box-shadow-inset-1);
-  --neo-pulse-box-shadow-reverse: var(--neo-box-shadow-inset-1);
-}
-.neo-button-group.shallow:not(.inset, .skeleton):not(.text, .flat, .glass) {
-  box-shadow: var(--neo-box-shadow-raised-2);
-}
-.neo-button-group.shallow:not(.inset, .skeleton).glass {
-  box-shadow: var(--neo-glass-box-shadow-raised-2);
-}
-.neo-button-group.shallow:not(.inset, .skeleton) :global(.neo-button.loading:active:not(.pressed)),
-.neo-button-group.shallow:not(.inset, .skeleton) :global(.neo-button:not(.flat, .text, :active, .pressed):hover) {
-  box-shadow: var(--neo-box-shadow-inset-1);
-}
-.neo-button-group.shallow:not(.inset, .skeleton) :global(.neo-button:active),
-.neo-button-group.shallow:not(.inset, .skeleton) :global(.neo-button.pressed) {
-  box-shadow: var(--neo-box-shadow-inset-2);
-}
-.neo-button-group.inset:not(.skeleton) {
-  box-shadow: var(--neo-box-shadow-inset-3);
-}
-.neo-button-group.inset:not(.skeleton).shallow {
-  box-shadow: var(--neo-box-shadow-inset-2);
-}
-.neo-button-group.inset:not(.skeleton).shallow :global(.neo-button:active),
-.neo-button-group.inset:not(.skeleton).shallow :global(.neo-button.pressed) {
-  box-shadow: var(--neo-box-shadow-inset-2);
-}
-.neo-button-group.rounded {
+.neo-button-group.neo-rounded {
   padding: 0.25rem 0.3125rem;
   border-radius: var(--neo-btn-border-radius-rounded, var(--neo-border-radius-lg));
 }
-.neo-button-group.rounded :global(.neo-button) {
+.neo-button-group.neo-rounded :global(.neo-button) {
   border-radius: var(--neo-btn-border-radius-rounded, var(--neo-border-radius-lg));
 }
-.neo-button-group.skeleton {
+.neo-button-group.neo-skeleton {
   box-shadow: var(--neo-box-shadow-flat);
   pointer-events: none;
   --neo-skeleton-color-start: var(--neo-skeleton-color);
@@ -324,10 +318,10 @@
   animation: skeleton 3s var(--neo-transition-skeleton) infinite;
   animation-delay: 1s;
 }
-.neo-button-group.skeleton::before, .neo-button-group.skeleton::after,
-.neo-button-group.skeleton :global(> *::before),
-.neo-button-group.skeleton :global(> *::after),
-.neo-button-group.skeleton :global(> *) {
+.neo-button-group.neo-skeleton::before, .neo-button-group.neo-skeleton::after,
+.neo-button-group.neo-skeleton :global(> *::before),
+.neo-button-group.neo-skeleton :global(> *::after),
+.neo-button-group.neo-skeleton :global(> *) {
   visibility: hidden;
   pointer-events: none;
 }
@@ -353,17 +347,14 @@
     border-color: var(--neo-skeleton-color-start);
   }
 }
-.neo-button-group.skeleton.glass {
-  --neo-skeleton-color: var(--neo-glass-skeleton-color);
-}
-.neo-button-group.vertical {
+.neo-button-group.neo-vertical {
   flex-direction: column;
   --neo-btn-grp-scale-x: 1.75;
   --neo-btn-grp-scale-y: 1.5;
 }
-.neo-button-group.vertical :global(.neo-button) {
+.neo-button-group.neo-vertical :global(.neo-button) {
   width: 100%;
 }
-.neo-button-group.vertical.rounded {
+.neo-button-group.neo-vertical.neo-rounded {
   padding: 0.5rem;
 }</style>

package/dist/buttons/neo-button-group.model.d.ts

@@ -1,6 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLActionProps } from '../utils/action.utils.js';
 import type { HTMLFlexProps, HTMLNeoBaseElement, HTMLRefProps } from '../utils/html-element.utils.js';
+import type { ShadowElevation } from '../utils/shadow.utils.js';
+export type NeoButtonGroupElevation = ShadowElevation;
 export type NeoButtonGroupContext = {
     /**
      * The HTML tag to use for the button group.
@@ -12,38 +14,30 @@ export type NeoButtonGroupContext = {
      */
     skeleton?: boolean;
     /**
-     * If `true`, the group will never display a border.
-     */
-    borderless?: boolean;
-    /**
-     * If true, the button group will start as flat on first render.
-     * @see [@starting-style](https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style) for browser support
+     * Group elevation.
+     * @default 3
      */
-    start?: boolean;
+    elevation?: NeoButtonGroupElevation;
     /**
-     * If true, only the button group content will be displayed.
+     * If true, negative elevation (< 0) will be displayed as pressed instead of inset.
      */
-    text?: boolean;
+    pressed?: boolean;
     /**
-     * If true, the button group will be displayed with no elevation.
+     * If true, positive elevation (> 0) will be displayed as convex instead of raised.
      */
-    flat?: boolean;
+    convex?: boolean;
     /**
-     * If true, the buttongroup  will be displayed with a glass effect.
+     * If `true`, the group will never display a border.
      */
-    glass?: boolean;
+    borderless?: boolean;
     /**
      * If true, the button group will have a rounded border.
      */
     rounded?: boolean;
     /**
-     * If true, the button will not depress past the initial plane.
-     */
-    shallow?: boolean;
-    /**
-     * If true, the button group will be inset and the buttons flat.
+     * If true, the buttongroup  will be displayed with a glass effect.
      */
-    inset?: boolean;
+    glass?: boolean;
     /**
      * If true, the button group will be surrounded by expanding waves.
      * The waves will reverse direction on hover or active states.
@@ -58,6 +52,11 @@ export type NeoButtonGroupContext = {
      * If true, the button group will be stacked vertically.
      */
     vertical?: boolean;
+    /**
+     * If true, the button group will start as flat on first render.
+     * @see [@starting-style](https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style) for browser support
+     */
+    start?: boolean;
 };
 export type NeoButtonGroupProps = {
     /**

package/dist/buttons/neo-button.model.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 import type { HTMLActionProps } from '../utils/action.utils.js';
-import type { HTMLFlexProps, HTMLRefProps } from '../utils/html-element.utils.js';
+import type { HTMLFlexProps, HTMLRefProps, SvelteEvent } from '../utils/html-element.utils.js';
 export type NeoButtonProps = {
     /**
      * Snippet to display as the button content.
@@ -43,10 +43,6 @@ export type NeoButtonProps = {
      * @bindable
      */
     checked?: boolean;
-    /**
-     * If `true`, the button will never display a border.
-     */
-    borderless?: boolean;
     /**
      * If true, the button will start as flat on first render.
      * @see [@starting-style](https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style) for browser support
@@ -69,9 +65,9 @@ export type NeoButtonProps = {
      */
     rounded?: boolean;
     /**
-     * If true, the button will not depress past the initial plane.
+     * If true, the button will be inset instead of pressed when active.
      */
-    shallow?: boolean;
+    inset?: boolean;
     /**
      * If true, the flex direction of the button will be reversed.
      */
@@ -96,15 +92,15 @@ export type NeoButtonProps = {
      * @param e
      * @param checked
      */
-    onclick?: (e: MouseEvent, checked?: boolean) => unknown;
+    onclick?: (e: SvelteEvent<MouseEvent>, checked?: boolean) => unknown;
     /**
      * Callback function to be called when a key is pressed.
      * @param e
      */
-    onkeydown?: (e: KeyboardEvent) => unknown;
+    onkeydown?: (e: SvelteEvent<KeyboardEvent>) => unknown;
     /**
      * Callback function to be called when a key is released.
      * @param e
      */
-    onkeyup?: (e: KeyboardEvent) => unknown;
+    onkeyup?: (e: SvelteEvent<KeyboardEvent>) => unknown;
 } & Partial<Omit<HTMLButtonAttributes, 'onclick' | 'onkeydown' | 'onkeyup'>> & Partial<Omit<HTMLAnchorAttributes, 'onclick' | 'onkeydown' | 'onkeyup'>> & HTMLFlexProps & HTMLActionProps & HTMLRefProps;