From 62443c60e819a49ba55e25ed681db25730f117e0 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 14 Apr 2025 11:42:38 +0200
Subject: [PATCH] Update sub components naming

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/css/button.css                 |  4 +-
 packages/canon/css/components.css             | 80 +++++++++----------
 packages/canon/css/iconbutton.css             |  4 +-
 packages/canon/css/select.css                 | 48 +++++------
 packages/canon/css/styles.css                 | 80 +++++++++----------
 packages/canon/css/textfield.css              | 24 +++---
 .../canon/src/components/Button/Button.tsx    |  4 +-
 .../canon/src/components/Button/styles.css    |  4 +-
 .../src/components/IconButton/IconButton.tsx  |  2 +-
 .../src/components/IconButton/styles.css      |  4 +-
 .../src/components/Select/Select.styles.css   | 52 ++++++------
 .../canon/src/components/Select/Select.tsx    | 22 ++---
 .../components/TextField/TextField.styles.css | 24 +++---
 .../src/components/TextField/TextField.tsx    | 10 +--
 14 files changed, 181 insertions(+), 181 deletions(-)

diff --git a/packages/canon/css/button.css b/packages/canon/css/button.css
index ccfc3b48f5..eb0c44ce1b 100644
--- a/packages/canon/css/button.css
+++ b/packages/canon/css/button.css
@@ -78,12 +78,12 @@
   height: 32px;
 }
 
