@blukavantui/community 0.0.0-stage → 1.0.1

package/src/app-layout.ts

@@ -0,0 +1,2 @@
+export * from './component-factories/app-layout.js';
+export type * from './types.js';

package/src/badge.ts

@@ -0,0 +1,2 @@
+export {createBadge} from './essentials.js';
+export type * from './types.js';

package/src/breadcrumbs.ts

@@ -0,0 +1,2 @@
+export * from './component-factories/breadcrumbs.js';
+export type * from './types.js';

package/src/button.ts

@@ -0,0 +1,2 @@
+export {createButton,buttonElement} from './essentials.js';
+export type * from './types.js';

package/src/card.ts

@@ -0,0 +1,2 @@
+export {createCard} from './essentials.js';
+export type * from './types.js';

package/src/cascader.ts

@@ -0,0 +1,2 @@
+export * from './component-factories/cascader.js';
+export type * from './types.js';

package/src/chat-widget.ts

@@ -0,0 +1,2 @@
+export * from './component-factories/chat-widget.js';
+export type * from './types.js';

package/src/chat.ts

@@ -0,0 +1,2 @@
+export * from './component-factories/chat.js';
+export type * from './types.js';

package/src/chip-group.ts

@@ -0,0 +1,2 @@
+export {createChipGroup} from './essentials.js';
+export type * from './types.js';

package/src/chip.ts

@@ -0,0 +1,2 @@
+export {createChip} from './essentials.js';
+export type * from './types.js';

package/src/collection-layout.ts

@@ -0,0 +1,2 @@
+export * from './component-factories/collection-layout.js';
+export type * from './types.js';

package/src/colors.ts

@@ -0,0 +1,3 @@
+// Generated from the canonical ComponentColor catalogue.
+export const componentColors = ["Default","Primary","Secondary","Success","Processing","Warning","Error","Danger","Magenta","Red","Volcano","Orange","Gold","Lime","Green","Cyan","Blue","GeekBlue","Purple"] as const
+export type ComponentColor = typeof componentColors[number]

package/src/command-palette.ts

@@ -0,0 +1,2 @@
+export * from './component-factories/command-palette.js';
+export type * from './types.js';

package/src/component-factories/app-layout.ts

@@ -0,0 +1,8 @@
+import {installAppLayout} from '../runtime/app-layout.js';
+import { bind } from "../component-runtime.js";
+import type * as T from "../types.js";
+type NotificationRuntime={show(hostKey:string,message:T.BluNotificationMessage):string;update(hostKey:string,message:T.BluNotificationMessage):string;dismiss(hostKey:string,key?:string):void};
+export function createAppLayout(host:HTMLElement,options:T.AppLayoutOptions,events:T.AppLayoutEvents={}) {
+ installAppLayout();
+ return bind(host,"AppLayout",options,remember=>({NavigationOpenChanged:(isOpen)=>{remember({IsNavigationOpen:isOpen});return events.NavigationOpenChanged?.(isOpen);},Error:(message)=>events.Error?.(message)}),[],["Header","Navigation","Content","Footer"]);
+}

package/src/component-factories/breadcrumbs.ts

@@ -0,0 +1,45 @@
+import { node, slot, component, classes, safeUrl } from "../dom.js";
+import type {
+  ButtonOptions,
+  ButtonEvents,
+  BadgeOptions,
+  ChipOptions,
+  ChipEvents,
+  CardOptions,
+  BreadcrumbsOptions,
+  PageHeaderOptions,
+  SidebarOptions,
+  SidebarEvents,
+  SkeletonOptions,
+} from "../types.js";
+function breadcrumbs(p: BreadcrumbsOptions) {
+  const n = node("nav", classes("blu-breadcrumbs", p.ExtendedClass));
+  n.setAttribute("aria-label", p.AccessibleLabel || "Breadcrumbs");
+  const list = node("ol", "blu-breadcrumbs__list");
+  n.append(list);
+  p.Items.forEach((item, i) => {
+    const li = node("li", "blu-breadcrumbs__item");
+    if (i) {
+      const sep = node("span", "blu-breadcrumbs__separator", "/");
+      sep.setAttribute("aria-hidden", "true");
+      li.append(sep);
+    }
+    if (i === p.Items.length - 1 || !item.Url) {
+      const text = node("span", "blu-breadcrumbs__current", item.Label);
+      if (i === p.Items.length - 1) text.setAttribute("aria-current", "page");
+      li.append(text);
+    } else {
+      const a = node("a", "blu-breadcrumbs__link", item.Label);
+      a.href = safeUrl(item.Url);
+      li.append(a);
+    }
+    list.append(li);
+  });
+  return n;
+}
+export function createBreadcrumbs(
+  host: HTMLElement,
+  options: BreadcrumbsOptions,
+) {
+  return component(host, options, (r, p) => r.replaceChildren(breadcrumbs(p)));
+}

