@placeholderco/placeholder-ui 2.3.0 → 2.5.2

package/README.md

@@ -19,8 +19,7 @@ Peer dependency: `svelte ^5`.
 
 ## Quick start
 
-Wrap your app in `AppShell` (it loads the base stylesheet and, by default,
-Bootstrap 5), then use components:
+Wrap your app in `AppShell` (it loads the base stylesheet), then use components:
 
 ```svelte
 <script lang="ts">
@@ -33,15 +32,11 @@ Bootstrap 5), then use components:
 </AppShell>
 ```
 
-If you ship your own Bootstrap build or do not want Bootstrap at all, skip
-`AppShell` and import the token stylesheet yourself:
+Or skip `AppShell` and import the token stylesheet yourself:
 
 ```ts
 import '@placeholderco/placeholder-ui/app.css';
 ```
-
-The bundled Bootstrap is also available on its own as `@placeholderco/placeholder-ui/bootstrap.css`.
-
 ## Branding
 
 Everything colour- and font-related resolves to `--ui-*` custom properties, so

package/dist/app.css

@@ -115,8 +115,7 @@ body {
 	font-family: var(--ui-font-family);
 }
 
-/* Form controls do not inherit fonts by default; make them follow the UI font
-   even when Bootstrap's reboot is not loaded. */
+/* Form controls do not inherit fonts by default; make them follow the UI font */
 button,
 input,
 select,

package/dist/display/filetree/FileTree.svelte.d.ts

@@ -71,6 +71,6 @@ export interface FileTreeProps {
     onChange?: (nodes: FileTreeNode[]) => void;
     class?: string;
 }
-declare const FileTree: import("svelte").Component<FileTreeProps, {}, "selectedId" | "nodes">;
+declare const FileTree: import("svelte").Component<FileTreeProps, {}, "nodes" | "selectedId">;
 type FileTree = ReturnType<typeof FileTree>;
 export default FileTree;

package/dist/editors/tiptap/TipTap.svelte

@@ -15,7 +15,14 @@
 	import { TextStyle } from '@tiptap/extension-text-style';
 	import Collaboration from '@tiptap/extension-collaboration';
 	import { CollaborationCaret } from '@tiptap/extension-collaboration-caret';
-	import { Alert, CodeBlockEditor, Div, Span, type CodeBlocksOptions } from './extensions/index.js';
+	import {
+		Alert,
+		ClassAttribute,
+		CodeBlockEditor,
+		Div,
+		Span,
+		type CodeBlocksOptions
+	} from './extensions/index.js';
 	import type { CollaborationConfig } from './collaboration.js';
 	import FormGroup from '../../form/FormGroup.svelte';
 	import LinkActionMenu from './LinkActionMenu.svelte';
@@ -299,6 +306,8 @@
 			Alert,
 			TabHandler,
 			TableKit.configure({ table: { resizable: true } }),
+			// Keep `class` on standard nodes/marks so classes in loaded HTML survive
+			ClassAttribute,
 			...customExtensions
 		];
 

package/dist/editors/tiptap/TipTapBubble.svelte

@@ -15,7 +15,14 @@
 	import { TextStyle } from '@tiptap/extension-text-style';
 	import Collaboration from '@tiptap/extension-collaboration';
 	import { CollaborationCaret } from '@tiptap/extension-collaboration-caret';
-	import { Alert, CodeBlockEditor, Div, Span, type CodeBlocksOptions } from './extensions/index.js';
+	import {
+		Alert,
+		ClassAttribute,
+		CodeBlockEditor,
+		Div,
+		Span,
+		type CodeBlocksOptions
+	} from './extensions/index.js';
 	import type { CollaborationConfig } from './collaboration.js';
 	import FormGroup from '../../form/FormGroup.svelte';
 	import LinkActionMenu from './LinkActionMenu.svelte';
@@ -263,6 +270,8 @@
 			Alert,
 			TabHandler,
 			TableKit.configure({ table: { resizable: true } }),
+			// Keep `class` on standard nodes/marks so classes in loaded HTML survive
+			ClassAttribute,
 			...customExtensions
 		];
 

package/dist/editors/tiptap/extensions/ClassAttribute.d.ts

