@placeholderco/placeholder-ui 1.0.11 → 2.0.0

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

@@ -1,3 +1,14 @@
+import type { ButtonVariant } from '../ui/ButtonVariant.js';
+export interface SidenavItemAction {
+    /** SVG icon to display in the action button */
+    iconSvg: string;
+    /** Accessible label, also shown as a tooltip on hover */
+    label?: string;
+    /** Visual style variant for the action button */
+    variant?: ButtonVariant;
+    /** Click handler; receives the item the action belongs to and the event */
+    onclick?: (item: SidenavItem, event: MouseEvent) => void;
+}
 export interface SidenavItem {
     label: string;
     href?: string;
@@ -5,30 +16,51 @@ export interface SidenavItem {
     active?: boolean;
     items?: SidenavItem[];
     onclick?: () => void;
+    /** Action buttons shown on the right of the item (e.g. edit, delete) */
+    actions?: SidenavItemAction[];
 }
 export interface SidenavSection {
     title?: string;
     items: SidenavItem[];
 }
-import type { Snippet } from "svelte";
-interface Props {
+import type { Snippet } from 'svelte';
+export interface SidenavProps {
+    /** Navigation sections to display */
     sections?: SidenavSection[];
+    /** Sections pinned to the bottom of the sidenav */
     bottomSections?: SidenavSection[];
+    /** Whether the sidenav is in collapsed (icon-only) mode */
     collapsed?: boolean;
+    /** Width of the expanded sidenav */
     width?: string;
+    /** Width when collapsed */
     collapsedWidth?: string;
+    /** Additional CSS classes */
     class?: string;
+    /** Custom header content */
     header?: Snippet;
+    /** Custom footer content */
     footer?: Snippet;
+    /** Enable search/filter for navigation items */
     searchable?: boolean;
+    /** Placeholder text for search input */
     searchPlaceholder?: string;
+    /** Callback when a navigation item is clicked */
     onItemClick?: (item: SidenavItem) => void;
+    /** When item action buttons are shown: on hover/focus or always visible.
+     * Note: in the mobile drawer they are always visible (touch has no hover). */
+    actionsVisible?: 'hover' | 'always';
+    /** Enable responsive behavior (drawer on mobile) */
     responsive?: boolean;
+    /** Breakpoint (px) below which mobile mode activates */
     mobileBreakpoint?: number;
+    /** Whether the mobile drawer is open (bindable) */
     mobileOpen?: boolean;
+    /** Title shown in mobile drawer header */
     mobileTitle?: string;
-    mobileDrawerPosition?: "left" | "right";
+    /** Position of the mobile drawer */
+    mobileDrawerPosition?: 'left' | 'right';
 }
-declare const Sidenav: import("svelte").Component<Props, {}, "mobileOpen">;
+declare const Sidenav: import("svelte").Component<SidenavProps, {}, "mobileOpen">;
 type Sidenav = ReturnType<typeof Sidenav>;
 export default Sidenav;

package/dist/models/ComboBoxItem.d.ts

@@ -17,6 +17,8 @@ export interface ComboBoxItem {
     groupName?: string;
     imageSrc?: string;
     description?: string;
+    /** Marks a synthetic "add new value" suggestion (see Autocomplete) */
+    isAddNew?: boolean;
 }
 export type FetchFunctionType = (() => Promise<NotifyModel<ComboBoxItem[]>>);
 export type SearchFunctionType = ((query: string) => Promise<NotifyModel<ComboBoxItem[]>>);

package/dist/models/Employee.d.ts

@@ -0,0 +1,53 @@
+export interface Employee {
+    upn: string;
+    email: string;
+    emplid: string;
+    username: string;
+    firstName: string;
+    lastName: string;
+    jobTitle: string;
+    jobTitleAlt: string;
+    group: string;
+    departmentCode: string;
+    department: string;
+    jobCode: number;
+    extension: string;
+    office: string;
+    deskLocation: string;
+    phone: string;
+    mobile: string;
+    supervisorUpn: string;
+    secretaryUpns: string[];
+    updateAction: string;
+    lastUpdated: Date;
+    fullName: string;
+}
+export declare const DefaultEmployee: {
+    upn: string;
+    email: string;
+    emplid: string;
+    username: string;
+    firstName: string;
+    lastName: string;
+    jobTitle: string;
+    jobTitleAlt: string;
+    departmentCode: string;
+    department: string;
+    jobCode: string;
+    extension: string;
+    office: string;
+    deskLocation: string;
+    phone: string;
+    mobile: string;
+    supervisorId: string;
+    secretariesCsv: string;
+    updateAction: string;
+    lastUpdated: Date;
+    fullName: string;
+};
+export interface GitEmployee {
+    fullName: string;
+    emplid: string;
+    upn: string;
+    jobTitle: string;
+}

package/dist/models/Employee.js

@@ -0,0 +1,23 @@
+export const DefaultEmployee = {
+    upn: '',
+    email: '',
+    emplid: '',
+    username: '',
+    firstName: '',
+    lastName: '',
+    jobTitle: '',
+    jobTitleAlt: '',
+    departmentCode: '',
+    department: '',
+    jobCode: '',
+    extension: '',
+    office: '',
+    deskLocation: '',
+    phone: '',
+    mobile: '',
+    supervisorId: '',
+    secretariesCsv: '',
+    updateAction: '',
+    lastUpdated: new Date(),
+    fullName: ''
+};

package/dist/models/Hyperlink.d.ts

@@ -1,6 +1,8 @@
 export interface Hyperlink {
-    href: string;
+    href?: string;
     text: string;
     newTab?: boolean;
     svg?: string;
+    /** Custom click handler. Call event.preventDefault() to override the default href navigation. */
+    onclick?: (event: MouseEvent) => void;
 }

package/dist/models/LinkCollectionItem.d.ts

@@ -1,8 +1,10 @@
 export interface LinkCollectionItem {
-    href: string;
+    href?: string;
     leftContent: string;
     rightContent?: string;
     newTab?: boolean;
     leftSvg?: string;
     rightSvg?: string;
+    /** Custom click handler. Call event.preventDefault() to override the default href navigation. */
+    onclick?: (event: MouseEvent) => void;
 }

package/dist/models/NavbarItem.d.ts

@@ -1,13 +1,17 @@
-import type { Component } from "svelte";
+import type { Component } from 'svelte';
 type BaseNavbarItem = {
     alwaysShow?: boolean;
-    showInOnly?: undefined | "Navbar" | "Drawer";
+    showInOnly?: undefined | 'Navbar' | 'Drawer';
     class?: string;
+    /** Custom click handler. For link items, call event.preventDefault() to override the default href navigation. */
+    onclick?: (event: MouseEvent) => void;
 };
 export type ParentNavbarItem = BaseNavbarItem & {
     label: string;
     iconSvg?: string;
     subItems?: NavbarItem[];
+    /** Custom width for the sub-item dropdown panel (any CSS length, e.g. '20rem' or '300px'). Defaults to 12rem. */
+    submenuWidth?: string;
 };
 export type LinkNavbarItem = BaseNavbarItem & {
     label: string;

package/dist/theme.svelte.d.ts

@@ -24,7 +24,6 @@ export declare const viewportState: {
 export declare function getTheme(): Theme;
 export declare const themeState: {
     readonly theme: Theme;
-    readonly current: Theme;
     readonly isDarkMode: boolean;
 };
 export declare function loadTheme(): void;

package/dist/theme.svelte.js

@@ -1,16 +1,26 @@
+/** True in the browser, false during SSR / prerendering. */
+const browser = typeof window !== 'undefined' && typeof document !== 'undefined';
 // ============================================
 // Theme State
 // ============================================
 // Svelte 5 runes for reactive state
 let theme = $state("system");
+let systemDarkMode = $state(browser && isSystemDarkMode());
 let isDarkMode = $derived.by(() => {
     if (theme === "system")
-        return isSystemDarkMode();
+        return systemDarkMode;
     return theme === "dark";
 });
-// Initialize theme on module load
-if (typeof window !== 'undefined') {
+// Initialize theme on module load (browser only - SSR has no localStorage/document)
+if (browser)
     loadTheme();
+// Track OS theme changes so "system" stays in sync (runs once on module load)
+if (browser && window.matchMedia) {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+        systemDarkMode = e.matches;
+        if (theme === "system")
+            applyThemeClass(e.matches ? "dark" : "light");
+    });
 }
 // ============================================
 // Viewport / Responsive State
@@ -45,44 +55,20 @@ if (typeof window !== 'undefined') {
 }
 // Export reactive viewport state object
 export const viewportState = {
-    get width() {
-        return windowWidth;
-    },
-    get height() {
-        return windowHeight;
-    },
+    get width() { return windowWidth; },
+    get height() { return windowHeight; },
     // Boolean helpers
-    get isMobile() {
-        return isMobile;
-    },
-    get isTablet() {
-        return isTablet;
-    },
-    get isDesktop() {
-        return isDesktop;
-    },
-    get isSmall() {
-        return isSmall;
-    },
-    get isMedium() {
-        return isMedium;
-    },
-    get isLarge() {
-        return isLarge;
-    },
-    get isExtraLarge() {
-        return isExtraLarge;
-    },
-    get isUltrawide() {
-        return isUltrawide;
-    },
+    get isMobile() { return isMobile; },
+    get isTablet() { return isTablet; },
+    get isDesktop() { return isDesktop; },
+    get isSmall() { return isSmall; },
+    get isMedium() { return isMedium; },
+    get isLarge() { return isLarge; },
+    get isExtraLarge() { return isExtraLarge; },
+    get isUltrawide() { return isUltrawide; },
     // Utility function for custom breakpoints
-    isBelow(breakpoint) {
-        return windowWidth < breakpoint;
-    },
-    isAbove(breakpoint) {
-        return windowWidth >= breakpoint;
-    }
+    isBelow(breakpoint) { return windowWidth < breakpoint; },
+    isAbove(breakpoint) { return windowWidth >= breakpoint; }
 };
 // Export getter for the theme state
 export function getTheme() {
@@ -93,17 +79,14 @@ export const themeState = {
     get theme() {
         return theme;
     },
-    get current() {
-        return theme;
-    },
     get isDarkMode() {
         return isDarkMode;
     }
 };
 export function loadTheme() {
-    if (typeof window === 'undefined')
+    if (!browser)
         return;
-    const themeString = localStorage.getItem('theme') || 'system';
+    const themeString = localStorage.getItem("theme") || "system";
     if (themeString == 'light')
         setTheme('light');
     else if (themeString == 'dark')
@@ -112,25 +95,30 @@ export function loadTheme() {
         setTheme('system');
 }
 export function setTheme(newTheme) {
-    if (typeof window === 'undefined')
-        return;
-    const classList = document.documentElement.classList;
-    classList.remove('light', 'dark');
-    let appliedTheme = newTheme;
-    if (newTheme === 'system') {
-        appliedTheme = isSystemDarkMode() ? 'dark' : 'light';
-    }
-    if (appliedTheme === 'dark') {
-        classList.add('dark');
+    let appliedTheme;
+    if (newTheme === "system") {
+        systemDarkMode = isSystemDarkMode();
+        appliedTheme = systemDarkMode ? "dark" : "light";
     }
     else {
-        classList.add('light');
+        appliedTheme = newTheme;
     }
     theme = newTheme;
-    localStorage.setItem('theme', newTheme);
+    // State is updated on the server too, but the DOM and storage only exist in the browser
+    if (!browser)
+        return;
+    applyThemeClass(appliedTheme);
+    localStorage.setItem("theme", newTheme);
+}
+function applyThemeClass(appliedTheme) {
+    if (!browser)
+        return;
+    const classList = document.documentElement.classList;
+    classList.remove("light", "dark");
+    classList.add(appliedTheme);
 }
 function isSystemDarkMode() {
-    if (typeof window === 'undefined')
+    if (!browser || !window.matchMedia)
         return false;
-    return (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
 }