@synergy-design-system/metadata 3.8.0 → 3.10.0

package/dist/intentPolicy/patterns/index.js

@@ -1,22 +0,0 @@
-import { actionPatterns } from './action.js';
-import { assistancePatterns } from './assistance.js';
-import { disclosurePatterns } from './disclosure.js';
-import { feedbackPatterns } from './feedback.js';
-import { inputPatterns } from './input.js';
-import { navigationPatterns } from './navigation.js';
-import { statusPatterns } from './status.js';
-import { structurePatterns } from './structure.js';
-/**
- * A comprehensive list of intent usage patterns, categorized by their respective intent categories.
- * Each pattern provides a specific example of how an intent can be implemented within a user interface, demonstrating best practices and common use cases for that category.
- */
-export const usagePatterns = [
-    ...actionPatterns,
-    ...feedbackPatterns,
-    ...inputPatterns,
-    ...navigationPatterns,
-    ...disclosurePatterns,
-    ...statusPatterns,
-    ...assistancePatterns,
-    ...structurePatterns,
-];

package/dist/intentPolicy/patterns/input.d.ts

@@ -1,2 +0,0 @@
-import type { IntentUsagePattern } from '../types.js';
-export declare const inputPatterns: IntentUsagePattern[];

package/dist/intentPolicy/patterns/input.js

@@ -1,99 +0,0 @@
-export const inputPatterns = [
-    {
-        description: 'Single-line input for compact text or numeric values.',
-        intent: 'input.text.short',
-        preset: {
-            props: {
-                type: 'text',
-            },
-        },
-        target: { id: 'component:syn-input', kind: 'component', name: 'syn-input' },
-    },
-    {
-        description: 'Multiline text entry for detailed user-provided information.',
-        intent: 'input.text.long',
-        preset: {
-            props: {
-                resize: 'vertical',
-            },
-        },
-        target: { id: 'component:syn-textarea', kind: 'component', name: 'syn-textarea' },
-    },
-    {
-        description: 'Single selection from a predefined options list.',
-        intent: 'input.selection.single',
-        preset: {
-            props: {
-                multiple: false,
-            },
-        },
-        target: { id: 'component:syn-select', kind: 'component', name: 'syn-select' },
-    },
-    {
-        description: 'Multiple selection from a predefined options list.',
-        intent: 'input.selection.multiple',
-        preset: {
-            props: {
-                multiple: true,
-            },
-        },
-        target: { id: 'component:syn-select', kind: 'component', name: 'syn-select' },
-    },
-    {
-        description: 'Searchable selection with real-time filtering for larger option sets.',
-        intent: 'input.selection.searchable',
-        preset: {
-            props: {
-                autocomplete: 'list',
-            },
-        },
-        target: { id: 'component:syn-combobox', kind: 'component', name: 'syn-combobox' },
-    },
-    {
-        description: 'Binary toggle that applies changes immediately.',
-        intent: 'input.binary.immediate',
-        preset: {
-            props: {
-                checked: false,
-            },
-        },
-        target: { id: 'component:syn-switch', kind: 'component', name: 'syn-switch' },
-    },
-    {
-        description: 'Binary selection captured as part of a later form submit.',
-        intent: 'input.binary.deferred',
-        preset: {
-            props: {
-                checked: false,
-            },
-        },
-        target: { id: 'component:syn-checkbox', kind: 'component', name: 'syn-checkbox' },
-    },
-    {
-        description: 'Single required choice among related options.',
-        intent: 'input.selection.single',
-        notes: ['Provide one default selected option as recommended in component usage rules.'],
-        target: { id: 'component:syn-radio-group', kind: 'component', name: 'syn-radio-group' },
-    },
-    {
-        description: 'File attachment or upload control with optional multi-file mode.',
-        intent: 'input.file.upload',
-        preset: {
-            props: {
-                multiple: false,
-            },
-        },
-        target: { id: 'component:syn-file', kind: 'component', name: 'syn-file' },
-    },
-    {
-        description: 'Bounded numeric selection through a slider control.',
-        intent: 'input.range.slider',
-        target: { id: 'component:syn-range', kind: 'component', name: 'syn-range' },
-    },
-    {
-        description: 'Grouped select options organized through optgroup labels.',
-        intent: 'input.selection.grouped-options',
-        notes: ['Use syn-optgroup to cluster related syn-option entries under clear labels.'],
-        target: { id: 'component:syn-select', kind: 'component', name: 'syn-select' },
-    },
-];

