@placeholderco/placeholder-ui 2.5.3 → 2.5.5

package/dist/display/Avatar.svelte

@@ -88,7 +88,7 @@
 
 <div class="avatar-container {classes}">
 	{#if onClick}
-		<button onclick={onClick}>
+		<button type="button" onclick={onClick}>
 			{@render img()}
 		</button>
 	{:else if href}

package/dist/editors/tiptap/toolbar/ColorButton.svelte

@@ -84,6 +84,7 @@
 			<div class="color-preset-grid">
 				{#each brandColors as swatch}
 					<button
+						type="button"
 						class="color-preset"
 						style="background: {swatch.value}"
 						onclick={() => applyColor(swatch.value)}
@@ -97,6 +98,7 @@
 			<div class="color-section-title">Common Colors</div>
 			<div class="color-preset-grid">
 				<button
+					type="button"
 					class="color-preset"
 					style="background: #000000"
 					onclick={() => applyColor('#000000')}
@@ -104,6 +106,7 @@
 					aria-label="Black"
 				></button>
 				<button
+					type="button"
 					class="color-preset"
 					style="background: #495057"
 					onclick={() => applyColor('#495057')}
@@ -111,6 +114,7 @@
 					aria-label="Gray"
 				></button>
 				<button
+					type="button"
 					class="color-preset"
 					style="background: #fa5252"
 					onclick={() => applyColor('#fa5252')}
@@ -118,6 +122,7 @@
 					aria-label="Red"
 				></button>
 				<button
+					type="button"
 					class="color-preset"
 					style="background: #ff922b"
 					onclick={() => applyColor('#ff922b')}
@@ -125,6 +130,7 @@
 					aria-label="Orange"
 				></button>
 				<button
+					type="button"
 					class="color-preset"
 					style="background: #fcc419"
 					onclick={() => applyColor('#fcc419')}
@@ -132,6 +138,7 @@
 					aria-label="Yellow"
 				></button>
 				<button
+					type="button"
 					class="color-preset"
 					style="background: #51cf66"
 					onclick={() => applyColor('#51cf66')}
@@ -139,6 +146,7 @@
 					aria-label="Green"
 				></button>
 				<button
+					type="button"
 					class="color-preset"
 					style="background: #22b8cf"
 					onclick={() => applyColor('#22b8cf')}
@@ -146,6 +154,7 @@
 					aria-label="Cyan"
 				></button>
 				<button
+					type="button"
 					class="color-preset"
 					style="background: #228be6"
 					onclick={() => applyColor('#228be6')}
@@ -153,6 +162,7 @@
 					aria-label="Blue"
 				></button>
 				<button
+					type="button"
 					class="color-preset"
 					style="background: #9775fa"
 					onclick={() => applyColor('#9775fa')}
@@ -160,6 +170,7 @@
 					aria-label="Purple"
 				></button>
 				<button
+					type="button"
 					class="color-preset"
 					style="background: #f06595"
 					onclick={() => applyColor('#f06595')}
@@ -175,7 +186,12 @@
 					class="color-input"
 					title="Custom Color"
 				/>
-				<button onclick={removeColor} class="color-remove-button" title="Remove Color">
+				<button
+					type="button"
+					onclick={removeColor}
+					class="color-remove-button"
+					title="Remove Color"
+				>
 					Clear
 				</button>
 			</div>

package/dist/editors/tiptap/toolbar/LinkButton.svelte

@@ -99,9 +99,11 @@
 					placeholder="Enter URL"
 					class="link-input"
 				/>
-				<button onclick={setLink} class="link-submit-button" title="Apply">✓</button>
+				<button type="button" onclick={setLink} class="link-submit-button" title="Apply">✓</button>
 				{#if editor.isActive('link')}
-					<button onclick={removeLink} class="link-remove-button" title="Remove Link">✕</button>
+					<button type="button" onclick={removeLink} class="link-remove-button" title="Remove Link"
+						>✕</button
+					>
 				{/if}
 			</div>
 			<label class="link-checkbox-label">

package/dist/form/ComboBox.svelte

@@ -80,6 +80,7 @@
 				{#each options as option, index}
 					{@const localClasses = [selectedIndex === index ? 'selected p-2' : 'p-2']}
 					<button
+						type="button"
 						class="combobox-item {localClasses} {option.class}"
 						class:selected={selectedIndex === index}
 						onclick={() => {

package/dist/form/ComboBoxMulti.svelte

@@ -108,6 +108,7 @@
 							localIndex}
 						{@const localClasses = [selectedIndex === globalIndex ? 'selected p-2' : 'p-2']}
 						<button
+							type="button"
 							class="combobox-item {localClasses.join(' ')} {option.class}"
 							role="option"
 							aria-selected={selectedIndex === globalIndex}

package/dist/form/DatePicker.svelte

@@ -336,7 +336,7 @@
 								size="1.5rem"
 								onclick={() => incrementYearRange(-1)}
 							/>
-							<button class="month-label clickable" onclick={toggleYearPicker}>
+							<button type="button" class="month-label clickable" onclick={toggleYearPicker}>
 								{yearRangeStart} - {yearRangeStart + yearRangeSize - 1}
 							</button>
 							<ActionIcon
@@ -350,7 +350,7 @@
 								size="1.5rem"
 								onclick={() => incrementFocusedMonth(-1)}
 							/>
-							<button class="month-label clickable" onclick={toggleYearPicker}>
+							<button type="button" class="month-label clickable" onclick={toggleYearPicker}>
 								{focusedMonth.format('MMMM YYYY')}
 							</button>
 							<ActionIcon
@@ -365,6 +365,7 @@
 						<div class="year-grid">
 							{#each getYearRange() as year}
 								<button
+									type="button"
 									class="year-button"
 									class:selected={focusedMonth.year() === year}
 									class:current-year={todayDate.year() === year}
@@ -387,6 +388,7 @@
 						<div class="days-grid">
 							{#each calculateDays(selectedDate, focusedMonth) as day, i (i)}
 								<button
+									type="button"
 									class="day-button {buildDayClasses(day)}"
 									disabled={day.isDisabled}
 									onclick={(e) => handleDateChangeClick(e, day.date, day.isDisabled)}

package/dist/form/DateRangePicker.svelte

@@ -342,7 +342,7 @@
 									size="1.5rem"
 									onclick={() => incrementYearRange(-1)}
 								/>
-								<button class="month-label clickable" onclick={toggleYearPicker}>
+								<button type="button" class="month-label clickable" onclick={toggleYearPicker}>
 									{yearRangeStart} – {yearRangeStart + yearRangeSize - 1}
 								</button>
 								<ActionIcon
@@ -356,7 +356,7 @@
 									size="1.5rem"
 									onclick={() => incrementFocusedMonth(-1)}
 								/>
-								<button class="month-label clickable" onclick={toggleYearPicker}>
+								<button type="button" class="month-label clickable" onclick={toggleYearPicker}>
 									{focusedMonth.format('MMMM YYYY')}
 								</button>
 								<ActionIcon
@@ -375,6 +375,7 @@
 							<div class="year-grid">
 								{#each getYearRange() as year}
 									<button
+										type="button"
 										class="year-button"
 										class:selected={focusedMonth.year() === year}
 										class:current-year={todayDate.year() === year}
@@ -408,6 +409,7 @@
 										}}
 									>
 										<button
+											type="button"
 											class={buildButtonClasses(d)}
 											disabled={d.isDisabled}
 											onclick={(e) => handleDayClick(d, e)}

package/dist/form/DateTimePicker.svelte

@@ -331,7 +331,7 @@
 								size="1.5rem"
 								onclick={() => incrementYearRange(-1)}
 							/>
-							<button class="month-label clickable" onclick={toggleYearPicker}>
+							<button type="button" class="month-label clickable" onclick={toggleYearPicker}>
 								{yearRangeStart} - {yearRangeStart + yearRangeSize - 1}
 							</button>
 							<ActionIcon
@@ -345,7 +345,7 @@
 								size="1.5rem"
 								onclick={() => incrementFocusedMonth(-1)}
 							/>
-							<button class="month-label clickable" onclick={toggleYearPicker}>
+							<button type="button" class="month-label clickable" onclick={toggleYearPicker}>
 								{focusedMonth.format('MMMM YYYY')}
 							</button>
 							<ActionIcon
@@ -360,6 +360,7 @@
 						<div class="year-grid">
 							{#each getYearRange() as year}
 								<button
+									type="button"
 									class="year-button"
 									class:selected={focusedMonth.year() === year}
 									class:current-year={todayDate.year() === year}
@@ -382,6 +383,7 @@
 						<div class="days-grid">
 							{#each calculateDays(selectedDate, focusedMonth) as day, i (i)}
 								<button
+									type="button"
 									class="day-button {buildDayClasses(day)}"
 									disabled={day.isDisabled}
 									onclick={(e) => handleDateChangeClick(e, day.date, day.isDisabled)}

package/dist/form/SegmentedControl.svelte

@@ -93,6 +93,7 @@
 			{@const isSelected = option.value === value}
 
 			<button
+				type="button"
 				bind:this={buttonElements[index]}
 				class="segmented-control-item {isSelected ? 'selected' : ''}"
 				onclick={() => setValue(option.value)}

package/dist/form/Select.svelte

@@ -314,6 +314,7 @@
 			</div>
 		{:else}
 			<button
+				type="button"
 				bind:this={buttonElement}
 				onclick={() => {
 					open = !open;

package/dist/form/SelectMulti.svelte

@@ -289,6 +289,7 @@
 >
 	<FormGroup {label} {required} {tooltipContent} {tooltipLocation}>
 		<button
+			type="button"
 			bind:this={buttonElement}
 			onclick={() => {
 				open = !open;

package/dist/icon/index.d.ts

@@ -124,6 +124,8 @@ export { default as iconPlayerStop } from './player-stop.svg?raw';
 export { default as iconPlus } from './plus.svg?raw';
 export { default as iconPrinter } from './printer.svg?raw';
 export { default as iconQrcode } from './qrcode.svg?raw';
+export { default as iconQuote } from './quote.svg?raw';
+export { default as iconQuoteOpen } from './quote-open.svg?raw';
 export { default as iconRefresh } from './refresh.svg?raw';
 export { default as iconReorder } from './reorder.svg?raw';
 export { default as iconSearch } from './search.svg?raw';

package/dist/icon/index.js

@@ -124,6 +124,8 @@ export { default as iconPlayerStop } from './player-stop.svg?raw';
 export { default as iconPlus } from './plus.svg?raw';
 export { default as iconPrinter } from './printer.svg?raw';
 export { default as iconQrcode } from './qrcode.svg?raw';
+export { default as iconQuote } from './quote.svg?raw';
+export { default as iconQuoteOpen } from './quote-open.svg?raw';
 export { default as iconRefresh } from './refresh.svg?raw';
 export { default as iconReorder } from './reorder.svg?raw';
 export { default as iconSearch } from './search.svg?raw';

package/dist/icon/quote-open.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-quote-open"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M14 13h4a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-6q 0 -4 4 -5"></path><path d="M5 13h4a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-6q 0 -4 4 -5"></path></svg>

package/dist/icon/quote.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-quote"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 11h-4a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h3a1 1 0 0 1 1 1v6c0 2.667 -1.333 4.333 -4 5"></path><path d="M19 11h-4a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h3a1 1 0 0 1 1 1v6c0 2.667 -1.333 4.333 -4 5"></path></svg>

package/dist/ui/Badge.svelte

@@ -52,14 +52,16 @@
 	{#if type == 'a' && !disabled}
 		<a class={elClass} {href} {target}> {@render children?.()}</a>
 	{:else if type == 'button'}
-		<button class={elClass} disabled={isDisabled} onclick={onClick}> {@render children?.()}</button>
+		<button type="button" class={elClass} disabled={isDisabled} onclick={onClick}>
+			{@render children?.()}</button
+		>
 	{:else}
 		<div class={elClass}>
 			{@render children?.()}
 		</div>
 	{/if}
 	{#if onDelete}
-		<button class="badge-button {variant}" disabled={isDisabled} onclick={onDelete}>
+		<button type="button" class="badge-button {variant}" disabled={isDisabled} onclick={onDelete}>
 			<Icon size={size === 'sm' ? '12px' : size === 'lg' ? '16px' : '14px'} svg={iconX} />
 		</button>
 	{/if}

package/dist/ui/Popover.svelte

@@ -102,6 +102,7 @@
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<!-- svelte-ignore a11y_mouse_events_have_key_events -->
 			<button
+				type="button"
 				bind:this={triggerElement}
 				onclick={handleClick}
 				onmouseenter={handleMouseEnter}

package/dist/ui/Tabs.svelte

@@ -70,6 +70,7 @@
 		{@const isSelected = option.value === activeTab}
 
 		<button
+			type="button"
 			bind:this={buttonElements[index]}
 			class="tab-item {isSelected ? 'selected' : ''} {solidBg ? 'solid' : ''}"
 			onclick={() => setValue(option.value)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@placeholderco/placeholder-ui",
-  "version": "2.5.3",
+  "version": "2.5.5",
   "description": "A modern, customizable Svelte 5 UI component library with comprehensive theming support. Re-brand it with a single config object.",
   "license": "MIT",
   "author": "Placeholderco",