@@ -0,0 +1,16 @@
+import { Extension } from '@tiptap/core';
+/**
+ * Node and mark types that keep their `class` attribute by default. Types that
+ * already manage `class` themselves (div, span, alert, link) are left alone.
+ */
+export declare const defaultClassAttributeTypes: readonly ["paragraph", "heading", "blockquote", "bulletList", "orderedList", "listItem", "codeBlock", "horizontalRule", "image", "table", "tableRow", "tableHeader", "tableCell", "bold", "italic", "strike", "code", "underline", "subscript", "superscript", "textStyle"];
+export interface ClassAttributeOptions {
+    /** Node and mark type names that should preserve `class` (default: all standard types) */
+    types: string[];
+}
+/**
+ * Preserves the `class` attribute on standard nodes and marks so classes in
+ * loaded or pasted HTML survive the round-trip through the editor instead of
+ * being stripped by the schema.
+ */
+export declare const ClassAttribute: Extension<ClassAttributeOptions, any>;

package/dist/editors/tiptap/extensions/ClassAttribute.js

@@ -0,0 +1,59 @@
+import { Extension } from '@tiptap/core';
+/**
+ * Node and mark types that keep their `class` attribute by default. Types that
+ * already manage `class` themselves (div, span, alert, link) are left alone.
+ */
+export const defaultClassAttributeTypes = [
+    'paragraph',
+    'heading',
+    'blockquote',
+    'bulletList',
+    'orderedList',
+    'listItem',
+    'codeBlock',
+    'horizontalRule',
+    'image',
+    'table',
+    'tableRow',
+    'tableHeader',
+    'tableCell',
+    'bold',
+    'italic',
+    'strike',
+    'code',
+    'underline',
+    'subscript',
+    'superscript',
+    'textStyle'
+];
+/**
+ * Preserves the `class` attribute on standard nodes and marks so classes in
+ * loaded or pasted HTML survive the round-trip through the editor instead of
+ * being stripped by the schema.
+ */
+export const ClassAttribute = Extension.create({
+    name: 'classAttribute',
+    addOptions() {
+        return {
+            types: [...defaultClassAttributeTypes]
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    class: {
+                        default: null,
+                        parseHTML: (element) => element.getAttribute('class') || null,
+                        renderHTML: (attributes) => {
+                            if (!attributes.class)
+                                return {};
+                            return { class: attributes.class };
+                        }
+                    }
+                }
+            }
+        ];
+    }
+});

package/dist/editors/tiptap/extensions/index.d.ts

@@ -1,6 +1,8 @@
 export { Alert } from './Alert.js';
 export { Div } from './Div.js';
 export { Span } from './Span.js';
+export { ClassAttribute, defaultClassAttributeTypes } from './ClassAttribute.js';
+export type { ClassAttributeOptions } from './ClassAttribute.js';
 export { CodeBlockEditor } from './CodeBlockEditor.js';
 export type { CodeBlockEditorOptions, CodeBlocksOptions } from './CodeBlockEditor.js';
 export { codeBlockLanguages, resolveCodeBlockLanguage } from './codeBlockLanguages.js';

package/dist/editors/tiptap/extensions/index.js

@@ -1,5 +1,6 @@
 export { Alert } from './Alert.js';
 export { Div } from './Div.js';
 export { Span } from './Span.js';
+export { ClassAttribute, defaultClassAttributeTypes } from './ClassAttribute.js';
 export { CodeBlockEditor } from './CodeBlockEditor.js';
 export { codeBlockLanguages, resolveCodeBlockLanguage } from './codeBlockLanguages.js';

package/dist/index.d.ts

@@ -114,8 +114,8 @@ export type { TipTapProps, DocumentUploadResult } from './editors/tiptap/TipTap.
 export { default as TipTapBubble } from './editors/tiptap/TipTapBubble.svelte';
 export type { TipTapBubbleProps } from './editors/tiptap/TipTapBubble.svelte';
 export type { CollaborationConfig, CollaborationUser } from './editors/tiptap/collaboration.js';
-export { CodeBlockEditor, codeBlockLanguages, resolveCodeBlockLanguage } from './editors/tiptap/extensions/index.js';
-export type { CodeBlocksOptions, CodeBlockEditorOptions, CodeBlockLanguageDef, CodeBlockLanguageId } from './editors/tiptap/extensions/index.js';
+export { ClassAttribute, defaultClassAttributeTypes, CodeBlockEditor, codeBlockLanguages, resolveCodeBlockLanguage } from './editors/tiptap/extensions/index.js';
+export type { ClassAttributeOptions, CodeBlocksOptions, CodeBlockEditorOptions, CodeBlockLanguageDef, CodeBlockLanguageId } from './editors/tiptap/extensions/index.js';
 export type { AnyExtension } from '@tiptap/core';
 export { editorButtonVariants, editorButtonSizes, editorButtonClass, parseEditorButtonClass } from './editors/tiptap/buttonLink.js';
 export type { EditorButtonVariant, EditorButtonSize, EditorButtonStyle } from './editors/tiptap/buttonLink.js';