package/dist/intentPolicy/patterns/navigation.d.ts

@@ -1,2 +0,0 @@
-import type { IntentUsagePattern } from '../types.js';
-export declare const navigationPatterns: IntentUsagePattern[];

package/dist/intentPolicy/patterns/navigation.js

@@ -1,192 +0,0 @@
-export const navigationPatterns = [
-    {
-        description: 'Class-based link navigation pattern for inline or standalone links.',
-        intent: 'action.navigation',
-        notes: [
-            'Use syn-link--quiet when the link should have lower visual emphasis.',
-            'Use size variants like syn-link--small, syn-link--medium, or syn-link--large as needed.',
-        ],
-        preset: {
-            requiredClasses: ['syn-link'],
-        },
-        structure: {
-            children: [
-                {
-                    component: 'text',
-                    text: 'Link',
-                },
-            ],
-            component: 'a',
-            props: {
-                class: 'syn-link',
-                href: '#',
-            },
-        },
-        target: {
-            classes: ['syn-link'],
-            id: 'style:syn-link',
-            kind: 'style',
-            layer: 'examples',
-            selector: '.syn-link',
-        },
-    },
-    {
-        description: 'Grouped navigation links using the link-list utility class.',
-        intent: 'navigation.link-list.grouped',
-        preset: {
-            requiredClasses: ['syn-link-list'],
-        },
-        structure: {
-            children: [
-                {
-                    children: [
-                        {
-                            children: [
-                                {
-                                    component: 'syn-icon',
-                                    props: {
-                                        name: 'keyboard_arrow_right',
-                                    },
-                                },
-                                {
-                                    component: 'text',
-                                    text: 'Link',
-                                },
-                            ],
-                            component: 'a',
-                            props: {
-                                class: 'syn-link',
-                                href: '#',
-                            },
-                        },
-                    ],
-                    component: 'li',
-                },
-                {
-                    children: [
-                        {
-                            children: [
-                                {
-                                    component: 'syn-icon',
-                                    props: {
-                                        name: 'keyboard_arrow_right',
-                                    },
-                                },
-                                {
-                                    component: 'text',
-                                    text: 'Link',
-                                },
-                            ],
-                            component: 'a',
-                            props: {
-                                class: 'syn-link',
-                                href: '#',
-                            },
-                        },
-                    ],
-                    component: 'li',
-                },
-                {
-                    children: [
-                        {
-                            children: [
-                                {
-                                    component: 'syn-icon',
-                                    props: {
-                                        name: 'keyboard_arrow_right',
-                                    },
-                                },
-                                {
-                                    component: 'text',
-                                    text: 'Link',
-                                },
-                            ],
-                            component: 'a',
-                            props: {
-                                class: 'syn-link',
-                                href: '#',
-                            },
-                        },
-                    ],
-                    component: 'li',
-                },
-                {
-                    children: [
-                        {
-                            children: [
-                                {
-                                    component: 'syn-icon',
-                                    props: {
-                                        name: 'keyboard_arrow_right',
-                                    },
-                                },
-                                {
-                                    component: 'text',
-                                    text: 'Link',
-                                },
-                            ],
-                            component: 'a',
-                            props: {
-                                class: 'syn-link',
-                                href: '#',
-                            },
-                        },
-                    ],
-                    component: 'li',
-                },
-            ],
-            component: 'ul',
-            props: {
-                class: 'syn-link-list',
-            },
-        },
-        target: {
-            classes: ['syn-link-list'],
-            id: 'style:syn-link-list',
-            kind: 'style',
-            layer: 'examples',
-            selector: '.syn-link-list',
-        },
-    },
-    {
-        description: 'In-page section navigation through related tabs.',
-        intent: 'navigation.tabs.section',
-        notes: ['Prefer concise tab labels and keep tab count manageable (typically up to six).'],
-        target: { id: 'component:syn-tab-group', kind: 'component', name: 'syn-tab-group' },
-    },
-    {
-        description: 'Action-oriented menu with logical grouping and keyboard access.',
-        intent: 'navigation.menu.actions',
-        target: { id: 'component:syn-menu', kind: 'component', name: 'syn-menu' },
-    },
-    {
-        description: 'Compact trigger-based reveal of related options or destinations.',
-        intent: 'navigation.dropdown.compact-options',
-        target: { id: 'component:syn-dropdown', kind: 'component', name: 'syn-dropdown' },
-    },
-    {
-        description: 'Dataset paging controls for large result sets.',
-        intent: 'navigation.pagination.dataset',
-        target: { id: 'component:syn-pagination', kind: 'component', name: 'syn-pagination' },
-    },
-    {
-        description: 'Hierarchy-aware breadcrumb trail for location and backtracking.',
-        intent: 'navigation.breadcrumb.trail',
-        target: { id: 'component:syn-breadcrumb', kind: 'component', name: 'syn-breadcrumb' },
-    },
-    {
-        description: 'Breadcrumb item representing one navigable hierarchy level.',
-        intent: 'navigation.breadcrumb.trail',
-        target: { id: 'component:syn-breadcrumb-item', kind: 'component', name: 'syn-breadcrumb-item' },
-    },
-    {
-        description: 'Primary vertical navigation for app shell section switching.',
-        intent: 'navigation.sidenav.menu',
-        target: { id: 'component:syn-side-nav', kind: 'component', name: 'syn-side-nav' },
-    },
-    {
-        description: 'Single destination entry within side navigation structures.',
-        intent: 'navigation.sidenav.menu',
-        target: { id: 'component:syn-nav-item', kind: 'component', name: 'syn-nav-item' },
-    },
-];

