@synergy-design-system/metadata 3.7.0 → 3.8.0

package/dist/intentPolicy/domains/feedback/intents.js

@@ -0,0 +1,32 @@
+export const feedbackIntents = [
+    {
+        category: 'feedback',
+        description: 'Use when contextual feedback should remain near the affected content.',
+        id: 'feedback.inline',
+        userGoal: 'Explain outcome directly in the current workflow context.',
+    },
+    {
+        category: 'feedback',
+        description: 'Use when a short, non-blocking overlay notification is sufficient.',
+        id: 'feedback.toast',
+        userGoal: 'Acknowledge an event without interrupting the current task.',
+    },
+    {
+        category: 'feedback',
+        description: 'Use badges to communicate compact status or count information inline.',
+        id: 'feedback.badge.status',
+        userGoal: 'Expose concise status signals without interrupting surrounding content.',
+    },
+    {
+        category: 'feedback',
+        description: 'Use tag labels to communicate categorization or state in compact form.',
+        id: 'feedback.tag.label',
+        userGoal: 'Help users identify and scan categories or states quickly.',
+    },
+    {
+        category: 'feedback',
+        description: 'Use generic validation feedback to explain invalid or missing input.',
+        id: 'feedback.validation.generic',
+        userGoal: 'Guide users to correct invalid form input with clear feedback.',
+    },
+];

package/dist/intentPolicy/domains/feedback/patterns.d.ts

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

package/dist/intentPolicy/domains/feedback/patterns.js

@@ -0,0 +1,44 @@
+export const feedbackPatterns = [
+    {
+        description: 'Inline alert for contextual feedback near related content.',
+        intent: 'feedback.inline',
+        preset: {
+            props: {
+                duration: 0,
+                variant: 'warning',
+            },
+        },
+        target: { id: 'component:syn-alert', kind: 'component', name: 'syn-alert' },
+    },
+    {
+        description: 'Toast alert for brief, non-blocking status acknowledgement.',
+        intent: 'feedback.toast',
+        preset: {
+            props: {
+                duration: 4000,
+                variant: 'success',
+            },
+        },
+        target: { id: 'component:syn-alert', kind: 'component', name: 'syn-alert' },
+    },
+    {
+        description: 'Compact status or count feedback using badge visuals.',
+        intent: 'feedback.badge.status',
+        target: { id: 'component:syn-badge', kind: 'component', name: 'syn-badge' },
+    },
+    {
+        description: 'Compact categorical or state labeling using tags.',
+        intent: 'feedback.tag.label',
+        target: { id: 'component:syn-tag', kind: 'component', name: 'syn-tag' },
+    },
+    {
+        description: 'Grouped tags for concise display of multiple labels or states.',
+        intent: 'feedback.tag.label',
+        target: { id: 'component:syn-tag-group', kind: 'component', name: 'syn-tag-group' },
+    },
+    {
+        description: 'Generic validation feedback for incorrect or missing user input.',
+        intent: 'feedback.validation.generic',
+        target: { id: 'component:syn-validate', kind: 'component', name: 'syn-validate' },
+    },
+];

package/dist/intentPolicy/domains/input/capabilities.d.ts

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

package/dist/intentPolicy/domains/input/capabilities.js

@@ -0,0 +1,38 @@
+export const inputCapabilities = [
+    {
+        categories: ['input'],
+        target: { id: 'component:syn-input', kind: 'component', name: 'syn-input' },
+    },
+    {
+        categories: ['input'],
+        target: { id: 'component:syn-textarea', kind: 'component', name: 'syn-textarea' },
+    },
+    {
+        categories: ['input'],
+        target: { id: 'component:syn-select', kind: 'component', name: 'syn-select' },
+    },
+    {
+        categories: ['input'],
+        target: { id: 'component:syn-combobox', kind: 'component', name: 'syn-combobox' },
+    },
+    {
+        categories: ['input'],
+        target: { id: 'component:syn-checkbox', kind: 'component', name: 'syn-checkbox' },
+    },
+    {
+        categories: ['input'],
+        target: { id: 'component:syn-switch', kind: 'component', name: 'syn-switch' },
+    },
+    {
+        categories: ['input'],
+        target: { id: 'component:syn-radio-group', kind: 'component', name: 'syn-radio-group' },
+    },
+    {
+        categories: ['input'],
+        target: { id: 'component:syn-file', kind: 'component', name: 'syn-file' },
+    },
+    {
+        categories: ['input'],
+        target: { id: 'component:syn-range', kind: 'component', name: 'syn-range' },
+    },
+];

