noph-ui 0.48.1 → 0.50.0

package/dist/date-picker/Calendar.svelte

@@ -21,7 +21,7 @@
 		today as getToday,
 	} from './dateUtils.js'
 	import { afterTwoFrames } from '../animation.js'
-	import type { CalendarProps } from './types.js'
+	import type { CalendarProps } from './types.ts'
 
 	let {
 		month,
@@ -212,13 +212,14 @@
 							{#if !inMonth && !adjacentMonthDays}
 								<td role="gridcell" class="np-calendar-cell"></td>
 							{:else}
-								{@const isSelected =
+								{let isSelected = $derived(
 									isSameDay(date, selected) ||
-									isSameDay(date, rangeStart) ||
-									isSameDay(date, rangeEnd)}
-								{@const isToday = isSameDay(date, todayValue)}
-								{@const enabled = isEnabled(date)}
-								{@const between = inRange(date)}
+										isSameDay(date, rangeStart) ||
+										isSameDay(date, rangeEnd),
+								)}
+								{let isToday = $derived(isSameDay(date, todayValue))}
+								{let enabled = $derived(isEnabled(date))}
+								{let between = $derived(inRange(date))}
 								<td
 									role="gridcell"
 									aria-selected={isSelected}

package/dist/date-picker/DatePickerDialog.svelte

@@ -32,7 +32,7 @@
 		toISODate,
 		today as getToday,
 	} from './dateUtils.js'
-	import type { DatePickerDialogProps, ISODate } from './types.js'
+	import type { DatePickerDialogProps, ISODate } from './types.ts'
 
 	let {
 		value = $bindable(),

package/dist/date-picker/DateRangePicker.svelte

@@ -22,7 +22,7 @@
 		toISODate,
 		today as getToday,
 	} from './dateUtils.js'
-	import type { DateRange, DateRangePickerProps } from './types.js'
+	import type { DateRange, DateRangePickerProps } from './types.ts'
 
 	let {
 		value = $bindable({}),

package/dist/date-picker/DockedDatePicker.svelte

@@ -30,7 +30,7 @@
 		toISODate,
 		today as getToday,
 	} from './dateUtils.js'
-	import type { DockedDatePickerProps, ISODate } from './types.js'
+	import type { DockedDatePickerProps, ISODate } from './types.ts'
 
 	let {
 		value = $bindable(),

package/dist/date-picker/DockedDateTimePicker.svelte

@@ -44,7 +44,7 @@
 		uses12HourClock,
 		withMinutes,
 	} from './dateUtils.js'
-	import type { DockedDateTimePickerProps, ISODate } from './types.js'
+	import type { DockedDateTimePickerProps, ISODate } from './types.ts'
 
 	let {
 		value = $bindable(),

package/dist/date-picker/SelectionList.svelte

@@ -3,7 +3,7 @@
 	import { arrowKeyNav } from '../keyboard-nav.js'
 	import Ripple from '../ripple/Ripple.svelte'
 	import { revealSelected, tabStop } from './optionList.js'
-	import type { TimeColumnProps } from './types.js'
+	import type { TimeColumnProps } from './internalTypes.ts'
 
 	let { options, value, onselect, ...attributes }: TimeColumnProps = $props()
 
@@ -21,7 +21,7 @@
 	onkeydown={handleKeydown}
 >
 	{#each options as option (option.value)}
-		{@const selected = option.value === value}
+		{let selected = $derived(option.value === value)}
 		<button
 			{@attach selected && reveal}
 			type="button"

package/dist/date-picker/SelectionList.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { TimeColumnProps } from './types.ts';
+import type { TimeColumnProps } from './internalTypes.ts';
 declare const SelectionList: import("svelte").Component<TimeColumnProps, {}, "">;
 type SelectionList = ReturnType<typeof SelectionList>;
 export default SelectionList;

package/dist/date-picker/TimeColumn.svelte

@@ -2,7 +2,7 @@
 	import { arrowKeyNav } from '../keyboard-nav.js'
 	import Ripple from '../ripple/Ripple.svelte'
 	import { revealSelected, tabStop } from './optionList.js'
-	import type { TimeColumnProps } from './types.js'
+	import type { TimeColumnProps } from './internalTypes.ts'
 
 	let { options, value, onselect, ...attributes }: TimeColumnProps = $props()
 
@@ -20,7 +20,7 @@
 	onkeydown={handleKeydown}
 >
 	{#each options as option (option.value)}
-		{@const selected = option.value === value}
+		{let selected = $derived(option.value === value)}
 		<button
 			{@attach selected && reveal}
 			type="button"

package/dist/date-picker/TimeColumn.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { TimeColumnProps } from './types.ts';
+import type { TimeColumnProps } from './internalTypes.ts';
 declare const TimeColumn: import("svelte").Component<TimeColumnProps, {}, "">;
 type TimeColumn = ReturnType<typeof TimeColumn>;
 export default TimeColumn;

package/dist/date-picker/YearGrid.svelte

@@ -84,7 +84,7 @@
 	onkeydown={handleKeydown}
 >
 	{#each years as { year, disabled } (year)}
-		{@const selected = year === value}
+		{let selected = $derived(year === value)}
 		<button
 			{@attach selected && scrollIntoGrid}
 			type="button"

package/dist/date-picker/internalTypes.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { TimeOption } from './types.ts';
+export interface TimeColumnProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onselect'> {
+    options: TimeOption[];
+    value?: number;
+    onselect?: (value: number) => void;
+}

package/dist/date-picker/internalTypes.js

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

package/dist/date-picker/types.d.ts

@@ -1,6 +1,8 @@
+import type { Issue } from '../shared/types.js';
 import type { Snippet } from 'svelte';
+import type { DockedFieldProps } from '../internal/fieldTypes.js';
 import type { TextFieldElement } from '../text-field/types.js';
-import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
+import type { HTMLAttributes } from 'svelte/elements';
 export type ISODate = string;
 export type ISODateTime = string;
 export interface DateRange {
@@ -27,26 +29,13 @@ interface MonthStepperLabelProps {
     nextMonthLabel?: string;
     previousMonthLabel?: string;
 }
-export interface DockedDatePickerProps extends Omit<HTMLAttributes<TextFieldElement>, 'onchange'>, DatePickerLocaleProps, DatePickerRangeProps, DatePickerCommonLabelProps, MonthStepperLabelProps {
-    value?: ISODate | number | null;
+interface DockedDateFieldProps extends DockedFieldProps {
     displayMonth?: ISODate;
-    open?: boolean;
-    element?: HTMLSpanElement;
-    name?: string;
-    form?: string;
-    required?: boolean;
-    disabled?: boolean;
-    readonly?: boolean;
-    variant?: 'outlined' | 'filled';
-    issues?: {
-        message: string;
-    }[];
+}
+export interface DockedDatePickerProps extends Omit<HTMLAttributes<TextFieldElement>, 'onchange'>, DatePickerLocaleProps, DatePickerRangeProps, DatePickerCommonLabelProps, MonthStepperLabelProps, DockedDateFieldProps {
+    value?: ISODate | number | null;
     defaultValue?: ISODate | number | null;
     type?: 'date';
-    noAsterisk?: boolean;
-    autocomplete?: HTMLInputAttributes['autocomplete'];
-    label?: string;
-    supportingText?: string;
     nextYearLabel?: string;
     previousYearLabel?: string;
     selectMonthLabel?: string;
@@ -55,28 +44,12 @@ export interface DockedDatePickerProps extends Omit<HTMLAttributes<TextFieldElem
     invalidDateMessage?: string;
     onchange?: (value: ISODate | undefined) => void;
 }
-export interface DockedDateTimePickerProps extends Omit<HTMLAttributes<TextFieldElement>, 'onchange'>, DatePickerLocaleProps, Omit<DatePickerRangeProps, 'min' | 'max'>, DatePickerCommonLabelProps, MonthStepperLabelProps {
+export interface DockedDateTimePickerProps extends Omit<HTMLAttributes<TextFieldElement>, 'onchange'>, DatePickerLocaleProps, Omit<DatePickerRangeProps, 'min' | 'max'>, DatePickerCommonLabelProps, MonthStepperLabelProps, DockedDateFieldProps {
     value?: ISODateTime | number | null;
-    displayMonth?: ISODate;
-    open?: boolean;
-    element?: HTMLSpanElement;
+    defaultValue?: ISODateTime | number | null;
     min?: ISODate | ISODateTime;
     max?: ISODate | ISODateTime;
-    name?: string;
-    form?: string;
-    required?: boolean;
-    disabled?: boolean;
-    readonly?: boolean;
-    variant?: 'outlined' | 'filled';
-    issues?: {
-        message: string;
-    }[];
-    defaultValue?: ISODateTime | number | null;
     type?: 'datetime-local';
-    noAsterisk?: boolean;
-    autocomplete?: HTMLInputAttributes['autocomplete'];
-    label?: string;
-    supportingText?: string;
     minuteStep?: number;
     hour12?: boolean;
     defaultTime?: string;
@@ -96,11 +69,6 @@ export interface TimeOption {
     label: string;
     disabled?: boolean;
 }
-export interface TimeColumnProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onselect'> {
-    options: TimeOption[];
-    value?: number;
-    onselect?: (value: number) => void;
-}
 export interface DatePickerDialogProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'onchange'>, DatePickerLocaleProps, DatePickerRangeProps, DatePickerCommonLabelProps, MonthStepperLabelProps {
     value?: ISODate | null;
     displayMonth?: ISODate;
@@ -113,9 +81,7 @@ export interface DatePickerDialogProps extends Omit<HTMLAttributes<HTMLDialogEle
     modeToggle?: boolean;
     label?: string;
     supportingText?: string;
-    issues?: {
-        message: string;
-    }[];
+    issues?: Issue[];
     selectYearLabel?: string;
     calendarModeLabel?: string;
     inputModeLabel?: string;

package/dist/dialog/Dialog.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Divider from '../divider/Divider.svelte'
 	import { syncOpenEffect } from '../popover.svelte.js'
-	import type { DialogProps } from './types.js'
+	import type { DialogProps } from './types.ts'
 
 	let {
 		element = $bindable(),

package/dist/divider/Divider.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { DividerProps } from './types.js'
+	import type { DividerProps } from './types.ts'
 
 	let { variant = 'full', element = $bindable(), ...attributes }: DividerProps = $props()
 </script>

package/dist/fab/ExtendedFab.svelte

@@ -4,7 +4,7 @@
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
 	import type { HTMLButtonAttributes } from 'svelte/elements'
-	import type { ExtendedFabProps } from './types.js'
+	import type { ExtendedFabProps } from './types.ts'
 
 	let {
 		variant = 'primary-container',
@@ -21,8 +21,8 @@
 
 	const uid = $props.id()
 
-	const isLink = $derived(attributes.href != null && !disabled)
-	const tooltipId = $derived(collapsed && label && !disabled ? uid : undefined)
+	let isLink = $derived(attributes.href != null && !disabled)
+	let tooltipId = $derived(collapsed && label && !disabled ? uid : undefined)
 
 	const morph = pressMorph()
 	morph.supersededBy(() => shape)
@@ -32,7 +32,7 @@
 		morph.press()
 	}
 
-	const classes = $derived([
+	let classes = $derived([
 		'np-extended-fab',
 		'np-focus-ring',
 		`np-fab-${variant}`,

package/dist/fab/Fab.svelte

@@ -4,7 +4,7 @@
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
 	import type { HTMLButtonAttributes } from 'svelte/elements'
-	import type { FabProps } from './types.js'
+	import type { FabProps } from './types.ts'
 
 	let {
 		variant = 'primary-container',
@@ -20,8 +20,8 @@
 
 	const uid = $props.id()
 
-	const isLink = $derived(attributes.href != null && !disabled)
-	const tooltipId = $derived(label && !disabled ? uid : undefined)
+	let isLink = $derived(attributes.href != null && !disabled)
+	let tooltipId = $derived(label && !disabled ? uid : undefined)
 
 	const morph = pressMorph()
 	morph.supersededBy(() => shape)
@@ -31,7 +31,7 @@
 		morph.press()
 	}
 
-	const classes = $derived([
+	let classes = $derived([
 		'np-fab',
 		'np-focus-ring',
 		`np-fab-${variant}`,

package/dist/fab/FabMenu.svelte

@@ -6,7 +6,7 @@
 	import { PRESS_DURATION } from '../press.svelte.js'
 	import { onMount } from 'svelte'
 	import Fab from './Fab.svelte'
-	import type { FabMenuProps } from './types.js'
+	import type { FabMenuProps } from './types.ts'
 
 	let {
 		label = 'Actions',
@@ -30,7 +30,7 @@
 
 	const ITEMS = 'button, a[href], [role="menuitem"]'
 	const attach = rovingTabindex(ITEMS)
-	const arrowHandler = $derived(
+	let arrowHandler = $derived(
 		arrowKeyNav(ITEMS, placement.startsWith('inline') ? 'horizontal' : 'vertical'),
 	)
 

package/dist/icons/Icon.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { IconProps } from './types.js'
+	import type { IconProps } from './types.ts'
 
 	let { children, element = $bindable(), ...attributes }: IconProps = $props()
 </script>

package/dist/internal/elementTag.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+type ElementTag = 'a' | 'button' | 'div';
+export type ElementKind = 'text' | 'link' | 'button' | 'submit' | 'reset';
+/** The props of a component that renders static content, a link or a button, see `elementTag`. */
+export interface ElementKindProps<E extends EventTarget> extends HTMLAttributes<E>, Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLButtonElement> | 'type'>, Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLAnchorElement> | 'type'> {
+    /**
+     * The element to render. Leave it out to follow `href` and `onclick`. `text` renders static
+     * content, `link` a link, and `button`, `submit` or `reset` a button of that type.
+     */
+    type?: ElementKind | null;
+}
+interface TagAttributes {
+    href?: string | null;
+    onclick?: unknown;
+    command?: unknown;
+    popovertarget?: unknown;
+}
+/**
+ * Picks the element for a component that can be static content, a link or a button. An explicit
+ * kind wins: `text`, `link`, or a native button type. Without one, `href` makes a link and a click
+ * handler, `command` or `popovertarget` makes a button.
+ */
+export declare const elementTag: (attributes: TagAttributes, kind?: ElementKind | null) => ElementTag;
+/** The native `type` for the button branch. Anything that is not a native button type becomes `button`. */
+export declare const buttonType: (kind?: ElementKind | null) => "reset" | "submit" | "button";
+export {};

package/dist/internal/elementTag.js

@@ -0,0 +1,23 @@
+/**
+ * Picks the element for a component that can be static content, a link or a button. An explicit
+ * kind wins: `text`, `link`, or a native button type. Without one, `href` makes a link and a click
+ * handler, `command` or `popovertarget` makes a button.
+ */
+export const elementTag = (attributes, kind) => {
+    if (kind === 'text')
+        return 'div';
+    if (kind === 'link')
+        return 'a';
+    if (kind === 'button' || kind === 'submit' || kind === 'reset')
+        return 'button';
+    if (attributes.href != null)
+        return 'a';
+    if (attributes.onclick != null ||
+        attributes.command != null ||
+        attributes.popovertarget != null) {
+        return 'button';
+    }
+    return 'div';
+};
+/** The native `type` for the button branch. Anything that is not a native button type becomes `button`. */
+export const buttonType = (kind) => kind === 'submit' || kind === 'reset' ? kind : 'button';

package/dist/internal/fieldTypes.d.ts

@@ -0,0 +1,24 @@
+import type { Issue } from '../shared/types.js';
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+export interface FieldProps {
+    label?: string;
+    supportingText?: string;
+    issues?: Issue[];
+    prefixText?: string;
+    suffixText?: string;
+    variant?: 'outlined' | 'filled';
+    start?: Snippet;
+    end?: Snippet;
+    noAsterisk?: boolean;
+    element?: HTMLSpanElement;
+    inputElement?: HTMLInputElement | HTMLTextAreaElement;
+    populated?: boolean;
+    clientWidth?: number;
+    clientHeight?: number;
+    focused?: boolean;
+}
+/** The text field props the docked date and time pickers forward to their field. */
+export interface DockedFieldProps extends Pick<FieldProps, 'label' | 'supportingText' | 'issues' | 'variant' | 'noAsterisk' | 'start' | 'element'>, Pick<HTMLInputAttributes, 'name' | 'form' | 'required' | 'disabled' | 'readonly' | 'autocomplete'> {
+    open?: boolean;
+}

package/dist/internal/fieldTypes.js

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

package/dist/list/Item.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import '../internal/focus-ring.css'
+	import { buttonType, elementTag } from '../internal/elementTag.js'
 	import Ripple from '../ripple/Ripple.svelte'
-	import type { ItemProps } from './types.js'
+	import type { ItemProps } from './types.ts'
 
 	let {
 		selected = false,
@@ -13,9 +14,12 @@
 		softFocus = false,
 		lazy = false,
 		variant,
+		type,
 		element = $bindable(),
 		...attributes
 	}: ItemProps = $props()
+
+	let tag = $derived(elementTag(attributes, type ?? variant))
 </script>
 
 {#snippet content()}
@@ -32,14 +36,22 @@
 		</div>
 		{#if supportingText}
 			<div class="np-item-supporting-text">
-				{@render supportingText()}
+				{#if typeof supportingText === 'string'}
+					{supportingText}
+				{:else}
+					{@render supportingText()}
+				{/if}
 			</div>
 		{/if}
 	</div>
 
 	{#if end}
 		<div class={['np-item-end', selected && 'selected', disabled && 'disabled']}>
-			{@render end()}
+			{#if typeof end === 'string'}
+				{end}
+			{:else}
+				{@render end()}
+			{/if}
 		</div>
 	{/if}
 {/snippet}
@@ -53,7 +65,7 @@
 	>
 		{@render content()}
 	</div>
-{:else if variant === 'text' || variant === undefined}
+{:else if tag === 'div'}
 	<div
 		{...attributes}
 		bind:this={element}
@@ -61,17 +73,17 @@
 	>
 		{@render content()}
 	</div>
-{:else if variant === 'button'}
+{:else if tag === 'button'}
 	<button
 		{...attributes}
 		bind:this={element}
-		type={attributes.type ?? 'button'}
+		type={buttonType(type)}
 		class={['np-item', selected && 'selected', lazy && 'np-item-lazy', attributes.class]}
 	>
 		{@render content()}
 		<Ripple forceHover={softFocus} />
 	</button>
-{:else if variant === 'link'}
+{:else}
 	<a
 		{...attributes}
 		bind:this={element}

package/dist/list/List.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { ListProps } from './types.js'
+	import type { ListProps } from './types.ts'
 
 	let { element = $bindable(), children, ...attributes }: ListProps = $props()
 </script>

package/dist/list/ListItem.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Item from './Item.svelte'
-	import type { ListItemProps } from './types.js'
+	import type { ListItemProps } from './types.ts'
 
 	let { element = $bindable(), ...attributes }: ListItemProps = $props()
 </script>

package/dist/list/types.d.ts

@@ -1,16 +1,17 @@
 import type { Snippet } from 'svelte';
-import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { ElementKindProps } from '../internal/elementTag.js';
+import type { HTMLAttributes } from 'svelte/elements';
 export type ItemElement = HTMLButtonElement | HTMLAnchorElement | HTMLDivElement;
-export interface ItemProps extends HTMLAttributes<ItemElement>, Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLButtonElement> | 'type'>, Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLAnchorElement> | 'type'> {
+export interface ItemProps extends ElementKindProps<ItemElement> {
     selected?: boolean;
     start?: Snippet;
-    end?: Snippet;
-    disabled?: boolean;
-    variant?: 'button' | 'link' | 'text';
-    supportingText?: Snippet;
+    /** Trailing content, such as an icon or short supporting text like a count. */
+    end?: string | Snippet;
+    supportingText?: string | Snippet;
     softFocus?: boolean;
     lazy?: boolean;
-    type?: 'submit' | 'reset' | 'button' | null;
+    /** @deprecated Use `type`, like on `Card`. */
+    variant?: 'button' | 'link' | 'text';
     element?: ItemElement;
 }
 export type ListItemProps = ItemProps;

package/dist/loading-indicator/LoadingIndicator.svelte

@@ -1,6 +1,6 @@
 <script module lang="ts">
-	import { SCALE, SHAPES, VIEWBOX, outlinePath } from './shapes.js'
-	import type { LoadingIndicatorProps } from './types.js'
+	import { SCALE, SHAPES, VIEWBOX, outlinePath } from './shapes.ts'
+	import type { LoadingIndicatorProps } from './types.ts'
 
 	const MORPH_DURATION = 650
 	const QUARTER_TURN = 90

package/dist/menu/Menu.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
 	import { popoverController, syncOpenEffect } from '../popover.svelte.js'
-	import type { MenuProps } from './types.js'
+	import type { MenuProps } from './types.ts'
 
 	const MENU_ITEM_SELECTOR = '[role="menuitem"]'
 	const attach = rovingTabindex(MENU_ITEM_SELECTOR)

package/dist/menu/MenuItem.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
 	import Item from '../list/Item.svelte'
-	import type { MenuItemProps } from './types.js'
+	import type { MenuItemProps } from './types.ts'
 
 	let { element = $bindable(), ...attributes }: MenuItemProps = $props()
-
-	const isLink = $derived(attributes.href != null)
 </script>
 
 <div class="np-menu-item" role="none">
-	<Item role="menuitem" bind:element {...attributes} variant={isLink ? 'link' : 'button'} />
+	<!-- Without a link to follow, a menu item is still a button. -->
+	<Item
+		role="menuitem"
+		bind:element
+		{...attributes}
+		type={attributes.type ?? (attributes.href == null ? 'button' : undefined)}
+	/>
 </div>
 
 <style>

package/dist/navigation-bar/NavigationBar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
-	import type { NavigationBarProps } from './types.js'
+	import type { NavigationBarProps } from './types.ts'
 
 	let {
 		children,

package/dist/navigation-bar/NavigationBarItem.svelte

@@ -3,7 +3,7 @@
 	import Badge from '../badge/Badge.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { HTMLButtonAttributes } from 'svelte/elements'
-	import type { NavigationBarItemProps } from './types.js'
+	import type { NavigationBarItemProps } from './types.ts'
 
 	let {
 		selected = false,
@@ -20,8 +20,8 @@
 
 	let touchEl: HTMLSpanElement | undefined = $state()
 
-	const isLink = $derived(attributes.href != null)
-	const classes = $derived([
+	let isLink = $derived(attributes.href != null)
+	let classes = $derived([
 		'np-navigation-bar-item',
 		selected && 'np-navigation-bar-item-selected',
 		labelBehavior === 'selected' && 'np-navigation-bar-item-label-selected',