Update sub components naming

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

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;
 }

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%;

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;
 }

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%;

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%;

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);

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>
     );
   },

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;
 }

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>
     );
   },

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;
 }

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;

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>
       )}

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);

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>
         )}