@dvcol/neo-svelte 0.1.1

package/dist/buttons/NeoButtonGroup.svelte

@@ -0,0 +1,369 @@
+<script lang="ts">
+  import type { NeoButtonGroupProps } from './neo-button-group.model.js';
+
+  import { toAction, toActionProps, toTransition, toTransitionProps } from '../utils/action.utils.js';
+
+  /* eslint-disable prefer-const -- necessary for binding checked */
+  let {
+    // Snippets
+    children,
+
+    // States
+    ref = $bindable(),
+    tag = 'div',
+    skeleton,
+
+    // Styles
+    borderless,
+    start,
+    text,
+    flat,
+    glass,
+    inset,
+    shallow,
+    rounded,
+    pulse,
+    coalesce,
+    vertical,
+    nowrap,
+
+    // Flex
+    justify,
+    align,
+    flex,
+
+    // Transition
+    in: inAction,
+    out: outAction,
+    transition: transitionAction,
+
+    // Actions
+    use,
+
+    // Other props
+    ...rest
+  }: NeoButtonGroupProps = $props();
+  /* eslint-enable prefer-const */
+
+  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={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
+  style:justify-content={justify}
+  style:align-items={align}
+  style:flex
+  use:useFn={useProps}
+  out:outFn={outProps}
+  in:inFn={inProps}
+  {...rest}
+>
+  {@render children?.({
+    // States
+    skeleton,
+
+    // styles
+    start,
+    text,
+    flat,
+    glass,
+    rounded,
+    pulse,
+    coalesce,
+    vertical,
+  })}
+</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 {
+  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-group {
+  display: inline-flex;
+  flex: 0 1 auto;
+  flex-flow: row wrap;
+  gap: var(--neo-btn-grp-gap, 0.25rem);
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: fit-content;
+  margin: var(--neo-shadow-margin, 0.6rem);
+  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);
+  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 {
+  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 {
+  border-color: transparent !important;
+}
+.neo-button-group:not(.text, .flat, .glass) {
+  box-shadow: var(--neo-box-shadow-raised-3);
+}
+@starting-style {
+  .neo-button-group.start {
+    box-shadow: var(--neo-box-shadow-flat);
+  }
+  .neo-button-group.start:not(.text, .glass, .borderless) {
+    border-color: var(--neo-btn-border-color, var(--neo-border-color));
+  }
+}
+.neo-button-group.glass {
+  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);
+}
+.neo-button-group.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 :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)) {
+  box-shadow: var(--neo-box-shadow-flat) !important;
+}
+.neo-button-group :global(.neo-button:not(:active, .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.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.pulse:not(.skeleton) {
+  position: relative;
+}
+.neo-button-group.pulse:not(.skeleton)::after, .neo-button-group.pulse:not(.skeleton)::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 {
+  animation: pulse var(--neo-pulse-duration, 6s) linear var(--neo-pulse-delay, 1s) infinite;
+}
+.neo-button-group.pulse:not(.skeleton)::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 {
+  box-shadow: var(--neo-pulse-box-shadow-reverse, var(--neo-box-shadow-raised-3));
+  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-btn-grp-scale-x, 1.2)) scaleY(var(--neo-btn-grp-scale-y, 2));
+    opacity: 0;
+  }
+}
+@keyframes coalesce {
+  0% {
+    transform: scaleX(var(--neo-btn-grp-scale-x, 1.2)) scaleY(var(--neo-btn-grp-scale-y, 2));
+    opacity: 0;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+.neo-button-group.coalesce:not(.skeleton) {
+  position: relative;
+}
+.neo-button-group.coalesce:not(.skeleton)::after, .neo-button-group.coalesce:not(.skeleton)::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 {
+  animation: coalesce var(--neo-coalesce-duration, 6s) ease-out var(--neo-coalesce-delay, 1s) infinite;
+}
+.neo-button-group.coalesce:not(.skeleton)::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 {
+  box-shadow: var(--neo-coalesce-box-shadow-reverse, var(--neo-box-shadow-raised-3));
+  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-btn-grp-scale-x, 1.2)) scaleY(var(--neo-btn-grp-scale-y, 2));
+    opacity: 0;
+  }
+}
+@keyframes coalesce {
+  0% {
+    transform: scaleX(var(--neo-btn-grp-scale-x, 1.2)) scaleY(var(--neo-btn-grp-scale-y, 2));
+    opacity: 0;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    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 {
+  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) {
+  border-radius: var(--neo-btn-border-radius-rounded, var(--neo-border-radius-lg));
+}
+.neo-button-group.skeleton {
+  box-shadow: var(--neo-box-shadow-flat);
+  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-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(> *) {
+  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-group.skeleton.glass {
+  --neo-skeleton-color: var(--neo-glass-skeleton-color);
+}
+.neo-button-group.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) {
+  width: 100%;
+}
+.neo-button-group.vertical.rounded {
+  padding: 0.5rem;
+}</style>

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

@@ -0,0 +1,19 @@
+import type { NeoButtonGroupProps } from './neo-button-group.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 NeoButtonGroup: $$__sveltets_2_IsomorphicComponent<NeoButtonGroupProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type NeoButtonGroup = InstanceType<typeof NeoButtonGroup>;
+export default NeoButtonGroup;

package/dist/buttons/index.d.ts

@@ -0,0 +1,4 @@
+export { default as NeoButton } from './NeoButton.svelte';
+export { default as NeoButtonGroup } from './NeoButtonGroup.svelte';
+export type { NeoButtonProps } from './neo-button.model.js';
+export type { NeoButtonGroupProps } from './neo-button-group.model.js';

package/dist/buttons/index.js

@@ -0,0 +1,2 @@
+export { default as NeoButton } from './NeoButton.svelte';
+export { default as NeoButtonGroup } from './NeoButtonGroup.svelte';

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

@@ -0,0 +1,71 @@
+import type { Snippet } from 'svelte';
+import type { HTMLActionProps } from '../utils/action.utils.js';
+import type { HTMLFlexProps, HTMLNeoBaseElement, HTMLRefProps } from '../utils/html-element.utils.js';
+export type NeoButtonGroupContext = {
+    /**
+     * The HTML tag to use for the button group.
+     * @default 'div'
+     */
+    tag?: keyof HTMLElementTagNameMap;
+    /**
+     * If true, the button will be disabled and a loading skeleton will be displayed instead of the text.
+     */
+    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
+     */
+    start?: boolean;
+    /**
+     * If true, only the button group content will be displayed.
+     */
+    text?: boolean;
+    /**
+     * If true, the button group will be displayed with no elevation.
+     */
+    flat?: boolean;
+    /**
+     * If true, the buttongroup  will be displayed with a glass effect.
+     */
+    glass?: 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.
+     */
+    inset?: boolean;
+    /**
+     * If true, the button group will be surrounded by expanding waves.
+     * The waves will reverse direction on hover or active states.
+     */
+    pulse?: boolean;
+    /**
+     * If true, the button group will be surrounded by coalescing waves.
+     * The waves will reverse direction on hover or active states.
+     */
+    coalesce?: boolean;
+    /**
+     * If true, the button group will be stacked vertically.
+     */
+    vertical?: boolean;
+};
+export type NeoButtonGroupProps = {
+    /**
+     * Snippet to display as the button content.
+     */
+    children?: Snippet<[NeoButtonGroupContext]>;
+    /**
+     * If true, the buttons will not wrap to the next line.
+     */
+    nowrap?: boolean;
+} & NeoButtonGroupContext & HTMLFlexProps & HTMLNeoBaseElement & HTMLActionProps & HTMLRefProps;

package/dist/buttons/neo-button-group.model.js

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

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

@@ -0,0 +1,110 @@
+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';
+export type NeoButtonProps = {
+    /**
+     * Snippet to display as the button content.
+     */
+    children?: Snippet;
+    /**
+     * Optional icon snippet to display before the text.
+     */
+    icon?: Snippet;
+    /**
+     * The HTML tag to use for the button.
+     * If an `href` is provided, the tag will default to `'a'`.
+     * @default 'button'
+     */
+    tag?: keyof HTMLElementTagNameMap;
+    /**
+     * If true, the button will be disabled and a spinner will be displayed alongside the text.
+     * If an icon is provided, the spinner will replace the icon.
+     */
+    loading?: boolean;
+    /**
+     * If true, the button will be disabled and a loading skeleton will be displayed instead of the text.
+     */
+    skeleton?: boolean;
+    /**
+     * If true, only the icon (if any) will be displayed.
+     */
+    empty?: boolean;
+    /**
+     * If true, the button will act as a toggle button.
+     */
+    toggle?: boolean;
+    /**
+     * If true, the button will ignore click events for the toggle state.
+     */
+    readonly?: boolean;
+    /**
+     * Bindable value for the toggle state.
+     * @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
+     */
+    start?: boolean;
+    /**
+     * If true, only the button content will be displayed.
+     */
+    text?: boolean;
+    /**
+     * If true, the button will be displayed with no elevation.
+     */
+    flat?: boolean;
+    /**
+     * If true, the button will be displayed with a glass effect.
+     */
+    glass?: boolean;
+    /**
+     * If true, the button will have a rounded border.
+     */
+    rounded?: boolean;
+    /**
+     * If true, the button will not depress past the initial plane.
+     */
+    shallow?: boolean;
+    /**
+     * If true, the flex direction of the button will be reversed.
+     */
+    reverse?: boolean;
+    /**
+     * If true, the button will be surrounded by coalescing waves.
+     * The waves will reverse direction on hover or active states.
+     */
+    coalesce?: boolean;
+    /**
+     * If true, the button will be surrounded by expanding waves.
+     * The waves will reverse direction on hover or active states.
+     */
+    pulse?: boolean;
+    /**
+     * Callback function to be called when the toggle state changes.
+     * @param checked
+     */
+    onchecked?: (checked: boolean) => unknown;
+    /**
+     * Callback function to be called when the button is clicked.
+     * @param e
+     * @param checked
+     */
+    onclick?: (e: MouseEvent, checked?: boolean) => unknown;
+    /**
+     * Callback function to be called when a key is pressed.
+     * @param e
+     */
+    onkeydown?: (e: KeyboardEvent) => unknown;
+    /**
+     * Callback function to be called when a key is released.
+     * @param e
+     */
+    onkeyup?: (e: KeyboardEvent) => unknown;
+} & Partial<Omit<HTMLButtonAttributes, 'onclick' | 'onkeydown' | 'onkeyup'>> & Partial<Omit<HTMLAnchorAttributes, 'onclick' | 'onkeydown' | 'onkeyup'>> & HTMLFlexProps & HTMLActionProps & HTMLRefProps;

package/dist/buttons/neo-button.model.js

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