package/src/component-factories/cascader.ts

@@ -0,0 +1,11 @@
+import {installCascader} from '../runtime/cascader.js';
+import { bind } from "../component-runtime.js";
+import type * as T from "../types.js";
+type NotificationRuntime={show(hostKey:string,message:T.BluNotificationMessage):string;update(hostKey:string,message:T.BluNotificationMessage):string;dismiss(hostKey:string,key?:string):void};
+export function createCascader(host:HTMLElement,options:T.CascaderOptions,events:T.CascaderEvents={}){
+ installCascader();
+ return bind(host,"Cascader",options,remember=>({
+  SelectionChanged:(key,pathKeysJson,pathLabelsJson)=>{remember({SelectedKey:key});return events.SelectionChanged?.(key,JSON.parse(pathKeysJson),JSON.parse(pathLabelsJson));},
+  Error:(message)=>{return events.Error?.(message);},
+ }),["Nodes"],[]);
+}

package/src/component-factories/chat-widget.ts

@@ -0,0 +1,12 @@
+import {installChatWidget} from '../runtime/chat-widget.js';
+import {bind} from '../component-runtime.js';
+import type {ChatWidgetOptions,ChatWidgetEvents} from '../types.js';
+export function createChatWidget(host:HTMLElement,options:ChatWidgetOptions={},events:ChatWidgetEvents={}) {
+  installChatWidget();
+  return bind<ChatWidgetOptions>(host,'ChatWidget',options,remember=>({
+    Send:(id,text)=>events.Send?.(id,text),Retry:(id,text)=>events.Retry?.(id,text),
+    Stop:id=>events.Stop?.(id),Copy:key=>events.Copy?.(key),Error:message=>events.Error?.(message),
+    OpenChanged:(open,reason)=>{remember({IsOpen:open});return events.OpenChanged?.(open,reason);},
+    ExpandedChanged:expanded=>{remember({IsExpanded:expanded});return events.ExpandedChanged?.(expanded);},
+  }),['Messages','Suggestions']);
+}

package/src/component-factories/chat.ts

@@ -0,0 +1,10 @@
+import {installChat} from '../runtime/chat.js';
+import {bind} from '../component-runtime.js';
+import type {ChatOptions,ChatEvents} from '../types.js';
+export function createChat(host:HTMLElement,options:ChatOptions={},events:ChatEvents={}) {
+  installChat();
+  return bind<ChatOptions>(host,'Chat',options,()=>({
+    Send:(id,text)=>events.Send?.(id,text),Retry:(id,text)=>events.Retry?.(id,text),
+    Stop:id=>events.Stop?.(id),Copy:key=>events.Copy?.(key),Error:message=>events.Error?.(message),
+  }),['Messages','Suggestions']);
+}

package/src/component-factories/collection-layout.ts

@@ -0,0 +1,5 @@
+import {installCollectionLayout} from '../runtime/collection-layout.js';
+import {bind} from "../component-runtime.js";
+import type * as T from "../types.js";
+export function createCollectionLayout(host:HTMLElement, options:T.CollectionLayoutOptions, events:T.CollectionLayoutEvents={}) {
+ installCollectionLayout();return bind<T.CollectionLayoutOptions>(host,"CollectionLayout",{...{"Variant": "Grid", "Columns": 3, "Gap": 24, "MinItemWidth": 240, "AnimateResize": true, "AccessibleLabel": "", "ExtendedClass": ""},...options},remember=>({Error: (message) => {return events.Error?.(message);}}),[],["Content"]);}

package/src/component-factories/command-palette.ts