package/dist/intentPolicy/domains/input/category.d.ts

@@ -0,0 +1,2 @@
+import type { IntentCategory } from '../../types.js';
+export declare const inputCategory: IntentCategory;

package/dist/intentPolicy/domains/input/category.js

@@ -0,0 +1,4 @@
+export const inputCategory = {
+    description: 'Data-entry and selection intents for forms and controls.',
+    id: 'input',
+};

package/dist/intentPolicy/domains/input/index.d.ts

@@ -0,0 +1,4 @@
+export { inputCapabilities } from './capabilities.js';
+export { inputCategory } from './category.js';
+export { inputIntents } from './intents.js';
+export { inputPatterns } from './patterns.js';

package/dist/intentPolicy/domains/input/index.js

@@ -0,0 +1,4 @@
+export { inputCapabilities } from './capabilities.js';
+export { inputCategory } from './category.js';
+export { inputIntents } from './intents.js';
+export { inputPatterns } from './patterns.js';

package/dist/intentPolicy/domains/input/intents.d.ts

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

package/dist/intentPolicy/domains/input/intents.js

@@ -0,0 +1,62 @@
+export const inputIntents = [
+    {
+        category: 'input',
+        description: 'Use when a user should provide short, single-line text input.',
+        id: 'input.text.short',
+        userGoal: 'Capture compact textual or numeric values in a form field.',
+    },
+    {
+        category: 'input',
+        description: 'Use when a user should provide longer, multi-line input.',
+        id: 'input.text.long',
+        userGoal: 'Capture detailed comments, descriptions, or narrative responses.',
+    },
+    {
+        category: 'input',
+        description: 'Use when one option should be selected from predefined choices.',
+        id: 'input.selection.single',
+        userGoal: 'Make one explicit selection from a known set.',
+    },
+    {
+        category: 'input',
+        description: 'Use when multiple options should be selected from predefined choices.',
+        id: 'input.selection.multiple',
+        userGoal: 'Select multiple relevant options in one control.',
+    },
+    {
+        category: 'input',
+        description: 'Use when options are numerous and should be filtered by typing.',
+        id: 'input.selection.searchable',
+        userGoal: 'Find and select options quickly through live filtering.',
+    },
+    {
+        category: 'input',
+        description: 'Use for binary choices that apply immediately on toggle.',
+        id: 'input.binary.immediate',
+        userGoal: 'Enable or disable a setting with instant effect.',
+    },
+    {
+        category: 'input',
+        description: 'Use for binary choices that are submitted later with the form.',
+        id: 'input.binary.deferred',
+        userGoal: 'Record a binary preference without immediate side effects.',
+    },
+    {
+        category: 'input',
+        description: 'Use when files or folders must be attached or uploaded.',
+        id: 'input.file.upload',
+        userGoal: 'Provide one or more local files for processing.',
+    },
+    {
+        category: 'input',
+        description: 'Use sliders when selecting a numeric value within a bounded range.',
+        id: 'input.range.slider',
+        userGoal: 'Pick a value quickly with immediate visual feedback across a range.',
+    },
+    {
+        category: 'input',
+        description: 'Use grouped options to organize long option lists into logical clusters.',
+        id: 'input.selection.grouped-options',
+        userGoal: 'Find and choose options faster through labeled option groupings.',
+    },
+];

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

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

package/dist/intentPolicy/domains/input/patterns.js

@@ -0,0 +1,99 @@
+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/domains/navigation/capabilities.d.ts

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

package/dist/intentPolicy/domains/navigation/capabilities.js

@@ -0,0 +1,54 @@
+export const navigationCapabilities = [
+    {
+        categories: ['navigation', 'action'],
+        target: {
+            classes: ['syn-link'],
+            id: 'style:syn-link',
+            kind: 'style',
+            layer: 'examples',
+            selector: '.syn-link',
+        },
+    },
+    {
+        categories: ['navigation'],
+        target: {
+            classes: ['syn-link-list'],
+            id: 'style:syn-link-list',
+            kind: 'style',
+            layer: 'examples',
+            selector: '.syn-link-list',
+        },
+    },
+    {
+        categories: ['navigation'],
+        target: { id: 'component:syn-tab-group', kind: 'component', name: 'syn-tab-group' },
+    },
+    {
+        categories: ['navigation'],
+        target: { id: 'component:syn-menu', kind: 'component', name: 'syn-menu' },
+    },
+    {
+        categories: ['navigation'],
+        target: { id: 'component:syn-dropdown', kind: 'component', name: 'syn-dropdown' },
+    },
+    {
+        categories: ['navigation'],
+        target: { id: 'component:syn-pagination', kind: 'component', name: 'syn-pagination' },
+    },
+    {
+        categories: ['navigation'],
+        target: { id: 'component:syn-breadcrumb', kind: 'component', name: 'syn-breadcrumb' },
+    },
+    {
+        categories: ['navigation'],
+        target: { id: 'component:syn-breadcrumb-item', kind: 'component', name: 'syn-breadcrumb-item' },
+    },
+    {
+        categories: ['navigation'],
+        target: { id: 'component:syn-side-nav', kind: 'component', name: 'syn-side-nav' },
+    },
+    {
+        categories: ['navigation'],
+        target: { id: 'component:syn-nav-item', kind: 'component', name: 'syn-nav-item' },
+    },
+];

