@insymetri/styleguide 0.1.82 → 0.1.84

package/dist/IICheckbox/IICheckbox.svelte

@@ -3,6 +3,7 @@
 	import {Checkbox} from 'bits-ui'
 	import {IIIcon} from '../IIIcon'
 	import {cn} from '../utils/cn'
+	import {buttonReset} from '../utils/button-reset'
 
 	type Props = {
 		checked: boolean
@@ -33,7 +34,7 @@
 
 <label class={cn('flex items-center gap-8', className)}>
 	<Checkbox.Root
-		class="peer [all:unset] cursor-default shrink-0 inline-block data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
+		class={cn('peer', buttonReset, 'cursor-default shrink-0 inline-block data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50')}
 		bind:checked
 		{onCheckedChange}
 		{disabled}

package/dist/IIEditableBadges/IIEditableBadges.svelte

@@ -4,6 +4,7 @@
 	import IIBadge from '../IIBadge/IIBadge.svelte'
 	import type {BadgeVariant} from '../IIBadge/IIBadge.types'
 	import {cn} from '../utils/cn'
+	import {buttonReset} from '../utils/button-reset'
 
 	type Item = {
 		value: string
@@ -50,7 +51,7 @@
 </script>
 
 <Popover.Root>
-	<Popover.Trigger class="[all:unset] flex items-center gap-4 flex-wrap cursor-default">
+	<Popover.Trigger class={cn(buttonReset, 'flex items-center gap-4 flex-wrap cursor-default')}>
 		{#if selectedItems.length === 0}
 			<IIBadge variant="grey">{emptyText}</IIBadge>
 		{:else}
@@ -72,7 +73,8 @@
 					<button
 						type="button"
 						class={cn(
-							'[all:unset] flex items-center justify-between px-12 py-8 border rounded-4 bg-background cursor-default transition-all duration-fast text-small text-body hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed',
+							buttonReset,
+							'flex items-center justify-between px-12 py-8 border rounded-4 bg-background cursor-default transition-all duration-fast text-small text-body hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed',
 							isSelected && 'border-2',
 							optionVariantClasses[variant]
 						)}

package/dist/IIEditableText/IIEditableText.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import {cn} from '../utils/cn'
+	import {buttonReset} from '../utils/button-reset'
 
 	type Props = {
 		value: string
@@ -132,7 +133,8 @@
 	<button
 		type="button"
 		class={cn(
-			'[all:unset] cursor-text block w-full py-4 border-b-2 border-transparent transition-all duration-fast text-left hover:border-b-primary focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 focus-visible:rounded-4',
+			buttonReset,
+			'cursor-text block w-full py-4 border-b-2 border-transparent transition-all duration-fast text-left hover:border-b-primary focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 focus-visible:rounded-4',
 			disabled && 'cursor-not-allowed opacity-60'
 		)}
 		onclick={startEditing}

package/dist/IIMenu/IIMenu.svelte

@@ -3,6 +3,7 @@
 	import {createAttachmentKey} from 'svelte/attachments'
 	import {fly} from 'svelte/transition'
 	import {cn} from '../utils/cn'
+	import {buttonReset} from '../utils/button-reset'
 	import {IIIcon} from '../IIIcon'
 	import {createMenuSearch, getSelectableItems, isItem, isGroup, isSub, isSeparator, menuStyles, menuItemClass, type MenuItem, type MenuEntry, type SubEntry} from '../utils/menu'
 	import {useFloating, portal, clickOutside} from '../utils/menu'
@@ -283,7 +284,10 @@
 		return -1
 	}
 
-	const defaultTriggerClass = '[all:unset] cursor-default inline-flex items-center justify-center p-4 rounded-4 text-secondary transition-all duration-fast hover:bg-background hover:text-body data-[state=open]:bg-background data-[state=open]:text-body motion-reduce:transition-none'
+	// Children triggers own their content layout; default to an inline-flex row so a
+	// value + caret sit on one line even when the consumer passes no display class.
+	const childrenTriggerClass = `${buttonReset} inline-flex items-center text-left cursor-default`
+	const defaultTriggerClass = `${buttonReset} inline-flex items-center justify-center p-4 rounded-4 text-secondary cursor-default transition-all duration-fast hover:bg-background hover:text-body data-[state=open]:bg-background data-[state=open]:text-body motion-reduce:transition-none`
 </script>
 
 {#snippet itemContent(item: MenuItem)}
@@ -427,7 +431,7 @@
 		aria-haspopup="menu"
 		aria-expanded={open}
 		data-state={open ? 'open' : 'closed'}
-		class={cn(children ? '[all:unset] cursor-default' : defaultTriggerClass, triggerClass, className)}
+		class={cn(children ? childrenTriggerClass : defaultTriggerClass, triggerClass, className)}
 		onclick={toggle}
 		onkeydown={handleTriggerKeydown}
 	>

package/dist/IIOverflowActions/IIOverflowActions.svelte

@@ -3,6 +3,7 @@
 	import {DropdownMenu} from 'bits-ui'
 	import {IIButton} from '../IIButton'
 	import {cn} from '../utils/cn'
+	import {buttonReset} from '../utils/button-reset'
 	import {IIIcon} from '../IIIcon'
 
 	type Action = {
@@ -67,7 +68,7 @@
 	{#if overflowing}
 		<DropdownMenu.Root bind:open={kebabOpen}>
 			<DropdownMenu.Trigger
-				class="[all:unset] cursor-default inline-flex items-center justify-center p-4 rounded-4 text-secondary text-h3 transition-all duration-fast hover:bg-background hover:text-body data-[state=open]:bg-background data-[state=open]:text-body motion-reduce:transition-none"
+				class={cn(buttonReset, 'cursor-default inline-flex items-center justify-center p-4 rounded-4 text-secondary text-h3 transition-all duration-fast hover:bg-background hover:text-body data-[state=open]:bg-background data-[state=open]:text-body motion-reduce:transition-none')}
 			>
 				<IIIcon iconName="dots-three-vertical" size="inherit" />
 			</DropdownMenu.Trigger>

package/dist/IIPopover/IIPopover.svelte

@@ -2,6 +2,7 @@
 	import type {Snippet} from 'svelte'
 	import {Popover} from 'bits-ui'
 	import {cn} from '../utils/cn'
+	import {buttonReset} from '../utils/button-reset'
 
 	type Props = {
 		open?: boolean
@@ -52,7 +53,7 @@
 			{/snippet}
 		</Popover.Trigger>
 	{:else}
-		<Popover.Trigger class={cn('[all:unset] cursor-default', triggerClass)}>
+		<Popover.Trigger class={cn(buttonReset, 'cursor-default', triggerClass)}>
 			{@render trigger?.()}
 		</Popover.Trigger>
 	{/if}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { buttonReset } from './utils/button-reset';
 export { default as DensityProvider } from './DensityProvider/DensityProvider.svelte';
 export { useDensity, type Density } from './density';
 export { default as StepIndicator } from './MobileOnboarding/StepIndicator.svelte';

package/dist/index.js

@@ -1,4 +1,6 @@
 // @insymetri/styleguide
+// Utilities
+export { buttonReset } from './utils/button-reset';
 // Density
 export { default as DensityProvider } from './DensityProvider/DensityProvider.svelte';
 export { useDensity } from './density';

package/dist/utils/button-reset.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Named-utility reset for bare `<button>` (and `Popover.Trigger`) elements.
+ *
+ * Replaces the `[all:unset]` idiom. In Tailwind v4 `[all:unset]` is an arbitrary
+ * property that sorts *after* named utilities in the generated stylesheet, so it
+ * wins the cascade over any layout classes a consumer passes on the same element
+ * (silently clobbering `display`, padding, etc.). That is why e.g. a trigger's
+ * `flex` was ignored and its caret wrapped onto a new line.
+ *
+ * These named utilities participate in the cascade normally, so a consumer's
+ * `flex` / `inline-flex` / `grid` and any real padding win predictably (no
+ * `!important` needed).
+ *
+ * Deliberately minimal — it only includes resets that are never in tension with
+ * a component's own styling:
+ *   - `appearance-none` strips native control chrome (mainly Safari).
+ *   - `p-0 m-0` drops the UA button box; a component's real padding (`p-4`,
+ *     `px-12`, …) still wins via Tailwind's canonical utility ordering.
+ *   - `outline-none` preserves the prior `[all:unset]` behaviour of no default
+ *     focus ring; components that want one add a `focus-visible:` outline.
+ *
+ * Everything else `[all:unset]` used to reset (border-width, background, and
+ * inherited color/font) is already handled by Tailwind's Preflight on form
+ * controls, so it is intentionally left out to avoid fighting components that
+ * set a real `border` / `bg-*` / `text-*` (e.g. IIEditableBadges option rows).
+ *
+ * Does NOT set `display` or `cursor` — each consumer picks those.
+ */
+export declare const buttonReset = "appearance-none p-0 m-0 outline-none";

package/dist/utils/button-reset.js

@@ -0,0 +1,29 @@
+/**
+ * Named-utility reset for bare `<button>` (and `Popover.Trigger`) elements.
+ *
+ * Replaces the `[all:unset]` idiom. In Tailwind v4 `[all:unset]` is an arbitrary
+ * property that sorts *after* named utilities in the generated stylesheet, so it
+ * wins the cascade over any layout classes a consumer passes on the same element
+ * (silently clobbering `display`, padding, etc.). That is why e.g. a trigger's
+ * `flex` was ignored and its caret wrapped onto a new line.
+ *
+ * These named utilities participate in the cascade normally, so a consumer's
+ * `flex` / `inline-flex` / `grid` and any real padding win predictably (no
+ * `!important` needed).
+ *
+ * Deliberately minimal — it only includes resets that are never in tension with
+ * a component's own styling:
+ *   - `appearance-none` strips native control chrome (mainly Safari).
+ *   - `p-0 m-0` drops the UA button box; a component's real padding (`p-4`,
+ *     `px-12`, …) still wins via Tailwind's canonical utility ordering.
+ *   - `outline-none` preserves the prior `[all:unset]` behaviour of no default
+ *     focus ring; components that want one add a `focus-visible:` outline.
+ *
+ * Everything else `[all:unset]` used to reset (border-width, background, and
+ * inherited color/font) is already handled by Tailwind's Preflight on form
+ * controls, so it is intentionally left out to avoid fighting components that
+ * set a real `border` / `bg-*` / `text-*` (e.g. IIEditableBadges option rows).
+ *
+ * Does NOT set `display` or `cursor` — each consumer picks those.
+ */
+export const buttonReset = 'appearance-none p-0 m-0 outline-none';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@insymetri/styleguide",
-	"version": "0.1.82",
+	"version": "0.1.84",
 	"description": "Insymetri shared UI component library built with Svelte 5",
 	"type": "module",
 	"scripts": {