@@ -0,0 +1,79 @@
+import {installCommandPalette} from '../runtime/command-palette.js';
+import { mountRoot, node, slot } from "../dom.js";
+import type * as T from "../types.js";
+type RawEvents = Record<string, (...args: any[]) => unknown>;
+type Raw = {
+  sync(id: string, options: object, events: RawEvents, owner: string): string;
+  destroy(owner: string): void;
+};
+function runtime(): Record<string, Raw> {
+  if (typeof window === "undefined")
+    throw new Error("Mount BluKavantUI in a browser, after the host is connected.");
+  return (window as unknown as { BluUICommunityRuntime: Record<string, Raw> })
+    .BluUICommunityRuntime;
+}
+function bind<P extends object>(
+  host: HTMLElement,
+  kind: string,
+  initial: P,
+  map: (p: P) => object,
+  events: (remember: (p: Partial<P>) => void) => RawEvents,
+  setup?: (root: HTMLElement, p: P) => void,
+): T.Component<P> {
+  const r = mountRoot(host),
+    key = r.id;
+  let props = { ...initial },
+    disposed = false;
+  const raw = runtime()[kind],
+    callbacks = events((p) => {
+      props = { ...props, ...p };
+    });
+  const update = (patch: Partial<P>) => {
+    if (disposed) throw new Error("Component is destroyed.");
+    props = { ...props, ...patch };
+    setup?.(r, props);
+    const error = raw.sync(r.id, map(props), callbacks, key);
+    if (error) throw new Error(error);
+  };
+  try {
+    update({});
+  } catch (e) {
+    raw.destroy(key);
+    r.remove();
+    throw e;
+  }
+  return {
+    element: r,
+    update,
+    destroy() {
+      if (disposed) return;
+      disposed = true;
+      raw.destroy(key);
+      r.remove();
+    },
+  };
+}
+export function createCommandPalette(
+  host: HTMLElement,
+  options: T.CommandPaletteOptions,
+  events: T.CommandPaletteEvents = {},
+) {
+ installCommandPalette();
+  return bind(
+    host,
+    "CommandPalette",
+    options,
+    (p) => {
+      const { Commands, ...rest } = p;
+      return { ...rest, CommandsJson: JSON.stringify(Commands) };
+    },
+    (remember) => ({
+      OpenChanged: (open) => {
+        remember({ IsOpen: open });
+        return events.OpenChanged?.(open);
+      },
+      Command: (key) => events.Command?.(key),
+      Error: (message) => events.Error?.(message),
+    }),
+  );
+}

package/src/component-factories/content-carousel.ts

@@ -0,0 +1,5 @@
+import {installContentCarousel} from '../runtime/content-carousel.js';
+import {bind} from "../component-runtime.js";
+import type * as T from "../types.js";
+export function createContentCarousel(host:HTMLElement, options:T.ContentCarouselOptions, events:T.ContentCarouselEvents={}) {
+ installContentCarousel();return bind<T.ContentCarouselOptions>(host,"ContentCarousel",{...{"ItemsVisible": 3, "Gap": 24, "ShowArrows": true, "ShowIndicators": true, "PeekNext": true, "ActiveIndex": 0, "ItemLabel": "Item", "AccessibleLabel": "", "ExtendedClass": ""},...options},remember=>({IndexChanged: (index) => {remember({ActiveIndex:index});return events.IndexChanged?.(index);},Error: (message) => {return events.Error?.(message);}}),[],["Content"]);}

package/src/component-factories/dashboard-canvas.ts

@@ -0,0 +1,11 @@
+import {installDashboardCanvas} from '../runtime/dashboard-canvas.js';
+import { bind } from "../component-runtime.js";
+import { mountRoot, node } from "../dom.js";
+import type { Component } from "../types.js";
+import type * as T from "../types.js";
+export function createDashboardCanvas(host:HTMLElement, options:T.DashboardCanvasOptions, events:T.DashboardCanvasEvents={}) {
+ installDashboardCanvas();
+ return bind(host,"DashboardCanvas",options,remember=>({LayoutChanged: (layoutJson) => {remember({Panels:JSON.parse(layoutJson)});return events.LayoutChanged?.(JSON.parse(layoutJson));},
+SaveRequested: (requestId, layoutJson) => {return events.SaveRequested?.(requestId, JSON.parse(layoutJson));},
+Error: (message) => {return events.Error?.(message);}}),["Panels"],["Content"]);
+}

package/src/component-factories/dashboard-panel.ts

