Remove sl-prefix from classes

src/components/alert/alert.scss

@@ -9,7 +9,7 @@
   }
 }
 
-.sl-alert {
+.alert {
   position: relative;
   display: flex;
   align-items: stretch;
@@ -26,11 +26,11 @@
   transition: var(--sl-transition-medium) opacity ease;
 }
 
-.sl-alert--open {
+.alert--open {
   opacity: 1;
 }
 
-.sl-alert__icon {
+.alert__icon {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
@@ -41,53 +41,53 @@
   }
 }
 
-.sl-alert--primary {
+.alert--primary {
   border-top-color: var(--sl-color-primary-50);
 
-  .sl-alert__icon {
+  .alert__icon {
     color: var(--sl-color-primary-50);
   }
 }
 
-.sl-alert--success {
+.alert--success {
   border-top-color: var(--sl-color-success-50);
 
-  .sl-alert__icon {
+  .alert__icon {
     color: var(--sl-color-success-50);
   }
 }
 
-.sl-alert--info {
+.alert--info {
   border-top-color: var(--sl-color-info-50);
 
-  .sl-alert__icon {
+  .alert__icon {
     color: var(--sl-color-info-50);
   }
 }
 
-.sl-alert--warning {
+.alert--warning {
   border-top-color: var(--sl-color-warning-50);
 
-  .sl-alert__icon {
+  .alert__icon {
     color: var(--sl-color-warning-50);
   }
 }
 
-.sl-alert--danger {
+.alert--danger {
   border-top-color: var(--sl-color-danger-50);
 
-  .sl-alert__icon {
+  .alert__icon {
     color: var(--sl-color-danger-50);
   }
 }
 
-.sl-alert__message {
+.alert__message {
   flex: 1 1 auto;
   padding: var(--sl-spacing-large);
   overflow: hidden;
 }
 
-.sl-alert__close {
+.alert__close {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
@@ -114,7 +114,7 @@
   }
 }
 
-.sl-alert--using-keyboard .sl-alert__close:focus {
+.alert--using-keyboard .alert__close:focus {
   box-shadow: 0 0 0 var(--sl-focus-ring-width)
     hsla(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%, var(--sl-focus-ring-alpha));
 }

src/components/alert/alert.tsx

@@ -118,32 +118,32 @@ export class Tab {
         <div
           ref={el => (this.alert = el)}
           class={{
-            'sl-alert': true,
-            'sl-alert--open': this.open,
-            'sl-alert--closable': this.closable,
-            'sl-alert--using-keyboard': this.isUsingKeyboard,
+            alert: true,
+            'alert--open': this.open,
+            'alert--closable': this.closable,
+            'alert--using-keyboard': this.isUsingKeyboard,
 
             // States
-            'sl-alert--primary': this.type === 'primary',
-            'sl-alert--success': this.type === 'success',
-            'sl-alert--info': this.type === 'info',
-            'sl-alert--warning': this.type === 'warning',
-            'sl-alert--danger': this.type === 'danger'
+            'alert--primary': this.type === 'primary',
+            'alert--success': this.type === 'success',
+            'alert--info': this.type === 'info',
+            'alert--warning': this.type === 'warning',
+            'alert--danger': this.type === 'danger'
           }}
           role="alert"
           aria-hidden={!this.open}
           onTransitionEnd={this.handleTransitionEnd}
         >
-          <span class="sl-alert__icon">
+          <span class="alert__icon">
             <slot name="icon" />
           </span>
 
-          <span class="sl-alert__message">
+          <span class="alert__message">
             <slot />
           </span>
 
           {this.closable && (
-            <button type="button" class="sl-alert__close" onClick={this.handleCloseClick}>
+            <button type="button" class="alert__close" onClick={this.handleCloseClick}>
               <slot name="close-icon">
                 <sl-icon name="x" />
               </slot>