npm - @hashicorp/design-system-components - Versions diffs - 3.2.0 → 3.3.0 - Mend

@hashicorp/design-system-components 3.2.0 → 3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,30 +1,56 @@
 # @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>[#1834](https://github.com/hashicorp/design-system/pull/1834)</small>
+<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>[#1819](https://github.com/hashicorp/design-system/pull/1819)</small>
+<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>[#1807](https://github.com/hashicorp/design-system/pull/1807)</small>
+<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:**
@@ -36,21 +62,21 @@
 `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
@@ -58,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:**
@@ -72,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
@@ -86,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:
@@ -103,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:**
@@ -123,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
@@ -141,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
@@ -157,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).
@@ -169,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`).
@@ -179,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.
@@ -192,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
@@ -202,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.
@@ -219,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))
@@ -240,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).
@@ -282,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:**
@@ -304,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._
@@ -320,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
@@ -334,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
@@ -342,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:
@@ -352,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
@@ -360,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:**
@@ -392,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:**
@@ -412,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
@@ -426,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:**
@@ -465,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:**
@@ -503,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:**
@@ -559,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 CHANGED Viewed

@@ -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/dropdown/list-item/checkmark.hbs CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/app/components/hds/form/character-count/index.js ADDED Viewed

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+export { default } from '@hashicorp/design-system-components/components/hds/form/character-count/index';

package/app/styles/components/button.scss CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",