@@ -0,0 +1,9 @@
+import { bind } from "../component-runtime.js";
+import { mountRoot, node } from "../dom.js";
+import type { Component } from "../types.js";
+import type * as T from "../types.js";
+export function createDashboardPanel(host:HTMLElement,options:T.DashboardPanelOptions):Component<T.DashboardPanelOptions> {
+ const root=mountRoot(host),content=node('div','blu-dashboard-panel__content');root.append(content);let props=options,previous:unknown,disposed=false;
+ function update(patch:Partial<T.DashboardPanelOptions>){if(disposed)throw Error('Component is destroyed.');props={...props,...patch};if(!props.PanelKey)throw Error('PanelKey is required.');root.dataset.bluPanelKey=props.PanelKey;root.className='blu-dashboard-panel '+(props.ExtendedClass||'');if(previous!==props.Content){content.replaceChildren();content.append(props.Content);previous=props.Content;}}
+ update({});return {element:root,update,destroy(){if(disposed)return;disposed=true;root.remove();}};
+}

package/src/component-factories/date-picker.ts

@@ -0,0 +1,6 @@
+import {installDatePicker} from '../runtime/date-picker.js';
+import {bind} from '../component-runtime.js';
+import type {DatePickerOptions,PickerEvents} from '../types.js';
+export function createDatePicker(host:HTMLElement,options:DatePickerOptions={},events:PickerEvents={}){
+ installDatePicker();return bind<DatePickerOptions>(host,'DatePicker',options,remember=>({Change:(value)=>{remember({Value:value});return events.Change?.(value);},ValidationChanged:(valid,message)=>events.ValidationChanged?.(valid,message),OpenChanged:open=>events.OpenChanged?.(open),Error:message=>events.Error?.(message)}),["DisabledDates"],[]);
+}

package/src/component-factories/date-range-picker.ts

@@ -0,0 +1,6 @@
+import {installDateRangePicker} from '../runtime/date-range-picker.js';
+import {bind} from '../component-runtime.js';
+import type {DateRangePickerOptions,DateRangePickerEvents} from '../types.js';
+export function createDateRangePicker(host:HTMLElement,options:DateRangePickerOptions={},events:DateRangePickerEvents={}){
+ installDateRangePicker();return bind<DateRangePickerOptions>(host,'DateRangePicker',options,remember=>({Change:(start,end)=>{remember({StartDate:start,EndDate:end});return events.Change?.(start,end);},ValidationChanged:(valid,message)=>events.ValidationChanged?.(valid,message),OpenChanged:open=>events.OpenChanged?.(open),Error:message=>events.Error?.(message)}),["DisabledDates", "Presets"],[]);
+}

package/src/component-factories/date-time-picker.ts

@@ -0,0 +1,6 @@
+import {installDateTimePicker} from '../runtime/date-time-picker.js';
+import {bind} from '../component-runtime.js';
+import type {DateTimePickerOptions,PickerEvents} from '../types.js';
+export function createDateTimePicker(host:HTMLElement,options:DateTimePickerOptions={},events:PickerEvents={}){
+ installDateTimePicker();return bind<DateTimePickerOptions>(host,'DateTimePicker',options,remember=>({Change:(value)=>{remember({Value:value});return events.Change?.(value);},ValidationChanged:(valid,message)=>events.ValidationChanged?.(valid,message),OpenChanged:open=>events.OpenChanged?.(open),Error:message=>events.Error?.(message)}),["DisabledDates"],[]);
+}

package/src/component-factories/descriptions.ts

@@ -0,0 +1,11 @@
+import {installDescriptions} from '../runtime/descriptions.js';
+import { bind } from "../component-runtime.js";
+import type * as T from "../types.js";
+type NotificationRuntime={show(hostKey:string,message:T.BluNotificationMessage):string;update(hostKey:string,message:T.BluNotificationMessage):string;dismiss(hostKey:string,key?:string):void};
+export function createDescriptions(host:HTMLElement,options:T.DescriptionsOptions,events:T.DescriptionsEvents={}){
+ installDescriptions();
+ return bind(host,"Descriptions",options,remember=>({
+  ItemClick:(key)=>{return events.ItemClick?.(key);},
+  Error:(message)=>{return events.Error?.(message);},
+ }),["Items"],[]);
+}

package/src/component-factories/drawer.ts

