remove 'inline' from color picker and support labels

docs/docs/resources/changelog.md

@@ -30,6 +30,7 @@ Here's a list of things that have changed since Shoelace v2. For questions or he
 - Added an easier way to close dialogs by applying `data-dialog="close"` to any button in the dialog
 - Added an easier way to close drawers by applying `data-dialog="close"` to any button in the drawer
 - Added the `--show-duration` and `--hide-duration` custom properties to `<wa-details>`, `<wa-dialog>`, `<wa-drawer>`, `<sl-tree-item>`, and `<wa-popup>`
+- Added visible labels to `<wa-color-picker>`
 - Changed the attribute for setting the base path declaratively to `data-webawesome` instead of `data-shoelace`; additionally, you can place it on any element now instead of just the associated `<script>` tag
 - `<wa-icon>` icons are no longer fixed width by default to accommodate variable width icons
 - Changed the `sl` prefix to `wa` for Web Awesome, including tags, events, etc.
@@ -54,6 +55,7 @@ Here's a list of things that have changed since Shoelace v2. For questions or he
 - Removed `valueAsNumber` from `<wa-input>`. Instead you can use the following to mimic browser behavior:
     setter: `waInput.value = 5.toString()`
     getter: `Number(waInput.value)`
+- Removed `inline` from `<wa-color-picker>`
 
 ---
 

src/components/color-picker/color-picker.styles.ts

@@ -32,15 +32,6 @@ export default css`
     -webkit-user-select: none;
   }
 
-  .color-picker--inline {
-    border: var(--border-style) var(--border-width) var(--border-color);
-  }
-
-  .color-picker--inline:focus-visible {
-    outline: var(--wa-focus-ring);
-    outline-offset: var(--wa-focus-ring-offset);
-  }
-
   .color-picker__grid {
     position: relative;
     height: var(--grid-height);
@@ -344,25 +335,11 @@ export default css`
     cursor: not-allowed;
   }
 
-
-  .color-picker-inline__label,
   .color-dropdown__label {
     cursor: pointer;
     padding-bottom: var(--spacing);
   }
 
-  :host([label-placement="start"]) .color-dropdown__label,
-  :host([label-placement="end"]) .color-dropdown__label {
-    padding-bottom: 0;
-  }
-
-  :host([label-placement="start"]) .color-dropdown__container,
-  :host([label-placement="end"]) .color-dropdown__container {
-    display: flex;
-    align-items: center;
-    gap: 0.5em;
-  }
-
   .color-dropdown__container {
     margin: 0 1em;
     padding-bottom: 0.5em;

src/components/color-picker/color-picker.ts

@@ -124,7 +124,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
   //   or is the new behavior okay?
   get validationTarget() {
     // This puts the popup on the element only if the color picker is expanded.
-    if (this.inline || this.dropdown?.open) {
+    if (this.dropdown?.open) {
       return this.input;
     }
 
@@ -173,9 +173,6 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
    */
   @property() format: 'hex' | 'rgb' | 'hsl' | 'hsv' = 'hex';
 
-  /** Renders the color picker inline rather than in a dropdown. */
-  @property({ type: Boolean, reflect: true }) inline = false;
-
   /** Determines the size of the color picker's trigger. This has no effect on inline color pickers. */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
@@ -738,16 +735,12 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
 
   /** Sets focus on the color picker. */
   focus(options?: FocusOptions) {
-    if (this.inline) {
-      this.base.focus(options);
-    } else {
-      this.trigger.focus(options);
-    }
+    this.trigger.focus(options);
   }
 
   /** Removes focus from the color picker. */
   blur() {
-    const elementToBlur = this.inline ? this.base : this.trigger;
+    const elementToBlur = this.trigger
 
     if (this.hasFocus) {
       // We don't know which element in the color picker has focus, so we'll move it to the trigger or base (inline) and
@@ -797,7 +790,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   reportValidity() {
     // This won't get called when a form is submitted. This is only for manual calls.
-    if (!this.inline && !this.validity.valid && !this.dropdown.open) {
+    if (!this.validity.valid && !this.dropdown.open) {
       // If the input is inline and invalid, show the dropdown so the browser can focus on it
       this.addEventListener('wa-after-show', () => this.reportValidity(), { once: true });
       this.dropdown.show();
@@ -827,25 +820,15 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
       : this.swatches.split(';').filter(color => color.trim() !== '');
 
     const colorPicker = html`
-      ${this.inline
-        ? html`
-            <div id="inline-label" part="inline-label" class="color-picker-inline__label">
-              <slot name="label">${this.label}</slot>
-            </div>
-          `
-        : null}
-
       <div
         part="base"
         class=${classMap({
           'color-picker': true,
-          'color-picker--inline': this.inline,
           'color-picker--disabled': this.disabled,
           'color-picker--focused': this.hasFocus
         })}
         aria-disabled=${this.disabled ? 'true' : 'false'}
-        aria-labelledby="inline-label"
-        tabindex=${this.inline ? '0' : '-1'}
+        tabindex="-1"
       >
         <div
           part="grid"
@@ -1055,11 +1038,6 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
       </div>
     `;
 
-    // Render inline
-    if (this.inline) {
-      return colorPicker;
-    }
-
     const buttonLabel = html`
       <!-- Ideally this should be a <label> but it causes click event to fire twice causing the popup to open then close. -->
       <div