Bläddra i källkod

v.1.5. add webawesome-controls.xml, ui-layout-webawesome-controls.xsd

Dalibor Votruba 10 månader sedan
förälder
incheckning
96d86b8210

+ 57 - 9
UILayoutDefinitionFormat/CLAUDE.md

@@ -4,7 +4,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Repository Overview
 
-This is the UI Layout Definition Format repository - a comprehensive XML-based format for describing cross-platform user interfaces with inheritance, validation, and modern development practices. Version 1.4 includes advanced features like state management, accessibility compliance, AI assistance, and performance optimization.
+This is the UI Layout Definition Format repository - a comprehensive XML-based format for describing cross-platform user interfaces with inheritance, validation, and modern development practices. Version 1.5 includes advanced features like state management, accessibility compliance, AI assistance, and performance optimization.
 
 ## Architecture
 
@@ -18,15 +18,17 @@ This is the UI Layout Definition Format repository - a comprehensive XML-based f
 - `ui-layout-basic-controls.xsd` - Basic UI control definitions
 - `ui-layout-avalonia-controls.xsd` - Avalonia platform-specific controls
 - `ui-layout-winforms-controls.xsd` - Windows Forms platform-specific controls
+- `ui-layout-webawesome-controls.xsd` - Web Awesome (formerly Shoelace) web components
 
 **Definition Files (Definitions/ folder)**
 - `abstract-controls.xml` - Base control definitions with common attributes and behaviors
 - `avalonia-controls.xml` - Avalonia UI platform-specific control implementations
 - `web-controls.xml` - Web platform control definitions
 - `winform-controls.xml` - Windows Forms control definitions
+- `webawesome-controls.xml` - Web Awesome component definitions with modern web controls
 
 **Sample Files (Samples/ folder)**
-- `sample.xml` - Comprehensive v1.4 sample showcasing all features
+- `sample.xml` - Comprehensive v1.5 sample showcasing all features
 - `business-views.xml` - Business logic view examples
 - Various platform-specific samples (kde-controls.xml, web-controls.xml, etc.)
 
@@ -63,12 +65,16 @@ xmlstarlet val -e ui-layout-views.xsd
 xmlstarlet val -e ui-layout-validation.xsd
 xmlstarlet val -e ui-layout-avalonia-controls.xsd
 xmlstarlet val -e ui-layout-winforms-controls.xsd
+xmlstarlet val -e ui-layout-webawesome-controls.xsd
 
 # Working sample file ✅
 xmlstarlet val -e -s ui-layout-def.xsd Samples/simple-working.xml
 
 # Pattern definitions file ✅
 xmlstarlet val -e -s ui-layout-def.xsd Definitions/abstract-controls.xml
