Move delete button inside popup

docs/_layouts/palette.njk

@@ -133,7 +133,7 @@
       </th>
       <td class="core-column" :style="{'--original-color': `var(--wa-color-${ hue })`, '--color': colors[hue][coreLevels[hue]]}">
         <color-popup :title="capitalize(hue) + ' (core)'" :token="`--wa-color-${ hue }`" :color="coreColors[hue]"
-          :pinned="seedColors[colorToIndex[hue].core]"
+          :pinned="!!seedColors[colorToIndex[hue].core]"
           :deletable="isCustom" @delete="deleteColor(colorToIndex[hue].core)"
           :pinnable="isCustom" @pin="addColor(coreColors[hue] + '')">
           <div slot="trigger" :id="`core-${ hue }-swatch`" class="color swatch" :style="{colorScheme: coreLevels[hue] > 60 ? 'light' : 'dark'}">
@@ -187,7 +187,7 @@
       </td>
       <td v-for="tint in tints.toReversed()" :data-tint="tint" :style="{'--original-color': `var(--wa-color-${ hue }-${tint})`, '--color': colors[hue][tint] }">
         <color-popup :title="capitalize(hue) + ' ' + tint" :token="`--wa-color-${ hue }-${ tint }`" :color="colors[hue][tint]"
-          :pinned="seedColors[colorToIndex[hue][tint]]"
+          :pinned="!!seedColors[colorToIndex[hue][tint]]"
           :deletable="isCustom" @delete="deleteColor(colorToIndex[hue][tint])"
           :pinnable="isCustom" @pin="addColor(colors[hue][tint] + '')">
           <div slot="trigger" class="color swatch" :style="{ colorScheme: tint > 60 ? 'light' : 'dark' }">

docs/docs/palettes/app/custom.css

@@ -36,14 +36,12 @@
       .tweak-icon {
         position: absolute;
         top: var(--wa-space-s);
-        left: var(--wa-space-s);
+        right: var(--wa-space-s);
 
         --background-color-hover: oklab(from currentColor l a b / 15%);
         --text-color-hover: currentColor;
 
         &:is(.tweaked *) {
-          opacity: 1;
-
           &::part(base) {
             transition: var(--wa-transition-normal);
             transition-property: padding, border;
@@ -60,11 +58,6 @@
         left: var(--wa-space-s);
         font-weight: var(--wa-font-weight-semibold);
       }
-
-      &:not(:hover, :focus-within) > wa-icon-button,
-      &:not(:hover, :focus-within) > wa-dropdown > wa-icon-button {
-        opacity: 0;
-      }
     }
 
     wa-input {

docs/docs/palettes/app/vue-components/color-input.js

@@ -3,7 +3,7 @@ const template = `
   :style="{'--color': value, '--color-original': inputValue}">
   <div slot="image" :style="{ colorScheme: level <= 60 ? 'dark' : 'light'}">
 
-    <color-popup placement="top-start" class="seed-color-tweak">
+    <color-popup placement="top-start" class="seed-color-tweak" :pinned=true deletable @delete="$emit('delete')" title="Edit color">
       <wa-icon-button name="sliders-simple" class="tweak-icon"></wa-icon-button>
       <template #content>
         <color-slider label="Hue" label-default="Entered color"
@@ -18,7 +18,6 @@ const template = `
       </template>
     </color-popup>
 
-    <wa-icon-button name="trash" label="Delete" variant="regular" class="delete-button" @click="$emit('delete')"></wa-icon-button>
     <div class="name">{{ capitalize(hue) || 'New color' }} {{ level }}</div>
   </div>
 

docs/docs/palettes/app/vue-components/color-popup.js

@@ -9,7 +9,7 @@ export default {
     color: Color,
     deletable: Boolean,
     pinnable: Boolean,
-    pinned: Object,
+    pinned: Boolean,
     placement: String,
   },
   data() {