@@ -0,0 +1,12 @@
+import {installDrawer} from '../runtime/drawer.js';
+import { bind } from "../component-runtime.js";
+import type * as T from "../types.js";
+type NotificationRuntime={show(hostKey:string,message:T.BluNotificationMessage):string;update(hostKey:string,message:T.BluNotificationMessage):string;dismiss(hostKey:string,key?:string):void};
+export function createDrawer(host:HTMLElement,options:T.DrawerOptions,events:T.DrawerEvents={}){
+ installDrawer();
+ return bind(host,"Drawer",options,remember=>({
+  OpenChanged:(isOpen,reason)=>{remember({IsOpen:isOpen});return events.OpenChanged?.(isOpen,reason);},
+  Confirm:(key)=>{return events.Confirm?.(key);},
+  Error:(message)=>{return events.Error?.(message);},
+ }),[],["Content", "Footer"]);
+}

package/src/component-factories/float-button.ts

@@ -0,0 +1,7 @@
+import {installFloatButton} from '../runtime/float-button.js';
+import {bind} from '../component-runtime.js';
+import type {FloatButtonOptions,FloatButtonEvents} from '../types.js';
+export function createFloatButton(host:HTMLElement,options:FloatButtonOptions={},events:FloatButtonEvents={}) {
+  installFloatButton();
+  return bind<FloatButtonOptions>(host,'FloatButton',options,()=>({Click:()=>events.Click?.(),Error:message=>events.Error?.(message)}));
+}

package/src/component-factories/font-provider.ts

@@ -0,0 +1,6 @@
+import {installFontProvider} from '../runtime/font-provider.js';
+import {bind} from '../component-runtime.js';
+import type {FontProviderOptions,FontProviderEvents} from '../types.js';
+export function createFontProvider(host:HTMLElement,options:FontProviderOptions={},events:FontProviderEvents={}){
+ installFontProvider();return bind<FontProviderOptions>(host,'FontProvider',{PresetBaseUrl:new URL('../fonts/',import.meta.url).href,...options},remember=>({Loaded:(body,heading)=>events.Loaded?.(body,heading),Error:message=>events.Error?.(message)}),["FontFaces"],["Content"]);
+}

package/src/component-factories/hero-section.ts

@@ -0,0 +1,5 @@
+import {installHeroSection} from '../runtime/hero-section.js';
+import {bind} from "../component-runtime.js";
+import type * as T from "../types.js";
+export function createHeroSection(host:HTMLElement, options:T.HeroSectionOptions, events:T.HeroSectionEvents={}) {
+ installHeroSection();return bind<T.HeroSectionOptions>(host,"HeroSection",{...{"ImageUrl": "", "ImageDescription": "", "FocalPoint": "50% 50%", "Eyebrow": "", "Title": "Ideas made extraordinary.", "Description": "", "MinHeight": 640, "OverlayOpacity": 55, "Alignment": "Left", "VerticalAlignment": "Center", "HeadingLevel": 1, "ContentWidth": "Wide", "AccessibleLabel": "", "ExtendedClass": ""},...options},remember=>({Error: (message) => {return events.Error?.(message);}}),[],["Navigation", "Actions", "Content"]);}

package/src/component-factories/image-compare.ts

@@ -0,0 +1,5 @@
+import {installImageCompare} from '../runtime/image-compare.js';
+import {bind} from "../component-runtime.js";
+import type * as T from "../types.js";
+export function createImageCompare(host:HTMLElement, options:T.ImageCompareOptions, events:T.ImageCompareEvents={}) {
+ installImageCompare();return bind<T.ImageCompareOptions>(host,"ImageCompare",{...{"BeforeUrl": "", "AfterUrl": "", "BeforeLabel": "Before", "AfterLabel": "After", "ImageDescription": "Image comparison", "Position": 50, "Orientation": "Horizontal", "AspectRatio": "16 / 9", "IsDisabled": false, "AccessibleLabel": "", "ExtendedClass": ""},...options},remember=>({PositionChanged: (position) => {remember({Position:position});return events.PositionChanged?.(position);},Error: (message) => {return events.Error?.(message);}}),[],[]);}

package/src/component-factories/logo-cloud.ts

