qdr.app.tools/UILayoutDefinitionFormat/Definitions/webawesome-controls.xml

<?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.6"
         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>