bitboss-ui 2.1.134 → 3.0.0-alpha.1

package/dist/ai/source/BbButton.md

@@ -0,0 +1,990 @@
+# BbButton — Implementation Source
+
+> Full implementation for deep dives. For everyday usage read the typed contract: [../BbButton.md](../BbButton.md).
+
+## Template & Script
+
+```vue
+<template>
+	<BbBaseButton
+		:ref="setButtonRef"
+		v-bind="propsToPass"
+		:aria-disabled="loading ? true : undefined"
+		:aria-pressed="isToggle ? isPressed : undefined"
+		class="bb-button"
+		:class="{
+			...sizeClasses,
+			'bb-button--loading': loading,
+			'bb-button--group': props.group,
+			'bb-button--icon': !!icon,
+			'bb-button--active': isToggle && isPressed,
+			[`bb-button--${props.variant}`]: props.variant !== 'none',
+		}"
+		:disabled="props.disabled"
+		:tabindex="loading ? -1 : undefined"
+		@click="onClick"
+	>
+		<!-- v-if'd so idle buttons carry no spinner node (and no running
+		     keyframe animation). The <Transition> keeps the fade smooth: the
+		     node persists through the leave phase, so the sibling cross-fade
+		     and label-slide CSS keep matching while everything animates back. -->
+		<Transition appear name="bb-button-spinner">
+			<BbSpinner v-if="loading" class="bb-button__spinner" />
+		</Transition>
+		<BbIcon
+			v-if="props['icon']"
+			class="bb-button__icon"
+			:icon="props['icon']"
+		/>
+		<BbIcon
+			v-else-if="props['prepend:icon']"
+			class="bb-button__prepend-icon"
+			:icon="props['prepend:icon']"
+		/>
+		<span class="bb-button__content" :class="{ 'sr-only': !!icon }"
+			><slot>{{ text }}</slot></span
+		>
+		<span v-if="loading" class="bb-button__loading-label sr-only">{{
+			t('common.loadingText')
+		}}</span>
+
+		<BbIcon
+			v-if="!icon && props['append:icon']"
+			class="bb-button__append-icon"
+			:icon="props['append:icon']"
+		/>
+	</BbBaseButton>
+</template>
+
+<script setup lang="ts">
+import { BbBaseButton, BbSpinner } from '@/index';
+import BbIcon from '../BbIcon/BbIcon.vue';
+import { computed, ref, toRef, useAttrs } from 'vue';
+import { pickBy } from '@/utilities/functions/pickBy';
+import { noop } from '@/utilities/functions/noop';
+import { useLocale } from '@/composables/useLocale';
+import { useLogger } from '@/composables/useLogger';
+import { removedPropsFor } from '@/deprecation/removedProps';
+import { warnRemovedAttrs } from '@/utilities/functions/warnRemovedAttrs';
+import { extractDomContainer } from '@/utilities/functions/extractDomContainer';
+import { isEqual } from '@/utilities/functions/isEqual';
+import type { BbButtonProps, BbButtonSlots } from './types';
+import type { Sizes as SizeMap } from '@/types/SizeScale';
+type Sizes = keyof SizeMap;
+
+defineOptions({
+	inheritAttrs: false,
+});
+const modelValue = defineModel<any>();
+const props = withDefaults(defineProps<BbButtonProps>(), {
+	falseValue: false,
+	size: 'md',
+	trueValue: true,
+	variant: 'primary',
+});
+defineSlots<BbButtonSlots>();
+
+if (process.env.NODE_ENV !== 'production')
+	warnRemovedAttrs('BbButton', removedPropsFor('BbButton'));
+
+const BUTTON_SIZES = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const;
+const logger = useLogger();
+
+const isToggle = computed(() => modelValue.value !== undefined);
+const isPressed = computed(() => isEqual(modelValue.value, props.trueValue));
+
+const { t } = useLocale();
+const attrs = useAttrs();
+const buttonDom = ref<HTMLElement>();
+
+const setButtonRef = (el: unknown) => {
+	buttonDom.value = extractDomContainer(el) ?? undefined;
+};
+
+const forwardedAttrs = computed(() => {
+	const { onClick: _, ...rest } = attrs;
+	return rest;
+});
+
+const internalLoading = ref(0);
+
+const loading = computed(
+	() => props.loading || (!!internalLoading.value && !props.disableAutoLoading)
+);
+
+const onClick = async (event: Event) => {
+	if (loading.value && !props.interactiveWhileLoading) {
+		// router-link doesn't allow for prevent default but the logic stays
+		if (props.type === 'submit' || props.href || props.to) {
+			event.preventDefault();
+		}
+		return null;
+	}
+	if (isToggle.value) {
+		const trueVal = props.trueValue;
+		const falseVal = props.falseValue;
+		modelValue.value = isEqual(modelValue.value, trueVal) ? falseVal : trueVal;
+	}
+	internalLoading.value++;
+	try {
+		await ((attrs.onClick ?? noop) as (...args: any[]) => any)(event);
+	} finally {
+		// Always release the auto-loading counter, even if the handler rejects,
+		// so a failing async onClick doesn't leave the button stuck loading.
+		internalLoading.value--;
+	}
+};
+
+const sizeClasses = computed(() => {
+	const base: { default: Sizes } & Partial<Record<string, Sizes>> =
+		typeof props.size === 'string'
+			? { default: props.size }
+			: { default: 'md', ...props.size };
+
+	return Object.fromEntries(
+		(Object.entries(base) as Array<[string, Sizes]>).map(([key, value]) => {
+			let resolved = value;
+			if (!BUTTON_SIZES.includes(value as (typeof BUTTON_SIZES)[number])) {
+				logger.warn(
+					`Invalid size: "${value}" in BbButton. Expected one of: ${BUTTON_SIZES.join(', ')}. Falling back to "md".`
+				);
+				resolved = 'md';
+			}
+			return [
+				key === 'default'
+					? `bb-button--${resolved}`
+					: `bb-button--${key}-${resolved}`,
+				true,
+			];
+		})
+	);
+});
+
+const propsToPass = toRef(() => ({
+	...forwardedAttrs.value,
+	...pickBy(
+		props,
+		(_, key) =>
+			![
+				'append:icon',
+				'disableAutoLoading',
+				'disabled',
+				'interactiveWhileLoading',
+				'falseValue',
+				'group',
+				'icon',
+				'loading',
+				'modelValue',
+				'prepend:icon',
+				'size',
+				'trueValue',
+				'variant',
+			].includes(key)
+	),
+}));
+
+/**
+ * Redefined so current implementation of other components
+ * which leverage this component can still access the button
+ * DOM element
+ */
+defineExpose({ $el: buttonDom });
+</script>
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+import type { RouteLocationRaw } from 'vue-router';
+import type { ButtonTag } from '@/types/CommonProps';
+import type { IconType } from '@/types/Icon';
+import type { ButtonVariantType } from '@/types/ButtonVariant';
+import type { Responsive } from '@/types/ResponsiveSize';
+
+type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+export type BbButtonProps = {
+	/**
+	 * Disables the automatic loading state that tracks async click handlers
+	 * (enabled by default).
+	 *
+	 * @defaultValue `false`
+	 */
+	disableAutoLoading?: boolean;
+	/**
+	 * Class to apply when the link is active.
+	 */
+	activeClass?: string;
+	/**
+	 * Value passed to the attribute `aria-current` when the link is exact active.
+	 *
+	 * @defaultValue `'page'`
+	 */
+	ariaCurrentValue?:
+		| 'page'
+		| 'step'
+		| 'location'
+		| 'date'
+		| 'time'
+		| 'true'
+		| 'false';
+	/**
+	 * Icon to be added on the right of the text.
+	 */
+
+	'append:icon'?: IconType;
+	/**
+	 * Displays the component as full width.
+	 */
+	block?: boolean;
+
+	data?: object;
+
+	/**
+	 * Disables the component.
+	 */
+	disabled?: boolean;
+
+	/**
+	 * Keeps the button clickable while it is loading. Buttons are disabled
+	 * while loading by default; this escape hatch exists for toggles that
+	 * must stay interactive (e.g. the dropdown-button caret).
+	 */
+	interactiveWhileLoading?: boolean;
+
+	/**
+	 * Class to apply when the link is exact active.
+	 */
+	exactActiveClass?: string;
+
+	/**
+	 * Identifies the button as part of a button group.
+	 */
+	group?: boolean;
+
+	headers?: object;
+
+	/**
+	 * Returns the hyperlink's URL.
+	 *
+	 * Can be set, to change the URL.
+	 */
+	href?: HTMLAnchorElement['href'];
+	/**
+	 * Marks an `href` link as a download: renders a plain `<a download>` doing a
+	 * native navigation (never an Inertia/router visit), so file downloads work.
+	 * Pass a string for the suggested filename. A native-anchor signal alongside
+	 * `target` and `external`.
+	 */
+	download?: boolean | string;
+	/**
+	 * Forces an `href` link to render as a plain `<a>` (native navigation),
+	 * bypassing Inertia/router interception — same intent as Nuxt's `external`.
+	 * A native-anchor signal alongside `target` and `download`.
+	 */
+	external?: boolean;
+	/**
+	 * Used when only an icon with no text should be displayed.
+	 */
+	icon?: IconType;
+
+	/**
+	 * Triggers a loading indicator.
+	 */
+	loading?: boolean;
+
+	method?: 'get' | 'post' | 'put' | 'patch' | 'delete';
+
+	onBefore?: () => void;
+
+	onCancel?: () => void;
+
+	onCancelToken?: (cancelToken: unknown) => void;
+
+	onFinish?: () => void;
+
+	only?: string[];
+
+	onProgress?: (progress: { percentage: number | undefined }) => void;
+
+	onStart?: () => void;
+
+	onSuccess?: () => void;
+
+	/**
+	 * Icon to be added on the left of the text.
+	 */
+
+	'prepend:icon'?: IconType;
+
+	preserveScroll?: boolean | ((props: Record<string, unknown>) => boolean);
+
+	preserveState?:
+		| boolean
+		| ((props: Record<string, unknown>) => boolean)
+		| null;
+
+	queryStringArrayFormat?: 'brackets' | 'indices';
+
+	/**
+	 * Calls `router.replace` instead of `router.push`.
+	 */
+	replace?: boolean;
+
+	/**
+	 * Sets the size of the button. A single value applies at every breakpoint;
+	 * a per-breakpoint map (e.g. `{ default: 'sm', lg: 'md' }`) switches
+	 * responsively. Purely CSS-driven — no runtime breakpoint watching.
+	 *
+	 * @defaultValue `'md'`
+	 */
+	size?: Responsive<Sizes>;
+
+	/**
+	 * Element to render for the plain (non-link, non-router) button: `'button'`
+	 * (default), `'div'`/`'span'` when nesting inside another button or link, or
+	 * `'label'` for a file-upload trigger. Ignored when `href`/`to` make the
+	 * button render as a link.
+	 *
+	 * @defaultValue `'button'`
+	 */
+	tag?: ButtonTag;
+
+	/**
+	 * Sets or retrieves the window or frame at which to target content.
+	 */
+	target?: HTMLAnchorElement['target'];
+
+	/**
+	 * Text content of the component.
+	 */
+	text?: string;
+
+	/**
+	 * Route Location the link should navigate to when clicked on.
+	 */
+	to?: RouteLocationRaw;
+
+	/**
+	 * Value emitted when the toggle is activated.
+	 *
+	 * @defaultValue `true`
+	 */
+	trueValue?: any;
+
+	/**
+	 * Value emitted when the toggle is deactivated.
+	 *
+	 * @defaultValue `false`
+	 */
+	falseValue?: any;
+
+	/**
+	 * Gets the classification and default behavior of the button.
+	 */
+	type?: 'button' | 'submit' | 'reset';
+
+	/**
+	 * Visual variant of the button. Controls colors and surface style while
+	 * keeping spacing and sizing unchanged.
+	 *
+	 * @defaultValue `'primary'`
+	 */
+	variant?: ButtonVariantType;
+};
+
+export type BbButtonSlots = {
+	/**
+	 * Primary content rendered inside the button. Falls back to the `text` prop when empty.
+	 */
+	default?: (props: object) => any;
+};
+```
+
+## Styles
+
+```css
+.bb-button {
+	/* ── Scale tokens (height / icon / px / font-size) ───────
+	   Heights and font sizes derive from the global scale knobs so retuning
+	   `--bb-control-h` / `--bb-fs` resizes the whole button scale coherently
+	   (md sits one step under the input height, lg matches it). */
+	--h-xs: calc(var(--bb-control-h) - 12px);
+	--icon-size-xs: 12px;
+	--px-xs: 8px;
+	--fs-xs: calc(var(--bb-fs) - 4px);
+	--r-xs: var(--bb-radius-sm);
+	--gap-xs: 3px;
+
+	--h-sm: calc(var(--bb-control-h) - 8px);
+	--icon-size-sm: 14px;
+	--px-sm: 10px;
+	--fs-sm: calc(var(--bb-fs) - 2px);
+	--r-sm: calc(var(--bb-radius) * 0.8);
+	--gap-sm: 4px;
+
+	--h-md: calc(var(--bb-control-h) - 4px);
+	--icon-size-md: 16px;
+	--px-md: 12px;
+	--fs-md: var(--bb-fs);
+	--r-md: var(--bb-radius);
+	--gap-md: 5px;
+
+	--h-lg: var(--bb-control-h);
+	--icon-size-lg: 16px;
+	--px-lg: 14px;
+	--fs-lg: var(--bb-fs);
+	--r-lg: var(--bb-radius);
+	--gap-lg: 5px;
+
+	--h-xl: calc(var(--bb-control-h) + 4px);
+	--icon-size-xl: 20px;
+	--px-xl: 16px;
+	--fs-xl: calc(var(--bb-fs) + 1px);
+	--r-xl: var(--bb-radius);
+	--gap-xl: 6px;
+
+	--h-2xl: calc(var(--bb-control-h) + 8px);
+	--icon-size-2xl: 22px;
+	--px-2xl: 18px;
+	--fs-2xl: calc(var(--bb-fs) + 2px);
+	--r-2xl: var(--bb-radius);
+	--gap-2xl: 6px;
+
+	/* ── Active size (defaults to md) ───────────────────────── */
+	--h: var(--h-md);
+	--icon-size: var(--icon-size-md);
+	--px: var(--px-md);
+	--fs: var(--fs-md);
+	--r: var(--r-md);
+	--gap: var(--gap-md);
+
+	align-items: center;
+	border-color: transparent;
+	border-radius: var(--r);
+	border-style: solid;
+	border-width: 1px;
+	box-shadow: 0px 0px 0px 0px var(--bb-ring);
+	display: inline-flex;
+	font-size: var(--fs);
+	font-weight: 500;
+	gap: var(--gap);
+	justify-content: center;
+	line-height: var(--fs);
+	min-height: var(--h);
+	padding-left: var(--px);
+	padding-right: var(--px);
+	transition-duration: var(--bb-transition-fast);
+	transition-property:
+		box-shadow, color, background-color, min-height, font-size, padding-left;
+	transition-timing-function: var(--bb-ease);
+	vertical-align: top;
+
+	&:focus-visible {
+		outline: none;
+	}
+
+	/* ── Variants ──────────────────────────────────────────── */
+
+	&.bb-button--primary {
+		background-color: var(--bb-primary);
+		border-color: var(--bb-primary-border);
+		color: var(--bb-primary-fg);
+
+		&:hover:not(.bb-base-button--disabled) {
+			background-color: var(--bb-primary-hover);
+		}
+
+		&[aria-pressed='true']:not(.bb-base-button--disabled) {
+			background-color: var(--bb-primary-pressed);
+		}
+
+		&:focus-visible {
+			background-color: var(--bb-primary-hover);
+			box-shadow: 0px 0px 0px var(--bb-ring-size) var(--bb-primary-ring);
+		}
+
+		& + .bb-button--group {
+			border-left-color: color-mix(
+				in oklab,
+				var(--bb-primary) 60%,
+				var(--bb-border)
+			);
+		}
+	}
+
+	&.bb-button--secondary {
+		background-color: var(--bb-secondary);
+		border-color: var(--bb-secondary-border);
+		color: var(--bb-secondary-fg);
+
+		&:hover:not(.bb-base-button--disabled) {
+			background-color: var(--bb-secondary-hover);
+		}
+
+		&[aria-pressed='true']:not(.bb-base-button--disabled) {
+			background-color: var(--bb-secondary-pressed);
+		}
+
+		&:focus-visible {
+			background-color: var(--bb-secondary-hover);
+			box-shadow: 0px 0px 0px var(--bb-ring-size) var(--bb-secondary-ring);
+		}
+
+		& + .bb-button--group {
+			border-left-color: var(--bb-secondary-pressed);
+		}
+	}
+
+	&.bb-button--outline {
+		background-color: var(--bb-outline);
+		border-color: var(--bb-outline-border);
+		color: var(--bb-outline-fg);
+
+		&:hover:not(.bb-base-button--disabled) {
+			background-color: var(--bb-outline-hover);
+		}
+
+		&[aria-pressed='true']:not(.bb-base-button--disabled) {
+			background-color: var(--bb-outline-pressed);
+		}
+
+		&:focus-visible {
+			background-color: var(--bb-outline-hover);
+			box-shadow: 0px 0px 0px var(--bb-ring-size) var(--bb-outline-ring);
+		}
+	}
+
+	&.bb-button--ghost {
+		background-color: var(--bb-ghost);
+		border-color: var(--bb-ghost-border);
+		color: var(--bb-ghost-fg);
+
+		&:hover:not(.bb-base-button--disabled) {
+			background-color: var(--bb-ghost-hover);
+		}
+
+		&[aria-pressed='true']:not(.bb-base-button--disabled) {
+			background-color: var(--bb-ghost-pressed);
+		}
+
+		&:focus-visible {
+			background-color: var(--bb-ghost-hover);
+			box-shadow: 0px 0px 0px var(--bb-ring-size) var(--bb-ghost-ring);
+		}
+	}
+
+	&.bb-button--destructive {
+		background-color: var(--bb-destructive);
+		border-color: var(--bb-destructive-border);
+		color: var(--bb-destructive-fg);
+
+		&:hover:not(.bb-base-button--disabled) {
+			background-color: var(--bb-destructive-hover);
+		}
+
+		&[aria-pressed='true']:not(.bb-base-button--disabled) {
+			background-color: var(--bb-destructive-pressed);
+		}
+
+		&:focus-visible {
+			background-color: var(--bb-destructive-hover);
+			box-shadow: 0px 0px 0px var(--bb-ring-size) var(--bb-destructive-ring);
+		}
+	}
+
+	&.bb-button--link {
+		background-color: var(--bb-link);
+		border-color: var(--bb-link-border);
+		color: var(--bb-link-fg);
+		text-underline-offset: 4px;
+
+		&:hover:not(.bb-base-button--disabled) {
+			background-color: var(--bb-link-hover);
+			text-decoration: underline;
+		}
+
+		&[aria-pressed='true']:not(.bb-base-button--disabled) {
+			background-color: var(--bb-link-pressed);
+		}
+
+		&:focus-visible {
+			background-color: var(--bb-link-hover);
+			box-shadow: 0px 0px 0px var(--bb-ring-size) var(--bb-link-ring);
+			text-decoration: underline;
+		}
+	}
+
+	/* Disabled — after variants so it wins the cascade */
+	&.bb-base-button--disabled {
+		cursor: not-allowed;
+
+		&:not(.bb-button--loading) {
+			background-color: var(--bb-muted);
+			border-color: var(--bb-muted);
+			color: color-mix(in oklab, var(--bb-text) 45%, var(--bb-panel));
+		}
+	}
+
+	&.bb-button--icon {
+		min-width: var(--h);
+		padding-left: 0;
+		padding-right: 0;
+	}
+
+	&:has(.bb-button__prepend-icon),
+	&.bb-button--loading:not(.bb-button--icon):not(
+			:has(.bb-button__append-icon)
+		) {
+		padding-left: calc(var(--px) * 0.65);
+	}
+
+	&:has(.bb-button__append-icon) {
+		padding-right: calc(var(--px) * 0.65);
+	}
+
+	&.bb-button--loading {
+		/* Soft-disable: keep the variant colors (no hard swap) but ignore every
+		   pointer action while loading — clicks, and router-link/anchor navigation
+		   that a JS preventDefault can't stop. Keyboard is handled in onClick. */
+		pointer-events: none;
+
+		.bb-spinner {
+			/* Whatever icon the spinner is parked on top of — the icon-only glyph
+			   or the prepend icon — fades out from under it. */
+			+ .bb-icon {
+				opacity: 0;
+			}
+
+			/* No icon to hide behind: carve the spinner's slot out of the label. */
+			+ .bb-button__content {
+				margin-left: calc(var(--gap) + var(--icon-size));
+			}
+		}
+
+		/* Append-only: the spinner is parked on the append icon (see `order`
+		   below), so that icon fades instead and the label must not shift. */
+		&:has(.bb-button__append-icon):not(:has(.bb-button__prepend-icon)) {
+			.bb-button__append-icon {
+				opacity: 0;
+			}
+
+			.bb-spinner + .bb-button__content {
+				margin-left: 0;
+			}
+		}
+	}
+
+	&.bb-button--group {
+		&:has(+ .bb-button--group) {
+			border-bottom-right-radius: 0;
+			border-right-width: 0;
+			border-top-right-radius: 0;
+		}
+
+		& + .bb-button--group {
+			border-bottom-left-radius: 0 !important;
+			border-top-left-radius: 0 !important;
+		}
+	}
+
+	&.bb-button--xs {
+		--h: var(--h-xs);
+		--icon-size: var(--icon-size-xs);
+		--px: var(--px-xs);
+		--fs: var(--fs-xs);
+		--r: var(--r-xs);
+		--gap: var(--gap-xs);
+	}
+
+	&.bb-button--sm {
+		--h: var(--h-sm);
+		--icon-size: var(--icon-size-sm);
+		--px: var(--px-sm);
+		--fs: var(--fs-sm);
+		--r: var(--r-sm);
+		--gap: var(--gap-sm);
+	}
+
+	&.bb-button--md {
+		--h: var(--h-md);
+		--icon-size: var(--icon-size-md);
+		--px: var(--px-md);
+		--fs: var(--fs-md);
+		--r: var(--r-md);
+		--gap: var(--gap-md);
+	}
+
+	&.bb-button--lg {
+		--h: var(--h-lg);
+		--icon-size: var(--icon-size-lg);
+		--px: var(--px-lg);
+		--fs: var(--fs-lg);
+		--r: var(--r-lg);
+		--gap: var(--gap-lg);
+	}
+
+	&.bb-button--xl {
+		--h: var(--h-xl);
+		--icon-size: var(--icon-size-xl);
+		--px: var(--px-xl);
+		--fs: var(--fs-xl);
+		--r: var(--r-xl);
+		--gap: var(--gap-xl);
+	}
+
+	&.bb-button--2xl {
+		--h: var(--h-2xl);
+		--icon-size: var(--icon-size-2xl);
+		--px: var(--px-2xl);
+		--fs: var(--fs-2xl);
+		--r: var(--r-2xl);
+		--gap: var(--gap-2xl);
+	}
+	.bb-button__content {
+		margin-left: 0;
+		transition: margin-left var(--bb-transition-medium) var(--bb-ease);
+	}
+
+	.bb-spinner,
+	.bb-button__icon,
+	.bb-button__prepend-icon,
+	.bb-button__append-icon {
+		color: currentColor;
+		display: inline-block;
+		flex-shrink: 0;
+		height: var(--icon-size);
+		transition: opacity var(--bb-transition-medium) var(--bb-ease);
+		width: var(--icon-size);
+	}
+
+	/* The spinner mounts only while loading (plus its fade-out), first in the
+	   DOM and at zero layout cost: its width plus the flex gap are cancelled
+	   by an equal negative margin, so it lands exactly on top of the neighbour
+	   it stands in for. The fade itself is the Vue <Transition> below. */
+	.bb-spinner {
+		margin-right: calc((var(--gap) + var(--icon-size)) * -1);
+	}
+
+	/* <Transition name="bb-button-spinner"> endpoints; the duration comes from
+	   the shared `transition: opacity` on `.bb-spinner` above. */
+	.bb-button-spinner-enter-from,
+	.bb-button-spinner-leave-to {
+		opacity: 0;
+	}
+
+	/* …unless the only icon is the append one — then `order` moves the spinner
+	   to the tail of the flex row and the negative margin flips to the left, so
+	   it overlays the append icon by the same zero-cost trick. */
+	&:has(.bb-button__append-icon):not(:has(.bb-button__prepend-icon)) {
+		.bb-spinner {
+			margin-left: calc((var(--gap) + var(--icon-size)) * -1);
+			margin-right: 0;
+			order: 1;
+		}
+	}
+}
+
+@media (min-width: 640px) {
+	.bb-button {
+		&.bb-button--sm-xs {
+			--h: var(--h-xs);
+			--fs: var(--fs-xs);
+			--gap: var(--gap-xs);
+		}
+
+		&.bb-button--sm-sm {
+			--h: var(--h-sm);
+			--fs: var(--fs-sm);
+			--gap: var(--gap-sm);
+		}
+
+		&.bb-button--sm-md {
+			--h: var(--h-md);
+			--fs: var(--fs-md);
+			--gap: var(--gap-md);
+		}
+
+		&.bb-button--sm-lg {
+			--h: var(--h-lg);
+			--fs: var(--fs-lg);
+			--gap: var(--gap-lg);
+		}
+
+		&.bb-button--sm-xl {
+			--h: var(--h-xl);
+			--fs: var(--fs-xl);
+			--gap: var(--gap-xl);
+		}
+
+		&.bb-button--sm-2xl {
+			--h: var(--h-2xl);
+			--fs: var(--fs-2xl);
+			--gap: var(--gap-2xl);
+		}
+	}
+}
+
+@media (min-width: 768px) {
+	.bb-button {
+		&.bb-button--md-xs {
+			--h: var(--h-xs);
+			--fs: var(--fs-xs);
+			--gap: var(--gap-xs);
+		}
+
+		&.bb-button--md-sm {
+			--h: var(--h-sm);
+			--fs: var(--fs-sm);
+			--gap: var(--gap-sm);
+		}
+
+		&.bb-button--md-md {
+			--h: var(--h-md);
+			--fs: var(--fs-md);
+			--gap: var(--gap-md);
+		}
+
+		&.bb-button--md-lg {
+			--h: var(--h-lg);
+			--fs: var(--fs-lg);
+			--gap: var(--gap-lg);
+		}
+
+		&.bb-button--md-xl {
+			--h: var(--h-xl);
+			--fs: var(--fs-xl);
+			--gap: var(--gap-xl);
+		}
+
+		&.bb-button--md-2xl {
+			--h: var(--h-2xl);
+			--fs: var(--fs-2xl);
+			--gap: var(--gap-2xl);
+		}
+	}
+}
+
+@media (min-width: 1024px) {
+	.bb-button {
+		&.bb-button--lg-xs {
+			--h: var(--h-xs);
+			--fs: var(--fs-xs);
+			--gap: var(--gap-xs);
+		}
+
+		&.bb-button--lg-sm {
+			--h: var(--h-sm);
+			--fs: var(--fs-sm);
+			--gap: var(--gap-sm);
+		}
+
+		&.bb-button--lg-md {
+			--h: var(--h-md);
+			--fs: var(--fs-md);
+			--gap: var(--gap-md);
+		}
+
+		&.bb-button--lg-lg {
+			--h: var(--h-lg);
+			--fs: var(--fs-lg);
+			--gap: var(--gap-lg);
+		}
+
+		&.bb-button--lg-xl {
+			--h: var(--h-xl);
+			--fs: var(--fs-xl);
+			--gap: var(--gap-xl);
+		}
+
+		&.bb-button--lg-2xl {
+			--h: var(--h-2xl);
+			--fs: var(--fs-2xl);
+			--gap: var(--gap-2xl);
+		}
+	}
+}
+
+@media (min-width: 1280px) {
+	.bb-button {
+		&.bb-button--xl-xs {
+			--h: var(--h-xs);
+			--fs: var(--fs-xs);
+			--gap: var(--gap-xs);
+		}
+
+		&.bb-button--xl-sm {
+			--h: var(--h-sm);
+			--fs: var(--fs-sm);
+			--gap: var(--gap-sm);
+		}
+
+		&.bb-button--xl-md {
+			--h: var(--h-md);
+			--fs: var(--fs-md);
+			--gap: var(--gap-md);
+		}
+
+		&.bb-button--xl-lg {
+			--h: var(--h-lg);
+			--fs: var(--fs-lg);
+			--gap: var(--gap-lg);
+		}
+
+		&.bb-button--xl-xl {
+			--h: var(--h-xl);
+			--fs: var(--fs-xl);
+			--gap: var(--gap-xl);
+		}
+
+		&.bb-button--xl-2xl {
+			--h: var(--h-2xl);
+			--fs: var(--fs-2xl);
+			--gap: var(--gap-2xl);
+		}
+	}
+}
+
+@media (min-width: 1536px) {
+	.bb-button {
+		&.bb-button--2xl-xs {
+			--h: var(--h-xs);
+			--fs: var(--fs-xs);
+			--gap: var(--gap-xs);
+		}
+
+		&.bb-button--2xl-sm {
+			--h: var(--h-sm);
+			--fs: var(--fs-sm);
+			--gap: var(--gap-sm);
+		}
+
+		&.bb-button--2xl-md {
+			--h: var(--h-md);
+			--fs: var(--fs-md);
+			--gap: var(--gap-md);
+		}
+
+		&.bb-button--2xl-lg {
+			--h: var(--h-lg);
+			--fs: var(--fs-lg);
+			--gap: var(--gap-lg);
+		}
+
+		&.bb-button--2xl-xl {
+			--h: var(--h-xl);
+			--fs: var(--fs-xl);
+			--gap: var(--gap-xl);
+		}
+
+		&.bb-button--2xl-2xl {
+			--h: var(--h-2xl);
+			--fs: var(--fs-2xl);
+			--gap: var(--gap-2xl);
+		}
+	}
+}
+```