package/dist/intentPolicy/patterns/status.d.ts

@@ -1,2 +0,0 @@
-import type { IntentUsagePattern } from '../types.js';
-export declare const statusPatterns: IntentUsagePattern[];

package/dist/intentPolicy/patterns/status.js

@@ -1,32 +0,0 @@
-export const statusPatterns = [
-    {
-        description: 'Section-local loading indicator while content is fetched.',
-        intent: 'status.loading.section',
-        preset: {
-            props: {
-                size: 'medium',
-            },
-        },
-        target: { id: 'component:syn-spinner', kind: 'component', name: 'syn-spinner' },
-    },
-    {
-        description: 'Inline processing indicator inside an action flow.',
-        intent: 'status.loading.action',
-        preset: {
-            props: {
-                size: 'small',
-            },
-        },
-        target: { id: 'component:syn-spinner', kind: 'component', name: 'syn-spinner' },
-    },
-    {
-        description: 'Determinate linear progress indicator for measurable workflow completion.',
-        intent: 'status.progress.linear',
-        target: { id: 'component:syn-progress-bar', kind: 'component', name: 'syn-progress-bar' },
-    },
-    {
-        description: 'Determinate circular progress indicator for compact progress displays.',
-        intent: 'status.progress.circular',
-        target: { id: 'component:syn-progress-ring', kind: 'component', name: 'syn-progress-ring' },
-    },
-];

package/dist/intentPolicy/patterns/structure.d.ts

@@ -1,2 +0,0 @@
-import type { IntentUsagePattern } from '../types.js';
-export declare const structurePatterns: IntentUsagePattern[];

package/dist/intentPolicy/patterns/structure.js