+
+# Web Awesome controls file ✅
+xmlstarlet val -e -s ui-layout-webawesome-controls.xsd Definitions/webawesome-controls.xml
 ```
 
 **XML Processing and Querying**
@@ -87,12 +93,12 @@ xmlstarlet fo sample.xml > formatted-sample.xml
 - **External Schemas**: Platform-specific and feature-specific schemas are imported
 - **Control Hierarchy**: All controls inherit from `CommonControl` in `abstract-controls.xml`
 - **Validation System**: Custom validators and profiles in validation includes
-- **Sample Implementation**: `sample.xml` demonstrates v1.4 features including AI assistance, accessibility, and performance optimization
+- **Sample Implementation**: `sample.xml` demonstrates v1.5 features including AI assistance, accessibility, and performance optimization
 
 ## Important Development Notes
 
 ### Schema Versioning
-- Current version: 1.4
+- Current version: 1.5
 - Schema version must match in `schema-version` attribute
 - Platform compatibility defined in `platform-constraints`
 
@@ -108,7 +114,7 @@ xmlstarlet fo sample.xml > formatted-sample.xml
 4. Add validation rules for new attributes
 
 ### Gallery Control Implementation
-The Gallery control is a new v1.4 feature for displaying collections with customizable templates:
+The Gallery control is a new v1.5 feature for displaying collections with customizable templates:
 
 **Key Features:**
 - Inherits from CommonControl with ListView-like behavior
@@ -122,7 +128,7 @@ The Gallery control is a new v1.4 feature for displaying collections with custom
 - `ui-layout-basic-controls.xsd` - Gallery schema types and validation rules
 - `README.md` - Documentation and usage examples
 
-### v1.4 Enhancements
+### v1.5 Enhancements
 - Advanced state management with Redux/MobX patterns
 - Comprehensive accessibility framework (WCAG 2.1 AA/AAA)
 - Performance optimization system with metrics and targets
@@ -131,10 +137,52 @@ The Gallery control is a new v1.4 feature for displaying collections with custom
 - Advanced localization with RTL support
 - **New Gallery Control**: Specialized list control for displaying collections with customizable box templates
 
+### Web Awesome Controls Implementation
+Version 1.5 adds comprehensive Web Awesome (formerly Shoelace) component support for modern web applications:
+
+**Key Features:**
+- Complete Web Awesome component library (75+ controls)
+- Modern web components with Shadow DOM encapsulation
+- Accessibility-first design with WCAG compliance
+- Comprehensive form controls with built-in validation
+- Advanced UI patterns (modals, tooltips, animations)
+- TypeScript definitions and framework integrations
+
+**Control Categories:**
+- **Action Controls**: `wa-button`, `wa-dropdown`, `wa-copy-button`, `wa-qr-code`
+- **Form Controls**: `wa-input`, `wa-select`, `wa-checkbox`, `wa-color-picker`, `wa-rating`
+- **Feedback & Status**: `wa-badge`, `wa-callout`, `wa-progress-bar`, `wa-spinner`, `wa-tooltip`
+- **Navigation**: `wa-breadcrumb`, `wa-tab-group`, `wa-tree`
+- **Organization**: `wa-card`, `wa-dialog`, `wa-drawer`, `wa-split-panel`
+- **Imagery**: `wa-avatar`, `wa-carousel`, `wa-icon`, `wa-animated-image`
+- **Utility**: `wa-animation`, `wa-format-date`, `wa-include`, `wa-popover`
+
+**Files Added:**
+- `Definitions/webawesome-controls.xml` - Complete Web Awesome control definitions
+- `ui-layout-webawesome-controls.xsd` - Schema for Web Awesome components
+- Platform-specific validation and accessibility requirements
+- Custom Web Awesome wireframes and patterns
+
+**Usage Pattern:**
+```xml
+<patterns>
+  <pattern-include src="webawesome-controls.xml" platform="web" important="true" />
+</patterns>
+
+<window platform="web">
+  <wa-card size="medium">
+    <wa-input label="Name" required="true" help-text="Enter your full name">
+    </wa-input>
+    <wa-button variant="brand" type="submit">Submit</wa-button>
+  </wa-card>
+</window>
+```
+
 ### Recent Updates
 - **Gallery Control Added**: New Gallery control in `abstract-controls.xml` and `ui-layout-basic-controls.xsd`
+- **Web Awesome Controls Added**: Complete Web Awesome component library in `webawesome-controls.xml` and `ui-layout-webawesome-controls.xsd`
 - **Namespace Fixes**: Corrected namespace declarations in `abstract-controls.xml` 
-- **Schema Validation**: All files now validate successfully against their schemas
-- **Documentation Updated**: README.md includes Gallery control examples and validation status
+- **Schema Validation**: All files now validate successfully against their schemas, including Web Awesome controls
+- **Documentation Updated**: README.md and CLAUDE.md include Web Awesome control examples and validation status
 
-When working with this codebase, always validate XML against schemas and ensure new features follow the established patterns for platform abstraction and modular design.
+When working with this codebase, always validate XML against schemas and ensure new features follow the established patterns for platform abstraction and modular design. Use the Web Awesome controls for modern web applications requiring advanced UI components with built-in accessibility.

+ 1 - 1
UILayoutDefinitionFormat/Definitions/abstract-controls.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!-- Abstract Control Definitions for UI Layout Definition Format -->
-<!-- Version: 1.4 - Updated with Gallery Control -->
+<!-- Version: 1.5 - Updated with Gallery Control -->
 <patterns xmlns="http://quadarax.com/ui-layout-patterns">
   
   <!-- Base Abstract Control -->

+ 1472 - 0
UILayoutDefinitionFormat/Definitions/webawesome-controls.xml

@@ -0,0 +1,1472 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Web Awesome Control Definitions for UI Layout Definition Format -->
+<!-- Version: 1.5 - Web Awesome Components (formerly Shoelace) -->
+<patterns xmlns="http://quadarax.com/ui-layout-webawesome-controls"
+         schema-version="1.5"
+         target-platform="web">
+  
+  <!-- Base Web Component -->
+  <control name="WebAwesomeComponent" type="composite" category="web-specific">
+    <description>Base Web Awesome component with common attributes and behaviors</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>depends-on-implementation</allowed-children>
+      <container>true</container>
+      <platform-constraints>
+        <platform-constraint platform="web" min-version="3.0" feature-required="custom-elements" />
+      </platform-constraints>
+    </constraints>
+    <attributes>
+      <attribute name="class" type="string" default="" category="styling" />
+      <attribute name="style" type="string" default="" category="styling" />
+      <attribute name="id" type="string" default="" category="identification" />
+      <attribute name="data-*" type="string" default="" category="data" />
+      <attribute name="aria-*" type="string" default="" category="accessibility" />
+      <attribute name="dir" type="enum" values="ltr,rtl,auto" default="ltr" category="localization" />
+      <attribute name="lang" type="string" default="" category="localization" />
+      <attribute name="hidden" type="bool" default="false" category="display" />
+    </attributes>
+    <behavior>
+      <event name="wa-load" description="Emitted when component is loaded" />
+      <event name="wa-error" description="Emitted when an error occurs" />
+    </behavior>
+    <accessibility>
+      <requirement standard="wcag" level="aa" description="ARIA support" required="true" />
+      <requirement standard="wcag" level="aa" description="Keyboard navigation" required="true" />
+    </accessibility>
+  </control>
+
+  <!-- ACTION CONTROLS -->
+  
+  <control name="wa-button" type="button" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Buttons represent actions that are available to the user</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>any-content,wa-icon,wa-spinner</allowed-children>
+      <container>true</container>
+      <required-slots>label,start,end</required-slots>
+    </constraints>
+    <attributes>
+      <attribute name="variant" type="enum" values="default,primary,brand,success,neutral,warning,danger" default="default" />
+      <attribute name="appearance" type="enum" values="filled,outlined,text" default="filled" />
+      <attribute name="size" type="enum" values="small,medium,large" default="medium" />
+      <attribute name="caret" type="bool" default="false" />
+      <attribute name="disabled" type="bool" default="false" />
+      <attribute name="loading" type="bool" default="false" />
+      <attribute name="pill" type="bool" default="false" />
+      <attribute name="circle" type="bool" default="false" />
+      <attribute name="type" type="enum" values="button,submit,reset" default="button" />
+      <attribute name="name" type="string" default="" />
+      <attribute name="value" type="string" default="" />
+      <attribute name="href" type="string" default="" />
+      <attribute name="target" type="enum" values="_self,_blank,_parent,_top" default="_self" />
+      <attribute name="rel" type="string" default="noreferrer noopener" />
+      <attribute name="download" type="string" default="" />
+      <attribute name="form" type="string" default="" />
+      <attribute name="formaction" type="string" default="" />
+      <attribute name="formenctype" type="string" default="" />
+      <attribute name="formmethod" type="enum" values="post,get" default="" />
+      <attribute name="formnovalidate" type="bool" default="false" />
+      <attribute name="formtarget" type="string" default="" />
+    </attributes>
+    <behavior>
+      <event name="wa-click" description="Emitted when the button is clicked" />
+      <event name="wa-focus" description="Emitted when the button gains focus" />
+      <event name="wa-blur" description="Emitted when the button loses focus" />
+      <command name="click" description="Simulates a click on the button" />
+      <command name="focus" description="Sets focus on the button" />
+      <command name="blur" description="Removes focus from the button" />
+    </behavior>
+  </control>
+
+  <control name="wa-button-group" type="container" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Button groups arrange buttons into horizontal or vertical groups</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>wa-button</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="label" type="string" default="" />
+      <attribute name="orientation" type="enum" values="horizontal,vertical" default="horizontal" />
+      <attribute name="size" type="enum" values="small,medium,large" default="medium" />
+    </attributes>
+  </control>
+
+  <control name="wa-copy-button" type="button" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Copies text data to the clipboard when clicked</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>any-content</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="value" type="string" default="" />
+      <attribute name="from" type="string" default="" />
+      <attribute name="disabled" type="bool" default="false" />
+      <attribute name="copy-label" type="string" default="Copy" />
+      <attribute name="success-label" type="string" default="Copied" />
+      <attribute name="error-label" type="string" default="Error" />
+      <attribute name="feedback-duration" type="int" default="1000" min="0" />
+      <attribute name="tooltip-placement" type="enum" values="top,right,bottom,left" default="top" />
+      <attribute name="hoist" type="bool" default="false" />
+    </attributes>
+    <behavior>
+      <event name="wa-copy" description="Emitted when content is copied successfully" />
+      <event name="wa-error" description="Emitted when copy fails" />
+    </behavior>
+  </control>
+
+  <control name="wa-dropdown" type="container" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Dropdowns expose contextual overlays for displaying lists of links and more</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>wa-button,wa-menu,wa-dropdown-item</allowed-children>
+      <container>true</container>
+      <required-slots>trigger</required-slots>
+    </constraints>
+    <attributes>
+      <attribute name="open" type="bool" default="false" />
+      <attribute name="placement" type="enum" values="top,top-start,top-end,bottom,bottom-start,bottom-end,right,right-start,right-end,left,left-start,left-end" default="bottom-start" />
+      <attribute name="disabled" type="bool" default="false" />
+      <attribute name="stay-open-on-select" type="bool" default="false" />
+      <attribute name="containing-element" type="string" default="" />
+      <attribute name="distance" type="int" default="0" />
+      <attribute name="skidding" type="int" default="0" />
+      <attribute name="hoist" type="bool" default="false" />
+      <attribute name="size" type="enum" values="small,medium,large" default="medium" />
+    </attributes>
+    <behavior>
+      <event name="wa-show" description="Emitted when the dropdown opens" />
+      <event name="wa-after-show" description="Emitted after the dropdown opens and animations complete" />
+      <event name="wa-hide" description="Emitted when the dropdown closes" />
+      <event name="wa-after-hide" description="Emitted after the dropdown closes and animations complete" />
+      <command name="show" description="Shows the dropdown" />
+      <command name="hide" description="Hides the dropdown" />
+    </behavior>
+  </control>
+
+  <control name="wa-dropdown-item" type="menu" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Individual item in a dropdown menu</description>
+    <constraints>
+      <allowed-parents>wa-dropdown,wa-menu</allowed-parents>
+      <allowed-children>any-content,wa-icon</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="type" type="enum" values="normal,checkbox,radio" default="normal" />
+      <attribute name="checked" type="bool" default="false" />
+      <attribute name="value" type="string" default="" />
+      <attribute name="disabled" type="bool" default="false" />
+    </attributes>
+    <behavior>
+      <event name="wa-select" description="Emitted when the item is selected" />
+    </behavior>
+  </control>
+
+  <control name="wa-qr-code" type="display" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Generates QR codes dynamically</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>none</allowed-children>
+      <container>false</container>
+    </constraints>
+    <attributes>
+      <attribute name="value" type="string" default="" required="true" />
+      <attribute name="label" type="string" default="" />
+      <attribute name="size" type="int" default="128" min="16" max="1024" />
+      <attribute name="fill" type="color" default="black" />
+      <attribute name="background" type="color" default="white" />
+      <attribute name="radius" type="decimal" default="0" min="0" max="0.5" />
+      <attribute name="error-correction" type="enum" values="L,M,Q,H" default="M" />
+    </attributes>
+  </control>
+
+  <!-- FEEDBACK & STATUS CONTROLS -->
+
+  <control name="wa-badge" type="display" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Badges are small status indicators</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>any-content</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="variant" type="enum" values="primary,success,neutral,warning,danger" default="primary" />
+      <attribute name="pill" type="bool" default="false" />
+      <attribute name="pulse" type="bool" default="false" />
+    </attributes>
+  </control>
+
+  <control name="wa-callout" type="display" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Callouts display informative messages or alerts</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>any-content,wa-icon</allowed-children>
+      <container>true</container>
+      <required-slots>icon</required-slots>
+    </constraints>
+    <attributes>
+      <attribute name="variant" type="enum" values="primary,success,neutral,warning,danger" default="primary" />
+      <attribute name="open" type="bool" default="false" />
+      <attribute name="closable" type="bool" default="false" />
+      <attribute name="duration" type="string" default="Infinity" />
+    </attributes>
+    <behavior>
+      <event name="wa-show" description="Emitted when the callout opens" />
+      <event name="wa-after-show" description="Emitted after the callout opens" />
+      <event name="wa-hide" description="Emitted when the callout closes" />
+      <event name="wa-after-hide" description="Emitted after the callout closes" />
+      <command name="toast" description="Displays the callout as a toast notification" />
+      <command name="show" description="Shows the callout" />
+      <command name="hide" description="Hides the callout" />
+    </behavior>
+  </control>
+
+  <control name="wa-progress-bar" type="display" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Progress bars show the progress of a determinate or indeterminate operation</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>none</allowed-children>
+      <container>false</container>
+    </constraints>
+    <attributes>
+      <attribute name="value" type="int" default="0" min="0" max="100" />
+      <attribute name="indeterminate" type="bool" default="false" />
+      <attribute name="label" type="string" default="" />
+      <attribute name="lang" type="string" default="" />
+    </attributes>
+  </control>
+
+  <control name="wa-progress-ring" type="display" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Progress rings show the progress of an operation in a circular format</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>any-content</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="value" type="int" default="0" min="0" max="100" />
+      <attribute name="label" type="string" default="" />
+    </attributes>
+  </control>
+
+  <control name="wa-skeleton" type="display" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Skeletons indicate content is loading</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>none</allowed-children>
+      <container>false</container>
+    </constraints>
+    <attributes>
+      <attribute name="effect" type="enum" values="none,sheen,pulse" default="none" />
+    </attributes>
+  </control>
+
+  <control name="wa-spinner" type="display" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Spinners indicate an operation is in progress</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>none</allowed-children>
+      <container>false</container>
+    </constraints>
+    <attributes>
+      <attribute name="style" type="string" default="" />
+    </attributes>
+  </control>
+
+  <control name="wa-tag" type="display" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Tags are used to label items</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>any-content,wa-icon</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="variant" type="enum" values="primary,success,neutral,warning,danger,text" default="neutral" />
+      <attribute name="size" type="enum" values="small,medium,large" default="medium" />
+      <attribute name="pill" type="bool" default="false" />
+      <attribute name="removable" type="bool" default="false" />
+    </attributes>
+    <behavior>
+      <event name="wa-remove" description="Emitted when the tag is removed" />
+    </behavior>
+  </control>
+
+  <control name="wa-tooltip" type="display" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Tooltips display additional information on hover</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>any-content</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="content" type="string" default="" />
+      <attribute name="placement" type="enum" values="top,top-start,top-end,right,right-start,right-end,bottom,bottom-start,bottom-end,left,left-start,left-end" default="top" />
+      <attribute name="disabled" type="bool" default="false" />
+      <attribute name="distance" type="int" default="8" />
+      <attribute name="open" type="bool" default="false" />
+      <attribute name="skidding" type="int" default="0" />
+      <attribute name="trigger" type="string" default="hover focus" />
+      <attribute name="hoist" type="bool" default="false" />
+    </attributes>
+    <behavior>
+      <event name="wa-show" description="Emitted when tooltip shows" />
+      <event name="wa-after-show" description="Emitted after tooltip shows" />
+      <event name="wa-hide" description="Emitted when tooltip hides" />
+      <event name="wa-after-hide" description="Emitted after tooltip hides" />
+    </behavior>
+  </control>
+
+  <!-- FORM CONTROLS -->
+
+  <control name="wa-checkbox" type="input" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Checkboxes allow users to toggle between checked and unchecked states</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>any-content</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="name" type="string" default="" />
+      <attribute name="value" type="string" default="on" />
+      <attribute name="size" type="enum" values="small,medium,large" default="medium" />
+      <attribute name="disabled" type="bool" default="false" />
+      <attribute name="checked" type="bool" default="false" />
+      <attribute name="indeterminate" type="bool" default="false" />
+      <attribute name="required" type="bool" default="false" />
+      <attribute name="help-text" type="string" default="" />
+    </attributes>
+    <behavior>
+      <event name="wa-change" description="Emitted when checked state changes" />
+      <event name="wa-input" description="Emitted when user interacts with checkbox" />
+      <event name="wa-invalid" description="Emitted when validity changes to invalid" />
+      <command name="focus" description="Sets focus on the checkbox" />
+      <command name="blur" description="Removes focus from the checkbox" />
+      <command name="click" description="Simulates a click on the checkbox" />
+    </behavior>
+    <validation>
+      <rule name="required" type="required" message="This field is required" severity="error" />
+    </validation>
+  </control>
+
+  <control name="wa-color-picker" type="input" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Color pickers allow users to select a color</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>none</allowed-children>
+      <container>false</container>
+    </constraints>
+    <attributes>
+      <attribute name="value" type="string" default="#ffffff" />
+      <attribute name="label" type="string" default="" />
+      <attribute name="format" type="enum" values="hex,rgb,hsl,hsv" default="hex" />
+      <attribute name="inline" type="bool" default="false" />
+      <attribute name="size" type="enum" values="small,medium,large" default="medium" />
+      <attribute name="noformat" type="bool" default="false" />
+      <attribute name="name" type="string" default="" />
+      <attribute name="disabled" type="bool" default="false" />
+      <attribute name="hoist" type="bool" default="false" />
+      <attribute name="opacity" type="bool" default="false" />
+      <attribute name="uppercase" type="bool" default="false" />
+      <attribute name="swatches" type="string" default="" />
+      <attribute name="form" type="string" default="" />
+      <attribute name="required" type="bool" default="false" />
+    </attributes>
+    <behavior>
+      <event name="wa-blur" description="Emitted when color picker loses focus" />
+      <event name="wa-change" description="Emitted when color value changes" />
+      <event name="wa-focus" description="Emitted when color picker gains focus" />
+      <event name="wa-input" description="Emitted when color value is being changed" />
+      <event name="wa-invalid" description="Emitted when validity changes to invalid" />
+      <command name="focus" description="Sets focus on the color picker" />
+      <command name="blur" description="Removes focus from the color picker" />
+      <command name="getFormattedValue" description="Returns the formatted color value" />
+    </behavior>
+  </control>
+
+  <control name="wa-input" type="input" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Inputs allow users to enter text</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>wa-icon</allowed-children>
+      <container>true</container>
+      <required-slots>label,prefix,suffix,clear-icon,show-password-icon,hide-password-icon,help-text</required-slots>
+    </constraints>
+    <attributes>
+      <attribute name="type" type="enum" values="date,datetime-local,email,number,password,search,tel,text,time,url" default="text" />
+      <attribute name="name" type="string" default="" />
+      <attribute name="value" type="string" default="" />
+      <attribute name="size" type="enum" values="small,medium,large" default="medium" />
+      <attribute name="filled" type="bool" default="false" />
+      <attribute name="pill" type="bool" default="false" />
+      <attribute name="label" type="string" default="" />
+      <attribute name="help-text" type="string" default="" />
+      <attribute name="clearable" type="bool" default="false" />
+      <attribute name="disabled" type="bool" default="false" />
+      <attribute name="placeholder" type="string" default="" />
+      <attribute name="readonly" type="bool" default="false" />
+      <attribute name="password-toggle" type="bool" default="false" />
+      <attribute name="password-visible" type="bool" default="false" />
+      <attribute name="no-spin-buttons" type="bool" default="false" />
+      <attribute name="form" type="string" default="" />
+      <attribute name="pattern" type="string" default="" />
+      <attribute name="required" type="bool" default="false" />
+      <attribute name="autocapitalize" type="enum" values="off,none,on,sentences,words,characters" default="off" />
+      <attribute name="autocorrect" type="string" default="" />
+      <attribute name="autocomplete" type="string" default="" />
+      <attribute name="autofocus" type="bool" default="false" />
+      <attribute name="enterkeyhint" type="string" default="" />
+      <attribute name="spellcheck" type="bool" default="true" />
+      <attribute name="inputmode" type="string" default="" />
+      <attribute name="min" type="string" default="" />
+      <attribute name="max" type="string" default="" />
+      <attribute name="minlength" type="int" default="" />
+      <attribute name="maxlength" type="int" default="" />
+      <attribute name="step" type="string" default="" />
+    </attributes>
+    <behavior>
+      <event name="wa-blur" description="Emitted when input loses focus" />
+      <event name="wa-change" description="Emitted when input value changes" />
+      <event name="wa-clear" description="Emitted when input is cleared" />
+      <event name="wa-focus" description="Emitted when input gains focus" />
+      <event name="wa-input" description="Emitted when input value is being changed" />
+      <event name="wa-invalid" description="Emitted when validity changes to invalid" />
+      <command name="focus" description="Sets focus on the input" />
+      <command name="blur" description="Removes focus from the input" />
+      <command name="select" description="Selects all text in the input" />
+      <command name="setSelectionRange" description="Sets the selection range" />
+      <command name="setRangeText" description="Replaces a range of text" />
+      <command name="showPicker" description="Shows the browser picker for date/time inputs" />
+      <command name="stepUp" description="Increments the value by step" />
+      <command name="stepDown" description="Decrements the value by step" />
+    </behavior>
+    <validation>
+      <rule name="required" type="required" message="This field is required" severity="error" />
+      <rule name="pattern" type="pattern" pattern="{pattern}" message="Invalid format" severity="error" />
+      <rule name="minlength" type="length" message="Too short" severity="error" />
+      <rule name="maxlength" type="length" message="Too long" severity="error" />
+    </validation>
+  </control>
+
+  <control name="wa-option" type="input" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Options are used within wa-select</description>
+    <constraints>
+      <allowed-parents>wa-select</allowed-parents>
+      <allowed-children>any-content,wa-icon</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="value" type="string" default="" required="true" />
+      <attribute name="disabled" type="bool" default="false" />
+    </attributes>
+  </control>
+
+  <control name="wa-radio" type="input" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Radio buttons allow users to select a single option from a group</description>
+    <constraints>
+      <allowed-parents>wa-radio-group,any</allowed-parents>
+      <allowed-children>any-content</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="value" type="string" default="" />
+      <attribute name="size" type="enum" values="small,medium,large" default="medium" />
+      <attribute name="disabled" type="bool" default="false" />
+      <attribute name="checked" type="bool" default="false" />
+    </attributes>
+    <behavior>
+      <event name="wa-blur" description="Emitted when radio loses focus" />
+      <event name="wa-focus" description="Emitted when radio gains focus" />
+    </behavior>
+  </control>
+
+  <control name="wa-radio-group" type="input" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Radio groups organize radio buttons</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>wa-radio,wa-radio-button</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="label" type="string" default="" />
+      <attribute name="help-text" type="string" default="" />
+      <attribute name="name" type="string" default="option" />
+      <attribute name="value" type="string" default="" />
+      <attribute name="size" type="enum" values="small,medium,large" default="medium" />
+      <attribute name="form" type="string" default="" />
+      <attribute name="required" type="bool" default="false" />
+    </attributes>
+    <behavior>
+      <event name="wa-change" description="Emitted when selection changes" />
+      <event name="wa-input" description="Emitted when user interacts with radio group" />
+      <event name="wa-invalid" description="Emitted when validity changes to invalid" />
+    </behavior>
+    <validation>
+      <rule name="required" type="required" message="Please select an option" severity="error" />
+    </validation>
+  </control>
+
+  <control name="wa-rating" type="input" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Ratings allow users to rate something</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>none</allowed-children>
+      <container>false</container>
+    </constraints>
+    <attributes>
+      <attribute name="label" type="string" default="" />
+      <attribute name="value" type="decimal" default="0" min="0" />
+      <attribute name="max" type="int" default="5" min="1" />
+      <attribute name="precision" type="decimal" default="1" min="0.1" />
+      <attribute name="readonly" type="bool" default="false" />
+      <attribute name="disabled" type="bool" default="false" />
+      <attribute name="get-symbol" type="string" default="" />
+    </attributes>
+    <behavior>
+      <event name="wa-change" description="Emitted when rating changes" />
+      <event name="wa-hover" description="Emitted when hovering over rating" />
+      <command name="focus" description="Sets focus on the rating" />
+      <command name="blur" description="Removes focus from the rating" />
+    </behavior>
+  </control>
+
+  <control name="wa-select" type="input" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Selects allow users to choose one or more items from a dropdown</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>wa-option,wa-divider</allowed-children>
+      <container>true</container>
+      <required-slots>label,prefix,clear-icon,expand-icon,tag,help-text</required-slots>
+    </constraints>
+    <attributes>
+      <attribute name="multiple" type="bool" default="false" />
+      <attribute name="max-options-visible" type="int" default="3" min="0" />
+      <attribute name="disabled" type="bool" default="false" />
+      <attribute name="name" type="string" default="" />
+      <attribute name="placeholder" type="string" default="" />
+      <attribute name="size" type="enum" values="small,medium,large" default="medium" />
+      <attribute name="hoist" type="bool" default="false" />
+      <attribute name="value" type="string" default="" />
+      <attribute name="filled" type="bool" default="false" />
+      <attribute name="pill" type="bool" default="false" />
+      <attribute name="label" type="string" default="" />
+      <attribute name="placement" type="enum" values="top,bottom" default="bottom" />
+      <attribute name="help-text" type="string" default="" />
+      <attribute name="form" type="string" default="" />
+      <attribute name="required" type="bool" default="false" />
+      <attribute name="clearable" type="bool" default="false" />
+      <attribute name="open" type="bool" default="false" />
+    </attributes>
+    <behavior>
+      <event name="wa-change" description="Emitted when selection changes" />
+      <event name="wa-clear" description="Emitted when selection is cleared" />
+      <event name="wa-input" description="Emitted when user interacts with select" />
+      <event name="wa-focus" description="Emitted when select gains focus" />
+      <event name="wa-blur" description="Emitted when select loses focus" />
+      <event name="wa-show" description="Emitted when dropdown opens" />
+      <event name="wa-after-show" description="Emitted after dropdown opens" />
+      <event name="wa-hide" description="Emitted when dropdown closes" />
+      <event name="wa-after-hide" description="Emitted after dropdown closes" />
+      <event name="wa-invalid" description="Emitted when validity changes to invalid" />
+      <command name="show" description="Shows the dropdown" />
+      <command name="hide" description="Hides the dropdown" />
+      <command name="focus" description="Sets focus on the select" />
+      <command name="blur" description="Removes focus from the select" />
+    </behavior>
+    <validation>
+      <rule name="required" type="required" message="Please select an option" severity="error" />
+    </validation>
+  </control>
+
+  <control name="wa-slider" type="input" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Sliders allow users to select a value from a range</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>none</allowed-children>
+      <container>false</container>
+    </constraints>
+    <attributes>
+      <attribute name="name" type="string" default="" />
+      <attribute name="value" type="decimal" default="0" />
+      <attribute name="label" type="string" default="" />
+      <attribute name="help-text" type="string" default="" />
+      <attribute name="disabled" type="bool" default="false" />
+      <attribute name="min" type="decimal" default="0" />
+      <attribute name="max" type="decimal" default="100" />
+      <attribute name="step" type="decimal" default="1" />
+      <attribute name="tooltip" type="enum" values="top,bottom,none" default="top" />
+      <attribute name="tooltip-formatter" type="string" default="" />
+      <attribute name="form" type="string" default="" />
+    </attributes>
+    <behavior>
+      <event name="wa-blur" description="Emitted when slider loses focus" />
+      <event name="wa-change" description="Emitted when slider value changes" />
+      <event name="wa-focus" description="Emitted when slider gains focus" />
+      <event name="wa-input" description="Emitted when slider is being dragged" />
+      <event name="wa-invalid" description="Emitted when validity changes to invalid" />
+      <command name="focus" description="Sets focus on the slider" />
+      <command name="blur" description="Removes focus from the slider" />
+      <command name="stepUp" description="Increments the value by step" />
+      <command name="stepDown" description="Decrements the value by step" />
+    </behavior>
+  </control>
+
+  <control name="wa-switch" type="input" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Switches allow users to toggle between two states</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>any-content</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="name" type="string" default="" />
+      <attribute name="value" type="string" default="on" />
+      <attribute name="size" type="enum" values="small,medium,large" default="medium" />
+      <attribute name="disabled" type="bool" default="false" />
+      <attribute name="checked" type="bool" default="false" />
+      <attribute name="required" type="bool" default="false" />
+      <attribute name="form" type="string" default="" />
+      <attribute name="help-text" type="string" default="" />
+    </attributes>
+    <behavior>
+      <event name="wa-blur" description="Emitted when switch loses focus" />
+      <event name="wa-change" description="Emitted when switch state changes" />
+      <event name="wa-input" description="Emitted when user interacts with switch" />
+      <event name="wa-focus" description="Emitted when switch gains focus" />
+      <event name="wa-invalid" description="Emitted when validity changes to invalid" />
+      <command name="click" description="Simulates a click on the switch" />
+      <command name="focus" description="Sets focus on the switch" />
+      <command name="blur" description="Removes focus from the switch" />
+    </behavior>
+  </control>
+
+  <control name="wa-textarea" type="input" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Textareas allow users to enter multiple lines of text</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>none</allowed-children>
+      <container>false</container>
+    </constraints>
+    <attributes>
+      <attribute name="name" type="string" default="" />
+      <attribute name="value" type="string" default="" />
+      <attribute name="size" type="enum" values="small,medium,large" default="medium" />
+      <attribute name="filled" type="bool" default="false" />
+      <attribute name="label" type="string" default="" />
+      <attribute name="help-text" type="string" default="" />
+      <attribute name="placeholder" type="string" default="" />
+      <attribute name="rows" type="int" default="4" min="1" />
+      <attribute name="resize" type="enum" values="none,vertical,horizontal,both" default="vertical" />
+      <attribute name="disabled" type="bool" default="false" />
+      <attribute name="readonly" type="bool" default="false" />
+      <attribute name="form" type="string" default="" />
+      <attribute name="required" type="bool" default="false" />
+      <attribute name="minlength" type="int" default="" />
+      <attribute name="maxlength" type="int" default="" />
+      <attribute name="autocapitalize" type="string" default="" />
+      <attribute name="autocorrect" type="string" default="" />
+      <attribute name="autocomplete" type="string" default="" />
+      <attribute name="autofocus" type="bool" default="false" />
+      <attribute name="enterkeyhint" type="string" default="" />
+      <attribute name="spellcheck" type="bool" default="true" />
+      <attribute name="inputmode" type="string" default="" />
+    </attributes>
+    <behavior>
+      <event name="wa-blur" description="Emitted when textarea loses focus" />
+      <event name="wa-change" description="Emitted when textarea value changes" />
+      <event name="wa-focus" description="Emitted when textarea gains focus" />
+      <event name="wa-input" description="Emitted when textarea value is being changed" />
+      <event name="wa-invalid" description="Emitted when validity changes to invalid" />
+      <command name="focus" description="Sets focus on the textarea" />
+      <command name="blur" description="Removes focus from the textarea" />
+      <command name="select" description="Selects all text in the textarea" />
+      <command name="setSelectionRange" description="Sets the selection range" />
+      <command name="setRangeText" description="Replaces a range of text" />
+    </behavior>
+    <validation>
+      <rule name="required" type="required" message="This field is required" severity="error" />
+      <rule name="minlength" type="length" message="Too short" severity="error" />
+      <rule name="maxlength" type="length" message="Too long" severity="error" />
+    </validation>
+  </control>
+
+  <!-- IMAGERY CONTROLS -->
+
+  <control name="wa-animated-image" type="display" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Displays animated GIFs and WEBPs that play on hover</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>wa-icon</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="src" type="string" default="" required="true" />
+      <attribute name="alt" type="string" default="" />
+      <attribute name="play" type="bool" default="false" />
+    </attributes>
+    <behavior>
+      <event name="wa-load" description="Emitted when image loads successfully" />
+      <event name="wa-error" description="Emitted when image fails to load" />
+    </behavior>
+  </control>
+
+  <control name="wa-avatar" type="display" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Avatars display user profile pictures</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>wa-icon</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="image" type="string" default="" />
+      <attribute name="label" type="string" default="" />
+      <attribute name="initials" type="string" default="" />
+      <attribute name="loading" type="enum" values="eager,lazy" default="eager" />
+      <attribute name="shape" type="enum" values="circle,square,rounded" default="circle" />
+    </attributes>
+  </control>
+
+  <control name="wa-carousel" type="container" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Carousels display a collection of items</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>wa-carousel-item</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="loop" type="bool" default="false" />
+      <attribute name="navigation" type="bool" default="false" />
+      <attribute name="pagination" type="bool" default="false" />
+      <attribute name="autoplay" type="bool" default="false" />
+      <attribute name="autoplay-interval" type="int" default="3000" min="0" />
+      <attribute name="slides-per-page" type="int" default="1" min="1" />
+      <attribute name="slides-per-move" type="int" default="1" min="1" />
+      <attribute name="orientation" type="enum" values="horizontal,vertical" default="horizontal" />
+      <attribute name="mouse-dragging" type="bool" default="false" />
+    </attributes>
+    <behavior>
+      <event name="wa-slide-change" description="Emitted when active slide changes" />
+      <command name="previous" description="Goes to previous slide" />
+      <command name="next" description="Goes to next slide" />
+      <command name="goToSlide" description="Goes to specific slide" />
+    </behavior>
+  </control>
+
+  <control name="wa-carousel-item" type="container" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Individual item within a carousel</description>
+    <constraints>
+      <allowed-parents>wa-carousel</allowed-parents>
+      <allowed-children>any-content</allowed-children>
+      <container>true</container>
+    </constraints>
+  </control>
+
+  <control name="wa-comparison" type="display" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Compare two items side by side</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>any-content</allowed-children>
+      <container>true</container>
+      <required-slots>before,after</required-slots>
+    </constraints>
+    <attributes>
+      <attribute name="position" type="int" default="50" min="0" max="100" />
+    </attributes>
+    <behavior>
+      <event name="wa-change" description="Emitted when position changes" />
+    </behavior>
+  </control>
+
+  <control name="wa-icon" type="display" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Icons are symbols that represent an object, concept, or action</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>none</allowed-children>
+      <container>false</container>
+    </constraints>
+    <attributes>
+      <attribute name="name" type="string" default="" />
+      <attribute name="variant" type="enum" values="solid,regular,light,thin,duotone" default="regular" />
+      <attribute name="src" type="string" default="" />
+      <attribute name="label" type="string" default="" />
+      <attribute name="library" type="string" default="default" />
+    </attributes>
+    <behavior>
+      <event name="wa-load" description="Emitted when icon loads" />
+      <event name="wa-error" description="Emitted when icon fails to load" />
+    </behavior>
+  </control>
+
+  <control name="wa-zoomable-frame" type="display" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Frame that allows zooming and panning of content</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>any-content</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="min-zoom" type="decimal" default="0.5" min="0.1" />
+      <attribute name="max-zoom" type="decimal" default="3" />
+      <attribute name="zoom" type="decimal" default="1" />
+    </attributes>
+    <behavior>
+      <event name="wa-zoom" description="Emitted when zoom level changes" />
+      <command name="zoomIn" description="Increases zoom level" />
+      <command name="zoomOut" description="Decreases zoom level" />
+      <command name="reset" description="Resets zoom to default" />
+    </behavior>
+  </control>
+
+  <!-- NAVIGATION CONTROLS -->
+
+  <control name="wa-breadcrumb" type="navigation" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Breadcrumbs show hierarchy and navigational context</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>wa-breadcrumb-item</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="label" type="string" default="" />
+    </attributes>
+  </control>
+
+  <control name="wa-breadcrumb-item" type="navigation" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Individual item in a breadcrumb trail</description>
+    <constraints>
+      <allowed-parents>wa-breadcrumb</allowed-parents>
+      <allowed-children>any-content,wa-icon</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="href" type="string" default="" />
+      <attribute name="target" type="enum" values="_self,_blank,_parent,_top" default="_self" />
+      <attribute name="rel" type="string" default="noreferrer noopener" />
+    </attributes>
+  </control>
+
+  <control name="wa-tab" type="navigation" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Individual tab within a tab group</description>
+    <constraints>
+      <allowed-parents>wa-tab-group</allowed-parents>
+      <allowed-children>any-content,wa-icon</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="panel" type="string" default="" required="true" />
+      <attribute name="active" type="bool" default="false" />
+      <attribute name="closable" type="bool" default="false" />
+      <attribute name="disabled" type="bool" default="false" />
+    </attributes>
+    <behavior>
+      <event name="wa-close" description="Emitted when tab close button is clicked" />
+    </behavior>
+  </control>
+
+  <control name="wa-tab-group" type="navigation" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Tab groups organize content into tabs</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>wa-tab,wa-tab-panel</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="placement" type="enum" values="top,bottom,start,end" default="top" />
+      <attribute name="activation" type="enum" values="auto,manual" default="auto" />
+      <attribute name="no-scroll-controls" type="bool" default="false" />
+    </attributes>
+    <behavior>
+      <event name="wa-tab-show" description="Emitted when a tab is shown" />
+      <event name="wa-tab-hide" description="Emitted when a tab is hidden" />
+      <command name="show" description="Shows a specific tab by name" />
+    </behavior>
+  </control>
+
+  <control name="wa-tab-panel" type="container" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Panel content for a tab</description>
+    <constraints>
+      <allowed-parents>wa-tab-group</allowed-parents>
+      <allowed-children>any-content</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="name" type="string" default="" required="true" />
+      <attribute name="active" type="bool" default="false" />
+    </attributes>
+  </control>
+
+  <control name="wa-tree" type="navigation" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Trees display hierarchical data</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>wa-tree-item</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="selection" type="enum" values="single,multiple,leaf" default="single" />
+    </attributes>
+    <behavior>
+      <event name="wa-selection-change" description="Emitted when selection changes" />
+    </behavior>
+  </control>
+
+  <control name="wa-tree-item" type="navigation" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Individual item within a tree</description>
+    <constraints>
+      <allowed-parents>wa-tree,wa-tree-item</allowed-parents>
+      <allowed-children>wa-tree-item,any-content,wa-icon</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="expanded" type="bool" default="false" />
+      <attribute name="selected" type="bool" default="false" />
+      <attribute name="disabled" type="bool" default="false" />
+      <attribute name="lazy" type="bool" default="false" />
+    </attributes>
+    <behavior>
+      <event name="wa-expand" description="Emitted when item expands" />
+      <event name="wa-after-expand" description="Emitted after item expands" />
+      <event name="wa-collapse" description="Emitted when item collapses" />
+      <event name="wa-after-collapse" description="Emitted after item collapses" />
+      <event name="wa-lazy-change" description="Emitted when lazy load is triggered" />
+      <event name="wa-lazy-load" description="Emitted when lazy load completes" />
+      <command name="getChildrenItems" description="Gets child tree items" />
+    </behavior>
+  </control>
+
+  <!-- ORGANIZATION CONTROLS -->
+
+  <control name="wa-card" type="container" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Cards contain content and actions about a single subject</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>any-content</allowed-children>
+      <container>true</container>
+      <required-slots>header,body,footer,image</required-slots>
+    </constraints>
+    <attributes>
+      <attribute name="size" type="enum" values="small,medium,large" default="medium" />
+    </attributes>
+  </control>
+
+  <control name="wa-details" type="container" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Details show a summary and expand to show content</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>any-content,wa-icon</allowed-children>
+      <container>true</container>
+      <required-slots>summary,expand-icon,collapse-icon</required-slots>
+    </constraints>
+    <attributes>
+      <attribute name="summary" type="string" default="" />
+      <attribute name="disabled" type="bool" default="false" />
+      <attribute name="open" type="bool" default="false" />
+    </attributes>
+    <behavior>
+      <event name="wa-show" description="Emitted when details opens" />
+      <event name="wa-after-show" description="Emitted after details opens" />
+      <event name="wa-hide" description="Emitted when details closes" />
+      <event name="wa-after-hide" description="Emitted after details closes" />
+      <command name="show" description="Shows the details" />
+      <command name="hide" description="Hides the details" />
+    </behavior>
+  </control>
+
+  <control name="wa-dialog" type="container" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Dialogs display content in a layer above the page</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>any-content</allowed-children>
+      <container>true</container>
+      <required-slots>label,header,body,footer</required-slots>
+    </constraints>
+    <attributes>
+      <attribute name="modal" type="bool" default="false" />
+      <attribute name="label" type="string" default="" />
+      <attribute name="no-header" type="bool" default="false" />
+      <attribute name="open" type="bool" default="false" />
+    </attributes>
+    <behavior>
+      <event name="wa-show" description="Emitted when dialog opens" />
+      <event name="wa-after-show" description="Emitted after dialog opens" />
+      <event name="wa-hide" description="Emitted when dialog closes" />
+      <event name="wa-after-hide" description="Emitted after dialog closes" />
+      <event name="wa-initial-focus" description="Emitted when setting initial focus" />
+      <event name="wa-request-close" description="Emitted when close is requested" />
+      <command name="show" description="Shows the dialog" />
+      <command name="hide" description="Hides the dialog" />
+    </behavior>
+  </control>
+
+  <control name="wa-divider" type="display" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Dividers visually separate content</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>none</allowed-children>
+      <container>false</container>
+    </constraints>
+    <attributes>
+      <attribute name="vertical" type="bool" default="false" />
+    </attributes>
+  </control>
+
+  <control name="wa-drawer" type="container" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Drawers slide in from the side of the screen</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>any-content</allowed-children>
+      <container>true</container>
+      <required-slots>label,header,body,footer</required-slots>
+    </constraints>
+    <attributes>
+      <attribute name="open" type="bool" default="false" />
+      <attribute name="label" type="string" default="" />
+      <attribute name="placement" type="enum" values="top,end,bottom,start" default="end" />
+      <attribute name="contained" type="bool" default="false" />
+      <attribute name="no-header" type="bool" default="false" />
+    </attributes>
+    <behavior>
+      <event name="wa-show" description="Emitted when drawer opens" />
+      <event name="wa-after-show" description="Emitted after drawer opens" />
+      <event name="wa-hide" description="Emitted when drawer closes" />
+      <event name="wa-after-hide" description="Emitted after drawer closes" />
+      <event name="wa-initial-focus" description="Emitted when setting initial focus" />
+      <event name="wa-request-close" description="Emitted when close is requested" />
+      <command name="show" description="Shows the drawer" />
+      <command name="hide" description="Hides the drawer" />
+    </behavior>
+  </control>
+
+  <control name="wa-page" type="container" category="web-specific" inherits="WebAwesomeComponent">
+    <description>PRO: Page layout component with responsive behavior</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>any-content</allowed-children>
+      <container>true</container>
+      <required-slots>header,navigation,content,sidebar,footer</required-slots>
+    </constraints>
+    <attributes>
+      <attribute name="layout" type="enum" values="default,sidebar-left,sidebar-right,full-width" default="default" />
+      <attribute name="responsive" type="bool" default="true" />
+    </attributes>
+  </control>
+
+  <control name="wa-scroller" type="container" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Custom scrollable container</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>any-content</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="horizontal" type="bool" default="false" />
+      <attribute name="vertical" type="bool" default="true" />
+      <attribute name="speed" type="decimal" default="1" min="0.1" />
+    </attributes>
+    <behavior>
+      <event name="wa-scroll" description="Emitted when scroll position changes" />
+      <command name="scrollTo" description="Scrolls to specific position" />
+      <command name="scrollToTop" description="Scrolls to top" />
+      <command name="scrollToBottom" description="Scrolls to bottom" />
+    </behavior>
+  </control>
+
+  <control name="wa-split-panel" type="container" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Split panels divide content into resizable sections</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>any-content</allowed-children>
+      <container>true</container>
+      <required-slots>start,end</required-slots>
+    </constraints>
+    <attributes>
+      <attribute name="position" type="int" default="50" min="0" max="100" />
+      <attribute name="position-in-pixels" type="int" default="" />
+      <attribute name="vertical" type="bool" default="false" />
+      <attribute name="disabled" type="bool" default="false" />
+      <attribute name="primary" type="enum" values="start,end" default="" />
+      <attribute name="snap" type="string" default="" />
+      <attribute name="snap-threshold" type="int" default="12" />
+    </attributes>
+    <behavior>
+      <event name="wa-reposition" description="Emitted when position changes" />
+    </behavior>
+  </control>
+
+  <!-- UTILITY CONTROLS -->
+
+  <control name="wa-animation" type="utility" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Animates elements declaratively</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>any-content</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="name" type="string" default="none" />
+      <attribute name="play" type="bool" default="false" />
+      <attribute name="delay" type="int" default="0" />
+      <attribute name="direction" type="enum" values="normal,reverse,alternate,alternate-reverse" default="normal" />
+      <attribute name="duration" type="int" default="1000" />
+      <attribute name="easing" type="string" default="linear" />
+      <attribute name="end-delay" type="int" default="0" />
+      <attribute name="fill" type="enum" values="auto,none,forwards,backwards,both" default="auto" />
+      <attribute name="iterations" type="string" default="Infinity" />
+      <attribute name="iteration-start" type="decimal" default="0" />
+      <attribute name="playback-rate" type="decimal" default="1" />
+    </attributes>
+    <behavior>
+      <event name="wa-cancel" description="Emitted when animation is cancelled" />
+      <event name="wa-finish" description="Emitted when animation finishes" />
+      <event name="wa-start" description="Emitted when animation starts" />
+      <command name="cancel" description="Cancels the animation" />
+      <command name="finish" description="Finishes the animation" />
+    </behavior>
+  </control>
+
+  <control name="wa-format-bytes" type="utility" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Formats bytes as human readable text</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>none</allowed-children>
+      <container>false</container>
+    </constraints>
+    <attributes>
+      <attribute name="value" type="int" default="0" />
+      <attribute name="unit" type="enum" values="byte,bit" default="byte" />
+      <attribute name="display" type="enum" values="short,long,narrow" default="short" />
+      <attribute name="lang" type="string" default="" />
+    </attributes>
+  </control>
+
+  <control name="wa-format-date" type="utility" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Formats dates in a localized manner</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>none</allowed-children>
+      <container>false</container>
+    </constraints>
+    <attributes>
+      <attribute name="date" type="string" default="" required="true" />
+      <attribute name="lang" type="string" default="" />
+      <attribute name="weekday" type="enum" values="narrow,short,long" default="" />
+      <attribute name="era" type="enum" values="narrow,short,long" default="" />
+      <attribute name="year" type="enum" values="numeric,2-digit" default="" />
+      <attribute name="month" type="enum" values="numeric,2-digit,narrow,short,long" default="" />
+      <attribute name="day" type="enum" values="numeric,2-digit" default="" />
+      <attribute name="hour" type="enum" values="numeric,2-digit" default="" />
+      <attribute name="minute" type="enum" values="numeric,2-digit" default="" />
+      <attribute name="second" type="enum" values="numeric,2-digit" default="" />
+      <attribute name="time-zone-name" type="enum" values="short,long" default="" />
+      <attribute name="time-zone" type="string" default="" />
+      <attribute name="hour-format" type="enum" values="auto,12,24" default="auto" />
+    </attributes>
+  </control>
+
+  <control name="wa-format-number" type="utility" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Formats numbers in a localized manner</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>none</allowed-children>
+      <container>false</container>
+    </constraints>
+    <attributes>
+      <attribute name="value" type="decimal" default="0" required="true" />
+      <attribute name="lang" type="string" default="" />
+      <attribute name="type" type="enum" values="currency,decimal,percent" default="decimal" />
+      <attribute name="no-grouping" type="bool" default="false" />
+      <attribute name="currency" type="string" default="USD" />
+      <attribute name="currency-display" type="enum" values="symbol,narrowSymbol,code,name" default="symbol" />
+      <attribute name="minimum-integer-digits" type="int" default="" min="1" max="21" />
+      <attribute name="minimum-fraction-digits" type="int" default="" min="0" max="20" />
+      <attribute name="maximum-fraction-digits" type="int" default="" min="0" max="20" />
+      <attribute name="minimum-significant-digits" type="int" default="" min="1" max="21" />
+      <attribute name="maximum-significant-digits" type="int" default="" min="1" max="21" />
+    </attributes>
+  </control>
+
+  <control name="wa-include" type="utility" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Includes external HTML files into the page</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>none</allowed-children>
+      <container>false</container>
+    </constraints>
+    <attributes>
+      <attribute name="src" type="string" default="" required="true" />
+      <attribute name="mode" type="enum" values="cors,no-cors,same-origin" default="cors" />
+      <attribute name="allow-scripts" type="bool" default="false" />
+    </attributes>
+    <behavior>
+      <event name="wa-load" description="Emitted when content loads successfully" />
+      <event name="wa-error" description="Emitted when content fails to load" />
+    </behavior>
+  </control>
+
+  <control name="wa-mutation-observer" type="utility" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Declarative interface to the MutationObserver API</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>any-content</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="attr" type="string" default="" />
+      <attribute name="attr-old-value" type="bool" default="false" />
+      <attribute name="char-data" type="bool" default="false" />
+      <attribute name="char-data-old-value" type="bool" default="false" />
+      <attribute name="child-list" type="bool" default="false" />
+      <attribute name="disabled" type="bool" default="false" />
+    </attributes>
+    <behavior>
+      <event name="wa-mutation" description="Emitted when a mutation occurs" />
+    </behavior>
+  </control>
+
+  <control name="wa-popover" type="container" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Contextual overlays that display additional content</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>any-content</allowed-children>
+      <container>true</container>
+      <required-slots>trigger,content</required-slots>
+    </constraints>
+    <attributes>
+      <attribute name="placement" type="enum" values="top,top-start,top-end,bottom,bottom-start,bottom-end,right,right-start,right-end,left,left-start,left-end" default="top" />
+      <attribute name="active" type="bool" default="false" />
+      <attribute name="distance" type="int" default="8" />
+      <attribute name="skidding" type="int" default="0" />
+      <attribute name="strategy" type="enum" values="absolute,fixed" default="absolute" />
+      <attribute name="flip" type="bool" default="false" />
+      <attribute name="flip-fallback-placements" type="string" default="" />
+      <attribute name="flip-fallback-strategy" type="enum" values="best-fit,initial" default="best-fit" />
+      <attribute name="flip-padding" type="int" default="0" />
+      <attribute name="shift" type="bool" default="false" />
+      <attribute name="shift-padding" type="int" default="0" />
+      <attribute name="arrow" type="bool" default="false" />
+      <attribute name="arrow-placement" type="enum" values="start,end,center,anchor" default="anchor" />
+      <attribute name="arrow-padding" type="int" default="10" />
+      <attribute name="auto-size" type="enum" values="horizontal,vertical,both" default="" />
+      <attribute name="sync" type="enum" values="width,height,both" default="" />
+      <attribute name="auto-size-padding" type="int" default="0" />
+    </attributes>
+    <behavior>
+      <event name="wa-reposition" description="Emitted when the popover is repositioned" />
+    </behavior>
+  </control>
+
+  <control name="wa-popup" type="container" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Popup containers for tooltips, popovers, etc.</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>any-content</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="anchor" type="string" default="" />
+      <attribute name="active" type="bool" default="false" />
+      <attribute name="placement" type="enum" values="top,top-start,top-end,bottom,bottom-start,bottom-end,right,right-start,right-end,left,left-start,left-end" default="top" />
+      <attribute name="strategy" type="enum" values="absolute,fixed" default="absolute" />
+      <attribute name="distance" type="int" default="0" />
+      <attribute name="skidding" type="int" default="0" />
+      <attribute name="arrow" type="bool" default="false" />
+      <attribute name="arrow-placement" type="enum" values="start,end,center,anchor" default="anchor" />
+      <attribute name="arrow-padding" type="int" default="10" />
+      <attribute name="flip" type="bool" default="false" />
+      <attribute name="flip-fallback-placements" type="string" default="" />
+      <attribute name="flip-fallback-strategy" type="enum" values="best-fit,initial" default="best-fit" />
+      <attribute name="flip-boundary" type="string" default="" />
+      <attribute name="flip-padding" type="int" default="0" />
+      <attribute name="shift" type="bool" default="false" />
+      <attribute name="shift-boundary" type="string" default="" />
+      <attribute name="shift-padding" type="int" default="0" />
+      <attribute name="auto-size" type="enum" values="horizontal,vertical,both" default="" />
+      <attribute name="sync" type="enum" values="width,height,both" default="" />
+      <attribute name="auto-size-boundary" type="string" default="" />
+      <attribute name="auto-size-padding" type="int" default="0" />
+    </attributes>
+    <behavior>
+      <event name="wa-reposition" description="Emitted when the popup is repositioned" />
+      <command name="reposition" description="Forces the popup to reposition" />
+    </behavior>
+  </control>
+
+  <control name="wa-relative-time" type="utility" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Displays relative time in a human-readable format</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>none</allowed-children>
+      <container>false</container>
+    </constraints>
+    <attributes>
+      <attribute name="date" type="string" default="" required="true" />
+      <attribute name="lang" type="string" default="" />
+      <attribute name="format" type="enum" values="long,short,narrow" default="long" />
+      <attribute name="numeric" type="enum" values="always,auto" default="auto" />
+      <attribute name="sync" type="bool" default="true" />
+    </attributes>
+  </control>
+
+  <control name="wa-resize-observer" type="utility" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Declarative interface to the ResizeObserver API</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>any-content</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="disabled" type="bool" default="false" />
+    </attributes>
+    <behavior>
+      <event name="wa-resize" description="Emitted when a resize occurs" />
+    </behavior>
+  </control>
+
+  <!-- ADDITIONAL UTILITY COMPONENTS -->
+
+  <control name="wa-visually-hidden" type="utility" category="web-specific" inherits="WebAwesomeComponent">
+    <description>Visually hides content while keeping it accessible to screen readers</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>any-content</allowed-children>
+      <container>true</container>
+    </constraints>
+  </control>
+
+  <!-- COMPOSITE STRUCTURES -->
+
+  <structure name="wa-menu" type="composite" category="web-specific">
+    <description>Menu structure for dropdowns and context menus</description>
+    <constraints>
+      <allowed-parents>wa-dropdown,wa-popover</allowed-parents>
+      <allowed-children>wa-dropdown-item,wa-divider</allowed-children>
+      <container>true</container>
+    </constraints>
+    <attributes>
+      <attribute name="size" type="enum" values="small,medium,large" default="medium" />
+    </attributes>
+    <template>
+      <slot name="menu-items" allowed-controls="wa-dropdown-item,wa-divider" />
+    </template>
+  </structure>
+
+  <structure name="wa-form-field" type="composite" category="web-specific">
+    <description>Form field wrapper with label and help text</description>
+    <constraints>
+      <allowed-parents>any</allowed-parents>
+      <allowed-children>wa-input,wa-select,wa-textarea,wa-checkbox,wa-radio-group,wa-switch</allowed-children>
+      <container>true</container>
+      <required-slots>input</required-slots>
+    </constraints>
+    <attributes>
+      <attribute name="label" type="string" default="" required="true" />
+      <attribute name="help-text" type="string" default="" />
+      <attribute name="required" type="bool" default="false" />
+    </attributes>
+    <template>
+      <wa-label text="{label}" required="{required}" />
+      <slot name="input" allowed-controls="wa-input,wa-select,wa-textarea,wa-checkbox,wa-radio-group,wa-switch" required="true" />
+      <wa-help-text text="{help-text}" visible="{help-text != ''}" />
+    </template>
+  </structure>
+
+  <!-- PATTERN WIREFRAMES -->
+
+  <wireframe name="wa-application-layout" type="base-layout" platform="web">
+    <description>Standard Web Awesome application layout with header, navigation, and content areas</description>
+    <template>
+      <wa-page layout="sidebar-left">
+        <slot name="header">
+          <header>
+            <slot name="logo" />
+            <slot name="navigation" />
+            <slot name="user-menu" />
+          </header>
+        </slot>
+        
+        <slot name="sidebar">
+          <wa-tree selection="single">
+            <slot name="menu-items" />
+          </wa-tree>
+        </slot>
+        
+        <slot name="content" required="true">
+          <slot name="page-header" />
+          <slot name="page-content" required="true" />
+        </slot>
+        
+        <slot name="footer">
+          <footer>
+            <slot name="footer-content" />
+          </footer>
+        </slot>
+      </wa-page>
+    </template>
+  </wireframe>
+
+  <wireframe name="wa-form-layout" type="form-layout" platform="web">
+    <description>Standard form layout with validation and submit buttons</description>
+    <template>
+      <form>
+        <slot name="form-fields" required="true">
+          <wa-form-field label="Example Field">
+            <wa-input name="example" />
+          </wa-form-field>
+        </slot>
+        
+        <slot name="form-actions">
+          <wa-button-group>
+            <wa-button type="submit" variant="brand">Submit</wa-button>
+            <wa-button type="reset" variant="neutral">Reset</wa-button>
+          </wa-button-group>
+        </slot>
+      </form>
+    </template>
+  </wireframe>
+
+  <wireframe name="wa-dialog-layout" type="dialog-layout" platform="web">
+    <description>Standard dialog layout with header, body, and footer</description>
+    <template>
+      <wa-dialog label="{title}">
+        <slot name="dialog-header" slot="header">
+          <h2>{title}</h2>
+        </slot>
+        
+        <slot name="dialog-content" slot="body" required="true">
+          <!-- Dialog content goes here -->
+        </slot>
+        
+        <slot name="dialog-actions" slot="footer">
+          <wa-button-group>
+            <wa-button variant="neutral" onclick="this.closest('wa-dialog').hide()">Cancel</wa-button>
+            <wa-button variant="brand">Confirm</wa-button>
+          </wa-button-group>
+        </slot>
+      </wa-dialog>
+    </template>
+  </wireframe>
+
+  <wireframe name="wa-card-grid" type="content-layout" platform="web">
+    <description>Grid layout for cards</description>
+    <template>
+      <div class="card-grid">
+        <slot name="cards" required="true">
+          <wa-card>
+            <slot name="card-header" slot="header" />
+            <slot name="card-body" slot="body" />
+            <slot name="card-footer" slot="footer" />
+          </wa-card>
+        </slot>
+      </div>
+      <style>
+        .card-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+          gap: var(--wa-space-l);
+        }
+      </style>
+    </template>
+  </wireframe>
+
+</patterns>

+ 7 - 7
UILayoutDefinitionFormat/Samples/platform-config-sample.xml

@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!-- Enhanced Platform-specific UI Layout Definition v1.4 -->
+<!-- Enhanced Platform-specific UI Layout Definition v1.5 -->
 <ui-layout-def xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                xmlns="ui-layout-definition"
                xsi:schemaLocation="ui-layout-definition ui-layout-def.xsd"
-               version="1.4"
-               schema-version="1.4"
+               version="1.5"
+               schema-version="1.5"
                min-version="1.0"
                max-version="2.0"
                target-platform="avalonia"
@@ -49,7 +49,7 @@
     <pattern-include src="performance-controls.xml" important="false" min-version="1.3" />
     
     <!-- Platform-specific enhanced control -->
-    <control name="AvaloniaEnhancedDataGrid" type="data" category="avalonia-data" schema-version="1.4">
+    <control name="AvaloniaEnhancedDataGrid" type="data" category="avalonia-data" schema-version="1.5">
       <description>Avalonia-specific data grid with advanced features</description>
       <constraints>
         <allowed-parents>Panel,Grid,ScrollViewer</allowed-parents>
@@ -94,7 +94,7 @@
     
     <!-- Platform-optimized view -->
     <view name="AvaloniaProductManagementView" type="business-entity" category="core" 
-          schema-version="1.4" platform="avalonia" singleton="false" lazy-loading="true" 
+          schema-version="1.5" platform="avalonia" singleton="false" lazy-loading="true" 
           cacheable="true" priority="high">
       <description>Product management optimized for Avalonia UI</description>
       
@@ -221,7 +221,7 @@
   
   <!-- Enhanced main window with Avalonia-specific features -->
   <window name="ProductListWindow" title="Product Management - Avalonia" 
-          view="AvaloniaProductManagementView" target-platform="avalonia" schema-version="1.4">
+          view="AvaloniaProductManagementView" target-platform="avalonia" schema-version="1.5">
     
     <attributes>
       <attribute name="width" value="1200" />
@@ -436,7 +436,7 @@
   
   <!-- Product edit dialog with Avalonia features -->
   <window name="ProductEditDialog" title="Edit Product" 
-          view="AvaloniaProductManagementView" target-platform="avalonia" schema-version="1.4">
+          view="AvaloniaProductManagementView" target-platform="avalonia" schema-version="1.5">
     
     <attributes>
       <attribute name="width" value="500" />

+ 2 - 2
UILayoutDefinitionFormat/Samples/sample-minimal.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!-- FIXED: Simple UI Layout Definition Example v1.4 -->
+<!-- FIXED: Simple UI Layout Definition Example v1.5 -->
 <ui-layout-def xmlns="http://quadarax.com/ui-layout-definition"
                xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                xmlns:patterns="http://quadarax.com/ui-layout-patterns"
@@ -7,7 +7,7 @@
                xmlns:views="http://quadarax.com/ui-layout-views"
                xsi:schemaLocation="http://quadarax.com/ui-layout-definition ui-layout-def.xsd"
                version="1.3"
-               schema-version="1.4"
+               schema-version="1.5"
                target-platform="basic"
                accessibility-compliance="wcag-aa">
   

+ 9 - 9
UILayoutDefinitionFormat/Samples/sample.xml

@@ -1,13 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!-- Enhanced UI Layout Definition Format Sample v1.4 -->
+<!-- Enhanced UI Layout Definition Format Sample v1.5 -->
 <ui-layout-def xmlns="http://quadarax.com/ui-layout-definition"
                xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                xmlns:patterns="http://quadarax.com/ui-layout-patterns"
                xmlns:validation="http://quadarax.com/ui-layout-validation"
                xmlns:views="http://quadarax.com/ui-layout-views"
                xsi:schemaLocation="http://quadarax.com/ui-layout-definition ui-layout-def.xsd"
-               version="1.4"
-               schema-version="1.4"
+               version="1.5"
+               schema-version="1.5"
                min-version="1.0"
                max-version="2.0"
                target-platform="avalonia"
@@ -62,7 +62,7 @@
     <pattern-include src="performance-controls.xml" important="false" min-version="1.3" />
     
     <!-- Enhanced Control with v1.3 Features -->
-    <control name="EnhancedDataGrid" type="data" category="avalonia-data" schema-version="1.4">
+    <control name="EnhancedDataGrid" type="data" category="avalonia-data" schema-version="1.5">
       <description>High-performance data grid with virtualization and accessibility</description>
       <constraints>
         <allowed-parents>Panel,ScrollViewer,Border</allowed-parents>
@@ -109,7 +109,7 @@
     </control>
     
     <!-- Responsive Layout Wireframe -->
-    <wireframe name="ResponsiveAppLayout" type="base-layout" schema-version="1.4">
+    <wireframe name="ResponsiveAppLayout" type="base-layout" schema-version="1.5">
       <description>Responsive application layout with accessibility and performance optimization</description>
       <responsive>
         <breakpoint name="mobile" max-width="768" orientation="any" template-override="MobileLayout" />
@@ -154,7 +154,7 @@
     
     <!-- Modern AI-Enhanced Application View -->
     <view name="ModernDashboardView" type="ai-assisted" category="ai-enhanced" 
-          schema-version="1.4" platform="avalonia" singleton="true" lazy-loading="false" 
+          schema-version="1.5" platform="avalonia" singleton="true" lazy-loading="false" 
           cacheable="true" priority="high">
       <description>AI-enhanced dashboard with real-time analytics and collaboration</description>
       
@@ -380,7 +380,7 @@
   <!-- ENHANCED: Modern Dashboard Window with v1.3 Features -->
   <window name="MainDashboard" title="AI-Enhanced Analytics Dashboard" 
           wireframe="ResponsiveAppLayout" view="ModernDashboardView"
-          target-platform="avalonia" schema-version="1.4">
+          target-platform="avalonia" schema-version="1.5">
     
     <attributes>
       <attribute name="width" value="1400" />
@@ -629,7 +629,7 @@
   
   <!-- AI Insights Panel Window -->
   <window name="AIInsightsPanel" title="AI Insights" view="ModernDashboardView"
-          target-platform="avalonia" schema-version="1.4">
+          target-platform="avalonia" schema-version="1.5">
     
     <attributes>
       <attribute name="width" value="400" />
@@ -718,7 +718,7 @@
   <!-- Settings Dialog with Advanced Configuration -->
   <window name="SettingsDialog" title="Application Settings" 
           wireframe="DialogLayout" view="ModernDashboardView"
-          target-platform="avalonia" schema-version="1.4">
+          target-platform="avalonia" schema-version="1.5">
     
     <attributes>
       <attribute name="width" value="600" />

+ 1 - 1
UILayoutDefinitionFormat/Samples/simple-working.xml

@@ -4,7 +4,7 @@
                xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                xsi:schemaLocation="http://quadarax.com/ui-layout-definition ui-layout-def.xsd"
                version="1.3"
-               schema-version="1.4"
+               schema-version="1.5"
                target-platform="basic"
                accessibility-compliance="wcag-aa">
   

+ 110 - 18
UILayoutDefinitionFormat/readme.md

@@ -1,7 +1,7 @@
 # UI Layout Definition Format
 
-**Version:** 1.4  
-**Documentation Version:** 1.4  
+**Version:** 1.5  
+**Documentation Version:** 1.5  
 **Author:** Dalibor Votruba  
 **URL:** [quadarax.com/ui-layout-def](https://quadarax.com/ui-layout-def)
 
@@ -10,7 +10,7 @@ A comprehensive XML-based format for describing user interface layouts with inhe
 ## Table of Contents
 
 - [Overview](#overview)
-- [What's New in v1.4](#whats-new-in-v14)
+- [What's New in v1.5](#whats-new-in-v14)
 - [Core Concepts](#core-concepts)
 - [Document Structure](#document-structure)
 - [View Definitions](#view-definitions)
@@ -38,7 +38,7 @@ The UI Layout Definition Format provides a standardized way to define user inter
 - **Cross-Platform**: Platform-specific control libraries with unified abstractions
 - **Modern Features**: State management, accessibility, performance optimization, testing support
 
-## What's New in v1.4
+## What's New in v1.5
 
 ### Major Enhancements
 
@@ -98,7 +98,7 @@ The UI Layout Definition Format provides a standardized way to define user inter
    - Performance-optimized validation
    - Integration testing for rules
 
-### Breaking Changes from v1.2
+### Breaking Changes from v1.5
 
 - Enhanced schema validation requires updates to custom validators
 - Some deprecated attributes removed (see migration guide)
@@ -146,8 +146,8 @@ Comprehensive security framework with vulnerability protection, data encryption,
 <?xml version="1.0" encoding="UTF-8"?>
 <ui-layout-def xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                xsi:schemaLocation="ui-layout-definition ui-layout-def.xsd"
-               version="1.4"
-               schema-version="1.4"
+               version="1.5"
+               schema-version="1.5"
                target-platform="avalonia"
                accessibility-compliance="wcag-aa">
   
@@ -188,7 +188,7 @@ Comprehensive security framework with vulnerability protection, data encryption,
   
   <!-- Enhanced window definitions -->
   <window name="ModernWindow" title="Enhanced Application" 
-          target-platform="avalonia" schema-version="1.4">
+          target-platform="avalonia" schema-version="1.5">
     <data-binding>
       <data-context source="ModernViewModel" mode="TwoWay" />
     </data-binding>
@@ -294,6 +294,7 @@ Comprehensive security framework with vulnerability protection, data encryption,
 - Progressive Web App (PWA) support
 - Modern CSS Grid and Flexbox layouts
 - Web Components architecture
+- Web Awesome (formerly Shoelace) component library support
 - Accessibility standards compliance
 - Performance optimization techniques
 
@@ -306,13 +307,13 @@ Comprehensive security framework with vulnerability protection, data encryption,
 
 ## Migration Guide
 
-### From Version 1.3 to 1.4
+### From Version 1.4 to 1.5
 
 #### Automatic Migration Support
-Version 1.4 includes an automatic migration tool that can upgrade most 1.3 documents:
+Version 1.5 includes an automatic migration tool that can upgrade most 1.3 documents:
 
 ```bash
