@dvcol/neo-svelte 1.1.2 → 1.2.0

package/dist/nav/neo-tab.model.d.ts

@@ -4,13 +4,13 @@ import type { OnChange } from './neo-tabs.model.js';
 import type { HTMLUseProps } from '../utils/action.utils.js';
 import type { HTMLNeoBaseElement, HTMLRefProps } from '../utils/html-element.utils.js';
 export type TabId = string | number | symbol;
-export type NeoTabProps<Value = unknown, Tag extends keyof HTMLElementTagNameMap = 'div'> = {
+export type NeoTabProps<Id extends TabId, Value = unknown, Tag extends keyof HTMLElementTagNameMap = 'div'> = {
     /**
      * Snippet to display as the tab content.
      */
     children?: Snippet<[{
         active: boolean;
-        tabId: TabId;
+        tabId: Id;
         value?: unknown;
     }]>;
     /**
@@ -22,20 +22,30 @@ export type NeoTabProps<Value = unknown, Tag extends keyof HTMLElementTagNameMap
      * A unique identifier for the tab.
      * If none is provided, the tab will be assigned a random id.
      */
-    tabId?: TabId;
+    tabId?: Id;
     /**
      * Optional value to associate with the tab.
      */
     value?: Value;
+    /**
+     * Whether the tab should be registered with the parent `NeoTabs` context.
+     * If false, the tab will not be included in the `NeoTabs` context.
+     * If true, the tab will be registered only if another tab with the same id is not already registered.
+     * If `force`, the tab will be registered even if another tab with the same id is already registered.
+     *
+     * @default true
+     * @see {@link NeoTabContext}
+     */
+    register?: boolean | 'force';
     /**
      * If true, the tab will display a close button that broadcasts the `onclose` event.
      * Note: The event will also be emitted to a parent `NeoTabs` if present.
      */
     close?: boolean;
     /**
-     * Event handler that fires wwhen the close button is clicked.
+     * Event handler that fires when the close button is clicked.
      */
-    onclose?: OnChange<Value>;
+    onclose?: OnChange<Id, Value>;
     /**
      * Optional props to pass to the tab container.
      */

package/dist/nav/neo-tabs-card.model.d.ts

@@ -1,3 +1,4 @@
+import type { TabId } from '../index.js';
 import type { Snippet } from 'svelte';
 import type { NeoCardProps } from '../cards/neo-card.model.js';
 import type { NeoTransitionContainerProps } from '../containers/neo-transition-container.model.js';
@@ -9,11 +10,11 @@ export interface NeoTabsCardContext {
      */
     animate?: boolean;
 }
-export type NeoTabsCardProps<T = unknown> = {
+export type NeoTabsCardProps<Id extends TabId, Value = unknown> = {
     /**
      * Snippet to display as the card content.
      */
-    children?: Snippet<[NeoTabsContext<T> | undefined]>;
+    children?: Snippet<[NeoTabsContext<Id, Value> | undefined]>;
     /**
      * Optional props to pass to the tab container if `animate` is `true`.
      * @see animate

package/dist/nav/neo-tabs-context.svelte.d.ts

@@ -1,16 +1,16 @@
 import type { NeoButtonGroupProps } from '../buttons/neo-button-group.model.js';
 import type { TabId } from './neo-tab.model.js';
 import type { NeoTabContextValue, OnChange, OnClose } from './neo-tabs.model.js';
-export interface NeoTabContextPosition {
-    id: TabId;
+export interface NeoTabContextPosition<Id extends TabId> {
+    id: Id;
     top: number;
     left: number;
     width: number;
     height: number;
 }
-export interface NeoTabContextPositions {
-    oldTab?: NeoTabContextPosition;
-    newTab?: NeoTabContextPosition;
+export interface NeoTabContextPositions<Id extends TabId> {
+    oldTab?: NeoTabContextPosition<Id>;
+    newTab?: NeoTabContextPosition<Id>;
 }
 type NeoTabContextOptions = {
     /**
@@ -35,39 +35,45 @@ type NeoTabContextOptions = {
      */
     close?: boolean;
 } & Pick<NeoButtonGroupProps, 'elevation' | 'pressed' | 'convex' | 'borderless' | 'glass' | 'start' | 'vertical'>;
-export type NeoTabsContext<T = unknown> = NeoTabContextOptions & {
+export type NeoTabsContext<Id extends TabId, Value = unknown> = NeoTabContextOptions & {
     /**
      * The active tab ID.
      */
-    active?: TabId;
+    active?: Id;
     /**
      * The active tab value.
      */
-    value?: NeoTabContextValue<T>;
+    value?: NeoTabContextValue<Value>;
 };
-interface NeoTabContextCallbacks<T = unknown> {
-    onChange?: OnChange<T>;
-    onClose?: OnClose<T>;
+interface NeoTabContextCallbacks<Id extends TabId, Value = unknown> {
+    onChange?: OnChange<Id, Value>;
+    onClose?: OnClose<Id, Value>;
 }
-export declare class NeoTabContext<T = unknown> {
+export declare class NeoTabContext<Id extends TabId, Value = unknown> {
     #private;
-    get active(): TabId | undefined;
-    get value(): NeoTabContextValue<T> | undefined;
-    get previous(): NeoTabContextValue<T> | undefined;
-    get position(): NeoTabContextPositions;
-    get state(): NeoTabsContext;
-    constructor({ onChange, onClose }?: NeoTabContextCallbacks<T>);
-    getValue(tabId?: TabId): NeoTabContextValue<T> | undefined;
-    getPane(tabId?: TabId): TabId | undefined;
+    get active(): Id | undefined;
+    get value(): NeoTabContextValue<Value> | undefined;
+    get previous(): NeoTabContextValue<Value> | undefined;
+    get position(): NeoTabContextPositions<Id>;
+    get state(): NeoTabsContext<Id, Value>;
+    constructor({ onChange, onClose }?: NeoTabContextCallbacks<Id, Value>);
+    getValue(tabId?: Id): NeoTabContextValue<Value> | undefined;
+    getPane(tabId?: Id): Id | undefined;
     onOption(options: NeoTabContextOptions): void;
-    onPosition(_ref?: HTMLElement | undefined): NeoTabContextPositions;
-    onChange(tabId?: TabId, emit?: boolean): void;
-    onClose(tabId?: TabId): void;
-    register(tabId: TabId, value: Omit<NeoTabContextValue<T>, 'index'>): any;
-    remove(tabId: TabId): void;
-    registerPane(tabId: TabId, panelId: TabId): any;
-    removePane(tabId: TabId): void;
+    onPosition(_ref?: HTMLElement | undefined): NeoTabContextPositions<Id>;
+    onChange(tabId?: Id, emit?: boolean): void;
+    onClose(tabId?: Id): void;
+    register(tabId: Id, value: Omit<NeoTabContextValue<Value>, 'index'>, force?: boolean): any;
+    /**
+     * Removes the tab from the context.
+     * @param tabId - The tab ID to remove.
+     * @param discard - If true, the active tab will be discarded.
+     */
+    remove(tabId: Id, discard?: boolean): void;
+    clear(discard?: boolean): void;
+    registerPane(tabId: Id, panelId: Id): any;
+    removePane(tabId: Id): void;
 }
-export declare function getTabContext<T = unknown>(): NeoTabContext<T> | undefined;
-export declare function setTabContext<T = unknown>(callback?: NeoTabContextCallbacks<T>): NeoTabContext<T>;
+export declare function getTabContext<Id extends TabId, Value = unknown>(): NeoTabContext<Id, Value> | undefined;
+export declare function setTabContext<Id extends TabId, Value = unknown>(callback?: NeoTabContextCallbacks<Id, Value>): NeoTabContext<Id, Value>;
 export {};

package/dist/nav/neo-tabs-context.svelte.js

@@ -91,19 +91,33 @@ export class NeoTabContext {
     onClose(tabId) {
         this.#onClose?.(tabId, this.value);
     }
-    register(tabId, value) {
+    register(tabId, value, force = false) {
         if (!tabId)
             throw new NeoErrorMissingTabId();
-        if (this.#tabs.has(tabId)) {
+        if (this.#tabs.has(tabId) && !force) {
             return Logger.warn(`Tab ID '${String(tabId)}' already exists. Tab registration ignored.`, { existing: this.getValue(tabId), ignored: value });
         }
         this.#tabs.set(tabId, { ...value, index: this.#tabs.size });
     }
-    remove(tabId) {
+    /**
+     * Removes the tab from the context.
+     * @param tabId - The tab ID to remove.
+     * @param discard - If true, the active tab will be discarded.
+     */
+    remove(tabId, discard = true) {
         this.#tabs.delete(tabId);
+        if (!discard)
+            return;
         if (this.#active === tabId)
             this.onChange();
     }
+    clear(discard = true) {
+        this.#tabs.clear();
+        if (!discard)
+            return;
+        if (this.#active)
+            this.onChange();
+    }
     registerPane(tabId, panelId) {
         if (this.#panes.has(tabId)) {
             return Logger.warn(`Tab ID '${String(tabId)}' already exists. Pane registration ignored.`, {

package/dist/nav/neo-tabs-row.model.d.ts

@@ -0,0 +1,85 @@
+import type { Snippet } from 'svelte';
+import type { NeoButtonRowItemDivider } from '../buttons/neo-button-row.model.js';
+import type { NeoButtonProps } from '../buttons/neo-button.model.js';
+import type { NeoDividerProps } from '../divider/neo-divider.model.js';
+import type { NeoMenuItem } from '../floating/menu/neo-menu-list-item.model.js';
+import type { NeoMenuProps } from '../floating/menu/neo-menu.model.js';
+import type { NeoIconBouncingDotsProps } from '../icons/neo-icon.model.js';
+import type { NeoTabProps, TabId } from './neo-tab.model.js';
+import type { NeoTabsContext } from './neo-tabs-context.svelte.js';
+import type { NeoTabsProps } from './neo-tabs.model.js';
+import type { SvelteEvent } from '../utils/html-element.utils.js';
+export interface NeoTabRowItemButton<Id extends TabId, Value = unknown> extends NeoTabProps<Id, Value> {
+    menuProps?: Partial<NeoMenuItem<Value>>;
+    label?: string | undefined;
+    icon?: Snippet<[unknown]>;
+}
+export interface NeoTabRowItemDivider extends NeoDividerProps {
+    divider: true;
+}
+export type NeoTabRowItem<Id extends TabId, Value = unknown> = NeoTabRowItemButton<Id, Value> | NeoTabRowItemDivider;
+export declare const isTabRowDivider: <Id extends TabId, Value = unknown>(item: NeoTabRowItem<Id, Value>) => item is NeoButtonRowItemDivider;
+export interface NeoTabRowContext {
+    /**
+     * The collapsed items in the tab row.
+     */
+    items?: NeoMenuItem[];
+    /**
+     * The number of items that are currently collapsed.
+     */
+    threshold?: number;
+    /**
+     * Optional properties to pass to the menu
+     */
+    menuProps?: Partial<NeoMenuProps>;
+    /**
+     * Optional properties to pass to the collapse button icon.
+     */
+    iconProps?: NeoIconBouncingDotsProps;
+    /**
+     * Optional properties to pass to the collapse button.
+     */
+    collapseProps?: NeoButtonProps;
+}
+export type OnTabEvent<Id extends TabId, Event = SvelteEvent, Value = unknown> = (e: Event, tab: {
+    tabId?: Id;
+    value?: Value;
+}) => unknown;
+export interface NeoTabsRowProps<Id extends TabId, Value = unknown> extends Omit<NeoTabRowContext, 'items'>, Omit<NeoTabsProps<Id, Value>, 'children'> {
+    /**
+     * Snippet to display inside the tab row.
+     */
+    children?: Snippet<[NeoTabsContext<Id, Value>, NeoTabRowContext]>;
+    /**
+     * Snippet to display when tabs would overflow and are collapsed.
+     */
+    collapsed?: Snippet<[NeoTabsContext<Id, Value>, NeoTabRowContext]>;
+    /**
+     * Reference to the inner HTML element.
+     */
+    ref?: NeoTabsProps<Id, Value>['ref'];
+    /**
+     * The tabs to display in the row.
+     */
+    tabs: NeoTabRowItem<Id, Value>[];
+    /**
+     * Whether the default collapse button is hovered.
+     */
+    hovered?: NeoButtonProps['hovered'];
+    /**
+     * Whether the default collapse button is focused.
+     */
+    focused?: NeoButtonProps['focused'];
+    /**
+     * Event handler for when a tab is hovered over.
+     */
+    ontabhover?: OnTabEvent<Id, PointerEvent>;
+    /**
+     * Event handler for when a tab is focused.
+     */
+    ontabfocus?: OnTabEvent<Id, FocusEvent>;
+    /**
+     * Optional properties to pass to the tab components.
+     */
+    tabProps?: NeoTabProps<Id, Value>;
+}

package/dist/nav/neo-tabs-row.model.js

@@ -0,0 +1 @@
+export const isTabRowDivider = (item) => item && 'divider' in item && item.divider;

package/dist/nav/neo-tabs.model.d.ts

@@ -1,28 +1,29 @@
 import type { Snippet } from 'svelte';
 import type { NeoButtonGroupProps } from '../buttons/neo-button-group.model.js';
 import type { NeoTabProps, TabId } from './neo-tab.model.js';
-import type { NeoTabsContext } from './neo-tabs-context.svelte.js';
+import type { NeoTabContext, NeoTabsContext } from './neo-tabs-context.svelte.js';
 import type { HTMLActionProps } from '../utils/action.utils.js';
 import type { HTMLNeoBaseElement, HTMLRefProps, HTMLTagProps } from '../utils/html-element.utils.js';
 import type { ShadowElevation, ShadowElevationString } from '../utils/shadow.utils.js';
+export type { TabId } from './neo-tab.model.js';
 export interface NeoTabContextValue<Value = unknown> {
     index: number;
     value?: Value;
-    ref: HTMLElement;
+    ref?: HTMLElement;
 }
-export type OnChange<Value = unknown> = (tabId?: TabId, newValue?: NeoTabContextValue<Value>, oldValue?: NeoTabContextValue) => unknown;
-export type OnClose<Value = unknown> = (tabId?: TabId, value?: NeoTabContextValue<Value>) => unknown;
+export type OnChange<Id extends TabId, Value = unknown> = (tabId?: Id, newValue?: NeoTabContextValue<Value>, oldValue?: NeoTabContextValue<Value>) => unknown;
+export type OnClose<Id extends TabId, Value = unknown> = (tabId?: Id, value?: NeoTabContextValue<Value>) => unknown;
 export type NeoTabsSlideElevation = ShadowElevation | ShadowElevationString;
 export type NeoTabsContainerProps = HTMLNeoBaseElement & HTMLActionProps;
-export type NeoTabsProps<Value = unknown, Tag extends keyof HTMLElementTagNameMap = 'div'> = {
+export type NeoTabsProps<Id extends TabId, Value = unknown, Tag extends keyof HTMLElementTagNameMap = 'div'> = {
     /**
      * Snippet to display as the tabs content.
      */
-    children?: Snippet<[NeoTabsContext]>;
+    children?: Snippet<[NeoTabsContext<Id, Value>, NeoTabContext<Id, Value>]>;
     /**
      * Optional snippet to expose context to other components.
      */
-    panes?: Snippet<[NeoTabsContext]>;
+    panes?: Snippet<[NeoTabsContext<Id, Value>, NeoTabContext<Id, Value>]>;
     /**
      * The HTML tag to use for the tabs.
      * @default 'div'
@@ -63,17 +64,17 @@ export type NeoTabsProps<Value = unknown, Tag extends keyof HTMLElementTagNameMa
     /**
      * Event handler that fires when the active tab changes.
      */
-    onchange?: OnChange<Value>;
+    onchange?: OnChange<Id, Value>;
     /**
      * Event handler that fires when any close button is clicked.
      */
-    onclose?: OnClose<Value>;
+    onclose?: OnClose<Id, Value>;
     /**
      * Event handler that fires when the add button is clicked.
      */
-    onadd?: NeoTabProps['onclick'];
+    onadd?: NeoTabProps<Id, Value>['onclick'];
     /**
      * Optional props to pass to the tabs container.
      */
     containerProps?: NeoTabsContainerProps & HTMLTagProps;
-} & NeoTabsContext & Omit<NeoButtonGroupProps<Tag>, 'onchange' | 'children' | 'vertical' | 'ref'> & HTMLRefProps;
+} & NeoTabsContext<Id, Value> & Omit<NeoButtonGroupProps<Tag>, 'onchange' | 'children' | 'vertical' | 'ref'> & HTMLRefProps;

package/dist/pill/NeoPill.svelte

@@ -4,7 +4,9 @@
   import { width } from '@dvcol/svelte-utils/transition';
 
   import NeoAffix from '../inputs/common/NeoAffix.svelte';
+  import NeoImage from '../media/NeoImage.svelte';
   import { toAction, toActionProps, toTransition, toTransitionProps } from '../utils/action.utils.js';
+  import { computeBorderRadius } from '../utils/border.utils.js';
   import { getColorVariable } from '../utils/colors.utils.js';
   import {
     coerce,
@@ -21,18 +23,22 @@
   let {
     // Snippets
     children,
+    label,
+    icon,
 
     // States
     tag = 'div',
     close,
     color,
+    text,
     loading,
     disabled,
     skeleton = false,
+    reverse,
     size,
 
     // Styles
-    borderless,
+    borderless = text,
     rounded = true,
     pressed,
     glass,
@@ -41,7 +47,7 @@
     start,
 
     // Shadow
-    elevation: _elevation = pressed ? -1 : 1,
+    elevation: _elevation = text ? 0 : (pressed ? -1 : 1),
     hover: _hover = 0,
     blur: _blur,
 
@@ -58,6 +64,7 @@
 
     // Other props
     affixProps,
+    imageProps,
     ...rest
   }: NeoPillProps = $props();
   /* eslint-enable prefer-const */
@@ -74,6 +81,8 @@
   const hoverFlat = $derived(isShadowFlat(boxShadow) && !isShadowFlat(hoverShadow));
   const flatHover = $derived(isShadowFlat(hoverShadow) && !isShadowFlat(boxShadow));
 
+  const empty = $derived((!children && (label === undefined || label === null)));
+
   const context = $derived<NeoPillContext>({
     close,
     color,
@@ -109,10 +118,12 @@
   class:neo-disabled={disabled}
   class:neo-skeleton={skeleton}
   class:neo-pressed={pressed}
+  class:neo-reverse={reverse}
   class:neo-glass={glass}
   class:neo-tinted={tinted}
   class:neo-filled={filled}
   class:neo-start={start}
+  class:neo-empty={empty}
   class:neo-hover={hover}
   class:neo-hover-flat={hoverFlat}
   class:neo-flat-hover={flatHover}
@@ -123,11 +134,26 @@
   style:--neo-pill-box-shadow={boxShadow}
   style:--neo-pill-box-shadow-hover={hoverShadow}
   style:--neo-pill-text-color={getColorVariable(color)}
+  style:--neo-pill-border-radius={computeBorderRadius(rounded)}
   use:useFn={useProps}
   out:outFn={outProps}
   in:inFn={inProps}
   {...rest}
 >
+  {#if icon}
+    <span class="neo-icon" class:neo-only={empty} transition:width={quickDurationProps}>
+      {#if typeof icon === 'function'}
+        {@render icon?.(context)}
+      {:else if typeof icon === 'string'}
+        <NeoImage src={icon} ratio="1/1" {...imageProps} />
+      {/if}
+    </span>
+  {/if}
+  {#if typeof label === 'function'}
+    {@render label?.(context)}
+  {:else if label !== undefined}
+    {label}
+  {/if}
   {@render children?.(context)}
   {#if (close && !disabled) || loading}
     <NeoAffix
@@ -152,16 +178,41 @@
   align-items: center;
   box-sizing: border-box;
   width: fit-content;
-  min-width: 1.875rem;
-  margin: 0;
+  margin: var(--neo-pill-margin, 0);
+  padding: var(--neo-pill-padding, 0.125rem 0.5rem);
   color: var(--neo-pill-text-color, inherit);
   background-clip: padding-box;
   border: var(--neo-pill-border-width, var(--neo-border-width, 1px)) var(--neo-pill-border-color, transparent) solid;
   border-radius: var(--neo-pill-border-radius, var(--neo-border-radius));
   box-shadow: var(--neo-pill-box-shadow, var(--neo-box-shadow-flat));
   transition: color 0.15s ease, padding 0.3s ease, border-color 0.3s ease, border-radius 0.3s ease, backdrop-filter 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease-out;
-  padding-block: 0.125rem;
-  padding-inline: 0.5rem;
+}
+.neo-pill.neo-empty {
+  padding: var(--neo-pill-padding-empty, 0.375rem);
+}
+.neo-pill .neo-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+}
+.neo-pill .neo-icon :global(.neo-image) {
+  --neo-image-border-radius: 0;
+  min-height: 1rem;
+}
+.neo-pill .neo-icon:not(.neo-only) {
+  margin-right: var(--neo-pill-icon-gap, var(--neo-gap-4xs, 0.25rem));
+  margin-left: var(--neo-pill-icon-offset, calc(0% - var(--neo-pill-icon-gap, var(--neo-gap-5xs, 0.125rem))));
+}
+.neo-pill.neo-reverse {
+  flex-direction: row-reverse;
+}
+.neo-pill.neo-reverse .neo-icon:not(.neo-only) {
+  margin-right: var(--neo-pill-icon-offset, calc(0% - var(--neo-pill-icon-gap, var(--neo-gap-5xs, 0.125rem))));
+  margin-left: var(--neo-pill-icon-gap, var(--neo-gap-4xs, 0.25rem));
+}
+.neo-pill.neo-reverse :global(> .neo-pill-affix) {
+  --neo-pill-affix-margin-inline: -0.125rem 0.3125rem;
 }
 .neo-pill[medium], .neo-pill[data-type=medium] {
   min-width: 1.5rem;
@@ -171,8 +222,11 @@
   padding-inline: 0.4375rem;
 }
 .neo-pill[medium] :global(> .neo-pill-affix), .neo-pill[data-type=medium] :global(> .neo-pill-affix) {
-  --neo-affix-size: 0.8125rem;
-  margin-inline-start: 0.25rem;
+  --neo-affix-size: 0.875rem;
+  --neo-pill-affix-margin-inline: 0.25rem -0.125rem;
+}
+.neo-pill[medium].neo-reverse :global(> .neo-pill-affix), .neo-pill[data-type=medium].neo-reverse :global(> .neo-pill-affix) {
+  --neo-pill-affix-margin-inline: -0.125rem 0.25rem;
 }
 .neo-pill[small], .neo-pill[data-type=small] {
   min-width: 1.25rem;
@@ -182,16 +236,20 @@
   padding-inline: 0.3125rem;
 }
 .neo-pill[small] :global(> .neo-pill-affix), .neo-pill[data-type=small] :global(> .neo-pill-affix) {
-  --neo-affix-size: 0.625rem;
-  margin-inline-start: 0.1875rem;
+  --neo-affix-size: 0.75rem;
+  --neo-pill-affix-margin-inline: 0.1875rem -0.0625rem;
+}
+.neo-pill[small].neo-reverse :global(> .neo-pill-affix), .neo-pill[data-type=small].neo-reverse :global(> .neo-pill-affix) {
+  --neo-pill-affix-margin-inline: -0.0625rem 0.1875rem;
 }
 .neo-pill:focus-within, .neo-pill.neo-hover:hover {
   box-shadow: var(--neo-pill-box-shadow-hover, var(--neo-box-shadow-flat));
 }
 .neo-pill :global(> .neo-pill-affix) {
-  --neo-affix-size: 1rem;
+  --neo-affix-size: 1.125rem;
+  --neo-pill-affix-margin-inline: 0.3125rem -0.125rem;
   padding: 0;
-  margin-inline-start: 0.3125rem;
+  margin-inline: var(--neo-pill-affix-margin-inline);
 }
 .neo-pill.neo-hover.neo-flat-hover:hover, .neo-pill.neo-hover.neo-flat-hover:focus-within, .neo-pill.neo-flat:not(.neo-borderless, .neo-hover-flat:hover, .neo-hover-flat:focus-within) {
   border-color: var(--neo-pill-border-color, var(--neo-border-color));
@@ -210,7 +268,7 @@
   border-color: transparent;
 }
 .neo-pill.neo-rounded {
-  border-radius: var(--neo-pill-border-radius, var(--neo-border-radius-lg));
+  border-radius: var(--neo-pill-border-radius, var(--neo-border-radius-xxl));
 }
 .neo-pill.neo-glass {
   --neo-skeleton-color: var(--neo-glass-skeleton-color);
@@ -240,6 +298,7 @@
   background-color: var(--neo-pill-bg-color, var(--neo-background-color-tinted));
 }
 .neo-pill.neo-filled {
+  --neo-affix-clear-color: var(--neo-pill-affix-color-filled, var(--neo-text-color));
   color: var(--neo-pill-text-color-filled, var(--neo-text-color-inverse));
   background-color: var(--neo-pill-text-color, var(--neo-text-color));
 }
@@ -256,7 +315,7 @@
   background-clip: padding-box;
   border-color: var(--neo-skeleton-color);
   opacity: 1;
-  transition: background-color 1s ease, color 0.3333333333s ease, border-color 1s ease, opacity 1s ease;
+  transition: border-radius 0.3333333333s ease, background-color 1s ease, color 0.3333333333s ease, border-color 1s ease, opacity 1s ease;
   animation: skeleton 3s var(--neo-transition-skeleton) infinite;
   animation-delay: 1s;
 }

package/dist/pill/neo-pill.model.d.ts

@@ -1,6 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { NeoAffixProps } from '../inputs/common/neo-affix.model.js';
+import type { NeoImageProps } from '../media/index.js';
 import type { HTMLTransitionProps, HTMLUseProps } from '../utils/action.utils.js';
+import type { BorderRadiusInput } from '../utils/border.utils.js';
 import type { Color } from '../utils/colors.utils.js';
 import type { HTMLNeoBaseElement } from '../utils/html-element.utils.js';
 import type { BlurElevation, BlurElevationString, ShadowShallowElevation, ShadowShallowElevationString } from '../utils/shadow.utils.js';
@@ -21,6 +23,12 @@ export interface NeoPillContext {
      * Color to use for the pill.
      */
     color?: Color | CSSStyleDeclaration['color'];
+    /**
+     * Shorthand for a flat borderless pill.
+     *
+     * @defaults`{ elevation: 0, borderless: true }`
+     */
+    text?: boolean;
     /**
      * Display a loading indicator in the pill.
      */
@@ -33,6 +41,10 @@ export interface NeoPillContext {
      * Disable interactions and display a skeleton state.
      */
     skeleton?: boolean;
+    /**
+     * If true, the flex direction of the pill will be reversed.
+     */
+    reverse?: boolean;
     /**
      * Set the size of the pill.
      *
@@ -61,7 +73,7 @@ export interface NeoPillContext {
     /**
      * Rounds border radius.
      */
-    rounded?: boolean;
+    rounded?: BorderRadiusInput;
     /**
      * Recess the content of the pill if elevation is inset (< 0).
      */
@@ -88,6 +100,14 @@ export type NeoPillProps<Tag extends keyof HTMLElementTagNameMap = 'div'> = {
      * Snippet to display as the pill content.
      */
     children?: Snippet<[NeoPillContext]>;
+    /**
+     * Optional snippet or text to display as the button label.
+     */
+    label?: Snippet<[NeoPillContext]> | string;
+    /**
+     * Optional icon snippet to display before the text.
+     */
+    icon?: Snippet<[NeoPillContext]> | string;
     /**
      * The HTML tag to use for the pill.
      * @default div
@@ -101,4 +121,8 @@ export type NeoPillProps<Tag extends keyof HTMLElementTagNameMap = 'div'> = {
      * Props to pass to the close/loading affix.
      */
     affixProps?: NeoAffixProps;
+    /**
+     * Optional props to pass to the icon image component if the icon is a string.
+     */
+    imageProps?: Partial<NeoImageProps>;
 } & NeoPillContext & HTMLTransitionProps & HTMLUseProps & HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]>;