@@ -1,107 +0,0 @@
-export const structurePatterns = [
-    {
-        description: 'Confirmation dialog with explicit cancel and destructive actions in footer slot.',
-        intent: 'structure.confirmation',
-        notes: [
-            'Renderers should preserve footer action ordering (cancel before destructive confirm).',
-            'Destructive action should be visually distinct from the cancel action.',
-        ],
-        roles: {
-            cancelAction: 'abort',
-            confirmAction: 'confirm-destructive',
-            container: 'dialog',
-            footer: 'group',
-        },
-        structure: {
-            children: [
-                {
-                    component: 'text',
-                    role: 'content',
-                    text: 'Content',
-                },
-                {
-                    children: [
-                        {
-                            component: 'syn-button',
-                            config: {
-                                propRules: [
-                                    {
-                                        code: 'REQUIRED_CANCEL_VARIANT_TEXT',
-                                        kind: 'requiredEquals',
-                                        message: 'Cancel action should use text variant in confirmation dialog footer.',
-                                        prop: 'variant',
-                                        rationale: 'Text variant keeps cancel action visually secondary to destructive confirmation.',
-                                        suggestedFix: 'Set variant property to "text".',
-                                        value: 'text',
-                                    },
-                                ],
-                            },
-                            role: 'cancelAction',
-                            text: 'Abort',
-                        },
-                        {
-                            component: 'syn-button',
-                            config: {
-                                propRules: [
-                                    {
-                                        code: 'REQUIRED_CONFIRM_VARIANT_FILLED',
-                                        kind: 'requiredEquals',
-                                        message: 'Confirm action should use filled variant in confirmation dialog footer.',
-                                        prop: 'variant',
-                                        rationale: 'Filled variant visually signals the destructive nature of the action.',
-                                        suggestedFix: 'Set variant property to "filled".',
-                                        value: 'filled',
-                                    },
-                                    {
-                                        code: 'FORBIDDEN_CONFIRM_HREF',
-                                        kind: 'forbidden',
-                                        message: 'Confirm action in confirmation dialogs must not use href navigation.',
-                                        prop: 'href',
-                                        rationale: 'Destructive confirmation should execute an explicit action, not navigate away.',
-                                        suggestedFix: 'Remove href and handle confirmation through action callbacks.',
-                                    },
-                                ],
-                            },
-                            role: 'confirmAction',
-                            text: 'Delete this!',
-                        },
-                    ],
-                    component: 'nav',
-                    role: 'footer',
-                    slot: 'footer',
-                },
-            ],
-            component: 'syn-dialog',
-            props: {
-                open: true,
-            },
-            role: 'container',
-        },
-        target: { id: 'component:syn-dialog', kind: 'component', name: 'syn-dialog' },
-    },
-    {
-        description: 'Edge-aligned drawer overlay for secondary contextual workflows.',
-        intent: 'structure.drawer.overlay',
-        notes: ['Use drawers for supplementary content that should not replace the current page context.'],
-        target: { id: 'component:syn-drawer', kind: 'component', name: 'syn-drawer' },
-    },
-    {
-        description: 'Top-level header shell structure for branding and navigation regions.',
-        intent: 'structure.header.shell',
-        notes: [
-            'Navigation slot can host primary navigation controls such as syn-prio-nav.',
-            'Meta-navigation slot can host compact utility actions such as syn-icon-button.',
-        ],
-        target: { id: 'component:syn-header', kind: 'component', name: 'syn-header' },
-    },
-    {
-        description: 'Card container grouping related content and supporting actions.',
-        intent: 'structure.content.container',
-        target: { id: 'component:syn-card', kind: 'component', name: 'syn-card' },
-    },
-    {
-        description: 'Visual separator between adjacent blocks of related content.',
-        intent: 'structure.content.separator',
-        target: { id: 'component:syn-divider', kind: 'component', name: 'syn-divider' },
-    },
-];