package/dist/intentPolicy/domains/navigation/category.d.ts

@@ -0,0 +1,2 @@
+import type { IntentCategory } from '../../types.js';
+export declare const navigationCategory: IntentCategory;

package/dist/intentPolicy/domains/navigation/category.js

@@ -0,0 +1,4 @@
+export const navigationCategory = {
+    description: 'Information architecture and movement between sections or datasets.',
+    id: 'navigation',
+};

package/dist/intentPolicy/domains/navigation/index.d.ts

@@ -0,0 +1,4 @@
+export { navigationCapabilities } from './capabilities.js';
+export { navigationCategory } from './category.js';
+export { navigationIntents } from './intents.js';
+export { navigationPatterns } from './patterns.js';

package/dist/intentPolicy/domains/navigation/index.js

@@ -0,0 +1,4 @@
+export { navigationCapabilities } from './capabilities.js';
+export { navigationCategory } from './category.js';
+export { navigationIntents } from './intents.js';
+export { navigationPatterns } from './patterns.js';

package/dist/intentPolicy/domains/navigation/intents.d.ts

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

package/dist/intentPolicy/domains/navigation/intents.js

@@ -0,0 +1,44 @@
+export const navigationIntents = [
+    {
+        category: 'navigation',
+        description: 'Use link-list styles to present grouped navigation links with consistent spacing.',
+        id: 'navigation.link-list.grouped',
+        userGoal: 'Scan and navigate related links quickly in a vertical list.',
+    },
+    {
+        category: 'navigation',
+        description: 'Use tabs to switch between related content sections in-place.',
+        id: 'navigation.tabs.section',
+        userGoal: 'Move between grouped views without leaving the current page.',
+    },
+    {
+        category: 'navigation',
+        description: 'Use menus to provide grouped actions or destinations.',
+        id: 'navigation.menu.actions',
+        userGoal: 'Access frequently used commands through a structured action list.',
+    },
+    {
+        category: 'navigation',
+        description: 'Use pagination controls for large datasets split across pages.',
+        id: 'navigation.pagination.dataset',
+        userGoal: 'Navigate through bounded result sets efficiently.',
+    },
+    {
+        category: 'navigation',
+        description: 'Use dropdowns to reveal compact, related options from a trigger.',
+        id: 'navigation.dropdown.compact-options',
+        userGoal: 'Access secondary options while preserving layout space.',
+    },
+    {
+        category: 'navigation',
+        description: 'Use breadcrumb trails to show hierarchy and support quick backtracking.',
+        id: 'navigation.breadcrumb.trail',
+        userGoal: 'Understand current location and navigate to ancestor levels quickly.',
+    },
+    {
+        category: 'navigation',
+        description: 'Use side navigation to expose primary navigation sections in vertical layouts.',
+        id: 'navigation.sidenav.menu',
+        userGoal: 'Move between major sections in an app shell efficiently.',
+    },
+];

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

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

package/dist/intentPolicy/domains/navigation/patterns.js

@@ -0,0 +1,192 @@
+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/domains/status/capabilities.d.ts

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

package/dist/intentPolicy/domains/status/capabilities.js

@@ -0,0 +1,14 @@
+export const statusCapabilities = [
+    {
+        categories: ['status'],
+        target: { id: 'component:syn-spinner', kind: 'component', name: 'syn-spinner' },
+    },
+    {
+        categories: ['status'],
+        target: { id: 'component:syn-progress-bar', kind: 'component', name: 'syn-progress-bar' },
+    },
+    {
+        categories: ['status'],
+        target: { id: 'component:syn-progress-ring', kind: 'component', name: 'syn-progress-ring' },
+    },
+];

package/dist/intentPolicy/domains/status/category.d.ts

@@ -0,0 +1,2 @@
+import type { IntentCategory } from '../../types.js';
+export declare const statusCategory: IntentCategory;