@@ -0,0 +1,5 @@
+import {installLogoCloud} from '../runtime/logo-cloud.js';
+import {bind} from "../component-runtime.js";
+import type * as T from "../types.js";
+export function createLogoCloud(host:HTMLElement, options:T.LogoCloudOptions, events:T.LogoCloudEvents={}) {
+ installLogoCloud();return bind<T.LogoCloudOptions>(host,"LogoCloud",{...{"Title": "Trusted by ambitious teams", "Columns": 5, "IsMonochrome": false, "LogoHeight": 40, "AccessibleLabel": "", "ExtendedClass": ""},...options},remember=>({Error: (message) => {return events.Error?.(message);}}),["Items"],[]);}

package/src/component-factories/media-card.ts

@@ -0,0 +1,5 @@
+import {installMediaCard} from '../runtime/media-card.js';
+import {bind} from "../component-runtime.js";
+import type * as T from "../types.js";
+export function createMediaCard(host:HTMLElement, options:T.MediaCardOptions, events:T.MediaCardEvents={}) {
+ installMediaCard();return bind<T.MediaCardOptions>(host,"MediaCard",{...{"ImageUrl": "", "ImageDescription": "", "FocalPoint": "50% 50%", "Eyebrow": "", "Title": "Card title", "Description": "", "ActionLabel": "Explore", "Url": "", "Variant": "Below", "AspectRatio": "4 / 3", "EnableZoom": true, "AccessibleLabel": "", "ExtendedClass": ""},...options},remember=>({Error: (message) => {return events.Error?.(message);}}),[],["Content"]);}

package/src/component-factories/media-image.ts

@@ -0,0 +1,5 @@
+import {installMediaImage} from '../runtime/media-image.js';
+import {bind} from "../component-runtime.js";
+import type * as T from "../types.js";
+export function createMediaImage(host:HTMLElement, options:T.MediaImageOptions, events:T.MediaImageEvents={}) {
+ installMediaImage();return bind<T.MediaImageOptions>(host,"MediaImage",{...{"ImageUrl": "", "ImageDescription": "", "FocalPoint": "50% 50%", "AspectRatio": "4 / 3", "EnableZoom": true, "AllowEnlarge": false, "Caption": "", "IsEager": false, "AccessibleLabel": "", "ExtendedClass": ""},...options},remember=>({Error: (message) => {return events.Error?.(message);}}),[],[]);}

package/src/component-factories/modal.ts

@@ -0,0 +1,12 @@
+import {installModal} from '../runtime/modal.js';
+import { bind } from "../component-runtime.js";
+import type * as T from "../types.js";
+type NotificationRuntime={show(hostKey:string,message:T.BluNotificationMessage):string;update(hostKey:string,message:T.BluNotificationMessage):string;dismiss(hostKey:string,key?:string):void};
+export function createModal(host:HTMLElement,options:T.ModalOptions,events:T.ModalEvents={}){
+ installModal();
+ return bind(host,"Modal",options,remember=>({
+  OpenChanged:(isOpen,reason)=>{remember({IsOpen:isOpen});return events.OpenChanged?.(isOpen,reason);},
+  Confirm:(key)=>{return events.Confirm?.(key);},
+  Error:(message)=>{return events.Error?.(message);},
+ }),[],["Content", "Footer"]);
+}

package/src/component-factories/notification-center.ts

@@ -0,0 +1,13 @@
+import {installNotificationCenter} from '../runtime/notification-center.js';
+import { bind } from "../component-runtime.js";
+import { mountRoot, node } from "../dom.js";
+import type { Component } from "../types.js";
+import type * as T from "../types.js";
+export function createNotificationCenter(host:HTMLElement, options:T.NotificationCenterOptions, events:T.NotificationCenterEvents={}) {
+ installNotificationCenter();
+ return bind(host,"NotificationCenter",options,remember=>({ItemsChanged: (itemsJson, key, reason) => {remember({Items:JSON.parse(itemsJson)});return events.ItemsChanged?.(JSON.parse(itemsJson), key, reason);},
+OpenChanged: (isOpen) => {remember({IsOpen:isOpen});return events.OpenChanged?.(isOpen);},
+Action: (key) => {return events.Action?.(key);},
+LoadMore: (loadedCount) => {return events.LoadMore?.(loadedCount);},
+Error: (message) => {return events.Error?.(message);}}),["Items"],[]);
+}

package/src/component-factories/notification.ts