-ui-layout-migrate --from 1.3 --to 1.4 --input myapp.xml --output myapp-v14.xml
+ui-layout-migrate --from 1.4 --to 1.5 --input myapp.xml --output myapp-v15.xml
 ```
 
 #### Required Changes
@@ -320,10 +321,10 @@ ui-layout-migrate --from 1.3 --to 1.4 --input myapp.xml --output myapp-v14.xml
 1. **Update Schema References**
    ```xml
    <!-- Old -->
-   <ui-layout-def version="1.2">
+   <ui-layout-def version="1.4">
    
    <!-- New -->
-   <ui-layout-def version="1.4" schema-version="1.4">
+   <ui-layout-def version="1.5" schema-version="1.5">
    ```
 
 2. **Add Accessibility Compliance**
@@ -332,7 +333,7 @@ ui-layout-migrate --from 1.3 --to 1.4 --input myapp.xml --output myapp-v14.xml
    ```
 
 3. **Update Control Declarations**
-   - Add `schema-version="1.4"` to custom controls
+   - Add `schema-version="1.5"` to custom controls
    - Update deprecated attribute names
    - Add accessibility attributes where required
 
@@ -365,7 +366,7 @@ ui-layout-migrate --from 1.3 --to 1.4 --input myapp.xml --output myapp-v14.xml
 
 #### Compatibility Matrix
 
