@hashicorp/design-system-components 3.1.2 → 3.3.0

package/CHANGELOG.md

@@ -1,26 +1,82 @@
 # @hashicorp/design-system-components
 
+## 3.3.0
+
+### Minor Changes
+
+`Hds::Form::CharacterCount` - Added new component
+`Hds::Form::Field` - Added `CharacterCount` contextual component
+`Hds::Form::MaskedInput::Field` - Added `CharacterCount` contextual component
+`Hds::Form::TextInput::Field` - Added `CharacterCount` contextual component
+`Hds::Form::Textarea::Field` - Added `CharacterCount` contextual component
+
+<small class="doc-whats-new-changelog-metadata">[#1802](https://github.com/hashicorp/design-system/pull/1802)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+### Patch Changes
+
+`Button` - updated DOM structure to contain only `span` elements
+
+`Dropdown` - updated button elements DOM structure to contain only `span` elements
+
+`Link::Standalone` - updated DOM structure to contain only `span` elements
+
+<small class="doc-whats-new-changelog-metadata">[#1840](https://github.com/hashicorp/design-system/pull/1840)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+## 3.2.0
+
+### Minor Changes
+
+`CodeBlock` - Added language support for Ruby syntax
+
+<small class="doc-whats-new-changelog-metadata">[#1834](https://github.com/hashicorp/design-system/pull/1834)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+`Hds::Table` - updated `@columns` object to support `isVisuallyHidden` argument
+
+- `Hds::Table::Th` - updated to support `isVisuallyHidden` argument
+
+<small class="doc-whats-new-changelog-metadata">[#1819](https://github.com/hashicorp/design-system/pull/1819)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+### Patch Changes
+
+`SideNav` - Reduced the width of `SideNav::ToggleButton`
+
+<small class="doc-whats-new-changelog-metadata">[#1807](https://github.com/hashicorp/design-system/pull/1807)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+**🔄 Updated dependencies:**
+
+- @hashicorp/ember-flight-icons@4.0.4
+
 ## 3.1.2
 
 ### Patch Changes
 
 `AppFooter` – Fixed predefined statuses by replacing `critical` with `outage` and prevented `statusIconColor` from being overridden by `status`
 
-<small>[#1790](https://github.com/hashicorp/design-system/pull/1790)</small>
+<small class="doc-whats-new-changelog-metadata">[#1790](https://github.com/hashicorp/design-system/pull/1790)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `SideNav` - Fixed visible scrollbar in collapsed SideNav when scroll bar is set to be always visible
 
-<small>[#1786](https://github.com/hashicorp/design-system/pull/1786)</small>
+<small class="doc-whats-new-changelog-metadata">[#1786](https://github.com/hashicorp/design-system/pull/1786)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `CodeBlock` - Fixed `@hasLineWrapping` style to make long strings wrap when they overflow the container
 
-<small>[#1798](https://github.com/hashicorp/design-system/pull/1798)</small>
+<small class="doc-whats-new-changelog-metadata">[#1798](https://github.com/hashicorp/design-system/pull/1798)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 ## 3.1.1
 
@@ -28,9 +84,9 @@
 
 Added `@ember/string` as a direct dependency
 
-<small>[#1782](https://github.com/hashicorp/design-system/pull/1782)</small>
+<small class="doc-whats-new-changelog-metadata">[#1782](https://github.com/hashicorp/design-system/pull/1782)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 **🔄 Updated dependencies:**
 
@@ -42,9 +98,9 @@ Added `@ember/string` as a direct dependency
 
 `CodeBlock` - Added new component
 
-<small>[#1687](https://github.com/hashicorp/design-system/pull/1687)</small>
+<small class="doc-whats-new-changelog-metadata">[#1687](https://github.com/hashicorp/design-system/pull/1687)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 ### Patch Changes
 
@@ -56,15 +112,15 @@ Upgraded the following dependencies:
 - `ember-keyboard` from `8.2.0` to `8.2.1`
 - `sass` from `1.62.1` to `1.69.5`
 
-<small>[#1756](https://github.com/hashicorp/design-system/pull/1756)</small>
+<small class="doc-whats-new-changelog-metadata">[#1756](https://github.com/hashicorp/design-system/pull/1756)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Breadcrumb` - Added support for external links
 
-<small>[#1774](https://github.com/hashicorp/design-system/pull/1774)</small>
+<small class="doc-whats-new-changelog-metadata">[#1774](https://github.com/hashicorp/design-system/pull/1774)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 Upgraded the following dependencies:
 
@@ -73,15 +129,15 @@ Upgraded the following dependencies:
 - `ember-cli-sass` from `10.0.1` to `11.0.1`
 - `ember-composable-helpers` from `4.5.0` to `5.0.0`
 
-<small>[#1761](https://github.com/hashicorp/design-system/pull/1761)</small>
+<small class="doc-whats-new-changelog-metadata">[#1761](https://github.com/hashicorp/design-system/pull/1761)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Button` - Fixed `HdsInteractiveSignature` type import
 
-<small>[#1769](https://github.com/hashicorp/design-system/pull/1769)</small>
+<small class="doc-whats-new-changelog-metadata">[#1769](https://github.com/hashicorp/design-system/pull/1769)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 **🔄 Updated dependencies:**
 
@@ -93,9 +149,9 @@ Upgraded the following dependencies:
 
 explicitly added `ember-element-helper` as dependency for the `components` package
 
-<small>[#1751](https://github.com/hashicorp/design-system/pull/1751)</small>
+<small class="doc-whats-new-changelog-metadata">[#1751](https://github.com/hashicorp/design-system/pull/1751)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 ## 3.0.1
 
@@ -111,9 +167,9 @@ explicitly added `ember-element-helper` as dependency for the `components` packa
 
 Drop support for Node 14
 
-<small>[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
+<small class="doc-whats-new-changelog-metadata">[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Hds::Form::VisibilityToggle` - Added component as a form base element
 
@@ -127,9 +183,9 @@ To migrate:
 
 - in `Hds::Form::MaskedInput` instances replace `@isMasked` arguments with `@isContentMasked`
 
-<small>[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
+<small class="doc-whats-new-changelog-metadata">[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Hds::Dropdown` – Removed `@listPosition` `left` and `right` (use `bottom-left` and `bottom-right`, respectively).
 
@@ -139,9 +195,9 @@ To migrate:
   - replace `@listPosition="left"` with `@listPosition="bottom-left"`
   - replace `@listPosition="right"` with `@listPosition="bottom-right"`
 
-<small>[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
+<small class="doc-whats-new-changelog-metadata">[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `SideNav` - Renamed `extraBefore/After` generic containers to `ExtraBefore/After` (uppercase `E`).
 
@@ -149,9 +205,9 @@ To migrate:
 
 - rename all the `extraBefore/After` instances yielded within the `<Hds::SideNav>` component to `ExtraBefore/After`
 
-<small>[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
+<small class="doc-whats-new-changelog-metadata">[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Form::RadioCard` - Remove the `@layout` property.
 
@@ -162,9 +218,9 @@ To migrate `Form::RadioCard` and `Form::RadioCard::Group` instances without enco
 - make sure all instances with `@layout="fixed"` have a `@maxWidth` defined, then remove the `@layout="fixed"` definition
 - remove all `@layout="fluid"` definitions
 
-<small>[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
+<small class="doc-whats-new-changelog-metadata">[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 ### Minor Changes
 
@@ -172,15 +228,15 @@ To migrate `Form::RadioCard` and `Form::RadioCard::Group` instances without enco
 
 _Consumers should review the defaults values for this (sub)component in their codebases, to make sure they match the intended visual designs._
 
-<small>[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
+<small class="doc-whats-new-changelog-metadata">[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Button`, `Interactive` - Converted components to TypeScript.
 
-<small>[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
+<small class="doc-whats-new-changelog-metadata">[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Copy::Snippet` - Fixed the way in which “width/full-width” is applied to the component + Internal update to the “truncation” implementation.
 
@@ -189,9 +245,9 @@ _Consumers should review the defaults values for this (sub)component in their co
 
 _Consumers should review the pages where this component is used to make sure its width matches the intended visual designs (in case, use the `@isFullWidth` argument to control its full-width). In case they're using the `hds-copy-snippet__text--truncated` class name, they should also update their code to adapt to the new implementation._
 
-<small>[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
+<small class="doc-whats-new-changelog-metadata">[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 Removed `ember-cli-clipboard` as dependency and introduced a custom `hds-clipboard` modifier (using the web [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API))
 
@@ -210,23 +266,23 @@ Removed `ember-cli-clipboard` as dependency and introduced a custom `hds-clipboa
 
 _Consumers should remove the `@container` argument from all the instances of `Copy::Button` (not needed anymore) and double check that the `Copy::Button/Snippet` instances work exactly as before._
 
-<small>[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
+<small class="doc-whats-new-changelog-metadata">[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 ### Patch Changes
 
 `Copy::Snippet` - Fixed background colors for different states according to Figma specs (main change is the default/base background is now transparent, not white).
 
-<small>[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
+<small class="doc-whats-new-changelog-metadata">[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Form::MaskedInput` - Changed copy logic for `CopyButton` used inside the component.
 
-<small>[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
+<small class="doc-whats-new-changelog-metadata">[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Accordion` - Replaced internal text styling (using `Text` component).
 
@@ -252,15 +308,15 @@ _Consumers should remove the `@container` argument from all the instances of `Co
 
 _No impact is expected on the consumers' applications._
 
-<small>[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
+<small class="doc-whats-new-changelog-metadata">[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Button` - Applied explicit text alignment to the text to fix alignment on "link" buttons.
 
-<small>[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
+<small class="doc-whats-new-changelog-metadata">[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 **🔄 Updated dependencies:**
 
@@ -274,13 +330,13 @@ _No impact is expected on the consumers' applications._
 
 `Dropdown::ToggleIcon` - updated sizing of the "small" variant to match the height of the "small" variant `Button`
 
-<small>[#1690](https://github.com/hashicorp/design-system/pull/1690)</small>
+<small class="doc-whats-new-changelog-metadata">[#1690](https://github.com/hashicorp/design-system/pull/1690)</small>
 
 ### Patch Changes
 
 `Pagination` - Removed handling of query parameters from `onPageSizeChange` function.
 
-<small>[#1736](https://github.com/hashicorp/design-system/pull/1736)</small>
+<small class="doc-whats-new-changelog-metadata">[#1736](https://github.com/hashicorp/design-system/pull/1736)</small>
 
 _Notice: while technically this is a breaking change, we consider this a fast-follow fix for the previous release._
 
@@ -290,13 +346,13 @@ _Notice: while technically this is a breaking change, we consider this a fast-fo
 
 `Pagination` - updated the logic for “Compact” variant to expose `@currentPageSize` and handle controlled/uncontrolled changes
 
-<small>[#1724](https://github.com/hashicorp/design-system/pull/1724)</small>
+<small class="doc-whats-new-changelog-metadata">[#1724](https://github.com/hashicorp/design-system/pull/1724)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Tabs` - replace `assert` with `warn` in `setIndicator` function
 
-<small>[#1716](https://github.com/hashicorp/design-system/pull/1716)</small>
+<small class="doc-whats-new-changelog-metadata">[#1716](https://github.com/hashicorp/design-system/pull/1716)</small>
 
 ## 2.14.1
 
@@ -304,7 +360,7 @@ _Notice: while technically this is a breaking change, we consider this a fast-fo
 
 `Tabs` - Fixed issue with `@isSelected` dynamically changed within `#each` loops
 
-<small>[#1709](https://github.com/hashicorp/design-system/pull/1709)</small>
+<small class="doc-whats-new-changelog-metadata">[#1709](https://github.com/hashicorp/design-system/pull/1709)</small>
 
 ## 2.14.0
 
@@ -312,9 +368,9 @@ _Notice: while technically this is a breaking change, we consider this a fast-fo
 
 `Pagination::Compact` - Added option to show "SizeSelector" element
 
-<small>[#1700](https://github.com/hashicorp/design-system/pull/1700)</small>
+<small class="doc-whats-new-changelog-metadata">[#1700](https://github.com/hashicorp/design-system/pull/1700)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Tabs` - Refactored logic for `Tabs` component + `Tab/Panel` sub-components to support more complex use cases:
 
@@ -322,7 +378,7 @@ _Notice: while technically this is a breaking change, we consider this a fast-fo
 - fixed issue with nested tabs not initializing the "selected" indicator correctly
 - fixed issue with dynamic tab content not updating the "selected" indicator correctly
 
-<small>[#1688](https://github.com/hashicorp/design-system/pull/1688)</small>
+<small class="doc-whats-new-changelog-metadata">[#1688](https://github.com/hashicorp/design-system/pull/1688)</small>
 
 ## 2.13.0
 
@@ -330,27 +386,27 @@ _Notice: while technically this is a breaking change, we consider this a fast-fo
 
 `AppFooter` - Added new component
 
-<small>[#1623](https://github.com/hashicorp/design-system/pull/1623)</small>
+<small class="doc-whats-new-changelog-metadata">[#1623](https://github.com/hashicorp/design-system/pull/1623)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `SideNav` - add `@isCollapsible` (to control if users can collapse the sidenav on 'desktop' viewports) and `@isMinimized` (to control the default state on 'desktop' viewports) arguments
 
-<small>[#1630](https://github.com/hashicorp/design-system/pull/1630)</small>
+<small class="doc-whats-new-changelog-metadata">[#1630](https://github.com/hashicorp/design-system/pull/1630)</small>
 
 ### Patch Changes
 
 `Tag` - Updated padding for dismiss button for WCAG conformance
 
-<small>[#1696](https://github.com/hashicorp/design-system/pull/1696)</small>
+<small class="doc-whats-new-changelog-metadata">[#1696](https://github.com/hashicorp/design-system/pull/1696)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Link::Standalone` – increase target size
 
-<small>[#1678](https://github.com/hashicorp/design-system/pull/1678)</small>
+<small class="doc-whats-new-changelog-metadata">[#1678](https://github.com/hashicorp/design-system/pull/1678)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 **🔄 Updated dependencies:**
 
@@ -362,15 +418,15 @@ _Notice: while technically this is a breaking change, we consider this a fast-fo
 
 `PowerSelect` - fix style overrides when the list is positioned above
 
-<small>[#1655](https://github.com/hashicorp/design-system/pull/1655)</small>
+<small class="doc-whats-new-changelog-metadata">[#1655](https://github.com/hashicorp/design-system/pull/1655)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Text` - Fixed issue with whitespace adding extra underline when used in links (eg. inside a `Link::Inline`)
 
-<small>[#1652](https://github.com/hashicorp/design-system/pull/1652)</small>
+<small class="doc-whats-new-changelog-metadata">[#1652](https://github.com/hashicorp/design-system/pull/1652)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 **🔄 Updated dependencies:**
 
@@ -382,13 +438,13 @@ _Notice: while technically this is a breaking change, we consider this a fast-fo
 
 `Pagination` - Bugfix `aria-label` on the component
 
-<small>[#1627](https://github.com/hashicorp/design-system/pull/1627)</small>
+<small class="doc-whats-new-changelog-metadata">[#1627](https://github.com/hashicorp/design-system/pull/1627)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Dropdown` - changed `@height` property to use `max-height` instead of a fixed height.
 
-<small>[#1635](https://github.com/hashicorp/design-system/pull/1635)</small>
+<small class="doc-whats-new-changelog-metadata">[#1635](https://github.com/hashicorp/design-system/pull/1635)</small>
 
 ## 2.12.0
 
@@ -396,33 +452,33 @@ _Notice: while technically this is a breaking change, we consider this a fast-fo
 
 `IconTile` - updated component to include `vault-secrets` product option
 
-<small>[#1640](https://github.com/hashicorp/design-system/pull/1640)</small>
+<small class="doc-whats-new-changelog-metadata">[#1640](https://github.com/hashicorp/design-system/pull/1640)</small>
 
 ### Patch Changes
 
 `Text` - Removed leftover `console.log` from code
 
-<small>[#1615](https://github.com/hashicorp/design-system/pull/1615)</small>
+<small class="doc-whats-new-changelog-metadata">[#1615](https://github.com/hashicorp/design-system/pull/1615)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 Refactored the layout of the `Dropdown` checkbox and radio inputs to make the gap between the inputs and the associated text, as well as the icon and count, clickable.
 
-<small>[#1618](https://github.com/hashicorp/design-system/pull/1618)</small>
+<small class="doc-whats-new-changelog-metadata">[#1618](https://github.com/hashicorp/design-system/pull/1618)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Hds::Link::Standalone` - Changed font-weight from 500 to 400 to match font-weight of `Hds::Button`.
 
-<small>[#1617](https://github.com/hashicorp/design-system/pull/1617)</small>
+<small class="doc-whats-new-changelog-metadata">[#1617](https://github.com/hashicorp/design-system/pull/1617)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Stepper` - removed some CSS declarations that were not used/applied
 
-<small>[#1628](https://github.com/hashicorp/design-system/pull/1628)</small>
+<small class="doc-whats-new-changelog-metadata">[#1628](https://github.com/hashicorp/design-system/pull/1628)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 **🔄 Updated dependencies:**
 
@@ -435,33 +491,33 @@ Refactored the layout of the `Dropdown` checkbox and radio inputs to make the ga
 
 `Hds::Text` - Added new `Text` component
 
-<small>[#1490](https://github.com/hashicorp/design-system/pull/1490)</small>
+<small class="doc-whats-new-changelog-metadata">[#1490](https://github.com/hashicorp/design-system/pull/1490)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Hds::Form::MaskedInput` - Add `hasCopyButton` argument
 
-<small>[#1587](https://github.com/hashicorp/design-system/pull/1587)</small>
+<small class="doc-whats-new-changelog-metadata">[#1587](https://github.com/hashicorp/design-system/pull/1587)</small>
 
 ### Patch Changes
 
 `Form::Indicator` - Remove aria-hidden from the "optional" `<span>`
 
-<small>[#1577](https://github.com/hashicorp/design-system/pull/1577) - Thanks [@DingoEatingFuzz](https://github.com/DingoEatingFuzz) for the contribution! 🙏</small>
+<small class="doc-whats-new-changelog-metadata">[#1577](https://github.com/hashicorp/design-system/pull/1577) - Thanks [@DingoEatingFuzz](https://github.com/DingoEatingFuzz) for the contribution! 🙏</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 Removed `ember-named-blocks-polyfill` as all consumers of HDS are on Ember 3.25 or later now. This can be installed locally if it is still needed.
 
-<small>[#1606](https://github.com/hashicorp/design-system/pull/1606)</small>
+<small class="doc-whats-new-changelog-metadata">[#1606](https://github.com/hashicorp/design-system/pull/1606)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Alert`, `Toast`: Fixed an issue with anchor tag color styles within Description that had been overriding `Hds::Link` color; changed the default color for HTML links within Description to "neutral" to better align with existing guidance for links in the actions and improve accessible contrast.
 
-<small>[#1576](https://github.com/hashicorp/design-system/pull/1576)</small>
+<small class="doc-whats-new-changelog-metadata">[#1576](https://github.com/hashicorp/design-system/pull/1576)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 **🔄 Updated dependencies:**
 
@@ -473,51 +529,51 @@ Removed `ember-named-blocks-polyfill` as all consumers of HDS are on Ember 3.25
 
 Added new `FileInput` component
 
-<small>[#1535](https://github.com/hashicorp/design-system/pull/1535)</small>
+<small class="doc-whats-new-changelog-metadata">[#1535](https://github.com/hashicorp/design-system/pull/1535)</small>
 
 ### Patch Changes
 
 Remove unnecessary export of `hds/copy/index.js`
 
-<small>[#1570](https://github.com/hashicorp/design-system/pull/1570)</small>
+<small class="doc-whats-new-changelog-metadata">[#1570](https://github.com/hashicorp/design-system/pull/1570)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Hds::Tabs` - Fix missing tab indicator when used in Modal or Flyout
 
-<small>[#1575](https://github.com/hashicorp/design-system/pull/1575)</small>
+<small class="doc-whats-new-changelog-metadata">[#1575](https://github.com/hashicorp/design-system/pull/1575)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Copy::Snippet` - Added support for container and updated API docs
 
-<small>[#1567](https://github.com/hashicorp/design-system/pull/1567)</small>
+<small class="doc-whats-new-changelog-metadata">[#1567](https://github.com/hashicorp/design-system/pull/1567)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Hds::Tabs` - Fixed tabs and panels misbehaving on route change
 
-<small>[#1571](https://github.com/hashicorp/design-system/pull/1571)</small>
+<small class="doc-whats-new-changelog-metadata">[#1571](https://github.com/hashicorp/design-system/pull/1571)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
-<small>[#1568](https://github.com/hashicorp/design-system/pull/1568)</small>
+<small class="doc-whats-new-changelog-metadata">[#1568](https://github.com/hashicorp/design-system/pull/1568)</small>
 
 `Copy::Button`, `Copy::Snippet` - Updated error icon
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Hds::SegmentedGroup` - Prevent `border-radius` from interfering with underlying elements
 
-<small>[#1555](https://github.com/hashicorp/design-system/pull/1555)</small>
+<small class="doc-whats-new-changelog-metadata">[#1555](https://github.com/hashicorp/design-system/pull/1555)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Table` - Resolved issue where `ThSort` was not supporting right-aligned text properly
 
-<small>[#1565](https://github.com/hashicorp/design-system/pull/1565)</small>
+<small class="doc-whats-new-changelog-metadata">[#1565](https://github.com/hashicorp/design-system/pull/1565)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 **🔄 Updated dependencies:**
 
@@ -529,39 +585,39 @@ Remove unnecessary export of `hds/copy/index.js`
 
 Added the `Hds::CopyButton` and `Hds::CopySnippet` components.
 
-<small>[#1488](https://github.com/hashicorp/design-system/pull/1488)</small>
+<small class="doc-whats-new-changelog-metadata">[#1488](https://github.com/hashicorp/design-system/pull/1488)</small>
 
 ### Patch Changes
 
 Adjusted closing brace on copywrite headers to avoid terminal noise
 
-<small>[#1539](https://github.com/hashicorp/design-system/pull/1539)</small>
+<small class="doc-whats-new-changelog-metadata">[#1539](https://github.com/hashicorp/design-system/pull/1539)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Hds::Modal` - reduce test flakiness around closing Modal when using `@ember/test-helpers`
 
-<small>[#1549](https://github.com/hashicorp/design-system/pull/1549) - Thanks [@fivetanley](https://github.com/fivetanley) for the contribution! 🙏</small>
+<small class="doc-whats-new-changelog-metadata">[#1549](https://github.com/hashicorp/design-system/pull/1549) - Thanks [@fivetanley](https://github.com/fivetanley) for the contribution! 🙏</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 Fix Embroider warnings caused by incorrect export of internal utility functions
 
-<small>[#1530](https://github.com/hashicorp/design-system/pull/1530)</small>
+<small class="doc-whats-new-changelog-metadata">[#1530](https://github.com/hashicorp/design-system/pull/1530)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Hds::Flyout` - reduce test flakiness around closing Flyout when using `@ember/test-helpers`
 
-<small>[#1552](https://github.com/hashicorp/design-system/pull/1552)</small>
+<small class="doc-whats-new-changelog-metadata">[#1552](https://github.com/hashicorp/design-system/pull/1552)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 `Hds::Form::Field` - Fix error message for unexpected `@layout` values
 
-<small>[#1529](https://github.com/hashicorp/design-system/pull/1529)</small>
+<small class="doc-whats-new-changelog-metadata">[#1529](https://github.com/hashicorp/design-system/pull/1529)</small>
 
----
+<div class="doc-whats-new-changelog-separator"></div>
 
 **🔄 Updated dependencies:**
 

package/addon/components/hds/button/index.hbs

@@ -16,30 +16,30 @@
   aria-label={{if this.isIconOnly this.text null}}
 >
   {{#if this.isIconOnly}}
-    <div class="hds-button__icon">
+    <span class="hds-button__icon">
       <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-    </div>
+    </span>
   {{else}}
     {{#if this.icon}}
       {{#if (eq this.iconPosition "leading")}}
-        <div class="hds-button__icon">
+        <span class="hds-button__icon">
           <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-        </div>
-        <div class="hds-button__text">
+        </span>
+        <span class="hds-button__text">
           {{this.text}}
-        </div>
+        </span>
       {{else}}
-        <div class="hds-button__text">
+        <span class="hds-button__text">
           {{this.text}}
-        </div>
-        <div class="hds-button__icon">
+        </span>
+        <span class="hds-button__icon">
           <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-        </div>
+        </span>
       {{/if}}
     {{else}}
-      <div class="hds-button__text">
+      <span class="hds-button__text">
         {{this.text}}
-      </div>
+      </span>
     {{/if}}
   {{/if}}
 </Hds::Interactive>

package/addon/components/hds/code-block/index.js

@@ -20,6 +20,7 @@ import 'prismjs/components/prism-go';
 import 'prismjs/components/prism-hcl';
 import 'prismjs/components/prism-json';
 import 'prismjs/components/prism-log';
+import 'prismjs/components/prism-ruby';
 import 'prismjs/components/prism-shell-session';
 import 'prismjs/components/prism-yaml';
 

package/addon/components/hds/dropdown/list-item/checkmark.hbs

@@ -20,11 +20,11 @@
     aria-selected={{if @selected "true" "false"}}
   >
     {{#if @icon}}
-      <div class="hds-dropdown-list-item__interactive-icon">
+      <span class="hds-dropdown-list-item__interactive-icon">
         <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
-      </div>
+      </span>
     {{/if}}
-    <Hds::Text::Body @tag="div" @size="200" @weight="medium" class="hds-dropdown-list-item__interactive-text">
+    <Hds::Text::Body @tag="span" @size="200" @weight="medium" class="hds-dropdown-list-item__interactive-text">
       {{yield}}
     </Hds::Text::Body>
     {{#if @count}}

package/addon/components/hds/dropdown/list-item/interactive.hbs

@@ -25,11 +25,11 @@
       ...attributes
     >
       {{#if @icon}}
-        <div class="hds-dropdown-list-item__interactive-icon">
+        <span class="hds-dropdown-list-item__interactive-icon">
           <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
-        </div>
+        </span>
       {{/if}}
-      <Hds::Text::Body class="hds-dropdown-list-item__interactive-text" @tag="div" @size="200" @weight="medium">
+      <Hds::Text::Body class="hds-dropdown-list-item__interactive-text" @tag="span" @size="200" @weight="medium">
         {{this.text}}
       </Hds::Text::Body>
     </Hds::Interactive>

package/addon/components/hds/form/character-count/index.hbs

@@ -0,0 +1,28 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<Hds::Text::Body
+  @tag="div"
+  @size="100"
+  class={{this.classNames}}
+  id={{this.id}}
+  {{did-insert this.onInsert}}
+  {{will-destroy this.willDestroyNode}}
+  ...attributes
+  aria-live="polite"
+>
+  {{#if (has-block)}}
+    {{yield
+      (hash
+        minLength=this.minLength
+        maxLength=this.maxLength
+        currentLength=this.currentLength
+        remaining=this.remaining
+        shortfall=this.shortfall
+      )
+    }}
+  {{else}}
+    {{this.message}}
+  {{/if}}
+</Hds::Text::Body>

package/addon/components/hds/form/character-count/index.js

@@ -0,0 +1,178 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+const ID_PREFIX = 'character-count-';
+const NOOP = () => {};
+
+export default class HdsFormCharacterCountIndexComponent extends Component {
+  // The current number of characters in the associated input
+  @tracked currentLength;
+  inputControl = document.getElementById(this.args.controlId);
+
+  // Inflector utility function to determine plural or singular for 'character' noun
+  pluralize(count, prefix = '', noun = 'character', suffix = 's') {
+    return `${count}${prefix ? ' ' + prefix : ''} ${noun}${
+      count !== 1 ? suffix : ''
+    }`;
+  }
+
+  /**
+   * @param maxLength
+   * @type {number}
+   * @default null
+   * @description The maximum number of characters allowed.
+   */
+  get maxLength() {
+    let { maxLength } = this.args;
+    return parseInt(maxLength);
+  }
+
+  /**
+   * @param minLength
+   * @type {number}
+   * @default null
+   * @description The minimum number of characters allowed.
+   */
+  get minLength() {
+    let { minLength } = this.args;
+    return parseInt(minLength);
+  }
+
+  /**
+   * @param remaining
+   * @type {number}
+   * @default null
+   * @description The remaining number of characters.
+   */
+  get remaining() {
+    return this.maxLength - this.currentLength;
+  }
+
+  /**
+   * @param shortfall
+   * @type {number}
+   * @default null
+   * @description The number of characters the content is falling short of.
+   */
+  get shortfall() {
+    return this.minLength - this.currentLength;
+  }
+
+  /**
+   * @param message
+   * @type {string}
+   * @default null
+   * @description The character count message presented to users
+   */
+  get message() {
+    let messageText = '';
+    if (this.minLength && this.currentLength === 0) {
+      messageText = `${this.pluralize(this.minLength)} required`;
+    } else if (this.minLength && this.currentLength < this.minLength) {
+      messageText = `${this.pluralize(this.shortfall, 'more')} required`;
+    } else if (this.maxLength && this.currentLength === 0) {
+      messageText = `${this.pluralize(this.maxLength)} allowed`;
+    } else if (this.maxLength && this.currentLength <= this.maxLength) {
+      messageText = `${this.pluralize(this.remaining)} remaining`;
+    } else if (this.currentLength > this.maxLength) {
+      messageText = `Exceeded by ${this.pluralize(-this.remaining)}`;
+    } else {
+      messageText = `${this.pluralize(this.currentLength)} entered`;
+    }
+    return messageText;
+  }
+
+  /**
+   * Determines the unique ID to assign to the element
+   * @method id
+   * @return {(string|null)} The "id" attribute to apply to the element or null, if no controlId is provided
+   */
+  get id() {
+    let { controlId } = this.args;
+    if (controlId) {
+      return `${ID_PREFIX}${controlId}`;
+    }
+    return null;
+  }
+
+  /**
+   * @param onInsert
+   * @type {function}
+   * @default () => {}
+   */
+  get onInsert() {
+    let { onInsert } = this.args;
+
+    if (!this.inputControl || this.inputControl.value === undefined) {
+      console.error(
+        '`Hds::Form::CharacterCount` component - `@controlId` selector provided does not point to a valid input element, check the id',
+        this.args.controlId
+      );
+    } else {
+      this.updateCurrentLength();
+      this.inputControl.addEventListener(
+        'input',
+        this.updateCurrentLength,
+        true
+      );
+    }
+
+    // notice: this is a guard used to prevent triggering an error when the component is used as standalone element
+    if (typeof onInsert === 'function') {
+      return onInsert;
+    } else {
+      return NOOP;
+    }
+  }
+
+  @action
+  willDestroyNode() {
+    if (this.inputControl) {
+      this.inputControl.removeEventListener(
+        'input',
+        this.updateCurrentLength,
+        true
+      );
+    }
+  }
+
+  @action
+  updateCurrentLength() {
+    this.currentLength = this.inputControl?.value?.length;
+
+    if (typeof this.args.onInput === 'function') {
+      this.args.onInput({
+        inputControl: this.inputControl,
+        currentLength: this.currentLength,
+        maxLength: this.maxLength,
+        minLength: this.minLength,
+        remaining: this.remaining,
+        shortfall: this.shortfall,
+      });
+    }
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-form-character-count'];
+
+    // add a class based on the @contextualClass argument
+    // notice: this will *not* be documented for public use
+    // the reason for this is that the contextual component declarations don't pass attributes to the component
+    if (this.args.contextualClass) {
+      classes.push(this.args.contextualClass);
+    }
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/form/field/index.hbs

@@ -27,6 +27,16 @@
   <div class="hds-form-field__control">
     {{yield (hash Control=(component "hds/yield") id=this.id ariaDescribedBy=this.ariaDescribedBy)}}
   </div>
+  {{yield
+    (hash
+      CharacterCount=(component
+        "hds/form/character-count"
+        controlId=this.id
+        onInsert=this.appendDescriptor
+        contextualClass="hds-form-field__character-count"
+      )
+    )
+  }}
   {{yield
     (hash
       Error=(component

package/addon/components/hds/form/masked-input/field.hbs

@@ -12,7 +12,7 @@
 >
   {{! Notice: the order of the elements is not relevant here, because is controlled at "Hds::Form::Field" component level }}
   {{yield (hash Label=F.Label isRequired=F.isRequired isOptional=F.isOptional)}}
-  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
+  {{yield (hash HelperText=F.HelperText Error=F.Error CharacterCount=F.CharacterCount)}}
   <F.Control>
     <Hds::Form::MaskedInput::Base
       @hasCopyButton={{@hasCopyButton}}

package/addon/components/hds/form/text-input/field.hbs

@@ -12,7 +12,7 @@
 >
   {{! Notice: the order of the elements is not relevant here, because is controlled at "Hds::Form::Field" component level }}
   {{yield (hash Label=F.Label isRequired=F.isRequired isOptional=F.isOptional)}}
-  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
+  {{yield (hash HelperText=F.HelperText Error=F.Error CharacterCount=F.CharacterCount)}}
   <F.Control>
     <div class="hds-form-text-input__wrapper" {{style width=@width}}>
       <Hds::Form::TextInput::Base

package/addon/components/hds/form/textarea/field.hbs

@@ -12,7 +12,7 @@
 >
   {{! Notice: the order of the elements is not relevant here, because is controlled at "Hds::Form::Field" component level }}
   {{yield (hash Label=F.Label isRequired=F.isRequired isOptional=F.isOptional)}}
-  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
+  {{yield (hash HelperText=F.HelperText Error=F.Error CharacterCount=F.CharacterCount)}}
   <F.Control>
     <Hds::Form::Textarea::Base
       @value={{@value}}

package/addon/components/hds/link/standalone.hbs

@@ -11,18 +11,18 @@
   ...attributes
 >
   {{#if (eq this.iconPosition "leading")}}
-    <div class="hds-link-standalone__icon">
+    <span class="hds-link-standalone__icon">
       <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-    </div>
-    <div class="hds-link-standalone__text">
+    </span>
+    <span class="hds-link-standalone__text">
       {{this.text}}
-    </div>
+    </span>
   {{else}}
-    <div class="hds-link-standalone__text">
+    <span class="hds-link-standalone__text">
       {{this.text}}
-    </div>
-    <div class="hds-link-standalone__icon">
+    </span>
+    <span class="hds-link-standalone__icon">
       <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-    </div>
+    </span>
   {{/if}}
 </Hds::Interactive>

package/addon/components/hds/table/index.hbs

@@ -22,7 +22,11 @@
               {{column.label}}
             </Hds::Table::ThSort>
           {{else}}
-            <Hds::Table::Th @align={{column.align}} @width={{column.width}}>{{column.label}}</Hds::Table::Th>
+            <Hds::Table::Th
+              @align={{column.align}}
+              @width={{column.width}}
+              @isVisuallyHidden={{column.isVisuallyHidden}}
+            >{{column.label}}</Hds::Table::Th>
           {{/if}}
         {{/each}}
       </Hds::Table::Tr>

package/addon/components/hds/table/th.hbs

@@ -3,5 +3,9 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 <th class={{this.classNames}} {{style width=@width minWidth=@width}} ...attributes scope={{(or @scope "col")}}>
-  {{yield}}
+  {{#if @isVisuallyHidden}}
+    <span class="sr-only">{{yield}}</span>
+  {{else}}
+    {{yield}}
+  {{/if}}
 </th>

package/app/components/hds/{avatar → form/character-count}/index.js

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-export { default } from '@hashicorp/design-system-components/components/hds/avatar/index';
+export { default } from '@hashicorp/design-system-components/components/hds/form/character-count/index';

package/app/styles/@hashicorp/design-system-components.scss

@@ -17,7 +17,6 @@
 @use "../components/app-footer";
 @use "../components/app-frame";
 @use "../components/application-state";
-@use "../components/avatar";
 @use "../components/badge";
 @use "../components/badge-count";
 @use "../components/breadcrumb";

package/app/styles/components/button.scss

@@ -62,7 +62,12 @@
   }
 }
 
+.hds-button__icon {
+  display: block;
+}
+
 .hds-button__text {
+  display: block;
   flex: 1 0 0;
   // <button> and <a> elements have different intrinsic text alignments, so we need to normalize it
   text-align: center;

package/app/styles/components/dropdown.scss

@@ -409,11 +409,13 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
 }
 
 .hds-dropdown-list-item__interactive-icon {
+  display: block;
   margin-top: 2px;
   margin-right: 8px;
 }
 
 .hds-dropdown-list-item__interactive-text {
+  display: block;
   flex: 1;
   text-align: left; // the button element was centering text
 }

package/app/styles/components/form/character-count.scss

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// FORM > CHARACTER-COUNT
+//
+
+.hds-form-character-count {
+  color: var(--token-form-helper-text-color);
+}

package/app/styles/components/form/field.scss

@@ -43,6 +43,10 @@
       margin-bottom: 8px;
     }
   }
+
+  .hds-form-field__character-count {
+    margin-bottom: 8px;
+  }
 }
 
 

package/app/styles/components/form/index.scss

@@ -9,6 +9,7 @@
 
 @use "./label";
 @use "./helper-text";
+@use "./character-count";
 @use "./error";
 @use "./field";
 @use "./file-input";

package/app/styles/components/link/standalone.scss

@@ -31,7 +31,12 @@ $hds-link-standalone-border-width: 1px;
   text-decoration-color: transparent;
 }
 
+.hds-link-standalone__icon {
+  display: block;
+}
+
 .hds-link-standalone__text {
+  display: block;
   flex: 1 0 0;
   text-decoration: underline;
   text-decoration-color: transparent;

package/app/styles/components/side-nav/toggle-button.scss

@@ -16,7 +16,7 @@
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
-  width: 26px;
+  width: var(--hds-app-sidenav-toggle-button-width);
   height: 36px;
   padding: 0 4px;
   color: var(--token-color-foreground-high-contrast);

package/app/styles/components/side-nav/vars.scss

@@ -23,6 +23,8 @@
   --hds-app-sidenav-animation-duration: 200ms;
   --hds-app-sidenav-animation-delay: var(--hds-app-sidenav-animation-duration);
   --hds-app-sidenav-animation-easing: cubic-bezier(0.65, 0, 0.35, 1);
+  // toggle-button
+  --hds-app-sidenav-toggle-button-width: 24px;
 }
 
 // reduced motion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "3.1.2",
+  "version": "3.3.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -44,7 +44,7 @@
     "@ember/string": "^3.1.1",
     "@ember/test-waiters": "^3.1.0",
     "@hashicorp/design-system-tokens": "^1.9.0",
-    "@hashicorp/ember-flight-icons": "^4.0.3",
+    "@hashicorp/ember-flight-icons": "^4.0.4",
     "dialog-polyfill": "^0.5.6",
     "ember-a11y-refocus": "^3.0.2",
     "ember-auto-import": "^2.6.3",
@@ -118,7 +118,7 @@
     "sinon": "^17.0.0",
     "stylelint": "^15.11.0",
     "stylelint-config-rational-order": "^0.1.2",
-    "stylelint-config-standard-scss": "^5.0.0",
+    "stylelint-config-standard-scss": "^11.1.0",
     "typescript": "^5.2.2",
     "webpack": "^5.89.0"
   },

package/addon/components/hds/avatar/index.hbs

@@ -1,11 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<div class="hds-avatar" ...attributes aria-hidden="true">
-  {{#if @src}}
-    <img src={{@src}} alt="" role="none" />
-  {{else}}
-    <FlightIcon @name="user-circle" @size="24" />
-  {{/if}}
-</div>

package/app/styles/components/avatar.scss

@@ -1,27 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-//
-// AVATAR COMPONENT
-//
-
-.hds-avatar {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  width: 32px;
-  height: 32px;
-
-  img {
-    width: inherit;
-    height: inherit;
-    border-radius: 2px;
-  }
-
-  svg {
-    display: inline-block;
-  }
-}