@@ -0,0 +1,16 @@
+import {installNotification} from '../runtime/notification.js';
+import { bind } from "../component-runtime.js";
+import type * as T from "../types.js";
+type NotificationRuntime={show(hostKey:string,message:T.BluNotificationMessage):string;update(hostKey:string,message:T.BluNotificationMessage):string;dismiss(hostKey:string,key?:string):void};
+function notifications(){installNotification();return (window as unknown as {BluUICommunityRuntime:{Notification:NotificationRuntime}}).BluUICommunityRuntime.Notification;}
+export function createNotification(host:HTMLElement,options:T.NotificationOptions,events:T.NotificationEvents={}){
+ installNotification();
+ return bind(host,"Notification",options,remember=>({
+  Action:(key)=>{return events.Action?.(key);},
+  Dismissed:(key,reason)=>{return events.Dismissed?.(key,reason);},
+  Error:(message)=>{return events.Error?.(message);},
+ }),[],[]);
+}
+export function showNotification(message:T.BluNotificationMessage,hostKey="global"){return notifications().show(hostKey,message);}
+export function updateNotification(message:T.BluNotificationMessage,hostKey="global"){return notifications().update(hostKey,message);}
+export function dismissNotification(key="",hostKey="global"){notifications().dismiss(hostKey,key);}

package/src/component-factories/page-header.ts

@@ -0,0 +1,73 @@
+import { node, slot, component, classes, safeUrl } from "../dom.js";
+import type {
+  ButtonOptions,
+  ButtonEvents,
+  BadgeOptions,
+  ChipOptions,
+  ChipEvents,
+  CardOptions,
+  BreadcrumbsOptions,
+  PageHeaderOptions,
+  SidebarOptions,
+  SidebarEvents,
+  SkeletonOptions,
+} from "../types.js";
+function breadcrumbs(p: BreadcrumbsOptions) {
+  const n = node("nav", classes("blu-breadcrumbs", p.ExtendedClass));
+  n.setAttribute("aria-label", p.AccessibleLabel || "Breadcrumbs");
+  const list = node("ol", "blu-breadcrumbs__list");
+  n.append(list);
+  p.Items.forEach((item, i) => {
+    const li = node("li", "blu-breadcrumbs__item");
+    if (i) {
+      const sep = node("span", "blu-breadcrumbs__separator", "/");
+      sep.setAttribute("aria-hidden", "true");
+      li.append(sep);
+    }
+    if (i === p.Items.length - 1 || !item.Url) {
+      const text = node("span", "blu-breadcrumbs__current", item.Label);
+      if (i === p.Items.length - 1) text.setAttribute("aria-current", "page");
+      li.append(text);
+    } else {
+      const a = node("a", "blu-breadcrumbs__link", item.Label);
+      a.href = safeUrl(item.Url);
+      li.append(a);
+    }
+    list.append(li);
+  });
+  return n;
+}
+export function createPageHeader(
+  host: HTMLElement,
+  options: PageHeaderOptions,
+) {
+  return component(host, options, (r, p) => {
+    const h = node("header", classes("blu-page-header", p.ExtendedClass));
+    if (p.Breadcrumbs) {
+      const b = node("div", "blu-page-header__breadcrumbs");
+      b.append(breadcrumbs({ Items: p.Breadcrumbs }));
+      h.append(b);
+    }
+    if (p.SectionLabel)
+      h.append(node("span", "blu-page-header__section", p.SectionLabel));
+    const row = node("div", "blu-page-header__row"),
+      copy = node("div", "blu-page-header__copy");
+    copy.append(
+      node(
+        ("h" + (p.HeadingLevel || 1)) as "h1",
+        "blu-page-header__title",
+        p.Title,
+      ),
+    );
+    if (p.Description)
+      copy.append(node("p", "blu-page-header__description", p.Description));
+    row.append(copy);
+    if (p.Actions) {
+      const a = node("div", "blu-page-header__actions");
+      slot(a, p.Actions);
+      row.append(a);
+    }
+    h.append(row);
+    r.replaceChildren(h);
+  });
+}

package/src/component-factories/page-layout.ts