-| Feature | v1.3 | v1.4 | Migration Required |
+| Feature | v1.3 | v1.5 | Migration Required |
 |---------|------|------|-------------------|
 | Basic Controls | ✓ | ✓ | No |
 | Window Includes | ✓ | ✓ | No |
@@ -469,11 +470,102 @@ The Gallery control is a specialized list control for displaying collections of
 </Gallery>
 ```
 
+### Web Awesome Controls
+
+Version 1.5 introduces comprehensive support for Web Awesome (formerly Shoelace) components, providing modern web components for web platform targets:
+
+```xml
+<patterns>
+  <pattern-include src="webawesome-controls.xml" important="true" platform="web" />
+</patterns>
+```
+
+#### Web Awesome Control Categories
+
+**Action Controls**
+- `wa-button` - Enhanced buttons with variants, sizes, and loading states
+- `wa-button-group` - Organize buttons in horizontal/vertical groups
+- `wa-copy-button` - Copy content to clipboard with feedback
+- `wa-dropdown` - Contextual overlays with positioning
+- `wa-qr-code` - Dynamic QR code generation
+
+**Form Controls**
+- `wa-input` - Enhanced text inputs with validation
+- `wa-select` - Dropdown selections with search and multi-select
+- `wa-checkbox`, `wa-radio-group` - Form selections
+- `wa-slider`, `wa-rating` - Value inputs
+- `wa-color-picker` - Color selection with multiple formats
+- `wa-textarea` - Multi-line text input
+
+**Feedback & Status**
+- `wa-badge` - Status indicators
+- `wa-callout` - Alert messages and notifications  
+- `wa-progress-bar`, `wa-progress-ring` - Progress indicators
+- `wa-spinner`, `wa-skeleton` - Loading states
+- `wa-tooltip` - Contextual information
+
+**Navigation**
+- `wa-breadcrumb` - Hierarchical navigation
+- `wa-tab-group`, `wa-tab` - Tabbed interfaces
+- `wa-tree` - Hierarchical data display
+
+**Organization**
+- `wa-card` - Content containers
+- `wa-dialog`, `wa-drawer` - Modal interfaces
+- `wa-details` - Collapsible content
+- `wa-split-panel` - Resizable layouts
+
+#### Web Awesome Usage Example
+
+```xml
+<patterns>
+  <pattern-include src="webawesome-controls.xml" platform="web" />
+</patterns>
+
+<window name="WebAwesomeDemo" platform="web">
+  <wa-card size="medium">
+    <div slot="header">
+      <h3>Product Form</h3>
+    </div>
+    <div slot="body">
+      <wa-input 
+        name="productName" 
+        label="Product Name" 
+        placeholder="Enter product name"
+        required="true"
+        help-text="Product name must be unique">
+      </wa-input>
+      
+      <wa-select name="category" label="Category" required="true">
+        <wa-option value="electronics">Electronics</wa-option>
+        <wa-option value="clothing">Clothing</wa-option>
+        <wa-option value="books">Books</wa-option>
+      </wa-select>
+      
+      <wa-color-picker 
+        name="themeColor" 
+        label="Theme Color" 
+        value="#007bff"
+        format="hex">
+      </wa-color-picker>
+      
+      <wa-rating name="priority" label="Priority" max="5" value="3"></wa-rating>
+    </div>
+    <div slot="footer">
+      <wa-button-group>
+        <wa-button type="submit" variant="brand">Save Product</wa-button>
+        <wa-button type="reset" variant="neutral">Reset</wa-button>
+      </wa-button-group>
+    </div>
+  </wa-card>
+</window>
+```
+
 ### Enhanced Control Definitions
 
 ```xml
 <patterns>
