feat: remove deprecated code issues #133

BREAKING CHANGE: This code update resolves issues with deprecated features and cleans up
the implementation of the `auro-header` component. The `fixed` attribute and legacy size
options (`xxxs` to `xxxl`) have been eliminated, along with related utility classes and
documentation references, simplifying margin handling to specified numeric
values (`none`, `25`, `50`, etc.).

Legacy styles and examples supporting pixel-based rendering are removed, aligning the
component with modern practices. Additionally, two lines in `.husky/pre-commit` that would
fail in version `v10.0.0`—`#!/usr/bin/env sh` and `. "$(dirname -- "$0")/_/husky.sh"`—were
removed to ensure compatibility.

Updates include revisions to documentation files, API examples, and the `auro-header.js` source code,
while dependencies in the `package.json` file are updated, reflecting the latest version of
`@aurodesignsystem/auro-library`. These changes streamline the codebase, remove outdated
functionality, and improve maintainability for future development.

On branch dsande/deprecatedFeats/#133
Changes to be committed:
modified:   .husky/pre-commit
deleted:    apiExamples/fixed.html
modified:   apiExamples/margins.html
modified:   apiExamples/margins2.html
modified:   demo/api.md
modified:   demo/index.min.js
modified:   docs/api.md
modified:   docs/partials/api.md
modified:   package-lock.json
modified:   package.json
modified:   src/auro-header.js
modified:   src/style.scss
modified:   test/auro-header.test.js

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 ./node_modules/.bin/npm-run-all linters test

apiExamples/margins.html

@@ -1,5 +1,5 @@
 <auro-header level="2" display="500" margin="bottom" size="50">Hello World!</auro-header>
-<ol className="util_stackMarginNone--top">
+<ol>
   <li>... thing</li>
   <li>thing ...</li>
 </ol>

apiExamples/margins2.html

@@ -1,5 +1,5 @@
 <auro-header level="2" display="500" margin="both" size="400">Hello World!</auro-header>
-<ol className="util_stackMarginNone--top">
+<ol>
   <li>... thing</li>
   <li>thing ...</li>
 </ol>

demo/api.md

@@ -5,13 +5,6 @@
 
 The auro-header component is a custom element to make using headers with the Auro Design System seamless and easy.
 
-## Attributes
-
-| Attribute | Type      | Description                                      |
-|-----------|-----------|--------------------------------------------------|
-| [fixed](#fixed)   | `Boolean` | Uses px values instead of rem                    |
-| [type](#type)    | `String`  | **DEPRECATED** Option, `px`. Legacy option for converting REMs to PX. Use `fixed` feature. |
-
 ## Properties
 
 | Property  | Attribute | Type     | Default   | Description                                      |
@@ -20,7 +13,7 @@ The auro-header component is a custom element to make using headers with the Aur
 | [display](#display) | `display` | `String` | "display" | Determines presentation of header. Options are `display`, `800`, `700`, `600`, `500`, `400`, `300`. |
 | [level](#level)   | `level`   | `String` |           | Determines heading level for HTML element. Options are `1` - `6` |
 | [margin](#margin)  | `margin`  | `String` |           | Specify the margin(s) to be altered. Options are `top`, `bottom`, or `both`. |
-| [size](#size)    | `size`    | `String` |           | Specify size of margin adjustment, either `none`, `25`, `50`, `100`, `150`, `200`, `300`, `400`, `600` or `800`. **DEPRECATED** the `xxxs` - `xxxl` options. |
+| [size](#size)    | `size`    | `String` |           | Specify size of margin adjustment, either `none`, `25`, `50`, `100`, `150`, `200`, `300`, `400`, `600` or `800`. |
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## API Examples
@@ -50,7 +43,7 @@ The auro-header will default to the h1 element with the `header--display` style.
 
 #### Changing Header Size
 
-Use the `level` attribute to change the size of the `auro-header`. 
+Use the `level` attribute to change the size of the `auro-header`.
 
 **Note**: Changing the header level does not change the header style. This example will output an h3 header element with the default header--display style.
 
@@ -133,7 +126,7 @@ Also note the use of the  util_stackMarginNone--top  utility selector on the ol
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/margins.html) -->
   <!-- The below content is automatically added from ../apiExamples/margins.html -->
   <auro-header level="2" display="500" margin="bottom" size="50">Hello World!</auro-header>
-  <ol className="util_stackMarginNone--top">
+  <ol>
     <li>... thing</li>
     <li>thing ...</li>
   </ol>
@@ -146,7 +139,7 @@ Also note the use of the  util_stackMarginNone--top  utility selector on the ol
 
 ```html
 <auro-header level="2" display="500" margin="bottom" size="50">Hello World!</auro-header>
-<ol className="util_stackMarginNone--top">
+<ol>
   <li>... thing</li>
   <li>thing ...</li>
 </ol>
@@ -159,7 +152,7 @@ The following example shows how you can update both margins to use the 400 size
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/margins2.html) -->
   <!-- The below content is automatically added from ../apiExamples/margins2.html -->
   <auro-header level="2" display="500" margin="both" size="400">Hello World!</auro-header>
-  <ol className="util_stackMarginNone--top">
+  <ol>
     <li>... thing</li>
     <li>thing ...</li>
   </ol>
@@ -172,7 +165,7 @@ The following example shows how you can update both margins to use the 400 size
 
 ```html
 <auro-header level="2" display="500" margin="both" size="400">Hello World!</auro-header>
-<ol className="util_stackMarginNone--top">
+<ol>
   <li>... thing</li>
   <li>thing ...</li>
 </ol>
@@ -228,31 +221,4 @@ If it's preferred not to wrap the header component in another element, use the `
 </auro-header>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-### Classic Environment Support
-
-One of the challenges of using a design system is coping with legacy CSS that surrounds the new component. While web components are encapsulated, things like `font-size` will pierce the shadow DOM. To help combat this, the `auro-header` component supports a fixed attribute. Setting `fixed` will over-ride the component's dependency on REM values and use pixel values instead.
-
-This feature should only to be used within environments where the REM values cannot be used.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/fixed.html) -->
-  <!-- The below content is automatically added from ../apiExamples/fixed.html -->
-  <auro-header level="3" display="700" fixed>
-    On the journey together
-  </auro-header>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/fixed.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/fixed.html -->
-
-```html
-<auro-header level="3" display="700" fixed>
-  On the journey together
-</auro-header>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>