-.canon-Button[data-size="small"] .canon-Button--icon {
+.canon-Button[data-size="small"] .canon-ButtonIcon {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-Button[data-size="medium"] .canon-Button--icon {
+.canon-Button[data-size="medium"] .canon-ButtonIcon {
   width: 1.5rem;
   height: 1.5rem;
 }
diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css
index 216f38c968..5139e45c22 100644
--- a/packages/canon/css/components.css
+++ b/packages/canon/css/components.css
@@ -84,12 +84,12 @@
   height: 32px;
 }
 
-.canon-Button[data-size="small"] .canon-Button--icon {
+.canon-Button[data-size="small"] .canon-ButtonIcon {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-Button[data-size="medium"] .canon-Button--icon {
+.canon-Button[data-size="medium"] .canon-ButtonIcon {
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -410,12 +410,12 @@
   height: 32px;
 }
 
-.canon-IconButton[data-size="small"] .canon-IconButton--icon {
+.canon-IconButton[data-size="small"] .canon-IconButtonIcon {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-IconButton[data-size="medium"] .canon-IconButton--icon {
+.canon-IconButton[data-size="medium"] .canon-IconButtonIcon {
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -427,14 +427,14 @@
   display: flex;
 }
 
-.canon-TextField--label {
+.canon-TextFieldLabel {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
 }
 
-.canon-TextField--description {
+.canon-TextFieldDescription {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-secondary);
@@ -442,7 +442,7 @@
   margin: 0;
 }
 
-.canon-TextField--error {
+.canon-TextFieldError {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-danger);
@@ -450,7 +450,7 @@
   margin: 0;
 }
 
-.canon-TextField--input {
+.canon-TextFieldInput {
   border-radius: var(--canon-radius-3);
   border: 1px solid var(--canon-border);
   padding: 0 var(--canon-space-4);
@@ -463,39 +463,39 @@
   transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
 }
 
-.canon-TextField--input::placeholder {
+.canon-TextFieldInput::placeholder {
   color: var(--canon-fg-secondary);
 }
 
-.canon-TextField--input:hover {
+.canon-TextFieldInput:hover {
   border-color: var(--canon-border-hover);
 }
 
-.canon-TextField--input:focus-visible {
+.canon-TextFieldInput:focus-visible {
   outline-color: var(--canon-border-pressed);
   border-color: var(--canon-border-pressed);
   outline-width: 0;
 }
 
-.canon-TextField--input[data-invalid] {
+.canon-TextFieldInput[data-invalid] {
   border-color: var(--canon-fg-danger);
 }
 
-.canon-TextField--input[data-disabled] {
+.canon-TextFieldInput[data-disabled] {
   opacity: .5;
   cursor: not-allowed;
   border: 1px solid var(--canon-border-disabled);
 }
 
-.canon-TextField--input[data-size="small"] {
+.canon-TextFieldInput[data-size="small"] {
   height: 2rem;
 }
 
-.canon-TextField--input[data-size="medium"] {
+.canon-TextFieldInput[data-size="medium"] {
   height: 2.5rem;
 }
 
-.canon-TextField--required {
+.canon-TextFieldRequired {
   color: var(--canon-fg-secondary);
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
@@ -720,14 +720,14 @@
   display: flex;
 }
 
-.canon-Select--label {
+.canon-SelectLabel {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
 }
 
-.canon-Select--description {
+.canon-SelectDescription {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-secondary);
@@ -735,7 +735,7 @@
   margin: 0;
 }
 
-.canon-Select--error {
+.canon-SelectError {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-danger);
@@ -743,7 +743,7 @@
   margin: 0;
 }
 
-.canon-Select--trigger {
+.canon-SelectTrigger {
   box-sizing: border-box;
   border-radius: var(--canon-radius-3);
   border: 1px solid var(--canon-border);
@@ -762,38 +762,38 @@
   display: flex;
 }
 
-.canon-Select--trigger::placeholder {
+.canon-SelectTrigger::placeholder {
   color: var(--canon-fg-secondary);
 }
 
-.canon-Select--trigger:hover {
+.canon-SelectTrigger:hover {
   border-color: var(--canon-border-hover);
 }
 
-.canon-Select--trigger:focus-visible {
+.canon-SelectTrigger:focus-visible {
   border-color: var(--canon-border-pressed);
   outline: 0;
 }
 
-.canon-Select--trigger[data-invalid] {
+.canon-SelectTrigger[data-invalid] {
   border-color: var(--canon-fg-danger);
 }
 
-.canon-Select--trigger[data-invalid]:hover, .canon-Select--trigger[data-invalid]:focus-visible {
+.canon-SelectTrigger[data-invalid]:hover, .canon-SelectTrigger[data-invalid]:focus-visible {
   border-width: 2px;
 }
 
-.canon-Select--trigger[data-disabled] {
+.canon-SelectTrigger[data-disabled] {
   cursor: not-allowed;
   border-color: var(--canon-border-disabled);
   color: var(--canon-fg-disabled);
 }
 
-.canon-Select--trigger[data-size="small"] {
+.canon-SelectTrigger[data-size="small"] {
   height: 2rem;
 }
 
-.canon-Select--trigger[data-size="medium"] {
+.canon-SelectTrigger[data-size="medium"] {
   height: 3rem;
 }
 
@@ -802,11 +802,11 @@
   transition: transform .2s;
 }
 
-.canon-Select--trigger[data-popup-open] .canon-SelectIcon {
+.canon-SelectTrigger[data-popup-open] .canon-SelectIcon {
   transform: rotate(180deg);
 }
 
-.canon-Select--popup {
+.canon-SelectPopup {
   box-sizing: border-box;
   max-height: var(--available-height);
   background-color: var(--canon-bg-surface-1);
@@ -821,12 +821,12 @@
   box-shadow: 0 4px 12px #0003;
 }
 
-.canon-Select--popup[data-starting-style], .canon-Select--popup[data-ending-style] {
+.canon-SelectPopup[data-starting-style], .canon-SelectPopup[data-ending-style] {
   opacity: 0;
   transform: scale(.9);
 }
 
-.canon-Select--item {
+.canon-SelectItem {
   width: var(--anchor-width);
   padding-block: var(--canon-space-2);
   padding-inline: var(--canon-space-4);
@@ -844,13 +844,13 @@
   position: relative;
 }
 
-.canon-Select--item[data-highlighted] {
+.canon-SelectItem[data-highlighted] {
   z-index: 0;
   color: var(--canon-fg-primary);
   position: relative;
 }
 
-.canon-Select--item[data-highlighted]:before {
+.canon-SelectItem[data-highlighted]:before {
   content: "";
   z-index: -1;
   background-color: var(--canon-bg-tint-hover);
@@ -860,37 +860,37 @@
   inset-inline: .25rem;
 }
 
-.canon-Select--item[data-disabled] {
+.canon-SelectItem[data-disabled] {
   cursor: not-allowed;
   color: var(--canon-fg-disabled);
 }
 
-.canon-Select--item-indicator {
+.canon-SelectItemIndicator {
   grid-area: icon;
   justify-content: center;
   align-items: center;
   display: flex;
 }
 
-.canon-Select--item-text {
+.canon-SelectItemText {
   flex: 1;
   grid-area: text;
 }
 
-.canon-Select--required {
+.canon-SelectRequired {
   color: var(--canon-fg-secondary);
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   margin-left: var(--canon-space-1);
 }
 
-.canon-Select--icon {
+.canon-SelectIcon {
   justify-content: center;
   align-items: center;
   display: flex;
 }
 
-.canon-Select--value {
+.canon-SelectValue {
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 100%;
diff --git a/packages/canon/css/iconbutton.css b/packages/canon/css/iconbutton.css
index da38b40ba1..e867a1848e 100644
--- a/packages/canon/css/iconbutton.css
+++ b/packages/canon/css/iconbutton.css
@@ -78,12 +78,12 @@
   height: 32px;
 }
 
-.canon-IconButton[data-size="small"] .canon-IconButton--icon {
+.canon-IconButton[data-size="small"] .canon-IconButtonIcon {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-IconButton[data-size="medium"] .canon-IconButton--icon {
+.canon-IconButton[data-size="medium"] .canon-IconButtonIcon {
   width: 1.5rem;
   height: 1.5rem;
 }
diff --git a/packages/canon/css/select.css b/packages/canon/css/select.css
index 3c37952afd..cf8c05622b 100644
--- a/packages/canon/css/select.css
+++ b/packages/canon/css/select.css
@@ -5,14 +5,14 @@
   display: flex;
 }
 
-.canon-Select--label {
+.canon-SelectLabel {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
 }
 
-.canon-Select--description {
+.canon-SelectDescription {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-secondary);
@@ -20,7 +20,7 @@
   margin: 0;
 }
 
-.canon-Select--error {
+.canon-SelectError {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-danger);
@@ -28,7 +28,7 @@
   margin: 0;
 }
 
-.canon-Select--trigger {
+.canon-SelectTrigger {
   box-sizing: border-box;
   border-radius: var(--canon-radius-3);
   border: 1px solid var(--canon-border);
@@ -47,38 +47,38 @@
   display: flex;
 }
 
-.canon-Select--trigger::placeholder {
+.canon-SelectTrigger::placeholder {
   color: var(--canon-fg-secondary);
 }
 
-.canon-Select--trigger:hover {
+.canon-SelectTrigger:hover {
   border-color: var(--canon-border-hover);
 }
 
-.canon-Select--trigger:focus-visible {
+.canon-SelectTrigger:focus-visible {
   border-color: var(--canon-border-pressed);
   outline: 0;
 }
 
-.canon-Select--trigger[data-invalid] {
+.canon-SelectTrigger[data-invalid] {
   border-color: var(--canon-fg-danger);
 }
 
-.canon-Select--trigger[data-invalid]:hover, .canon-Select--trigger[data-invalid]:focus-visible {
+.canon-SelectTrigger[data-invalid]:hover, .canon-SelectTrigger[data-invalid]:focus-visible {
   border-width: 2px;
 }
 
-.canon-Select--trigger[data-disabled] {
+.canon-SelectTrigger[data-disabled] {
   cursor: not-allowed;
   border-color: var(--canon-border-disabled);
   color: var(--canon-fg-disabled);
 }
 
-.canon-Select--trigger[data-size="small"] {
+.canon-SelectTrigger[data-size="small"] {
   height: 2rem;
 }
 
-.canon-Select--trigger[data-size="medium"] {
+.canon-SelectTrigger[data-size="medium"] {
   height: 3rem;
 }
 
@@ -87,11 +87,11 @@
   transition: transform .2s;
 }
 
-.canon-Select--trigger[data-popup-open] .canon-SelectIcon {
+.canon-SelectTrigger[data-popup-open] .canon-SelectIcon {
   transform: rotate(180deg);
 }
 
-.canon-Select--popup {
+.canon-SelectPopup {
   box-sizing: border-box;
   max-height: var(--available-height);
   background-color: var(--canon-bg-surface-1);
@@ -106,12 +106,12 @@
   box-shadow: 0 4px 12px #0003;
 }
 
-.canon-Select--popup[data-starting-style], .canon-Select--popup[data-ending-style] {
+.canon-SelectPopup[data-starting-style], .canon-SelectPopup[data-ending-style] {
   opacity: 0;
   transform: scale(.9);
 }
 
-.canon-Select--item {
+.canon-SelectItem {
   width: var(--anchor-width);
   padding-block: var(--canon-space-2);
   padding-inline: var(--canon-space-4);
@@ -129,13 +129,13 @@
   position: relative;
 }
 
-.canon-Select--item[data-highlighted] {
+.canon-SelectItem[data-highlighted] {
   z-index: 0;
   color: var(--canon-fg-primary);
   position: relative;
 }
 
-.canon-Select--item[data-highlighted]:before {
+.canon-SelectItem[data-highlighted]:before {
   content: "";
   z-index: -1;
   background-color: var(--canon-bg-tint-hover);
@@ -145,37 +145,37 @@
   inset-inline: .25rem;
 }
 
-.canon-Select--item[data-disabled] {
+.canon-SelectItem[data-disabled] {
   cursor: not-allowed;
   color: var(--canon-fg-disabled);
 }
 
-.canon-Select--item-indicator {
+.canon-SelectItemIndicator {
   grid-area: icon;
   justify-content: center;
   align-items: center;
   display: flex;
 }
 
-.canon-Select--item-text {
+.canon-SelectItemText {
   flex: 1;
   grid-area: text;
 }
 
-.canon-Select--required {
+.canon-SelectRequired {
   color: var(--canon-fg-secondary);
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   margin-left: var(--canon-space-1);
 }
 
-.canon-Select--icon {
+.canon-SelectIcon {
   justify-content: center;
   align-items: center;
   display: flex;
 }
 
-.canon-Select--value {
+.canon-SelectValue {
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 100%;
diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css
index e4375692f9..8af66d68fa 100644
--- a/packages/canon/css/styles.css
+++ b/packages/canon/css/styles.css
@@ -9308,12 +9308,12 @@
   height: 32px;
 }
 
-.canon-Button[data-size="small"] .canon-Button--icon {
+.canon-Button[data-size="small"] .canon-ButtonIcon {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-Button[data-size="medium"] .canon-Button--icon {
+.canon-Button[data-size="medium"] .canon-ButtonIcon {
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -9634,12 +9634,12 @@
   height: 32px;
 }
 
-.canon-IconButton[data-size="small"] .canon-IconButton--icon {
+.canon-IconButton[data-size="small"] .canon-IconButtonIcon {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-IconButton[data-size="medium"] .canon-IconButton--icon {
+.canon-IconButton[data-size="medium"] .canon-IconButtonIcon {
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -9651,14 +9651,14 @@
   display: flex;
 }
 
-.canon-TextField--label {
+.canon-TextFieldLabel {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
 }
 
-.canon-TextField--description {
+.canon-TextFieldDescription {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-secondary);
@@ -9666,7 +9666,7 @@
   margin: 0;
 }
 
-.canon-TextField--error {
+.canon-TextFieldError {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-danger);
@@ -9674,7 +9674,7 @@
   margin: 0;
 }
 
-.canon-TextField--input {
+.canon-TextFieldInput {
   border-radius: var(--canon-radius-3);
   border: 1px solid var(--canon-border);
   padding: 0 var(--canon-space-4);
@@ -9687,39 +9687,39 @@
   transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
 }
 
-.canon-TextField--input::placeholder {
+.canon-TextFieldInput::placeholder {
   color: var(--canon-fg-secondary);
 }
 
-.canon-TextField--input:hover {
+.canon-TextFieldInput:hover {
   border-color: var(--canon-border-hover);
 }
 
-.canon-TextField--input:focus-visible {
+.canon-TextFieldInput:focus-visible {
   outline-color: var(--canon-border-pressed);
   border-color: var(--canon-border-pressed);
   outline-width: 0;
 }
 
-.canon-TextField--input[data-invalid] {
+.canon-TextFieldInput[data-invalid] {
   border-color: var(--canon-fg-danger);
 }
 
-.canon-TextField--input[data-disabled] {
+.canon-TextFieldInput[data-disabled] {
   opacity: .5;
   cursor: not-allowed;
   border: 1px solid var(--canon-border-disabled);
 }
 
-.canon-TextField--input[data-size="small"] {
+.canon-TextFieldInput[data-size="small"] {
   height: 2rem;
 }
 
-.canon-TextField--input[data-size="medium"] {
+.canon-TextFieldInput[data-size="medium"] {
   height: 2.5rem;
 }
 
-.canon-TextField--required {
+.canon-TextFieldRequired {
   color: var(--canon-fg-secondary);
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
@@ -9944,14 +9944,14 @@
   display: flex;
 }
 
-.canon-Select--label {
+.canon-SelectLabel {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
 }
 
-.canon-Select--description {
+.canon-SelectDescription {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-secondary);
@@ -9959,7 +9959,7 @@
   margin: 0;
 }
 
-.canon-Select--error {
+.canon-SelectError {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-danger);
@@ -9967,7 +9967,7 @@
   margin: 0;
 }
 
-.canon-Select--trigger {
+.canon-SelectTrigger {
   box-sizing: border-box;
   border-radius: var(--canon-radius-3);
   border: 1px solid var(--canon-border);
@@ -9986,38 +9986,38 @@
   display: flex;
 }
 
-.canon-Select--trigger::placeholder {
+.canon-SelectTrigger::placeholder {
   color: var(--canon-fg-secondary);
 }
 
-.canon-Select--trigger:hover {
+.canon-SelectTrigger:hover {
   border-color: var(--canon-border-hover);
 }
 
-.canon-Select--trigger:focus-visible {
+.canon-SelectTrigger:focus-visible {
   border-color: var(--canon-border-pressed);
   outline: 0;
 }
 
-.canon-Select--trigger[data-invalid] {
+.canon-SelectTrigger[data-invalid] {
   border-color: var(--canon-fg-danger);
 }
 
-.canon-Select--trigger[data-invalid]:hover, .canon-Select--trigger[data-invalid]:focus-visible {
+.canon-SelectTrigger[data-invalid]:hover, .canon-SelectTrigger[data-invalid]:focus-visible {
   border-width: 2px;
 }
 
-.canon-Select--trigger[data-disabled] {
+.canon-SelectTrigger[data-disabled] {
   cursor: not-allowed;
   border-color: var(--canon-border-disabled);
   color: var(--canon-fg-disabled);
 }
 
-.canon-Select--trigger[data-size="small"] {
+.canon-SelectTrigger[data-size="small"] {
   height: 2rem;
 }
 
-.canon-Select--trigger[data-size="medium"] {
+.canon-SelectTrigger[data-size="medium"] {
   height: 3rem;
 }
 
@@ -10026,11 +10026,11 @@
   transition: transform .2s;
 }
 
-.canon-Select--trigger[data-popup-open] .canon-SelectIcon {
+.canon-SelectTrigger[data-popup-open] .canon-SelectIcon {
   transform: rotate(180deg);
 }
 
-.canon-Select--popup {
+.canon-SelectPopup {
   box-sizing: border-box;
   max-height: var(--available-height);
   background-color: var(--canon-bg-surface-1);
@@ -10045,12 +10045,12 @@
   box-shadow: 0 4px 12px #0003;
 }
 
-.canon-Select--popup[data-starting-style], .canon-Select--popup[data-ending-style] {
+.canon-SelectPopup[data-starting-style], .canon-SelectPopup[data-ending-style] {
   opacity: 0;
   transform: scale(.9);
 }
 
-.canon-Select--item {
+.canon-SelectItem {
   width: var(--anchor-width);
   padding-block: var(--canon-space-2);
   padding-inline: var(--canon-space-4);
@@ -10068,13 +10068,13 @@
   position: relative;
 }
 
-.canon-Select--item[data-highlighted] {
+.canon-SelectItem[data-highlighted] {
   z-index: 0;
   color: var(--canon-fg-primary);
   position: relative;
 }
 
-.canon-Select--item[data-highlighted]:before {
+.canon-SelectItem[data-highlighted]:before {
   content: "";
   z-index: -1;
   background-color: var(--canon-bg-tint-hover);
@@ -10084,37 +10084,37 @@
   inset-inline: .25rem;
 }
 
-.canon-Select--item[data-disabled] {
+.canon-SelectItem[data-disabled] {
   cursor: not-allowed;
   color: var(--canon-fg-disabled);
 }
 
-.canon-Select--item-indicator {
+.canon-SelectItemIndicator {
   grid-area: icon;
   justify-content: center;
   align-items: center;
   display: flex;
 }
 
-.canon-Select--item-text {
+.canon-SelectItemText {
   flex: 1;
   grid-area: text;
 }
 
-.canon-Select--required {
+.canon-SelectRequired {
   color: var(--canon-fg-secondary);
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   margin-left: var(--canon-space-1);
 }
 
-.canon-Select--icon {
+.canon-SelectIcon {
   justify-content: center;
   align-items: center;
   display: flex;
 }
 
-.canon-Select--value {
+.canon-SelectValue {
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 100%;
diff --git a/packages/canon/css/textfield.css b/packages/canon/css/textfield.css
index eb43b1f77f..bf21b3bd74 100644
--- a/packages/canon/css/textfield.css
+++ b/packages/canon/css/textfield.css
@@ -5,14 +5,14 @@
   display: flex;
 }
 
-.canon-TextField--label {
+.canon-TextFieldLabel {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
 }
 
-.canon-TextField--description {
+.canon-TextFieldDescription {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-secondary);
@@ -20,7 +20,7 @@
   margin: 0;
 }
 
-.canon-TextField--error {
+.canon-TextFieldError {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-danger);
@@ -28,7 +28,7 @@
   margin: 0;
 }
 
-.canon-TextField--input {
+.canon-TextFieldInput {
   border-radius: var(--canon-radius-3);
   border: 1px solid var(--canon-border);
   padding: 0 var(--canon-space-4);
@@ -41,39 +41,39 @@
   transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
 }
 
-.canon-TextField--input::placeholder {
+.canon-TextFieldInput::placeholder {
   color: var(--canon-fg-secondary);
 }
 
-.canon-TextField--input:hover {
+.canon-TextFieldInput:hover {
   border-color: var(--canon-border-hover);
 }
 
-.canon-TextField--input:focus-visible {
+.canon-TextFieldInput:focus-visible {
   outline-color: var(--canon-border-pressed);
   border-color: var(--canon-border-pressed);
   outline-width: 0;
 }
 
-.canon-TextField--input[data-invalid] {
+.canon-TextFieldInput[data-invalid] {
   border-color: var(--canon-fg-danger);
 }
 
-.canon-TextField--input[data-disabled] {
+.canon-TextFieldInput[data-disabled] {
   opacity: .5;
   cursor: not-allowed;
   border: 1px solid var(--canon-border-disabled);
 }
 
-.canon-TextField--input[data-size="small"] {
+.canon-TextFieldInput[data-size="small"] {
   height: 2rem;
 }
 
-.canon-TextField--input[data-size="medium"] {
+.canon-TextFieldInput[data-size="medium"] {
   height: 2.5rem;
 }
 
-.canon-TextField--required {
+.canon-TextFieldRequired {
   color: var(--canon-fg-secondary);
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
diff --git a/packages/canon/src/components/Button/Button.tsx b/packages/canon/src/components/Button/Button.tsx
index b9a1229fbd..ca652013b4 100644
--- a/packages/canon/src/components/Button/Button.tsx
+++ b/packages/canon/src/components/Button/Button.tsx
@@ -50,9 +50,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         style={style}
         {...rest}
       >
-        {iconStart && <Icon name={iconStart} className="canon-Button--icon" />}
+        {iconStart && <Icon name={iconStart} className="canon-ButtonIcon" />}
         {children}
-        {iconEnd && <Icon name={iconEnd} className="canon-Button--icon" />}
+        {iconEnd && <Icon name={iconEnd} className="canon-ButtonIcon" />}
       </button>
     );
   },
diff --git a/packages/canon/src/components/Button/styles.css b/packages/canon/src/components/Button/styles.css
index a05a0b3a4f..785fbf3b88 100644
--- a/packages/canon/src/components/Button/styles.css
+++ b/packages/canon/src/components/Button/styles.css
@@ -94,12 +94,12 @@
   height: 32px;
 }
 
-.canon-Button[data-size='small'] .canon-Button--icon {
+.canon-Button[data-size='small'] .canon-ButtonIcon {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-Button[data-size='medium'] .canon-Button--icon {
+.canon-Button[data-size='medium'] .canon-ButtonIcon {
   width: 1.5rem;
   height: 1.5rem;
 }
diff --git a/packages/canon/src/components/IconButton/IconButton.tsx b/packages/canon/src/components/IconButton/IconButton.tsx
index 7e7f94d22e..b2581844bc 100644
--- a/packages/canon/src/components/IconButton/IconButton.tsx
+++ b/packages/canon/src/components/IconButton/IconButton.tsx
@@ -45,7 +45,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
         style={style}
         {...rest}
       >
-        <Icon name={icon} className="canon-IconButton--icon" />
+        <Icon name={icon} className="canon-IconButtonIcon" />
       </button>
     );
   },
diff --git a/packages/canon/src/components/IconButton/styles.css b/packages/canon/src/components/IconButton/styles.css
index 089dd1fcda..859c512fd6 100644
--- a/packages/canon/src/components/IconButton/styles.css
+++ b/packages/canon/src/components/IconButton/styles.css
@@ -94,12 +94,12 @@
   width: 32px;
 }
 
-.canon-IconButton[data-size='small'] .canon-IconButton--icon {
+.canon-IconButton[data-size='small'] .canon-IconButtonIcon {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-IconButton[data-size='medium'] .canon-IconButton--icon {
+.canon-IconButton[data-size='medium'] .canon-IconButtonIcon {
   width: 1.5rem;
   height: 1.5rem;
 }
diff --git a/packages/canon/src/components/Select/Select.styles.css b/packages/canon/src/components/Select/Select.styles.css
index 718636d954..fa00d81302 100644
--- a/packages/canon/src/components/Select/Select.styles.css
+++ b/packages/canon/src/components/Select/Select.styles.css
@@ -21,14 +21,14 @@
   width: 100%;
 }
 
-.canon-Select--label {
+.canon-SelectLabel {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
 }
 
-.canon-Select--description {
+.canon-SelectDescription {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-secondary);
@@ -36,7 +36,7 @@
   padding-top: var(--canon-space-1_5);
 }
 
-.canon-Select--error {
+.canon-SelectError {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-danger);
@@ -44,7 +44,7 @@
   padding-top: var(--canon-space-1_5);
 }
 
-.canon-Select--trigger {
+.canon-SelectTrigger {
   box-sizing: border-box;
   border-radius: var(--canon-radius-3);
   border: 1px solid var(--canon-border);
@@ -63,41 +63,41 @@
   gap: var(--canon-space-2);
 }
 
-.canon-Select--trigger::placeholder {
+.canon-SelectTrigger::placeholder {
   color: var(--canon-fg-secondary);
 }
 
-.canon-Select--trigger:hover {
+.canon-SelectTrigger:hover {
   border-color: var(--canon-border-hover);
 }
 
-.canon-Select--trigger:focus-visible {
+.canon-SelectTrigger:focus-visible {
   border-color: var(--canon-border-pressed);
   outline: 0;
 }
 
-.canon-Select--trigger[data-invalid] {
+.canon-SelectTrigger[data-invalid] {
   border-color: var(--canon-fg-danger);
 }
-.canon-Select--trigger[data-invalid]:hover {
+.canon-SelectTrigger[data-invalid]:hover {
   border-width: 2px;
 }
 
-.canon-Select--trigger[data-invalid]:focus-visible {
+.canon-SelectTrigger[data-invalid]:focus-visible {
   border-width: 2px;
 }
 
-.canon-Select--trigger[data-disabled] {
+.canon-SelectTrigger[data-disabled] {
   cursor: not-allowed;
   border-color: var(--canon-border-disabled);
   color: var(--canon-fg-disabled);
 }
 
-.canon-Select--trigger[data-size='small'] {
+.canon-SelectTrigger[data-size='small'] {
   height: 2rem;
 }
 
-.canon-Select--trigger[data-size='medium'] {
+.canon-SelectTrigger[data-size='medium'] {
   height: 3rem;
 }
 
@@ -106,11 +106,11 @@
   transition: transform 0.2s ease;
 }
 
-.canon-Select--trigger[data-popup-open] .canon-SelectIcon {
+.canon-SelectTrigger[data-popup-open] .canon-SelectIcon {
   transform: rotate(180deg);
 }
 
-.canon-Select--popup {
+.canon-SelectPopup {
   box-sizing: border-box;
   max-height: var(--available-height);
   overflow-y: auto;
@@ -125,13 +125,13 @@
   transition: transform 150ms, opacity 150ms;
 }
 
-.canon-Select--popup[data-starting-style],
-.canon-Select--popup[data-ending-style] {
+.canon-SelectPopup[data-starting-style],
+.canon-SelectPopup[data-ending-style] {
   opacity: 0;
   transform: scale(0.9);
 }
 
-.canon-Select--item {
+.canon-SelectItem {
   position: relative;
   width: var(--anchor-width);
   display: grid;
@@ -149,13 +149,13 @@
   outline: none;
 }
 
-.canon-Select--item[data-highlighted] {
+.canon-SelectItem[data-highlighted] {
   z-index: 0;
   position: relative;
   color: var(--canon-fg-primary);
 }
 
-.canon-Select--item[data-highlighted]::before {
+.canon-SelectItem[data-highlighted]::before {
   content: '';
   z-index: -1;
   position: absolute;
@@ -165,37 +165,37 @@
   background-color: var(--canon-bg-tint-hover);
 }
 
-.canon-Select--item[data-disabled] {
+.canon-SelectItem[data-disabled] {
   cursor: not-allowed;
   color: var(--canon-fg-disabled);
 }
 
-.canon-Select--item-indicator {
+.canon-SelectItemIndicator {
   grid-area: icon;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.canon-Select--item-text {
+.canon-SelectItemText {
   flex: 1;
   grid-area: text;
 }
 
-.canon-Select--required {
+.canon-SelectRequired {
   color: var(--canon-fg-secondary);
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   margin-left: var(--canon-space-1);
 }
 
-.canon-Select--icon {
+.canon-SelectIcon {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.canon-Select--value {
+.canon-SelectValue {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
diff --git a/packages/canon/src/components/Select/Select.tsx b/packages/canon/src/components/Select/Select.tsx
index d8760fc1ea..be8047ca02 100644
--- a/packages/canon/src/components/Select/Select.tsx
+++ b/packages/canon/src/components/Select/Select.tsx
@@ -48,10 +48,10 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
   return (
     <div className={clsx('canon-Select', className)} style={style} ref={ref}>
       {label && (
-        <label className="canon-Select--label" htmlFor={selectId}>
+        <label className="canon-SelectLabel" htmlFor={selectId}>
           {label}
           {required && (
-            <span aria-hidden="true" className="canon-Select--required">
+            <span aria-hidden="true" className="canon-SelectRequired">
               (Required)
             </span>
           )}
@@ -60,33 +60,33 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
       <SelectPrimitive.Root {...rest}>
         <SelectPrimitive.Trigger
           id={selectId}
-          className="canon-Select--trigger"
+          className="canon-SelectTrigger"
           data-size={responsiveSize}
           data-invalid={error}
         >
           <SelectPrimitive.Value
-            className="canon-Select--value"
+            className="canon-SelectValue"
             placeholder={placeholder}
           />
-          <SelectPrimitive.Icon className="canon-Select--icon">
+          <SelectPrimitive.Icon className="canon-SelectIcon">
             <Icon name="chevron-down" />
           </SelectPrimitive.Icon>
         </SelectPrimitive.Trigger>
         <SelectPrimitive.Portal>
           <SelectPrimitive.Backdrop />
           <SelectPrimitive.Positioner>
-            <SelectPrimitive.Popup className="canon-Select--popup">
+            <SelectPrimitive.Popup className="canon-SelectPopup">
               {options?.map(option => (
                 <SelectPrimitive.Item
                   key={option.value}
                   value={option.value}
                   disabled={option.disabled}
-                  className="canon-Select--item"
+                  className="canon-SelectItem"
                 >
-                  <SelectPrimitive.ItemIndicator className="canon-Select--item-indicator">
+                  <SelectPrimitive.ItemIndicator className="canon-SelectItemIndicator">
                     <Icon name="check" />
                   </SelectPrimitive.ItemIndicator>
-                  <SelectPrimitive.ItemText className="canon-Select--item-text">
+                  <SelectPrimitive.ItemText className="canon-SelectItemText">
                     {option.label}
                   </SelectPrimitive.ItemText>
                 </SelectPrimitive.Item>
@@ -96,12 +96,12 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
         </SelectPrimitive.Portal>
       </SelectPrimitive.Root>
       {description && (
-        <p className="canon-Select--description" id={descriptionId}>
+        <p className="canon-SelectDescription" id={descriptionId}>
           {description}
         </p>
       )}
       {error && (
-        <p className="canon-Select--error" id={errorId} role="alert">
+        <p className="canon-SelectError" id={errorId} role="alert">
           {error}
         </p>
       )}
diff --git a/packages/canon/src/components/TextField/TextField.styles.css b/packages/canon/src/components/TextField/TextField.styles.css
index 63a8b749ce..e2c843f166 100644
--- a/packages/canon/src/components/TextField/TextField.styles.css
+++ b/packages/canon/src/components/TextField/TextField.styles.css
@@ -21,14 +21,14 @@
   width: 100%;
 }
 
-.canon-TextField--label {
+.canon-TextFieldLabel {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
 }
 
-.canon-TextField--description {
+.canon-TextFieldDescription {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-secondary);
@@ -36,7 +36,7 @@
   padding-top: var(--canon-space-1_5);
 }
 
-.canon-TextField--error {
+.canon-TextFieldError {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-danger);
@@ -44,7 +44,7 @@
   padding-top: var(--canon-space-1_5);
 }
 
-.canon-TextField--input {
+.canon-TextFieldInput {
   border-radius: var(--canon-radius-3);
   border: 1px solid var(--canon-border);
   padding: 0 var(--canon-space-4);
@@ -57,39 +57,39 @@
   width: 100%;
 }
 
-.canon-TextField--input::placeholder {
+.canon-TextFieldInput::placeholder {
   color: var(--canon-fg-secondary);
 }
 
-.canon-TextField--input:hover {
+.canon-TextFieldInput:hover {
   border-color: var(--canon-border-hover);
 }
 
-.canon-TextField--input:focus-visible {
+.canon-TextFieldInput:focus-visible {
   outline-color: var(--canon-border-pressed);
   outline-width: 0px;
   border-color: var(--canon-border-pressed);
 }
 
-.canon-TextField--input[data-invalid] {
+.canon-TextFieldInput[data-invalid] {
   border-color: var(--canon-fg-danger);
 }
 
-.canon-TextField--input[data-disabled] {
+.canon-TextFieldInput[data-disabled] {
   opacity: 0.5;
   cursor: not-allowed;
   border: 1px solid var(--canon-border-disabled);
 }
 
-.canon-TextField--input[data-size='small'] {
+.canon-TextFieldInput[data-size='small'] {
   height: 2rem;
 }
 
-.canon-TextField--input[data-size='medium'] {
+.canon-TextFieldInput[data-size='medium'] {
   height: 2.5rem;
 }
 
-.canon-TextField--required {
+.canon-TextFieldRequired {
   color: var(--canon-fg-secondary);
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
diff --git a/packages/canon/src/components/TextField/TextField.tsx b/packages/canon/src/components/TextField/TextField.tsx
index cf33267c9a..63c7e21435 100644
--- a/packages/canon/src/components/TextField/TextField.tsx
+++ b/packages/canon/src/components/TextField/TextField.tsx
@@ -50,10 +50,10 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
         ref={ref}
       >
         {label && (
-          <label className="canon-TextField--label" htmlFor={inputId}>
+          <label className="canon-TextFieldLabel" htmlFor={inputId}>
             {label}
             {required && (
-              <span aria-hidden="true" className="canon-TextField--required">
+              <span aria-hidden="true" className="canon-TextFieldRequired">
                 (Required)
               </span>
             )}
@@ -61,7 +61,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
         )}
         <Input
           id={inputId}
-          className="canon-TextField--input"
+          className="canon-TextFieldInput"
           data-size={responsiveSize}
           aria-labelledby={label ? inputId : undefined}
           aria-describedby={clsx({
@@ -73,12 +73,12 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
           {...rest}
         />
         {description && (
-          <p className="canon-TextField--description" id={descriptionId}>
+          <p className="canon-TextFieldDescription" id={descriptionId}>
             {description}
           </p>
         )}
         {error && (
-          <p className="canon-TextField--error" id={errorId} role="alert">
+          <p className="canon-TextFieldError" id={errorId} role="alert">
             {error}
           </p>
         )}