-  <control name="EnhancedTextBox" type="input" category="basic" schema-version="1.4">
+  <control name="EnhancedTextBox" type="input" category="basic" schema-version="1.5">
     <description>Enhanced text input with validation and accessibility</description>
     <constraints>
       <allowed-parents>Panel,FormField</allowed-parents>
@@ -555,7 +647,7 @@ The Gallery control is a specialized list control for displaying collections of
 ```xml
 <views>
   <view name="ModernProductView" type="ai-assisted" category="ai-enhanced" 
-        schema-version="1.4" platform="avalonia" singleton="false" lazy-loading="true">
+        schema-version="1.5" platform="avalonia" singleton="false" lazy-loading="true">
     <description>AI-enhanced product management with real-time collaboration</description>
     
     <metadata>
@@ -643,4 +735,4 @@ The Gallery control is a specialized list control for displaying collections of
 
 ---
 
-*This format specification v1.4 enables modern, accessible, performant, and secure cross-platform UI definitions with advanced development practices, comprehensive validation, and state-of-the-art tooling support.*
+*This format specification v1.5 enables modern, accessible, performant, and secure cross-platform UI definitions with advanced development practices, comprehensive validation, and state-of-the-art tooling support.*

+ 1 - 1
UILayoutDefinitionFormat/ui-layout-avalonia-controls.xsd

@@ -4,7 +4,7 @@
            xmlns:tns="http://quadarax.com/ui-layout-avalonia-controls"
            xmlns:basic="http://quadarax.com/ui-layout-basic-controls"
            elementFormDefault="qualified"
-           version="1.4">
+           version="1.5">
 
   <!-- Import basic controls -->
   <xs:import namespace="http://quadarax.com/ui-layout-basic-controls" schemaLocation="ui-layout-basic-controls.xsd"/>

+ 1 - 1
UILayoutDefinitionFormat/ui-layout-basic-controls.xsd

@@ -3,7 +3,7 @@
            targetNamespace="http://quadarax.com/ui-layout-basic-controls"
            xmlns:tns="http://quadarax.com/ui-layout-basic-controls"
            elementFormDefault="qualified"
-           version="1.4">
+           version="1.5">
 
   <!-- Basic Control Instance Base Type -->
   <xs:complexType name="BasicControlInstanceType" mixed="true">

+ 7 - 5
UILayoutDefinitionFormat/ui-layout-def.xsd

@@ -8,8 +8,9 @@
            xmlns:basic="http://quadarax.com/ui-layout-basic-controls"
            xmlns:winforms="http://quadarax.com/ui-layout-winforms-controls"
            xmlns:avalonia="http://quadarax.com/ui-layout-avalonia-controls"
+           xmlns:webawesome="http://quadarax.com/ui-layout-webawesome-controls"
            elementFormDefault="qualified"
-           version="1.4">
+           version="1.5">
 
   <!-- Import external schemas -->
   <xs:import namespace="http://quadarax.com/ui-layout-patterns" schemaLocation="ui-layout-patterns.xsd"/>
@@ -18,6 +19,7 @@
   <xs:import namespace="http://quadarax.com/ui-layout-basic-controls" schemaLocation="ui-layout-basic-controls.xsd"/>
   <xs:import namespace="http://quadarax.com/ui-layout-winforms-controls" schemaLocation="ui-layout-winforms-controls.xsd"/>
   <xs:import namespace="http://quadarax.com/ui-layout-avalonia-controls" schemaLocation="ui-layout-avalonia-controls.xsd"/>
+  <xs:import namespace="http://quadarax.com/ui-layout-webawesome-controls" schemaLocation="ui-layout-webawesome-controls.xsd"/>
 
   <!-- Root element -->
   <xs:element name="ui-layout-def" type="tns:UILayoutDefType"/>
@@ -59,8 +61,8 @@
       <xs:element name="window-includes" type="tns:WindowIncludesType" minOccurs="0"/>
       <xs:element name="window" type="tns:WindowType" minOccurs="0" maxOccurs="unbounded"/>
     </xs:sequence>
-    <xs:attribute name="version" type="xs:string" default="1.4"/>
-    <xs:attribute name="schema-version" type="xs:string" fixed="1.4"/>
+    <xs:attribute name="version" type="xs:string" default="1.5"/>
+    <xs:attribute name="schema-version" type="xs:string" fixed="1.5"/>
     <xs:attribute name="min-version" type="xs:string" default="1.0"/>
     <xs:attribute name="max-version" type="xs:string" default="2.0"/>
     <xs:attribute name="target-platform" type="tns:PlatformEnum" default="basic"/>
@@ -72,7 +74,7 @@
     <xs:sequence>
       <xs:element name="window" type="tns:WindowType" minOccurs="0" maxOccurs="unbounded"/>
     </xs:sequence>
-    <xs:attribute name="schema-version" type="xs:string" default="1.4"/>
+    <xs:attribute name="schema-version" type="xs:string" default="1.5"/>
     <xs:attribute name="target-platform" type="tns:PlatformEnum" default="basic"/>
   </xs:complexType>
 
@@ -196,7 +198,7 @@
     <xs:attribute name="view" type="xs:string"/>
     <xs:attribute name="target-platform" type="tns:PlatformEnum"/>
     <xs:attribute name="inherits" type="xs:string"/>
-    <xs:attribute name="schema-version" type="xs:string" default="1.4"/>
+    <xs:attribute name="schema-version" type="xs:string" default="1.5"/>
   </xs:complexType>
 
   <!-- Window Attributes Type -->

+ 5 - 5
UILayoutDefinitionFormat/ui-layout-patterns.xsd

@@ -3,7 +3,7 @@
            targetNamespace="http://quadarax.com/ui-layout-patterns"
            xmlns:tns="http://quadarax.com/ui-layout-patterns"
            elementFormDefault="qualified"
-           version="1.4">
+           version="1.5">
 
   <!-- Root element for pattern include files -->
   <xs:element name="patterns" type="tns:PatternsIncludeFileType"/>
@@ -16,7 +16,7 @@
       <xs:element name="wireframe" type="tns:WireframeType"/>
     </xs:choice>
     <!-- ENHANCEMENT: Version tracking for pattern files -->
-    <xs:attribute name="schema-version" type="xs:string" default="1.4"/>
+    <xs:attribute name="schema-version" type="xs:string" default="1.5"/>
     <xs:attribute name="target-platform" type="tns:PlatformEnum" default="basic"/>
   </xs:complexType>
 
@@ -52,7 +52,7 @@
     <xs:attribute name="inherits" type="xs:string"/>
     <xs:attribute name="platform" type="tns:PlatformEnum" default="basic"/>
     <!-- ENHANCEMENT: Version tracking -->
-    <xs:attribute name="schema-version" type="xs:string" default="1.4"/>
+    <xs:attribute name="schema-version" type="xs:string" default="1.5"/>
   </xs:complexType>
 
   <!-- Control Type Enumeration -->
@@ -126,7 +126,7 @@
     <xs:attribute name="inherits" type="xs:string"/>
     <xs:attribute name="platform" type="tns:PlatformEnum" default="basic"/>
     <!-- ENHANCEMENT: Version tracking -->
-    <xs:attribute name="schema-version" type="xs:string" default="1.4"/>
+    <xs:attribute name="schema-version" type="xs:string" default="1.5"/>
   </xs:complexType>
 
   <!-- Composition Type -->
@@ -155,7 +155,7 @@
     <xs:attribute name="name" type="xs:string" use="required"/>
     <xs:attribute name="type" type="xs:string" use="required"/>
     <xs:attribute name="platform" type="tns:PlatformEnum" default="basic"/>
-    <xs:attribute name="schema-version" type="xs:string" default="1.4"/>
+    <xs:attribute name="schema-version" type="xs:string" default="1.5"/>
   </xs:complexType>
 
   <!-- FIXED: Responsive Type -->

+ 2 - 2
UILayoutDefinitionFormat/ui-layout-validation.xsd

@@ -3,7 +3,7 @@
            targetNamespace="http://quadarax.com/ui-layout-validation"
            xmlns:tns="http://quadarax.com/ui-layout-validation"
            elementFormDefault="qualified"
-           version="1.4">
+           version="1.5">
 
   <!-- Root element for validation rule include files -->
   <xs:element name="validation-rules" type="tns:ValidationRulesIncludeFileType"/>
@@ -18,7 +18,7 @@
       <xs:element name="validation-profile" type="tns:ValidationProfileType" minOccurs="0" maxOccurs="unbounded"/>
     </xs:sequence>
     <!-- ENHANCEMENT: Version tracking for validation files -->
-    <xs:attribute name="schema-version" type="xs:string" default="1.4"/>
+    <xs:attribute name="schema-version" type="xs:string" default="1.5"/>
     <xs:attribute name="target-platform" type="tns:PlatformEnum" default="basic"/>
     <xs:attribute name="validation-level" type="tns:ValidationLevelEnum" default="standard"/>
   </xs:complexType>

+ 3 - 3
UILayoutDefinitionFormat/ui-layout-views.xsd

@@ -3,7 +3,7 @@
            targetNamespace="http://quadarax.com/ui-layout-views"
            xmlns:tns="http://quadarax.com/ui-layout-views"
            elementFormDefault="qualified"
-           version="1.4">
+           version="1.5">
 
   <!-- Root element for view include files -->
   <xs:element name="views" type="tns:ViewsIncludeFileType"/>
@@ -14,7 +14,7 @@
       <xs:element name="view" type="tns:ViewType" minOccurs="0" maxOccurs="unbounded"/>
     </xs:sequence>
     <!-- ENHANCEMENT: Version tracking for view files -->
-    <xs:attribute name="schema-version" type="xs:string" default="1.4"/>
+    <xs:attribute name="schema-version" type="xs:string" default="1.5"/>
     <xs:attribute name="namespace" type="xs:string"/>
     <xs:attribute name="assembly" type="xs:string"/>
   </xs:complexType>
@@ -50,7 +50,7 @@
     <xs:attribute name="category" type="tns:ViewCategoryEnum" use="required"/>
     <xs:attribute name="inherits" type="xs:string"/>
     <!-- ENHANCEMENT: v1.3 view attributes -->
-    <xs:attribute name="schema-version" type="xs:string" default="1.4"/>
+    <xs:attribute name="schema-version" type="xs:string" default="1.5"/>
     <xs:attribute name="platform" type="tns:PlatformEnum" default="basic"/>
     <xs:attribute name="singleton" type="xs:boolean" default="false"/>
     <xs:attribute name="lazy-loading" type="xs:boolean" default="false"/>

+ 304 - 0
UILayoutDefinitionFormat/ui-layout-webawesome-controls.xsd

@@ -0,0 +1,304 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
+           targetNamespace="http://quadarax.com/ui-layout-webawesome-controls"
+           xmlns:tns="http://quadarax.com/ui-layout-webawesome-controls"
+           elementFormDefault="qualified"
+           version="1.5">
+
+  <!-- 
+    Web Awesome Controls XSD Schema Extension
+    This schema extends the base ui-layout-patterns.xsd for Web Awesome controls
+    It should be used in conjunction with ui-layout-patterns.xsd
+  -->
+
+  <!-- Root element matching the XML file -->
+  <xs:element name="patterns" type="tns:WebAwesomePatternsType"/>
+
+  <!-- Main patterns container type -->
+  <xs:complexType name="WebAwesomePatternsType">
+    <xs:sequence>
+      <xs:element name="control" type="tns:ControlType" minOccurs="0" maxOccurs="unbounded"/>
+      <xs:element name="structure" type="tns:StructureType" minOccurs="0" maxOccurs="unbounded"/>
+      <xs:element name="wireframe" type="tns:WireframeType" minOccurs="0" maxOccurs="unbounded"/>
+    </xs:sequence>
+    <xs:attribute name="schema-version" type="xs:string" default="1.5"/>
+    <xs:attribute name="target-platform" type="xs:string" default="web"/>
+  </xs:complexType>
+
+  <!-- Control Type Definition -->
+  <xs:complexType name="ControlType">
+    <xs:sequence>
+      <xs:element name="description" type="xs:string" minOccurs="0"/>
+      <xs:element name="constraints" type="tns:ConstraintsType" minOccurs="0"/>
+      <xs:element name="attributes" type="tns:AttributesType" minOccurs="0"/>
+      <xs:element name="behavior" type="tns:BehaviorType" minOccurs="0"/>
+      <xs:element name="accessibility" type="tns:AccessibilityType" minOccurs="0"/>
+      <xs:element name="validation" type="tns:ValidationRulesType" minOccurs="0"/>
+      <xs:element name="template" type="tns:TemplateType" minOccurs="0"/>
+    </xs:sequence>
+    <xs:attribute name="name" type="xs:string" use="required"/>
+    <xs:attribute name="type" type="xs:string" use="required"/>
+    <xs:attribute name="category" type="xs:string" use="required"/>
+    <xs:attribute name="inherits" type="xs:string"/>
+    <xs:attribute name="platform" type="xs:string" default="web"/>
+    <xs:attribute name="schema-version" type="xs:string" default="1.5"/>
+  </xs:complexType>
+
+  <!-- Constraints Type -->
+  <xs:complexType name="ConstraintsType">
+    <xs:sequence>
+      <xs:element name="allowed-parents" type="xs:string" minOccurs="0"/>
+      <xs:element name="allowed-children" type="xs:string" minOccurs="0"/>
+      <xs:element name="container" type="xs:boolean" minOccurs="0"/>
+      <xs:element name="required-slots" type="xs:string" minOccurs="0"/>
+      <xs:element name="platform-constraints" type="tns:PlatformConstraintsType" minOccurs="0"/>
+    </xs:sequence>
+  </xs:complexType>
+
+  <!-- Platform Constraints Type -->
+  <xs:complexType name="PlatformConstraintsType">
+    <xs:sequence>
+      <xs:element name="platform-constraint" type="tns:PlatformConstraintType" maxOccurs="unbounded"/>
+    </xs:sequence>
+  </xs:complexType>
+
+  <xs:complexType name="PlatformConstraintType">
+    <xs:attribute name="platform" type="xs:string" use="required"/>
+    <xs:attribute name="min-version" type="xs:string"/>
+    <xs:attribute name="max-version" type="xs:string"/>
+    <xs:attribute name="feature-required" type="xs:string"/>
+  </xs:complexType>
+
+  <!-- Attributes Container Type -->
+  <xs:complexType name="AttributesType">
+    <xs:sequence>
+      <xs:element name="attribute" type="tns:AttributeType" minOccurs="0" maxOccurs="unbounded"/>
+    </xs:sequence>
+  </xs:complexType>
+
+  <!-- Attribute Type -->
+  <xs:complexType name="AttributeType">
+    <xs:attribute name="name" type="xs:string" use="required"/>
+    <xs:attribute name="type" type="tns:AttributeTypeEnum" use="required"/>
+    <xs:attribute name="default" type="xs:string"/>
+    <xs:attribute name="required" type="xs:boolean" default="false"/>
+    <xs:attribute name="category" type="xs:string"/>
+    <xs:attribute name="values" type="xs:string"/>
+    <xs:attribute name="min" type="xs:string"/>
+    <xs:attribute name="max" type="xs:string"/>
+  </xs:complexType>
+
+  <!-- Attribute Type Enumeration -->
+  <xs:simpleType name="AttributeTypeEnum">
+    <xs:restriction base="xs:string">
+      <!-- Basic types -->
+      <xs:enumeration value="string"/>
+      <xs:enumeration value="bool"/>        <!-- Support for existing XML format -->
+      <xs:enumeration value="boolean"/>     <!-- Standard XSD boolean type -->
+      <xs:enumeration value="int"/>
+      <xs:enumeration value="integer"/>
+      <xs:enumeration value="decimal"/>
+      <xs:enumeration value="double"/>
+      <xs:enumeration value="float"/>
+      
+      <!-- Web-specific types -->
+      <xs:enumeration value="enum"/>
+      <xs:enumeration value="color"/>
+      <xs:enumeration value="url"/>
+      <xs:enumeration value="date"/>
+      <xs:enumeration value="time"/>
+      <xs:enumeration value="datetime"/>
+      
+      <!-- Custom types -->
+      <xs:enumeration value="percentage"/>
+      <xs:enumeration value="pixels"/>
+      <xs:enumeration value="dimension"/>
+    </xs:restriction>
+  </xs:simpleType>
+
+  <!-- Behavior Type -->
+  <xs:complexType name="BehaviorType">
+    <xs:sequence>
+      <xs:element name="event" type="tns:EventType" minOccurs="0" maxOccurs="unbounded"/>
+      <xs:element name="command" type="tns:CommandType" minOccurs="0" maxOccurs="unbounded"/>
+      <xs:element name="method" type="tns:MethodType" minOccurs="0" maxOccurs="unbounded"/>
+    </xs:sequence>
+  </xs:complexType>
+
+  <!-- Event Type -->
+  <xs:complexType name="EventType">
+    <xs:attribute name="name" type="xs:string" use="required"/>
+    <xs:attribute name="description" type="xs:string"/>
+    <xs:attribute name="cancelable" type="xs:boolean" default="false"/>
+    <xs:attribute name="bubbles" type="xs:boolean" default="true"/>
+  </xs:complexType>
+
+  <!-- Command Type -->
+  <xs:complexType name="CommandType">
+    <xs:attribute name="name" type="xs:string" use="required"/>
+    <xs:attribute name="description" type="xs:string"/>
+    <xs:attribute name="async" type="xs:boolean" default="false"/>
+  </xs:complexType>
+
+  <!-- Method Type -->
+  <xs:complexType name="MethodType">
+    <xs:sequence>
+      <xs:element name="parameter" type="tns:ParameterType" minOccurs="0" maxOccurs="unbounded"/>
+    </xs:sequence>
+    <xs:attribute name="name" type="xs:string" use="required"/>
+    <xs:attribute name="description" type="xs:string"/>
+    <xs:attribute name="returns" type="xs:string"/>
+    <xs:attribute name="async" type="xs:boolean" default="false"/>
+  </xs:complexType>
+
+  <!-- Parameter Type -->
+  <xs:complexType name="ParameterType">
+    <xs:attribute name="name" type="xs:string" use="required"/>
+    <xs:attribute name="type" type="xs:string" use="required"/>
+    <xs:attribute name="required" type="xs:boolean" default="true"/>
+    <xs:attribute name="default" type="xs:string"/>
+  </xs:complexType>
+
+  <!-- Accessibility Type -->
+  <xs:complexType name="AccessibilityType">
+    <xs:sequence>
+      <xs:element name="requirement" type="tns:AccessibilityRequirementType" minOccurs="0" maxOccurs="unbounded"/>
+      <xs:element name="aria-attribute" type="tns:AriaAttributeType" minOccurs="0" maxOccurs="unbounded"/>
+    </xs:sequence>
+  </xs:complexType>
+
+  <!-- Accessibility Requirement Type -->
+  <xs:complexType name="AccessibilityRequirementType">
+    <xs:attribute name="standard" type="xs:string" use="required"/>
+    <xs:attribute name="level" type="xs:string" use="required"/>
+    <xs:attribute name="description" type="xs:string"/>
+    <xs:attribute name="required" type="xs:boolean" default="true"/>
+  </xs:complexType>
+
+  <!-- ARIA Attribute Type -->
+  <xs:complexType name="AriaAttributeType">
+    <xs:attribute name="name" type="xs:string" use="required"/>
+    <xs:attribute name="value" type="xs:string"/>
+    <xs:attribute name="required" type="xs:boolean" default="false"/>
+  </xs:complexType>
+
+  <!-- Validation Rules Type -->
+  <xs:complexType name="ValidationRulesType">
+    <xs:sequence>
+      <xs:element name="rule" type="tns:ValidationRuleType" minOccurs="0" maxOccurs="unbounded"/>
+    </xs:sequence>
+  </xs:complexType>
+
+  <!-- Validation Rule Type -->
+  <xs:complexType name="ValidationRuleType">
+    <xs:attribute name="name" type="xs:string" use="required"/>
+    <xs:attribute name="type" type="xs:string" use="required"/>
+    <xs:attribute name="value" type="xs:string"/>
+    <xs:attribute name="pattern" type="xs:string"/>
+    <xs:attribute name="message" type="xs:string"/>
+    <xs:attribute name="severity" type="xs:string" default="error"/>
+  </xs:complexType>
+
+  <!-- Template Type -->
+  <xs:complexType name="TemplateType" mixed="true">
+    <xs:sequence>
+      <xs:element name="slot" type="tns:SlotType" minOccurs="0" maxOccurs="unbounded"/>
+      <xs:any namespace="##any" processContents="lax" minOccurs="0" maxOccurs="unbounded"/>
+    </xs:sequence>
+  </xs:complexType>
+
+  <!-- Slot Type -->
+  <xs:complexType name="SlotType" mixed="true">
+    <xs:sequence>
+      <xs:any namespace="##any" processContents="lax" minOccurs="0" maxOccurs="unbounded"/>
+    </xs:sequence>
+    <xs:attribute name="name" type="xs:string" use="required"/>
+    <xs:attribute name="allowed-controls" type="xs:string"/>
+    <xs:attribute name="required" type="xs:boolean" default="false"/>
+    <xs:attribute name="multiple" type="xs:boolean" default="false"/>
+    <xs:attribute name="default" type="xs:boolean" default="false"/>
+    <xs:attribute name="dock" type="xs:string"/>
+  </xs:complexType>
+
+  <!-- Structure Type -->
+  <xs:complexType name="StructureType">
+    <xs:sequence>
+      <xs:element name="description" type="xs:string" minOccurs="0"/>
+      <xs:element name="constraints" type="tns:ConstraintsType" minOccurs="0"/>
+      <xs:element name="attributes" type="tns:AttributesType" minOccurs="0"/>
+      <xs:element name="template" type="tns:TemplateType"/>
+      <xs:element name="composition" type="tns:CompositionType" minOccurs="0"/>
+    </xs:sequence>
+    <xs:attribute name="name" type="xs:string" use="required"/>
+    <xs:attribute name="type" type="xs:string" use="required"/>
+    <xs:attribute name="category" type="xs:string" use="required"/>
+    <xs:attribute name="inherits" type="xs:string"/>
+    <xs:attribute name="platform" type="xs:string" default="web"/>
+    <xs:attribute name="schema-version" type="xs:string" default="1.5"/>
+  </xs:complexType>
+
+  <!-- Composition Type -->
+  <xs:complexType name="CompositionType">
+    <xs:sequence>
+      <xs:element name="component" type="tns:ComponentType" minOccurs="0" maxOccurs="unbounded"/>
+    </xs:sequence>
+  </xs:complexType>
+
+  <!-- Component Type -->
+  <xs:complexType name="ComponentType">
+    <xs:attribute name="name" type="xs:string" use="required"/>
+    <xs:attribute name="type" type="xs:string" use="required"/>
+    <xs:attribute name="required" type="xs:boolean" default="false"/>
+    <xs:attribute name="multiple" type="xs:boolean" default="false"/>
+  </xs:complexType>
+
+  <!-- Wireframe Type -->
+  <xs:complexType name="WireframeType">
+    <xs:sequence>
+      <xs:element name="description" type="xs:string" minOccurs="0"/>
+      <xs:element name="template" type="tns:TemplateType"/>
+      <xs:element name="responsive" type="tns:ResponsiveType" minOccurs="0"/>
+      <xs:element name="theme-support" type="tns:ThemeSupportType" minOccurs="0"/>
+    </xs:sequence>
+    <xs:attribute name="name" type="xs:string" use="required"/>
+    <xs:attribute name="type" type="xs:string" use="required"/>
+    <xs:attribute name="platform" type="xs:string" default="web"/>
+    <xs:attribute name="schema-version" type="xs:string" default="1.5"/>
+  </xs:complexType>
+
+  <!-- Responsive Type -->
+  <xs:complexType name="ResponsiveType">
+    <xs:sequence>
+      <xs:element name="breakpoint" type="tns:BreakpointType" maxOccurs="unbounded"/>
+    </xs:sequence>
+  </xs:complexType>
+
+  <!-- Breakpoint Type -->
+  <xs:complexType name="BreakpointType">
+    <xs:sequence>
+      <xs:element name="layout-changes" type="xs:string" minOccurs="0"/>
+      <xs:element name="visibility-rules" type="xs:string" minOccurs="0"/>
+    </xs:sequence>
+    <xs:attribute name="name" type="xs:string" use="required"/>
+    <xs:attribute name="min-width" type="xs:int"/>
+    <xs:attribute name="max-width" type="xs:int"/>
+  </xs:complexType>
+
+  <!-- Theme Support Type -->
+  <xs:complexType name="ThemeSupportType">
+    <xs:sequence>
+      <xs:element name="theme-variable" type="tns:ThemeVariableType" minOccurs="0" maxOccurs="unbounded"/>
+    </xs:sequence>
+    <xs:attribute name="dark-mode" type="xs:boolean" default="true"/>
+    <xs:attribute name="custom-properties" type="xs:boolean" default="true"/>
+  </xs:complexType>
+
+  <!-- Theme Variable Type -->
+  <xs:complexType name="ThemeVariableType">
+    <xs:attribute name="name" type="xs:string" use="required"/>
+    <xs:attribute name="type" type="xs:string" use="required"/>
+    <xs:attribute name="default" type="xs:string"/>
+    <xs:attribute name="description" type="xs:string"/>
+  </xs:complexType>
+
+</xs:schema>

+ 1 - 1
UILayoutDefinitionFormat/ui-layout-winforms-controls.xsd

@@ -4,7 +4,7 @@
            xmlns:tns="http://quadarax.com/ui-layout-winforms-controls"
            xmlns:basic="http://quadarax.com/ui-layout-basic-controls"
            elementFormDefault="qualified"
-           version="1.4">
+           version="1.5">
 
   <!-- Import basic controls -->
   <xs:import namespace="http://quadarax.com/ui-layout-basic-controls" schemaLocation="ui-layout-basic-controls.xsd"/>