@@ -0,0 +1,8 @@
+import {installPageLayout} from '../runtime/page-layout.js';
+import { bind } from "../component-runtime.js";
+import type * as T from "../types.js";
+type NotificationRuntime={show(hostKey:string,message:T.BluNotificationMessage):string;update(hostKey:string,message:T.BluNotificationMessage):string;dismiss(hostKey:string,key?:string):void};
+export function createPageLayout(host:HTMLElement,options:T.PageLayoutOptions,events:T.SparklineEvents={}) {
+ installPageLayout();
+ return bind(host,"PageLayout",options,()=>({Error:(message)=>events.Error?.(message)}),[],["Header","Content","Aside","Footer"]);
+}

package/src/component-factories/pagination.ts

@@ -0,0 +1,11 @@
+import {installPagination} from '../runtime/pagination.js';
+import { bind } from "../component-runtime.js";
+import type * as T from "../types.js";
+type NotificationRuntime={show(hostKey:string,message:T.BluNotificationMessage):string;update(hostKey:string,message:T.BluNotificationMessage):string;dismiss(hostKey:string,key?:string):void};
+export function createPagination(host:HTMLElement,options:T.PaginationOptions,events:T.PaginationEvents={}){
+ installPagination();
+ return bind(host,"Pagination",options,remember=>({
+  PageChanged:(currentPage,pageSize)=>{remember({CurrentPage:currentPage,PageSize:pageSize});return events.PageChanged?.(currentPage,pageSize);},
+  Error:(message)=>{return events.Error?.(message);},
+ }),[],[]);
+}

package/src/component-factories/profile-card.ts

@@ -0,0 +1,5 @@
+import {installProfileCard} from '../runtime/profile-card.js';
+import {bind} from "../component-runtime.js";
+import type * as T from "../types.js";
+export function createProfileCard(host:HTMLElement, options:T.ProfileCardOptions, events:T.ProfileCardEvents={}) {
+ installProfileCard();return bind<T.ProfileCardOptions>(host,"ProfileCard",{...{"ImageUrl": "", "ImageDescription": "", "FocalPoint": "50% 50%", "Name": "Alex Morgan", "Role": "Creative director", "Biography": "", "Variant": "Below", "AllowExpand": true, "ProfileUrl": "", "AccessibleLabel": "", "ExtendedClass": ""},...options},remember=>({Error: (message) => {return events.Error?.(message);}}),[],["Links"]);}

package/src/component-factories/qr-code.ts

@@ -0,0 +1,11 @@
+import {installQRCode} from '../runtime/qr-code.js';
+import { bind } from "../component-runtime.js";
+import type * as T from "../types.js";
+type NotificationRuntime={show(hostKey:string,message:T.BluNotificationMessage):string;update(hostKey:string,message:T.BluNotificationMessage):string;dismiss(hostKey:string,key?:string):void};
+export function createQRCode(host:HTMLElement,options:T.QRCodeOptions,events:T.QRCodeEvents={}){
+ installQRCode();
+ return bind(host,"QRCode",options,remember=>({
+  Refresh:(key)=>{return events.Refresh?.(key);},
+  Error:(message)=>{return events.Error?.(message);},
+ }),[],[]);
+}

package/src/component-factories/quote-card.ts

@@ -0,0 +1,5 @@
+import {installQuoteCard} from '../runtime/quote-card.js';
+import {bind} from "../component-runtime.js";
+import type * as T from "../types.js";
+export function createQuoteCard(host:HTMLElement, options:T.QuoteCardOptions, events:T.QuoteCardEvents={}) {
+ installQuoteCard();return bind<T.QuoteCardOptions>(host,"QuoteCard",{...{"Quote": "Good work starts with a conversation.", "Name": "Alex Morgan", "Role": "", "AvatarUrl": "", "LogoUrl": "", "Rating": 0, "AccessibleLabel": "", "ExtendedClass": ""},...options},remember=>({Error: (message) => {return events.Error?.(message);}}),[],[]);}

package/src/component-factories/shape-mask.ts

@@ -0,0 +1,6 @@
+import {installShapeMask} from '../runtime/shape-mask.js';
+import {bind} from '../component-runtime.js';
+import type {ShapeMaskOptions,ShapeMaskEvents} from '../types.js';
+export function createShapeMask(host:HTMLElement,options:ShapeMaskOptions,events:ShapeMaskEvents={}){
+ installShapeMask();return bind<ShapeMaskOptions>(host,'ShapeMask',options,remember=>({Loaded:url=>events.Loaded?.(url),Error:message=>events.Error?.(message)}),[],["Content"]);
+}