package/dist/index.js

@@ -56,7 +56,7 @@ export { default as ColorPicker } from './form/ColorPicker.svelte';
 export { parseColor, parseHex, toHex, formatColor, rgbToHsv, hsvToRgb, rgbToHsl } from './form/ColorPicker.svelte';
 export { default as TipTap } from './editors/tiptap/TipTap.svelte';
 export { default as TipTapBubble } from './editors/tiptap/TipTapBubble.svelte';
-export { CodeBlockEditor, codeBlockLanguages, resolveCodeBlockLanguage } from './editors/tiptap/extensions/index.js';
+export { ClassAttribute, defaultClassAttributeTypes, CodeBlockEditor, codeBlockLanguages, resolveCodeBlockLanguage } from './editors/tiptap/extensions/index.js';
 export { editorButtonVariants, editorButtonSizes, editorButtonClass, parseEditorButtonClass } from './editors/tiptap/buttonLink.js';
 export { default as CodeMirror } from './editors/CodeMirror.svelte';
 export { default as GitCard } from './cards/GitCard.svelte';

package/dist/layout/AppShell.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import '../bootstrap.min.css';
+	import '../styles.css';
 	import '../app.css';
 
 	export interface AppShellProps {
@@ -11,9 +11,4 @@
 	let { children }: AppShellProps = $props();
 </script>
 
-<!--
-	AppShell loads the library's base stylesheet plus the bundled Bootstrap 5 build.
-	To use the library without Bootstrap, skip AppShell and import
-	`@placeholderco/placeholder-ui/app.css` directly in your root layout instead.
--->
 {@render children?.()}

package/dist/layout/AppShell.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import '../bootstrap.min.css';
+import '../styles.css';
 import '../app.css';
 export interface AppShellProps {
     /** Application content (includes global styles) */

package/dist/{bootstrap.min.css → styles.css}

@@ -4,6 +4,62 @@
     --gutter-y: 0
 }
 
+h1,.display-1 {
+    font-size: clamp(2.25rem, 4vw + 1rem, 3.9rem);
+    font-style: normal;
+    font-weight: 600;
+    line-height: 3.625rem;
+}
+
+h2,.display-2 {
+    font-size: clamp(1.85rem, 3vw + 0.85rem, 3.1rem);
+    font-style: normal;
+    font-weight: 600;
+    line-height: 2.5rem;
+}
+
+h3,.display-3 {
+    font-size: clamp(1.5rem, 2.2vw + 0.75rem, 2.5rem);
+    font-style: normal;
+    font-weight: 600;
+    line-height: 2.5rem;
+}
+
+h4,.display-4 {
+    font-size: clamp(1.25rem, 1.5vw + 0.7rem, 2rem);
+    font-style: normal;
+    font-weight: 600;
+    line-height: 2.125rem;
+}
+
+h5,.display-5 {
+    font-size: clamp(1.1rem, 0.9vw + 0.7rem, 1.6rem);
+    font-style: normal;
+    font-weight: 600;
+    line-height: 1.875rem;
+}
+
+h6,.display-6 {
+    font-size: clamp(1rem, 0.5vw + 0.75rem, 1.25rem);
+    font-style: normal;
+    font-weight: 600;
+    line-height: 1.625rem;
+}
+
+h7,.display-7 {
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 1.25rem;
+}
+
+h8,.display-8 {
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 1.125rem;
+}
+
 .text-black,
 .text-black-50,
 .text-body,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@placeholderco/placeholder-ui",
-  "version": "2.3.0",
+  "version": "2.5.2",
   "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",
@@ -45,7 +45,7 @@
       "svelte": "./dist/index.js"
     },
     "./app.css": "./dist/app.css",
-    "./bootstrap.css": "./dist/bootstrap.min.css"
+    "./styles.css": "./dist/styles.css"
   },
   "peerDependencies": {
     "@sveltejs/kit": "^2.26.0",