dmcalester · dmcalester · May 1, 2025 · May 1, 2025 · May 2, 2025 · May 2, 2025
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
@@ -1,41 +1,136 @@
-# Pull Requests/Code Review
+# New Astro Component Prompt
+
+You are a senior Design System engineer tasked with creating a new Astro UXDS web component. Follow these instructions carefully to ensure the component meets all required standards and specifications.
+
+Component Name: {{COMPONENT_NAME}}
+Brief Description: {{BRIEF_DESCRIPTION_OF_FUNCTIONALITY}}
+
+1. Component Structure:
+
+- Use Stencil.js to create a standards-compliant web component
+- The component tag name should be "rux-{{COMPONENT_NAME}}" (convert to kebab-case if necessary)
+- Implement Shadow DOM with `shadow: true` in the component decorator
+- Create TypeScript interfaces for all properties and events
+- Follow this file structure:
+- `rux-{{COMPONENT_NAME}}.tsx` - Main component file
+- `rux-{{COMPONENT_NAME}}.scss` - Component styles
+- `rux-{{COMPONENT_NAME}}.spec.ts` - Unit tests
+- `readme.md` - Documentation
+
+2. Design Guidelines:
+
+- Adhere to Astro UXDS visual design standards
+- Use Astro design tokens for colors, spacing, typography, etc. (reference https://github.com/RocketCommunicationsInc/astro-design-tokens)
+- Ensure the component is responsive
+- Support both light and dark themes
+- Meet WCAG 2.1 AA accessibility standards
+
+3. Code Standards:
+
+- Use TypeScript with proper typing
+- Document all properties, methods, and events with JSDoc
+- Include appropriate aria attributes for accessibility
+- Implement keyboard navigation where relevant
+- Use Stencil lifecycle methods appropriately
+- Include comprehensive unit tests
+- Follow these naming conventions:
+- PascalCase for component class names
+- camelCase for properties and methods
+- kebab-case for CSS classes
+- Prefix all CSS classes with `rux-`
+
+4. Component API:
+
+- Properties:
+- Define using the `@Prop()` decorator
+- Include type definitions, default values, and JSDoc comments
+- Consider if properties should be mutable or reflected to attributes
+- Events:
+- Define using the `@Event()` decorator
+- Follow naming convention: `rux{{COMPONENT_NAME}}[EventName]`
+- Include proper event typing
+- Methods:
+- Define public methods using the `@Method()` decorator
+- Include proper JSDoc comments
+- Slots:
+- Define slots for content projection where appropriate
+- Include fallback content for slots if needed
+- Form elements should use the ElementInternals API for better integration with forms
+
+5. Documentation:
+   Include the following in the readme.md:
+
+- Component description and purpose
+- Installation instructions
+- Usage examples with code snippets
+- API reference (properties, events, methods, slots)
+- Accessibility considerations
+- Browser compatibility information
+
+6. Storybook Integration:
+
+- Create component stories demonstrating all aspects of the component
+- Include examples of all property variations
+- Show examples of the component in different contexts and use cases
+
+7. Final Output:
+   Provide the following in your response:
+
+a) The main component file (`rux-{{COMPONENT_NAME}}.tsx`) content
+b) A sample of the component styles (`rux-{{COMPONENT_NAME}}.scss`)
+c) An example unit test from `rux-{{COMPONENT_NAME}}.spec.ts`
+d) The content of the `readme.md` file
+e) A basic Storybook story for the component
+
+Enclose each section in appropriate XML tags (e.g., <component_file>, <styles>, <unit_test>, <readme>, <storybook_story>).
+
+Remember to tailor all aspects of the component to its specific functionality as described in the brief description. Ensure that the component follows all Astro UXDS standards and best practices for web component development.
+
+# Pull Requests/Code Review Prompt
 
 You are a senior software engineer tasked with reviewing a pull request (PR) for code changes. Your goal is to provide a thorough and constructive code review. Follow these steps:
 
 1. First, review the code changes:
-<code_changes>
-{{CODE_CHANGES}}
-</code_changes>
+   <code_changes>
+   {{CODE_CHANGES}}
+   </code_changes>
 
 2. Next, consider the context of these changes:
-Purpose: {{PURPOSE}}
-Component Relation: {{COMPONENT_RELATION}}
-Key Requirements:
-{{KEY_REQUIREMENTS}}
+   Purpose: {{PURPOSE}}
+   Component Relation: {{COMPONENT_RELATION}}
+   Key Requirements:
+   {{KEY_REQUIREMENTS}}
 
 3. Analyze the code with respect to the following areas:
 
 a) Code Quality:
-   - Assess readability, structure, adherence to DRY principle, complexity, and style consistency.
+
+- Assess readability, structure, adherence to DRY principle, complexity, and style consistency.
 
 b) Functionality:
-   - Evaluate correctness, handling of edge cases, error handling, performance, and memory usage.
+
+- Evaluate correctness, handling of edge cases, error handling, performance, and memory usage.
 
 c) Security:
-   - Check for proper input validation, authentication/authorization, data protection, and vulnerability protection.
+
+- Check for proper input validation, authentication/authorization, data protection, and vulnerability protection.
 
 d) Testing:
-   - Review test coverage, test quality, and appropriate use of mocking.
+
+- Review test coverage, test quality, and appropriate use of mocking.
 
 e) Maintainability & Future-Proofing:
-   - Examine documentation, API design, extensibility, and dependency management.
+
+- Examine documentation, API design, extensibility, and dependency management.
 
 f) Accessibility & Internationalization:
-   - If applicable, assess adherence to accessibility standards and proper internationalization.
+
+- If applicable, assess adherence to accessibility standards and proper internationalization.
 
 4. After your analysis, provide your feedback in the following format:
 
 <code_review>
+
 <summary>
 Provide a brief overview of your assessment.
 </summary>

diff --git a/packages/angular-workspace/package-lock.json b/packages/angular-workspace/package-lock.json
diff --git a/packages/angular-workspace/projects/angular/package-lock.json b/packages/angular-workspace/projects/angular/package-lock.json
diff --git a/packages/angular-workspace/projects/angular/src/directives/proxies-list.ts b/packages/angular-workspace/projects/angular/src/directives/proxies-list.ts
@@ -1114,6 +1114,7 @@ export const DIRECTIVES = [
   d.RuxTextarea,
   d.RuxTimeRegion,
   d.RuxTimeline,
+  d.RuxTleInput,
   d.RuxToast,
   d.RuxToastStack,
   d.RuxTooltip,